Merge branch 'master' into bugfix/dark-mode-grid-menu

Author: ghiscoding

docs/column-functionalities/filters/custom-filter.md

@@ -16,21 +16,21 @@ You can also create your own Custom Filter with any html/css you want and/or jQu
 #### Limitations
 - as mentioned in the description, only html/css and/or jQuery libraries are supported.
   - this mainly mean that Angular templates (components) are not supported (feel free to contribute).
-- SlickGrid uses `table-cell` as CSS for it to display a consistent height for each rows (this keeps the same row height/line-height to always be the same). 
+- SlickGrid uses `table-cell` as CSS for it to display a consistent height for each rows (this keeps the same row height/line-height to always be the same).
   - all this to say that you might be in a situation were your filter shows in the back of the grid. The best approach to overcome this is to use a modal if you can or if the library support `append to body container`. For example, you can see that `multiple-select-vanilla` supports a `container`
 
 ### How to use Custom Filter?
-1. You first need to create a `class` using the [Filter interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/filter.interface.ts). Make sure to create all necessary public properties and functions. 
+1. You first need to create a `class` using the [Filter interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/filter.interface.ts). Make sure to create all necessary public properties and functions.
  - You can see a demo with a [custom-inputFilter.ts](https://github.com/ghiscoding/angular-slickgrid/blob/master/src/app/examples/custom-inputFilter.ts) that is used in the [demo - example 4](https://ghiscoding.github.io/Angular-Slickgrid/#/clientside)
-2. Simply set the `columnDefinition.filter.model` to your new custom Filter class and instantiate it with `new` (you can also use dependency injection in the constructor if you wish). Here is an example with a custom input filter: 
-```typescript 
+2. Simply set the `columnDefinition.filter.model` to your new custom Filter class and instantiate it with `new` (you can also use dependency injection in the constructor if you wish). Here is an example with a custom input filter:
+```typescript
 // define you columns, in this demo Effort Driven will use a Select Filter
-this.columnDefinitions = [      
+this.columnDefinitions = [
   { id: 'title', name: 'Title', field: 'title' },
   { id: 'description', name: 'Description', field: 'description', type: FieldType.string,
-    filterable: true, 
+    filterable: true,
     filter: {
-       model: new CustomInputFilter() // create a new instance to make each Filter independent from each other
+       model: CustomInputFilter // create a new instance to make each Filter independent from each other
     }
   }
 ];
@@ -47,7 +47,7 @@ If you want to load the grid with certain default filter(s), you can use the fol
 
 For example, setting a default value into an `input` element, you can simply get the search term with `columnDef.filter.searchTerms` and set the default value in jquery with `$(filterElm).val(this.searchTerms);`
 
-### Collection 
+### Collection
 If you want to pass a `collection` to your filter (for example, a multiple-select needs a select list of options), you can then use it in your custom filter through `columnDef.filter.collection`
 
 #### `key/label` pair
@@ -61,7 +61,7 @@ this.columnDef.filter.collection.forEach((option: SelectOption) => {
 ```
 
 #### Custom Structure (key/label pair)
-What if your `collection` have totally different value/label pair? In this case, you can use the `customStructure` to change the property name(s) to use. You can change the label and/or the value, they can be passed independently. 
+What if your `collection` have totally different value/label pair? In this case, you can use the `customStructure` to change the property name(s) to use. You can change the label and/or the value, they can be passed independently.
 For example:
 ```typescript
 // use custom structure value/label pair
@@ -80,7 +80,7 @@ this.columnDef.filter.collection.forEach((option: SelectOption) => {
 By default a `collection` uses the `label/value` pair without translation or `labelKey/value` pair with translation usage. So if you want to use translations, then you can loop through your `collection` and use the `labelKey/value` properties. For example:
 ```typescript
 this.columnDef.filter.collection.forEach((option: SelectOption) => {
-  // translate label      
+  // translate label
   const textLabel = (option.labelKey && typeof this.i18n.tr === 'function') ? this.i18n.tr(option.labelKey || ' ') : option.labelKey;
 
   // use the option value & translated label
@@ -98,7 +98,7 @@ const labelName = (this.columnDef.filter.customStructure) ? this.columnDef.filte
 const valueName = (this.columnDef.filter.customStructure) ? this.columnDef.filter.customStructure.value : 'value';
 
 this.columnDef.filter.collection.forEach((option: SelectOption) => {
-  // translate label      
+  // translate label
   const textLabel = (option.labelKey && typeof this.i18n.tr === 'function') ? this.i18n.tr(option[labelName] || ' ') : option[labelName];
 
   // use the option value & translated label
@@ -109,7 +109,7 @@ this.columnDef.filter.collection.forEach((option: SelectOption) => {
 ## Custom Filter with Angular Components
 You can see them in [Example 22](https://ghiscoding.github.io/Angular-Slickgrid/#/angular-components) which have both Custom Editors & Filters which uses Angular Components. The 2nd column "Assignee" is the column that uses both (it uses `ng-select` 3rd party lib wrapped in an Angular Components [here](https://github.com/ghiscoding/angular-slickgrid/blob/master/src/app/examples/filter-ng-select.component.ts)) and you need to create a Custom Filter like [here](https://github.com/ghiscoding/angular-slickgrid/blob/master/src/app/examples/custom-angularComponentFilter.ts) and use that Custom Filter in your column definition like [here](https://github.com/ghiscoding/angular-slickgrid/blob/master/src/app/examples/grid-angular.component.ts#L109).
 
-Personally I don't find this very straightforward and I don't recommend using Angular Components for Editors/Filters as it adds a lot of boilerplate (compare to 1 step with a jQuery Custom Filter) but if you really wish to go that route, it's now possible following the steps shown below. 
+Personally I don't find this very straightforward and I don't recommend using Angular Components for Editors/Filters as it adds a lot of boilerplate (compare to 1 step with a jQuery Custom Filter) but if you really wish to go that route, it's now possible following the steps shown below.
 
 The steps to use an Angular Component as a Custom Filter are the following:
 1. Create a Custom Filter that will handle the creation or compilation of the Angular Component into a SlickGrid Editors. For that you can take a look at this [Custom Filter](https://github.com/ghiscoding/angular-slickgrid/blob/master/src/app/examples/custom-angularComponentFilter.ts)

docs/grid-functionalities/Grid-State-&-Preset.md

@@ -91,6 +91,9 @@ export interface GridState {
     pageNumber: number;
     pageSize: number;
   };
+  pinning?: CurrentPinning;
+  rowSelection?: CurrentRowSelection | null;
+  treeData?: Partial<TreeToggleStateChange> | null;
 }
 ```
 
@@ -199,21 +202,18 @@ export class ExampleComponent implements OnInit, OnDestroy {
 ```
 
 ## How to Load Grid with certain Columns Preset (example hide certain Column(s) on load)
-You can show/hide or even change column position all via the `presets`, yes `presets` is that powerful. All you need is to pass all Columns that you want to show as part of the `columns` property of `presets`. Typically you already have the entire columns definition since you just defined it, so you can re-use that and just use `map` to loop through and populate the `columns` according to the structure needed (see [preset structure](#structure)). What you have to know is that whatever array you pass will drive what the user will see and at which order the columns will show (basically the array order does matter). If a Columns is omitted from that array, then it will become a hidden column (you can still show it through Grid Menu or Column Picker).
+You can show/hide or even change a column position via the `presets`, yes `presets` is that powerful. All you need to do is to pass all Columns that you want to show as part of the `columns` property of `presets`. Typically you already have the entire columns definition since you just defined it, so you can loop through it and just use `map` to list the `columns` according to the structure needed (see [preset structure](Grid-State-&-Preset#structure.md)). What you have to know is that whatever array you provide to `presets`, that will equal to what the user will see and also in which order the columns will show (the array order does matter in this case). If a Columns is omitted from that array, then it will be considered to be a hidden column (you can still show it through Grid Menu and/or Column Picker).
 
 So let say that we want to hide the last Column on page load, we can just find the column by it's `id` that you want to hide and pass the new column definition to the `presets` (again make sure to follow the correct preset structure).
 
-##### Component
 ```ts
 this.columnDefinitions = [
-  // your definition
+  // initial column definitions
 ];
 
-// for example, let's hide last column, we can just use `pop()` last column
-// and use `map()` to only pull required field for presets to work
-const mappedColumnDefinitions = this.columnDefinitions.map((col) => {
-  return { columnId: col.id, width: col.width };
-});
+// for example, let's hide last column, we can just use `pop()` to ommit last column
+// and use `map()` to pull only the required field for presets to work
+const mappedColumnDefinitions = this.columnDefinitions.map(col => ({ columnId: col.id, width: col.width }));
 mappedColumnDefinitions.pop();
 
 // then pass it to the presets
@@ -225,7 +225,8 @@ this.gridOptions = {
 ```
 This would be the easiest way to do it.
 
-As pointed out earlier, the `presets` requires a specific structure where the `columns` is the list of columns to show/hide with their possible widths and also the position in the array is very important as it defines the position shown in the UI
+As pointed out earlier, the `presets` requires a specific structure where the `columns` is the list of columns to show/hide with their possible widths. Also worth mentioning again that the position in the array is very important as it defines the position shown in the UI.
+
 ```ts
 this.gridOptions = {
       enableFiltering: true,

docs/migrations/Migration-to-2.x.md

@@ -239,8 +239,8 @@ this.columnDefinitions = [
      id: 'description', name: 'Description', field: 'description',
      filter: {
 -       type: FilterType.custom,
--       customFilter: new CustomInputFilter()
-+       model: new CustomInputFilter() // create a new instance to make each Filter independent from each other
+-       customFilter: CustomInputFilter
++       model: CustomInputFilter // create a new instance to make each Filter independent from each other
      }
    },
    {

package.json

@@ -64,23 +64,23 @@
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.2.5",
-    "@angular-devkit/build-angular": "^17.2.2",
-    "@angular-eslint/builder": "^17.2.1",
-    "@angular-eslint/eslint-plugin": "^17.2.1",
-    "@angular-eslint/eslint-plugin-template": "^17.2.1",
-    "@angular-eslint/schematics": "^17.2.1",
-    "@angular-eslint/template-parser": "^17.2.1",
-    "@angular/animations": "^17.2.3",
-    "@angular/cli": "^17.2.2",
-    "@angular/common": "^17.2.3",
-    "@angular/compiler": "^17.2.3",
-    "@angular/compiler-cli": "^17.2.3",
-    "@angular/core": "^17.2.3",
-    "@angular/forms": "^17.2.3",
-    "@angular/language-service": "^17.2.3",
-    "@angular/platform-browser": "^17.2.3",
-    "@angular/platform-browser-dynamic": "^17.2.3",
-    "@angular/router": "^17.2.3",
+    "@angular-devkit/build-angular": "^17.3.0",
+    "@angular-eslint/builder": "^17.3.0",
+    "@angular-eslint/eslint-plugin": "^17.3.0",
+    "@angular-eslint/eslint-plugin-template": "^17.3.0",
+    "@angular-eslint/schematics": "^17.3.0",
+    "@angular-eslint/template-parser": "^17.3.0",
+    "@angular/animations": "^17.3.0",
+    "@angular/cli": "^17.3.0",
+    "@angular/common": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/compiler-cli": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@angular/language-service": "^17.3.0",
+    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@angular/router": "^17.3.0",
     "@faker-js/faker": "^8.4.1",
     "@fnando/sparkline": "^0.3.10",
     "@ng-select/ng-select": "^12.0.7",
@@ -97,28 +97,28 @@
     "@types/flatpickr": "^3.1.2",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.24",
+    "@types/node": "^20.11.28",
     "@types/sortablejs": "^1.15.8",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@typescript-eslint/eslint-plugin": "^7.3.0",
+    "@typescript-eslint/parser": "^7.3.0",
     "bootstrap": "^5.3.3",
     "copyfiles": "^2.4.1",
     "custom-event-polyfill": "^1.0.7",
-    "cypress": "^13.6.6",
+    "cypress": "^13.7.0",
     "eslint": "^8.57.0",
     "fetch-jsonp": "^1.3.0",
     "font-awesome": "^4.7.0",
     "jest": "^29.7.0",
     "jest-extended": "^4.0.2",
     "jest-preset-angular": "^14.0.3",
     "moment-mini": "^2.29.4",
-    "ng-packagr": "^17.2.1",
+    "ng-packagr": "^17.3.0",
     "ngx-bootstrap": "^12.0.0",
     "npm-run-all2": "^6.1.2",
     "release-it": "^17.1.1",
     "rimraf": "^5.0.5",
     "rxjs": "^7.8.1",
-    "sass": "^1.71.1",
+    "sass": "^1.72.0",
     "servor": "^4.0.2",
     "stream-browserify": "^3.0.0",
     "ts-node": "^10.9.2",
@@ -131,7 +131,7 @@
     "npm": ">=6.14.13"
   },
   "resolutions": {
-    "caniuse-lite": "1.0.30001591",
+    "caniuse-lite": "1.0.30001599",
     "semver": "^7.6.0"
   }
 }

src/app/examples/custom-angularComponentEditor.ts

@@ -77,8 +77,8 @@ export class CustomAngularComponentEditor implements Editor {
   init() {
     if (!this.columnEditor || !this.columnEditor.params.component || !(this.angularUtilService instanceof AngularUtilService)) {
       throw new Error(`[Angular-Slickgrid] For Editor with Angular Component to work properly, you need to provide the "AngularUtilService" via the Editor "params" OR the Grid Options "params"
-      Example: this.columnDefs = [{ id: 'title', field: 'title', editor: { model: CustomAngularComponentEditor, collection: [...], params: { component: MyComponent, angularUtilService: this.angularUtilService }}];
-      OR this.columnDefs = [{ id: 'title', field: 'title', editor: { model: CustomAngularComponentEditor, collection: [...] }]; this.gridOptions = { params: { angularUtilService: this.angularUtilService }}`);
+      Example: this.columnDefs = [{ id: 'title', field: 'title', editor: { model: CustomEditor, collection: [...], params: { component: MyComponent, angularUtilService: this.angularUtilService }}];
+      OR this.columnDefs = [{ id: 'title', field: 'title', editor: { model: CustomEditor, collection: [...] }]; this.gridOptions = { params: { angularUtilService: this.angularUtilService }}`);
     }
     if (this.columnEditor?.params.component) {
       const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this.columnEditor.params.component, this.args.container);

src/app/examples/custom-angularComponentFilter.ts

@@ -63,8 +63,8 @@ export class CustomAngularComponentFilter implements Filter {
 
     if (!this.columnFilter || !this.columnFilter.params.component || !(this.angularUtilService instanceof AngularUtilService)) {
       throw new Error(`[Angular-Slickgrid] For Filter with Angular Component to work properly, you need to provide the "AngularUtilService" via the Filter "params" OR the Grid Options "params"
-      Example: this.columnDefs = [{ id: 'title', field: 'title', filter: { model: CustomAngularComponentFilter, collection: [...], params: { component: MyComponent, angularUtilService: this.angularUtilService }}];
-      OR this.columnDefs = [{ id: 'title', field: 'title', filter: { model: CustomAngularComponentFilter, collection: [...] }]; this.gridOptions = { params: { angularUtilService: this.angularUtilService }}`);
+      Example: this.columnDefs = [{ id: 'title', field: 'title', filter: { model: CustomFilter, collection: [...], params: { component: MyComponent, angularUtilService: this.angularUtilService }}];
+      OR this.columnDefs = [{ id: 'title', field: 'title', filter: { model: CustomFilter, collection: [...] }]; this.gridOptions = { params: { angularUtilService: this.angularUtilService }}`);
     }
 
     if (this.columnFilter?.params.component) {

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

@@ -123,7 +123,7 @@ export class GridAngularComponent implements OnInit {
         filterable: true,
         sortable: true,
         filter: {
-          model: new CustomAngularComponentFilter(), // create a new instance to make each Filter independent from each other
+          model: CustomAngularComponentFilter, // create a new instance to make each Filter independent from each other
           collection: this.assignees,
           params: {
             component: FilterNgSelectComponent,
@@ -155,7 +155,7 @@ export class GridAngularComponent implements OnInit {
         filterable: true,
         sortable: true,
         filter: {
-          model: new CustomAngularComponentFilter(), // create a new instance to make each Filter independent from each other
+          model: CustomAngularComponentFilter, // create a new instance to make each Filter independent from each other
           collection: this.assignees,
           params: {
             component: FilterNgSelectComponent,

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

@@ -69,7 +69,7 @@ export class GridClientSideComponent implements OnInit {
         id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80,
         type: FieldType.string,
         filter: {
-          model: new CustomInputFilter(), // create a new instance to make each Filter independent from each other
+          model: CustomInputFilter, // create a new instance to make each Filter independent from each other
           enableTrimWhiteSpace: true // or use global "enableFilterTrimWhiteSpace" to trim on all Filters
         }
       },

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

@@ -88,6 +88,7 @@ <h2>
                      [dataset]="dataset"
                      [columnDefinitions]="columnDefinitions"
                      [gridOptions]="gridOptions"
+                     (onCellChange)="onCellChanged()"
                      (onAngularGridCreated)="angularGridReady($event.detail)">
   </angular-slickgrid>
 </div>