angular-slickgrid 3.0.5 → 3.3.1

package/README.md

@@ -11,13 +11,27 @@
 [![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 Angular. 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 author @mleibman stopped working on his original repo. Also worth knowing that I have contributed a lot to the 6pac/SlickGrid fork for the benefit of Angular-Slickgrid... also a reminder, this is a wrapper of a jQuery lib (SlickGrid) and a big portion of the lib (like Editors, Filters and others) are written in jQuery/JavaScript, so just keep that in mind and that also means jQuery is a dependency.
+One of the best javascript datagrid [SlickGrid](https://github.com/mleibman/SlickGrid) which was originally developed by @mleibman is now available to Angular. 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 author @mleibman stopped working on his original repo. Also worth knowing that I have contributed a lot to the 6pac/SlickGrid fork for the benefit of Angular-Slickgrid... also a reminder, this is a wrapper of a jQuery lib (SlickGrid) and a big portion of the lib (like Editors, Filters and others) are written in jQuery/JavaScript, so just keep that in mind and it also mean that jQuery is a dependency.
+
+### License
+[MIT License](LICENSE)
 
 ### NPM Package
 [Angular-Slickgrid on NPM](https://www.npmjs.com/package/angular-slickgrid)
 
-### License
-[MIT License](LICENSE)
+### 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)
+- [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)
+
+#### Working Demo
+For a complete & working local demo (30+ examples), you can (and should) clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository to get started. That repo is updated frequently and is used to update the GitHub demo page for both the [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) and [Bootstrap 4 demo](https://ghiscoding.github.io/angular-slickgrid-demos).
+```bash
+git clone https://github.com/ghiscoding/angular-slickgrid-demos
+cd bootstrap4-demo-with-translate # or any of the 4 demos
+npm install
+npm start
+```
 
 ### Like it? :star: it
 You like and use **Angular-Slickgrid**? Be sure to upvote :star: and feel free to contribute. :construction_worker:👷‍♀️
@@ -39,9 +53,7 @@ Check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/release
 
 ## Angular Compatibility
 - version `1.x.x` for Angular 4 to 6 
-   - Angular 6, is only supported through `rxjs-compat` as shown in this [post](https://github.com/ghiscoding/Angular-Slickgrid/issues/36#issuecomment-395710915). It's preferable to upgrade to Angular 7+ to avoid using the `rxjs-compat` package. 
 - version `2.x.x` for Angular 7+ 
-  - since version `2.11.0`, you can also change your build `target` to `ES2015` for modern browser.
 - version `3.x.x` for Angular 12+ and RxJS 7+
   - 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
@@ -55,7 +67,7 @@ If you are facing any issues with `ngx-translate` library while building your An
 
 | Angular Version | @ngx-translate/core |
 |-----------------|---------------------|
-|        10       |        13.x+        |
+|        10+      |        13.x+        |
 |        9        |        12.x+        |
 |        8        |        12.x+        |
 |        7        |        11.x+        |
@@ -77,7 +89,7 @@ module.exports = {
   }
 };
 ```
-You should also add `Angular-Slickgrid` as an allowed CommonJS dependency to your `angular.json` file to silent the warnings.
+You should also add `Angular-Slickgrid` as an allowed CommonJS dependency to your `angular.json` file to silence the warnings.
 ```json
 "options": {
   "allowedCommonJsDependencies": ["angular-slickgrid"]
@@ -117,29 +129,13 @@ 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 +450 Cypress 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.
 
 ## 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.
 
 **NOTE:** if you have any question, please consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid)
 
-### Demo page
-`Angular-Slickgrid` works with `Bootstrap 4` and even latest `Bootstrap 5` version, you can see a demo of each one below.
-- [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)
-
-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)
-
-#### Working Demo
-For a complete and working local demo (with +30 examples), you can (should) clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository. That repo is updated frequently and is used to update the GitHub demo pages for both the [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) and [Bootstrap 4 demo](https://ghiscoding.github.io/angular-slickgrid-demos).
-```bash
-git clone https://github.com/ghiscoding/angular-slickgrid-demos
-cd bootstrap4-demo-with-translate
-npm install
-npm start
-```
-
 #### How to load data with `HttpClient`?
 You might notice that all demos are coded with mocked dataset in each of the examples, that is mainly for demo purposes, but you might be wondering how to connect this with an `HttpClient`? Easy... just replace the mocked data, assigned to the `dataset` property, by your `HttpClient` call it and that's it. The `dataset` property can be changed or refreshed at any time, which is why you can use local data and/or connect it to a `Promise` or an `Observable` with `HttpClient` (internally it's just a SETTER that refreshes the grid). See [Example 24](https://ghiscoding.github.io/Angular-Slickgrid/#/gridtabs) for a demo showing how to load a JSON file with `HttpClient`.
 

package/angular-slickgrid.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"exports":[{"from":"@slickgrid-universal/common"}],"metadata":{"ɵa":{"__symbolic":"interface"},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"get":[{"__symbolic":"method"}],"registerInstance":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":8,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":10,"character":15}}]],"parameters":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":10,"character":61}]}],"getCurrentLanguage":[{"__symbolic":"method"}],"use":[{"__symbolic":"method"}],"translate":[{"__symbolic":"method"}]}},"AngularComponentOutput":{"__symbolic":"interface"},"AngularGridInstance":{"__symbolic":"interface"},"GridOption":{"__symbolic":"interface"},"SlickGrid":{"__symbolic":"interface"},"RowDetailView":{"__symbolic":"interface"},"AngularUtilService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":6,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":7,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":8,"character":22}]}],"createAngularComponent":[{"__symbolic":"method"}],"createAngularComponentAppendToDom":[{"__symbolic":"method"}]}},"BsDropDownService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":28,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AngularUtilService"}]}],"dispose":[{"__symbolic":"method"}],"dropContainerShow":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}]}},"unsubscribeAllObservables":{"__symbolic":"function"},"RowDetailViewExtension":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":37,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AngularUtilService"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":51,"character":29},{"__symbolic":"reference","module":"@slickgrid-universal/event-pub-sub","name":"EventPubSubService","line":52,"character":41},{"__symbolic":"reference","module":"@slickgrid-universal/common","name":"SharedService","line":53,"character":36},{"__symbolic":"reference","module":"@slickgrid-universal/common","name":"RxJsFacade","line":54,"character":19}]}],"addRxJsResource":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"disposeAllViewComponents":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"getAddonInstance":[{"__symbolic":"method"}],"register":[{"__symbolic":"method"}],"redrawAllViewComponents":[{"__symbolic":"method"}],"renderAllViewComponents":[{"__symbolic":"method"}],"redrawViewComponent":[{"__symbolic":"method"}],"renderPreloadView":[{"__symbolic":"method"}],"renderViewModel":[{"__symbolic":"method"}],"disposeViewComponent":[{"__symbolic":"method"}],"notifyTemplate":[{"__symbolic":"method"}],"onProcessing":[{"__symbolic":"method"}],"onBeforeRowDetailToggle":[{"__symbolic":"method"}],"onRowBackToViewportRange":[{"__symbolic":"method"}]}},"SlickgridConfig":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}]}},"SlickPaginationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"slick-pagination","template":"<div class=\"slick-pagination\">\r\n  <div class=\"slick-pagination-nav\">\r\n    <nav aria-label=\"Page navigation\">\r\n      <ul class=\"pagination\">\r\n        <li class=\"page-item\" [ngClass]=\"isLeftPaginationDisabled ? 'disabled' : ''\">\r\n          <a class=\"page-link icon-seek-first fa fa-angle-double-left\" aria-label=\"First\"\r\n             (click)=\"changeToFirstPage($event)\">\r\n          </a>\r\n        </li>\r\n        <li class=\"page-item\" [ngClass]=\"isLeftPaginationDisabled ? 'disabled' : ''\">\r\n          <a class=\"page-link icon-seek-prev fa fa-angle-left\" aria-label=\"Previous\"\r\n             (click)=\"changeToPreviousPage($event)\">\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n\r\n    <div class=\"slick-page-number\">\r\n      <span>{{textPage}}</span>\r\n      <input type=\"text\" class=\"form-control\" data-test=\"page-number-input\" [value]=\"pageNumber\" size=\"1\"\r\n             [readOnly]=\"totalItems === 0\" (change)=\"changeToCurrentPage($event)\">\r\n      <span>{{textOf}}</span><span data-test=\"page-count\"> {{pageCount}}</span>\r\n    </div>\r\n\r\n    <nav aria-label=\"Page navigation\">\r\n      <ul class=\"pagination\">\r\n        <li class=\"page-item\" [ngClass]=\"isRightPaginationDisabled ? 'disabled' : ''\">\r\n          <a class=\"page-link icon-seek-next text-center fa fa-lg fa-angle-right\" aria-label=\"Next\"\r\n             (click)=\"changeToNextPage($event)\">\r\n          </a>\r\n        </li>\r\n        <li class=\"page-item\" [ngClass]=\"isRightPaginationDisabled ? 'disabled' : ''\">\r\n          <a class=\"page-link icon-seek-end fa fa-lg fa-angle-double-right\" aria-label=\"Last\"\r\n             (click)=\"changeToLastPage($event)\">\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n  <span class=\"slick-pagination-settings\">\r\n    <select id=\"items-per-page-label\" (change)=\"changeItemPerPage($event)\">\r\n      <option value=\"{{pageSize}}\" [selected]=\"pageSize === itemsPerPage\" *ngFor=\"let pageSize of availablePageSizes\">{{pageSize}}</option>\r\n    </select>\r\n    <span>{{textItemsPerPage}}</span>,\r\n    <span class=\"slick-pagination-count\">\r\n      <span *ngIf=\"totalItems\">\r\n        <span class=\"page-info-from-to\">\r\n          <span data-test=\"item-from\">{{dataFrom}}</span>-<span data-test=\"item-to\">{{dataTo}}</span>\r\n          {{textOf}}\r\n        </span>\r\n      </span>\r\n      <span class=\"page-info-total-items\">\r\n        <span data-test=\"total-items\">{{totalItems}}</span> {{textItems}}\r\n      </span>\r\n    </span>\r\n  </span>\r\n</div>\r\n"}]}],"members":{"gridOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"paginationService":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":29,"character":15}}]],"parameters":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":29,"character":54}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"changeToFirstPage":[{"__symbolic":"method"}],"changeToLastPage":[{"__symbolic":"method"}],"changeToNextPage":[{"__symbolic":"method"}],"changeToPreviousPage":[{"__symbolic":"method"}],"changeToCurrentPage":[{"__symbolic":"method"}],"changeItemPerPage":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"translateAllUiTexts":[{"__symbolic":"method"}]}},"AngularSlickgridComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":97,"character":1},"arguments":[{"selector":"angular-slickgrid","providers":[{"__symbolic":"reference","name":"AngularUtilService"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":103,"character":4},{"__symbolic":"reference","name":"RowDetailViewExtension"},{"__symbolic":"reference","name":"ɵc"}],"template":"<div id=\"slickGridContainer-{{gridId}}\" class=\"gridPane\">\r\n  <div attr.id='{{gridId}}' class=\"slickgrid-container\" style=\"width: 100%\">\r\n  </div>\r\n\r\n  <!-- Pagination section under the grid -->\r\n  <slick-pagination id=\"slickPagingContainer-{{gridId}}\" *ngIf=\"showPagination\"\r\n                    [gridOptions]=\"gridOptions\"\r\n                    [paginationService]=\"paginationService\">\r\n  </slick-pagination>\r\n</div>"}]}],"members":{"customDataView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":163,"character":3}}]}],"gridId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":3}}]}],"gridOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":165,"character":3}}]}],"paginationOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":167,"character":3}}]}],"columnDefinitions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":181,"character":3}}]}],"dataset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":195,"character":3}}]}],"datasetHierarchical":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":220,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":282,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":283,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":284,"character":5},"arguments":["config"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":285,"character":5},"arguments":["externalService"]}]],"parameters":[{"__symbolic":"reference","name":"AngularUtilService"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":278,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":279,"character":25},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":281,"character":26},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":282,"character":44},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"GridOption"},{"__symbolic":"reference","name":"ɵa"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"emptyGridContainerElm":[{"__symbolic":"method"}],"createBackendApiInternalPostProcessCallback":[{"__symbolic":"method"}],"initialization":[{"__symbolic":"method"}],"paginationChanged":[{"__symbolic":"method"}],"refreshGridData":[{"__symbolic":"method"}],"setPaginationOptionsWhenPresetDefined":[{"__symbolic":"method"}],"updateColumnDefinitionsList":[{"__symbolic":"method"}],"showHeaderRow":[{"__symbolic":"method"}],"copyColumnWidthsReference":[{"__symbolic":"method"}],"displayEmptyDataWarning":[{"__symbolic":"method"}],"bindDifferentHooks":[{"__symbolic":"method"}],"bindBackendCallbackFunctions":[{"__symbolic":"method"}],"bindResizeHook":[{"__symbolic":"method"}],"executeAfterDataviewCreated":[{"__symbolic":"method"}],"handleOnItemCountChanged":[{"__symbolic":"method"}],"initializePaginationService":[{"__symbolic":"method"}],"loadEditorCollectionAsync":[{"__symbolic":"method"}],"loadColumnPresetsWhenDatasetInitialized":[{"__symbolic":"method"}],"loadFilterPresetsWhenDatasetInitialized":[{"__symbolic":"method"}],"loadLocalGridPagination":[{"__symbolic":"method"}],"loadRowSelectionPresetWhenExists":[{"__symbolic":"method"}],"mergeGridOptions":[{"__symbolic":"method"}],"preRegisterResources":[{"__symbolic":"method"}],"registerResources":[{"__symbolic":"method"}],"registerRxJsResource":[{"__symbolic":"method"}],"sortTreeDataset":[{"__symbolic":"method"}],"swapInternalEditorToSlickGridFactoryEditor":[{"__symbolic":"method"}],"translateCustomFooterTexts":[{"__symbolic":"method"}],"translateColumnHeaderTitleKeys":[{"__symbolic":"method"}],"translateColumnGroupKeys":[{"__symbolic":"method"}],"updateEditorCollection":[{"__symbolic":"method"}]}},"AngularSlickgridModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":14,"character":4}],"declarations":[{"__symbolic":"reference","name":"AngularSlickgridComponent"},{"__symbolic":"reference","name":"SlickPaginationComponent"}],"exports":[{"__symbolic":"reference","name":"AngularSlickgridComponent"},{"__symbolic":"reference","name":"SlickPaginationComponent"}],"entryComponents":[{"__symbolic":"reference","name":"AngularSlickgridComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"defaults":[{}],"value":{"ngModule":{"__symbolic":"reference","name":"AngularSlickgridModule"},"providers":[{"provide":"config","useValue":{"__symbolic":"reference","name":"config"}},{"provide":"externalService","useValue":null},{"__symbolic":"reference","name":"AngularUtilService"},{"__symbolic":"reference","name":"BsDropDownService"},{"__symbolic":"reference","name":"ɵb"}]}}}}},"origins":{"ɵa":"./app/modules/angular-slickgrid/models/externalTestingDependencies.interface","ɵb":"./app/modules/angular-slickgrid/services/container.service","ɵc":"./app/modules/angular-slickgrid/services/translater.service","AngularComponentOutput":"./app/modules/angular-slickgrid/models/angularComponentOutput.interface","AngularGridInstance":"./app/modules/angular-slickgrid/models/angularGridInstance.interface","GridOption":"./app/modules/angular-slickgrid/models/gridOption.interface","SlickGrid":"./app/modules/angular-slickgrid/models/slickGrid.interface","RowDetailView":"./app/modules/angular-slickgrid/models/rowDetailView.interface","AngularUtilService":"./app/modules/angular-slickgrid/services/angularUtil.service","BsDropDownService":"./app/modules/angular-slickgrid/services/bsDropdown.service","unsubscribeAllObservables":"./app/modules/angular-slickgrid/services/utilities","RowDetailViewExtension":"./app/modules/angular-slickgrid/extensions/rowDetailViewExtension","SlickgridConfig":"./app/modules/angular-slickgrid/slickgrid-config","SlickPaginationComponent":"./app/modules/angular-slickgrid/components/slick-pagination.component","AngularSlickgridComponent":"./app/modules/angular-slickgrid/components/angular-slickgrid.component","AngularSlickgridModule":"./app/modules/angular-slickgrid/modules/angular-slickgrid.module"},"importAs":"angular-slickgrid"}
+{"__symbolic":"module","version":4,"exports":[{"from":"@slickgrid-universal/common"}],"metadata":{"ɵa":{"__symbolic":"interface"},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"get":[{"__symbolic":"method"}],"registerInstance":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":8,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":10,"character":15}}]],"parameters":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":10,"character":61}]}],"getCurrentLanguage":[{"__symbolic":"method"}],"use":[{"__symbolic":"method"}],"translate":[{"__symbolic":"method"}]}},"AngularComponentOutput":{"__symbolic":"interface"},"AngularGridInstance":{"__symbolic":"interface"},"GridOption":{"__symbolic":"interface"},"SlickGrid":{"__symbolic":"interface"},"RowDetailView":{"__symbolic":"interface"},"AngularUtilService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":6,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":7,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":8,"character":22}]}],"createAngularComponent":[{"__symbolic":"method"}],"createAngularComponentAppendToDom":[{"__symbolic":"method"}]}},"BsDropDownService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":28,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AngularUtilService"}]}],"dispose":[{"__symbolic":"method"}],"dropContainerShow":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}]}},"unsubscribeAllObservables":{"__symbolic":"function"},"RowDetailViewExtension":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":37,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AngularUtilService"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":51,"character":29},{"__symbolic":"reference","module":"@slickgrid-universal/event-pub-sub","name":"EventPubSubService","line":52,"character":41},{"__symbolic":"reference","module":"@slickgrid-universal/common","name":"SharedService","line":53,"character":36},{"__symbolic":"reference","module":"@slickgrid-universal/common","name":"RxJsFacade","line":54,"character":19}]}],"addRxJsResource":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"disposeAllViewComponents":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"getAddonInstance":[{"__symbolic":"method"}],"register":[{"__symbolic":"method"}],"redrawAllViewComponents":[{"__symbolic":"method"}],"renderAllViewComponents":[{"__symbolic":"method"}],"redrawViewComponent":[{"__symbolic":"method"}],"renderPreloadView":[{"__symbolic":"method"}],"renderViewModel":[{"__symbolic":"method"}],"disposeViewComponent":[{"__symbolic":"method"}],"notifyTemplate":[{"__symbolic":"method"}],"onProcessing":[{"__symbolic":"method"}],"onBeforeRowDetailToggle":[{"__symbolic":"method"}],"onRowBackToViewportRange":[{"__symbolic":"method"}]}},"SlickgridConfig":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}]}},"AngularSlickgridComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":98,"character":1},"arguments":[{"selector":"angular-slickgrid","providers":[{"__symbolic":"reference","name":"AngularUtilService"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":104,"character":4},{"__symbolic":"reference","name":"RowDetailViewExtension"},{"__symbolic":"reference","name":"ɵc"}],"template":"<div id=\"slickGridContainer-{{gridId}}\" class=\"gridPane\">\r\n  <div attr.id='{{gridId}}' class=\"slickgrid-container\" style=\"width: 100%\">\r\n  </div>\r\n</div>"}]}],"members":{"customDataView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":165,"character":3}}]}],"gridId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":166,"character":3}}]}],"gridOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":167,"character":3}}]}],"paginationOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":169,"character":3}}]}],"columnDefinitions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":183,"character":3}}]}],"dataset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":197,"character":3}}]}],"datasetHierarchical":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":222,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":286,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":287,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":288,"character":5},"arguments":["config"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":289,"character":5},"arguments":["externalService"]}]],"parameters":[{"__symbolic":"reference","name":"AngularUtilService"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":282,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":283,"character":25},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":285,"character":26},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":286,"character":44},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"GridOption"},{"__symbolic":"reference","name":"ɵa"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"emptyGridContainerElm":[{"__symbolic":"method"}],"createBackendApiInternalPostProcessCallback":[{"__symbolic":"method"}],"initialization":[{"__symbolic":"method"}],"paginationChanged":[{"__symbolic":"method"}],"refreshGridData":[{"__symbolic":"method"}],"setPaginationOptionsWhenPresetDefined":[{"__symbolic":"method"}],"updateColumnDefinitionsList":[{"__symbolic":"method"}],"showHeaderRow":[{"__symbolic":"method"}],"copyColumnWidthsReference":[{"__symbolic":"method"}],"displayEmptyDataWarning":[{"__symbolic":"method"}],"bindDifferentHooks":[{"__symbolic":"method"}],"bindBackendCallbackFunctions":[{"__symbolic":"method"}],"bindResizeHook":[{"__symbolic":"method"}],"executeAfterDataviewCreated":[{"__symbolic":"method"}],"handleOnItemCountChanged":[{"__symbolic":"method"}],"initializePaginationService":[{"__symbolic":"method"}],"loadEditorCollectionAsync":[{"__symbolic":"method"}],"loadColumnPresetsWhenDatasetInitialized":[{"__symbolic":"method"}],"loadFilterPresetsWhenDatasetInitialized":[{"__symbolic":"method"}],"loadLocalGridPagination":[{"__symbolic":"method"}],"loadRowSelectionPresetWhenExists":[{"__symbolic":"method"}],"mergeGridOptions":[{"__symbolic":"method"}],"preRegisterResources":[{"__symbolic":"method"}],"registerResources":[{"__symbolic":"method"}],"registerRxJsResource":[{"__symbolic":"method"}],"renderPagination":[{"__symbolic":"method"}],"sortTreeDataset":[{"__symbolic":"method"}],"swapInternalEditorToSlickGridFactoryEditor":[{"__symbolic":"method"}],"translateColumnHeaderTitleKeys":[{"__symbolic":"method"}],"translateColumnGroupKeys":[{"__symbolic":"method"}],"updateEditorCollection":[{"__symbolic":"method"}]}},"AngularSlickgridModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":13,"character":4}],"declarations":[{"__symbolic":"reference","name":"AngularSlickgridComponent"}],"exports":[{"__symbolic":"reference","name":"AngularSlickgridComponent"}],"entryComponents":[{"__symbolic":"reference","name":"AngularSlickgridComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"defaults":[{}],"value":{"ngModule":{"__symbolic":"reference","name":"AngularSlickgridModule"},"providers":[{"provide":"config","useValue":{"__symbolic":"reference","name":"config"}},{"provide":"externalService","useValue":null},{"__symbolic":"reference","name":"AngularUtilService"},{"__symbolic":"reference","name":"BsDropDownService"},{"__symbolic":"reference","name":"ɵb"}]}}}}},"origins":{"ɵa":"./app/modules/angular-slickgrid/models/externalTestingDependencies.interface","ɵb":"./app/modules/angular-slickgrid/services/container.service","ɵc":"./app/modules/angular-slickgrid/services/translater.service","AngularComponentOutput":"./app/modules/angular-slickgrid/models/angularComponentOutput.interface","AngularGridInstance":"./app/modules/angular-slickgrid/models/angularGridInstance.interface","GridOption":"./app/modules/angular-slickgrid/models/gridOption.interface","SlickGrid":"./app/modules/angular-slickgrid/models/slickGrid.interface","RowDetailView":"./app/modules/angular-slickgrid/models/rowDetailView.interface","AngularUtilService":"./app/modules/angular-slickgrid/services/angularUtil.service","BsDropDownService":"./app/modules/angular-slickgrid/services/bsDropdown.service","unsubscribeAllObservables":"./app/modules/angular-slickgrid/services/utilities","RowDetailViewExtension":"./app/modules/angular-slickgrid/extensions/rowDetailViewExtension","SlickgridConfig":"./app/modules/angular-slickgrid/slickgrid-config","AngularSlickgridComponent":"./app/modules/angular-slickgrid/components/angular-slickgrid.component","AngularSlickgridModule":"./app/modules/angular-slickgrid/modules/angular-slickgrid.module"},"importAs":"angular-slickgrid"}

