angular-slickgrid 3.0.4 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +192 -181
  3. package/angular-slickgrid.metadata.json +1 -1
  4. package/app/modules/angular-slickgrid/components/angular-slickgrid.component.d.ts +11 -3
  5. package/app/modules/angular-slickgrid/index.d.ts +0 -1
  6. package/bundles/angular-slickgrid.umd.js +99 -248
  7. package/bundles/angular-slickgrid.umd.js.map +1 -1
  8. package/esm2015/app/modules/angular-slickgrid/components/angular-slickgrid.component.js +89 -70
  9. package/esm2015/app/modules/angular-slickgrid/constants.js +1 -1
  10. package/esm2015/app/modules/angular-slickgrid/extensions/index.js +1 -1
  11. package/esm2015/app/modules/angular-slickgrid/extensions/rowDetailViewExtension.js +2 -2
  12. package/esm2015/app/modules/angular-slickgrid/global-grid-options.js +4 -3
  13. package/esm2015/app/modules/angular-slickgrid/index.js +1 -2
  14. package/esm2015/app/modules/angular-slickgrid/models/angularComponentOutput.interface.js +1 -1
  15. package/esm2015/app/modules/angular-slickgrid/models/angularGridInstance.interface.js +1 -1
  16. package/esm2015/app/modules/angular-slickgrid/models/externalTestingDependencies.interface.js +1 -1
  17. package/esm2015/app/modules/angular-slickgrid/models/gridOption.interface.js +1 -1
  18. package/esm2015/app/modules/angular-slickgrid/models/index.js +1 -1
  19. package/esm2015/app/modules/angular-slickgrid/models/rowDetailView.interface.js +1 -1
  20. package/esm2015/app/modules/angular-slickgrid/models/slickGrid.interface.js +1 -1
  21. package/esm2015/app/modules/angular-slickgrid/modules/angular-slickgrid.module.js +1 -4
  22. package/esm2015/app/modules/angular-slickgrid/services/angularUtil.service.js +1 -1
  23. package/esm2015/app/modules/angular-slickgrid/services/bsDropdown.service.js +1 -1
  24. package/esm2015/app/modules/angular-slickgrid/services/container.service.js +1 -1
  25. package/esm2015/app/modules/angular-slickgrid/services/index.js +1 -1
  26. package/esm2015/app/modules/angular-slickgrid/services/translater.service.js +1 -1
  27. package/esm2015/app/modules/angular-slickgrid/services/utilities.js +1 -1
  28. package/esm2015/app/modules/angular-slickgrid/slickgrid-config.js +1 -1
  29. package/esm2015/public_api.js +1 -1
  30. package/fesm2015/angular-slickgrid.js +95 -209
  31. package/fesm2015/angular-slickgrid.js.map +1 -1
  32. package/i18n/en.json +89 -89
  33. package/i18n/fr.json +90 -90
  34. package/package.json +11 -10
  35. package/app/modules/angular-slickgrid/components/slick-pagination.component.d.ts +0 -42
  36. package/esm2015/app/modules/angular-slickgrid/components/slick-pagination.component.js +0 -137