package/app/modules/angular-slickgrid/components/angular-slickgrid.component.d.ts

@@ -11,8 +11,9 @@ import { AfterViewInit, ApplicationRef, ChangeDetectorRef, ElementRef, OnDestroy
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 import { BackendServiceApi, Column, ExternalResource, Locale, Metrics, Pagination, ServicePagination, SlickDataView, SlickEventHandler, SlickGrid, BackendUtilityService, CollectionService, ExtensionService, FilterFactory, FilterService, GridEventService, GridService, GridStateService, GroupingAndColspanService, PaginationService, ResizerService, RxJsFacade, SharedService, SortService, TreeDataService, ExtensionUtility } from '@slickgrid-universal/common';
-import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
+import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
+import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
 import { ExternalTestingDependencies, GridOption } from './../models/index';
 import { TranslaterService } from '../services/translater.service';
 import { AngularUtilService } from '../services/angularUtil.service';
@@ -57,6 +58,7 @@ export declare class AngularSlickgridComponent implements AfterViewInit, OnDestr
     subscriptions: Subscription[];
     slickEmptyWarning?: SlickEmptyWarningComponent;
     slickFooter?: SlickFooterComponent;
+    slickPagination?: SlickPaginationComponent;
     extensionUtility: ExtensionUtility;
     backendUtilityService: BackendUtilityService;
     collectionService: CollectionService;
@@ -91,6 +93,7 @@ export declare class AngularSlickgridComponent implements AfterViewInit, OnDestr
     get isDatasetInitialized(): boolean;
     /** SETTER to change if dataset was initialized or not (stringly used for unit testing purposes) */
     set isDatasetInitialized(isInitialized: boolean);
+    set isDatasetHierarchicalInitialized(isInitialized: boolean);
     get registeredResources(): ExternalResource[];
     constructor(angularUtilService: AngularUtilService, appRef: ApplicationRef, cd: ChangeDetectorRef, containerService: ContainerService, elm: ElementRef, translate: TranslateService, translaterService: TranslaterService, forRootConfig: GridOption, externalServices: ExternalTestingDependencies);
     ngAfterViewInit(): void;
@@ -162,6 +165,13 @@ export declare class AngularSlickgridComponent implements AfterViewInit, OnDestr
     private registerResources;
     /** Register the RxJS Resource in all necessary services which uses */
     private registerRxJsResource;
+    /**
+     * Render (or dispose) the Pagination Component, user can optionally provide False (to not show it) which will in term dispose of the Pagination,
+     * also while disposing we can choose to omit the disposable of the Pagination Service (if we are simply toggling the Pagination, we want to keep the Service alive)
+     * @param {Boolean} showPagination - show (new render) or not (dispose) the Pagination
+     * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
+     */
+    private renderPagination;
     /**
      * Takes a flat dataset with parent/child relationship, sort it (via its tree structure) and return the sorted flat array
      * @param {Array<Object>} flatDatasetInput - flat dataset input
@@ -176,8 +186,6 @@ export declare class AngularSlickgridComponent implements AfterViewInit, OnDestr
      * then take back "editor.model" and make it the new "editor" so that SlickGrid Editor Factory still works
      */
     private swapInternalEditorToSlickGridFactoryEditor;
-    /** Translate all Custom Footer Texts (footer with metrics) */
-    private translateCustomFooterTexts;
     private translateColumnHeaderTitleKeys;
     private translateColumnGroupKeys;
     /**

package/app/modules/angular-slickgrid/index.d.ts

@@ -3,6 +3,5 @@ export { AngularComponentOutput, AngularGridInstance, GridOption, SlickGrid, Row
 export { AngularUtilService, BsDropDownService, unsubscribeAllObservables } from './services/index';
 export { RowDetailViewExtension } from './extensions/index';
 export { SlickgridConfig } from './slickgrid-config';
-export { SlickPaginationComponent } from './components/slick-pagination.component';
 export { AngularSlickgridComponent } from './components/angular-slickgrid.component';
 export { AngularSlickgridModule } from './modules/angular-slickgrid.module';