package/LICENSE CHANGED
@@ -1,20 +1,20 @@
1
- Copyright (c) 2017-2021, Ghislain B.
2
-
3
- Permission is hereby granted, free of charge, to any person obtaining
4
- a copy of this software and associated documentation files (the
5
- "Software"), to deal in the Software without restriction, including
6
- without limitation the rights to use, copy, modify, merge, publish,
7
- distribute, sublicense, and/or sell copies of the Software, and to
8
- permit persons to whom the Software is furnished to do so, subject to
9
- the following conditions:
10
-
11
- The above copyright notice and this permission notice shall be
12
- included in all copies or substantial portions of the Software.
13
-
14
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
- EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
- MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
- NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
- LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
- OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
- WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
1
+ Copyright (c) 2017-2021, Ghislain B.
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining
4
+ a copy of this software and associated documentation files (the
5
+ "Software"), to deal in the Software without restriction, including
6
+ without limitation the rights to use, copy, modify, merge, publish,
7
+ distribute, sublicense, and/or sell copies of the Software, and to
8
+ permit persons to whom the Software is furnished to do so, subject to
9
+ the following conditions:
10
+
11
+ The above copyright notice and this permission notice shall be
12
+ included in all copies or substantial portions of the Software.
13
+
14
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md CHANGED
@@ -1,181 +1,192 @@
1
- # Angular-Slickgrid
2
-
3
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4
- [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
5
- [![npm version](https://badge.fury.io/js/angular-slickgrid.svg)](//npmjs.com/package/angular-slickgrid)
6
- [![NPM downloads](https://img.shields.io/npm/dy/angular-slickgrid.svg)](https://npmjs.org/package/angular-slickgrid)
7
- [![gzip size](http://img.badgesize.io/https://npmcdn.com/angular-slickgrid/bundles/angular-slickgrid.umd.js?compression=gzip)](https://npmcdn.com/angular-slickgrid/bundles/angular-slickgrid.umd.js)
8
-
9
- [![Actions Status](https://github.com/ghiscoding/Angular-Slickgrid/workflows/CI%20Build/badge.svg)](https://github.com/ghiscoding/Angular-Slickgrid/actions)
10
- [![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
11
- [![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)
12
- [![codecov](https://codecov.io/gh/ghiscoding/Angular-Slickgrid/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/Angular-Slickgrid)
13
-
14
- ### Brief introduction
15
- 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.
16
-
17
- ### NPM Package
18
- [Angular-Slickgrid on NPM](https://www.npmjs.com/package/angular-slickgrid)
19
-
20
- ### License
21
- [MIT License](LICENSE)
22
-
23
- ### Like it? :star: it
24
- You like and use **Angular-Slickgrid**? Be sure to upvote :star: and feel free to contribute. :construction_worker:
25
-
26
- ### Like my work?
27
- If you like my work, you can also support me with caffeine. I certainly drank many coffees to build and keep adding features for this great library.
28
-
29
- <a href='https://ko-fi.com/N4N679OT'
30
- target='_blank'>
31
- <img height='30'
32
- style='border:0px;height:32px;'
33
- src='https://az743702.vo.msecnd.net/cdn/kofi2.png?v=0'
34
- border='0'
35
- alt='Buy Me a Coffee at ko-fi.com' />
36
- </a>
37
-
38
- ## Latest News & Releases
39
- Check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/releases) section for all latest News & Releases.
40
-
41
- ## Angular Compatibility
42
- - version `1.x.x` for Angular 4 to 6
43
- - 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.
44
- - version `2.x.x` for Angular 7+
45
- - since version `2.11.0`, you can also change your build `target` to `ES2015` for modern browser.
46
-
47
- 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)
48
-
49
- ### ngx-translate Compatibility
50
-
51
- If you are facing any issues with `ngx-translate` library while building your Angular Project. You need to make sure that `@ngx-translate/core` is part of your dependencies, that is also true even if you just use a single Locale, because it is a `peerDependency` of Angular-Slickgrid. We use `@Optional() TranslateService` in the lib and for that to work, we still need it to be installed, but don't worry it should be removed by tree shaking process after a running a build. See their version compatibility table below
52
-
53
- | Angular Version | @ngx-translate/core |
54
- |-----------------|---------------------|
55
- | 10 | 13.x+ |
56
- | 9 | 12.x+ |
57
- | 8 | 12.x+ |
58
- | 7 | 11.x+ |
59
-
60
- ### Build Warnings (Angular 8+)
61
- 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):
62
- ```js
63
- module.exports = {
64
- packages: {
65
- 'angular-slickgrid': {
66
- ignorableDeepImportMatchers: [
67
- /slickgrid\//,
68
- /flatpickr/,
69
- /jquery-ui-dist\//,
70
- ]
71
- },
72
- }
73
- };
74
- ```
75
- You should also add `Angular-Slickgrid` as an allowed CommonJS dependency to your `angular.json` file to silent the warnings.
76
- ```json
77
- "options": {
78
- "allowedCommonJsDependencies": ["angular-slickgrid"]
79
- }
80
- ```
81
-
82
- ### Angular 12 with WebPack 5 - how to fix polyfill error
83
- Since Angular 12 switched to WebPack 5, you might get some new errors and you will need to add some polyfills manually to get the Excel Builder (Excel Export) to work.
84
-
85
- #### The error you might get
86
-
87
- ```shell
88
- BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
89
- This is no longer the case. Verify if you need this module and configure a polyfill for it.
90
- ```
91
-
92
- #### Steps to fix it
93
- 1. `npm install stream-browserify`
94
- 2. Add a path mapping in `tsconfig.json`:
95
- ```
96
- {
97
- ...
98
- "compilerOptions": {
99
- "paths": {
100
- "stream": [ "./node_modules/stream-browserify" ]
101
- },
102
- ```
103
- 3. Add `stream` to `allowedCommonJsDependencies` in `angular.json`:
104
- ```
105
- "options": {
106
- "allowedCommonJsDependencies": [
107
- "angular-slickgrid", "stream"
108
- ],
109
- ```
110
-
111
- ### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
112
- Angular-Slickgrid reached **100%** Unit Test Coverage, we are talking about +10,000 lines of code (+2,800 unit tests) that are now 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 400+ Cypress E2E tests.
113
-
114
- ## Installation
115
- 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.
116
-
117
- **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)
118
-
119
- ### Demo page
120
- `Angular-Slickgrid` works with `Bootstrap 4` and even latest `Bootstrap 5` version, you can see a demo of each one below.
121
- - [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap5-demo-with-translate)
122
- - [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)
123
-
124
- There are also 2 new Themes, Material & Salesforce that are available as well and if you wish to use SVG then take a look at the [Wiki - SVG Icons](https://github.com/ghiscoding/Angular-Slickgrid/wiki/SVG-Icons)
125
-
126
- #### Working Demo
127
- For a complete and working local demo, 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 the [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) and [Bootstrap 4 demo](https://ghiscoding.github.io/angular-slickgrid-demos).
128
- ```bash
129
- git clone https://github.com/ghiscoding/angular-slickgrid-demos
130
- cd bootstrap4-demo-with-translate
131
- npm install
132
- npm start
133
- ```
134
-
135
- #### How to load data with `HttpClient`?
136
- You might notice that all demos are coded with mocked dataset in each 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 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`.
137
-
138
- ## Wiki / Documentation
139
- The Wiki is where all the documentation and instructions will go, so please consult the [Angular-Slickgrid - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki) before opening any issues. The [Wiki - HOWTO](https://github.com/ghiscoding/Angular-Slickgrid/wiki/HOWTO---Step-by-Step) is a great place to start with. You can also take a look at the [Demo page](https://ghiscoding.github.io/Angular-Slickgrid), it includes sample for most of the features and it keeps growing (so you might want to consult it whenever a new version comes out).
140
-
141
- ## Main features
142
- You can see some screenshots below and the instructions down below and if that is not enough for you to decide, head over to the [Wiki - Main Features](https://github.com/ghiscoding/Angular-Slickgrid/wiki).
143
-
144
- ## Missing features
145
- What if `Angular-Slickgrid` is missing feature(s) compare to the original core library [6pac/SlickGrid](https://github.com/6pac/SlickGrid/)?
146
-
147
- Fear not, and just simply reference the `SlickGrid` and `DataView` objects, just like in the core lib, those are exposed through Event Emitters. For more info continue reading on [Wiki - SlickGrid & DataView objects](/ghiscoding/Angular-Slickgrid/wiki/SlickGrid-&-DataView-Objects) and [Wiki - Grid & DataView Events](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grid-&-DataView-Events)
148
-
149
-
150
- ## Screenshots
151
-
152
- Screenshots from the demo app with the `Bootstrap` theme.
153
-
154
- _Note that the styling changed a bit, the best is to simply head over to the [Live Demo](https://ghiscoding.github.io/Angular-Slickgrid) page._
155
-
156
- ### Slickgrid example with Formatters (last column shown is a custom Formatter)
157
-
158
- #### _You can also see the Grid Menu opened (aka hambuger menu)_
159
-
160
- ![Default Slickgrid Example](/screenshots/formatters.png)
161
-
162
- ### Filters and Multi-Column Sort
163
-
164
- ![Filter and Sort](/screenshots/filter_and_sort.png)
165
-
166
- ### Inline Editing
167
-
168
- ![Editors](/screenshots/editors.png)
169
-
170
- ### Pinned (aka frozen) Columns/Rows
171
-
172
- ![Pinned Columns/Rows](/screenshots/frozen.png)
173
-
174
- ### Draggable Grouping & Aggregators
175
-
176
- ![Draggable Grouping](/screenshots/draggable-grouping.png)
177
-
178
- ### Slickgrid Example with Server Side (Filter/Sort/Pagination)
179
- #### Comes with OData & GraphQL support (you can implement custom ones too)
180
-
181
- ![Slickgrid Server Side](/screenshots/pagination.png)
1
+ # Angular-Slickgrid
2
+
3
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4
+ [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
5
+ [![npm version](https://badge.fury.io/js/angular-slickgrid.svg)](//npmjs.com/package/angular-slickgrid)
6
+ [![NPM downloads](https://img.shields.io/npm/dy/angular-slickgrid.svg)](https://npmjs.org/package/angular-slickgrid)
7
+
8
+ [![Actions Status](https://github.com/ghiscoding/Angular-Slickgrid/workflows/CI%20Build/badge.svg)](https://github.com/ghiscoding/Angular-Slickgrid/actions)
9
+ [![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
10
+ [![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)
11
+ [![codecov](https://codecov.io/gh/ghiscoding/Angular-Slickgrid/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/Angular-Slickgrid)
12
+
13
+ ### Brief introduction
14
+ 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.
15
+
16
+ ### NPM Package
17
+ [Angular-Slickgrid on NPM](https://www.npmjs.com/package/angular-slickgrid)
18
+
19
+ ### License
20
+ [MIT License](LICENSE)
21
+
22
+ ### Like it? :star: it
23
+ You like and use **Angular-Slickgrid**? Be sure to upvote :star: and feel free to contribute. :construction_worker:👷‍♀️
24
+
25
+ ### Like my work?
26
+ If you like my work, you can also support me with caffeine. I certainly drank many coffees to build and keep adding features for this great library.
27
+
28
+ <a href='https://ko-fi.com/N4N679OT'
29
+ target='_blank'>
30
+ <img height='30'
31
+ style='border:0px;height:32px;'
32
+ src='https://az743702.vo.msecnd.net/cdn/kofi2.png?v=0'
33
+ border='0'
34
+ alt='Buy Me a Coffee at ko-fi.com' />
35
+ </a>
36
+
37
+ ## Latest News & Releases
38
+ Check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/releases) section for all latest News & Releases.
39
+
40
+ ## Angular Compatibility
41
+ - version `1.x.x` for Angular 4 to 6
42
+ - 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.
43
+ - version `2.x.x` for Angular 7+
44
+ - since version `2.11.0`, you can also change your build `target` to `ES2015` for modern browser.
45
+ - version `3.x.x` for Angular 12+ and RxJS 7+
46
+ - build `target` got bumped to `ES2018` for modern browser **only**
47
+ - 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
48
+ - uses [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) monorepo
49
+
50
+ 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)
51
+
52
+ ### ngx-translate Compatibility
53
+
54
+ If you are facing any issues with `ngx-translate` library while building your Angular Project. You need to make sure that `@ngx-translate/core` is part of your dependencies, that is also true even when using a single Locale, that is because it is a `peerDependency` of Angular-Slickgrid. The reason is because, we use `@Optional() TranslateService` in the lib and for that to work, we still need it to be installed, but don't worry it should still be removed by the tree shaking process after a running a production build. See their version compatibility table below
55
+
56
+ | Angular Version | @ngx-translate/core |
57
+ |-----------------|---------------------|
58
+ | 10 | 13.x+ |
59
+ | 9 | 12.x+ |
60
+ | 8 | 12.x+ |
61
+ | 7 | 11.x+ |
62
+
63
+ ### Build Warnings (Angular 8+)
64
+ 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):
65
+ ```js
66
+ module.exports = {
67
+ packages: {
68
+ 'angular-slickgrid': {
69
+ ignorableDeepImportMatchers: [
70
+ /assign-deep/,
71
+ /slickgrid\//,
72
+ /flatpickr/,
73
+ /dequal/,
74
+ /jquery-ui\//,
75
+ ]
76
+ },
77
+ }
78
+ };
79
+ ```
80
+ You should also add `Angular-Slickgrid` as an allowed CommonJS dependency to your `angular.json` file to silent the warnings.
81
+ ```json
82
+ "options": {
83
+ "allowedCommonJsDependencies": ["angular-slickgrid"]
84
+ }
85
+ ```
86
+
87
+ ### Angular 12 with WebPack 5 - how to fix polyfill error
88
+ Since Angular 12 switched to WebPack 5, you might get some new errors and you will need to add some polyfills manually to get the Excel Builder (Excel Export) to work.
89
+
90
+ #### The error you might get
91
+
92
+ ```text
93
+ BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
94
+ This is no longer the case. Verify if you need this module and configure a polyfill for it.
95
+ ```
96
+
97
+ #### Steps to fix it
98
+ 1. `npm install stream-browserify`
99
+ 2. Add a path mapping in `tsconfig.json`:
100
+ ```
101
+ {
102
+ ...
103
+ "compilerOptions": {
104
+ "paths": {
105
+ "stream": [ "./node_modules/stream-browserify" ]
106
+ },
107
+ ```
108
+ 3. Add `stream` to `allowedCommonJsDependencies` in `angular.json`:
109
+ ```
110
+ "options": {
111
+ "allowedCommonJsDependencies": [
112
+ "assign-deep",
113
+ "excel-builder-webpacker",
114
+ "jquery-ui",
115
+ "stream"
116
+ ],
117
+ ```
118
+
119
+ ### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
120
+ 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.
121
+
122
+ ## Installation
123
+ 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.
124
+
125
+ **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)
126
+
127
+ ### Demo page
128
+ `Angular-Slickgrid` works with `Bootstrap 4` and even latest `Bootstrap 5` version, you can see a demo of each one below.
129
+ - [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap5-demo-with-translate)
130
+ - [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)
131
+
132
+ 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)
133
+
134
+ #### Working Demo
135
+ 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).
136
+ ```bash
137
+ git clone https://github.com/ghiscoding/angular-slickgrid-demos
138
+ cd bootstrap4-demo-with-translate
139
+ npm install
140
+ npm start
141
+ ```
142
+
143
+ #### How to load data with `HttpClient`?
144
+ 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`.
145
+
146
+ ## Wiki / Documentation
147
+ The Wiki is where all the documentation and instructions will go, so please consult the [Angular-Slickgrid - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki) before opening any issues. The [Wiki - HOWTO](https://github.com/ghiscoding/Angular-Slickgrid/wiki/HOWTO---Step-by-Step) is a great place to start with. You can also take a look at the [Demo page](https://ghiscoding.github.io/Angular-Slickgrid), it includes sample for most of the features and it keeps growing (so you might want to consult it whenever a new version comes out).
148
+
149
+ ## Main features
150
+ You can see some screenshots below and the instructions down below and if that is not enough for you to decide, head over to the [Wiki - Main Features](https://github.com/ghiscoding/Angular-Slickgrid/wiki).
151
+
152
+ ## Missing features
153
+ What if `Angular-Slickgrid` is missing feature(s) compare to the original core library [6pac/SlickGrid](https://github.com/6pac/SlickGrid/)?
154
+
155
+ Fear not, and just simply reference the `SlickGrid` and `DataView` objects, just like in the core lib, those are exposed through Event Emitters. For more info continue reading on [Wiki - SlickGrid & DataView objects](/ghiscoding/Angular-Slickgrid/wiki/SlickGrid-&-DataView-Objects) and [Wiki - Grid & DataView Events](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grid-&-DataView-Events)
156
+
157
+
158
+ ## Screenshots
159
+
160
+ Screenshots from the demo app with the `Bootstrap` theme.
161
+
162
+ _Note that the styling changed a bit, the best is to simply head over to the [Live Demo](https://ghiscoding.github.io/Angular-Slickgrid) page._
163
+
164
+ ### Slickgrid example with Formatters (last column shown is a custom Formatter)
165
+
166
+ #### _You can also see the Grid Menu opened (aka hambuger menu)_
167
+
168
+ ![Default Slickgrid Example](/screenshots/formatters.png)
169
+
170
+ ### Filters and Multi-Column Sort
171
+
172
+ ![Filter and Sort](/screenshots/filter_and_sort.png)
173
+
174
+ ### Inline Editing
175
+
176
+ ![Editors](/screenshots/editors.png)
177
+
178
+ ### Pinned (aka frozen) Columns/Rows
179
+
180
+ ![Pinned Columns/Rows](/screenshots/frozen.png)
181
+
182
+ ### Draggable Grouping & Aggregators
183
+
184
+ ![Draggable Grouping](/screenshots/draggable-grouping.png)
185
+
186
+ ### Slickgrid Example with Server Side (Filter/Sort/Pagination)
187
+ #### Comes with OData & GraphQL support (you can implement custom ones too)
188
+
189
+ ![Slickgrid Server Side](/screenshots/pagination.png)
190
+
191
+ ### Composite Editor Modal Windows
192
+ ![Composite Editor Modal](/screenshots/composite-editor.png)
@@ -1 +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\">\n <div class=\"slick-pagination-nav\">\n <nav aria-label=\"Page navigation\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [ngClass]=\"isLeftPaginationDisabled ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-first fa fa-angle-double-left\" aria-label=\"First\"\n (click)=\"changeToFirstPage($event)\">\n </a>\n </li>\n <li class=\"page-item\" [ngClass]=\"isLeftPaginationDisabled ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-prev fa fa-angle-left\" aria-label=\"Previous\"\n (click)=\"changeToPreviousPage($event)\">\n </a>\n </li>\n </ul>\n </nav>\n\n <div class=\"slick-page-number\">\n <span>{{textPage}}</span>\n <input type=\"text\" class=\"form-control\" data-test=\"page-number-input\" [value]=\"pageNumber\" size=\"1\"\n [readOnly]=\"totalItems === 0\" (change)=\"changeToCurrentPage($event)\">\n <span>{{textOf}}</span><span data-test=\"page-count\"> {{pageCount}}</span>\n </div>\n\n <nav aria-label=\"Page navigation\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [ngClass]=\"isRightPaginationDisabled ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-next text-center fa fa-lg fa-angle-right\" aria-label=\"Next\"\n (click)=\"changeToNextPage($event)\">\n </a>\n </li>\n <li class=\"page-item\" [ngClass]=\"isRightPaginationDisabled ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-end fa fa-lg fa-angle-double-right\" aria-label=\"Last\"\n (click)=\"changeToLastPage($event)\">\n </a>\n </li>\n </ul>\n </nav>\n </div>\n <span class=\"slick-pagination-settings\">\n <select id=\"items-per-page-label\" (change)=\"changeItemPerPage($event)\">\n <option value=\"{{pageSize}}\" [selected]=\"pageSize === itemsPerPage\" *ngFor=\"let pageSize of availablePageSizes\">{{pageSize}}</option>\n </select>\n <span>{{textItemsPerPage}}</span>,\n <span class=\"slick-pagination-count\">\n <span *ngIf=\"totalItems\">\n <span class=\"page-info-from-to\">\n <span data-test=\"item-from\">{{dataFrom}}</span>-<span data-test=\"item-to\">{{dataTo}}</span>\n {{textOf}}\n </span>\n </span>\n <span class=\"page-info-total-items\">\n <span data-test=\"total-items\">{{totalItems}}</span> {{textItems}}\n </span>\n </span>\n </span>\n</div>\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\">\n <div attr.id='{{gridId}}' class=\"slickgrid-container\" style=\"width: 100%\">\n </div>\n\n <!-- Pagination section under the grid -->\n <slick-pagination id=\"slickPagingContainer-{{gridId}}\" *ngIf=\"showPagination\"\n [gridOptions]=\"gridOptions\"\n [paginationService]=\"paginationService\">\n </slick-pagination>\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"}
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"}]}},"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"}
@@ -11,8 +11,9 @@ import { AfterViewInit, ApplicationRef, ChangeDetectorRef, ElementRef, OnDestroy
11
11
  import { TranslateService } from '@ngx-translate/core';
12
12
  import { Subscription } from 'rxjs';
13
13
  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';
14
- import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
15
14
  import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
15
+ import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
16
+ import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
16
17
  import { ExternalTestingDependencies, GridOption } from './../models/index';
17
18
  import { TranslaterService } from '../services/translater.service';
18
19
  import { AngularUtilService } from '../services/angularUtil.service';
@@ -57,6 +58,7 @@ export declare class AngularSlickgridComponent implements AfterViewInit, OnDestr
57
58
  subscriptions: Subscription[];
58
59
  slickEmptyWarning?: SlickEmptyWarningComponent;
59
60
  slickFooter?: SlickFooterComponent;
61
+ slickPagination?: SlickPaginationComponent;
60
62
  extensionUtility: ExtensionUtility;
61
63
  backendUtilityService: BackendUtilityService;
62
64
  collectionService: CollectionService;
@@ -91,6 +93,7 @@ export declare class AngularSlickgridComponent implements AfterViewInit, OnDestr
91
93
  get isDatasetInitialized(): boolean;
92
94
  /** SETTER to change if dataset was initialized or not (stringly used for unit testing purposes) */
93
95
  set isDatasetInitialized(isInitialized: boolean);
96
+ set isDatasetHierarchicalInitialized(isInitialized: boolean);
94
97
  get registeredResources(): ExternalResource[];
95
98
  constructor(angularUtilService: AngularUtilService, appRef: ApplicationRef, cd: ChangeDetectorRef, containerService: ContainerService, elm: ElementRef, translate: TranslateService, translaterService: TranslaterService, forRootConfig: GridOption, externalServices: ExternalTestingDependencies);
96
99
  ngAfterViewInit(): void;
@@ -162,6 +165,13 @@ export declare class AngularSlickgridComponent implements AfterViewInit, OnDestr
162
165
  private registerResources;
163
166
  /** Register the RxJS Resource in all necessary services which uses */
164
167
  private registerRxJsResource;
168
+ /**
169
+ * Render (or dispose) the Pagination Component, user can optionally provide False (to not show it) which will in term dispose of the Pagination,
170
+ * 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)
171
+ * @param {Boolean} showPagination - show (new render) or not (dispose) the Pagination
172
+ * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
173
+ */
174
+ private renderPagination;
165
175
  /**
166
176
  * Takes a flat dataset with parent/child relationship, sort it (via its tree structure) and return the sorted flat array
167
177
  * @param {Array<Object>} flatDatasetInput - flat dataset input
@@ -176,8 +186,6 @@ export declare class AngularSlickgridComponent implements AfterViewInit, OnDestr
176
186
  * then take back "editor.model" and make it the new "editor" so that SlickGrid Editor Factory still works
177
187
  */
178
188
  private swapInternalEditorToSlickGridFactoryEditor;
179
- /** Translate all Custom Footer Texts (footer with metrics) */
180
- private translateCustomFooterTexts;
181
189
  private translateColumnHeaderTitleKeys;
182
190
  private translateColumnGroupKeys;
183
191
  /**
@@ -3,6 +3,5 @@ export { AngularComponentOutput, AngularGridInstance, GridOption, SlickGrid, Row
3
3
  export { AngularUtilService, BsDropDownService, unsubscribeAllObservables } from './services/index';
4
4
  export { RowDetailViewExtension } from './extensions/index';
5
5
  export { SlickgridConfig } from './slickgrid-config';
6
- export { SlickPaginationComponent } from './components/slick-pagination.component';
7
6
  export { AngularSlickgridComponent } from './components/angular-slickgrid.component';
8
7
  export { AngularSlickgridModule } from './modules/angular-slickgrid.module';