angular-slickgrid 9.0.0 → 9.0.2

package/docs/migrations/migration-to-3.x.md

@@ -1,295 +0,0 @@
-Before you start, make sure that you don't have any console log warnings (most of the deprecated code from `2.x` were already displaying some console warnings to advise you of what's being removed). So it will be easier to fix the console warnings first, then move on to the list of changes below.
-
-**NOTE:** Last Angular-Slickgrid 3.x version is [v3.3.2](https://github.com/ghiscoding/angular-slickgrid/releases/tag/v3.3.2) and is compatible **only** with Slickgrid-Universal [v0.19.2](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v0.19.2)
-- Slickgrid-Universal 1.x versions only works with Angular-Slickgrid 4.x ([Migration Guide 4.x](Migration-to-4.x.md))
-
-## Biggest Breaking Changes
-1. Export to File & Export to Excel are now decoupled and opt-in (see [Export Services](#export-services) below)
-   - since both exports are opt-in, they are now also both disabled by default
-2. Backend Service APIs are now decoupled and opt-in (see [Backend Service API](#backend-service-apis) below)
-3. Remove `sg` event name prefix (in other words `(sgOnBeforeEditCell)` becomes `(onBeforeEditCell)`)
-   - You can however put them back, in your grid options, to avoid having a lot of refactoring (see [Grid Events](#grid-events) below)
-4. Event Emitters are replaced with Custom Events (see [Event Emitters](#event-emitters-are-replaced-with-custom-events-event-data-accessibility-also-changes) below)
-   - the optional data, when provided, must now be accessed via `($event.detail)` instead of previously `($event)`
-5. Styling (css/sass) main files are now under the `@slickgrid-universal/common` monorepo (see [Stylings](#stylings) below)
-6. RxJS 7 is now the minimum version
-   - the biggest change that I saw so far was the [`toPromise` deprecation](https://rxjs.dev/deprecations/to-promise) and that was easy enough to replace with `firstValueFrom`
-
-### @deprecated Code (removed)
-_note: most of the deprecated code already sends you console warnings, so check your console first._
-- removed all Grid Service methods having the word "toDatagrid" in their names
-   - for example, `addItemToDatagrid`, `deleteDataGridItem`, ...
-   - simply use the newer methods (named as `addItem`, `deleteItemById`, `updateItem`, ...), which have a lot more features and options.
-- removed `registerPlugins` Grid Option since all useful plugins/controls already exist in the lib.
-- removed `hideColumn(column)` please use `hideColumnById` or `hideColumnByIds` instead
-- removed `hideColumnByIndex(idx)` please use `hideColumnById` or `hideColumnByIds` instead
-- removed `BackendServiceOption` property named `columnDefinitions`, this is no longer a valid property which means that you cannot use it anymore with OData/GraphQL. This is no longer necessary since the Services can get the columns definition directly from the grid object.
-- removed SASS variables
-   - `$large-editor-textarea-height`
-   - `$large-editor-textarea-width`
-
-## Changes
-
-### 3rd Party Libs
-The 3rd party lib named `multiple-select.js` is no longer included within Angular-Slickgrid, it is now a separate npm package named [multiple-select-modified](https://www.npmjs.com/package/multiple-select-modified)
-
-You will have to update the lib path in your `angular.json`, simply update the path as shown below (note that the Slickgrid Bootstrap Theme CSS path portion is optional when using SASS)
-##### `angular.json`
-```diff
-"styles": [
-    "node_modules/flatpickr/dist/flatpickr.css",
--   "node_modules/angular-slickgrid/lib/multiple-select/multiple-select.css",
--   "node_modules/angular-slickgrid/styles/css/slickgrid-theme-bootstrap.css",
-+   "node_modules/multiple-select-modified/src/multiple-select.css",
-+   "node_modules/@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css",
-],
-"scripts": [
-    "node_modules/jquery/dist/jquery.js",
-    "node_modules/jquery-ui-dist/jquery-ui.min.js",
-    "node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
-    "node_modules/bootstrap/dist/js/bootstrap.js",
--   "node_modules/angular-slickgrid/lib/multiple-select/multiple-select.js"
-+   "node_modules/multiple-select-modified/src/multiple-select.js",
-],
-```
-##### Allowed CommonJS Dependencies (`angular.json`)
-You also need to modify the `allowedCommonJsDependencies` option include `assign-deep`, `jquery-ui` (and `stream` for WebPack 5) while `angular-slickgrid` itself can be removed, so your updated option should be (for a full sample, take a look at this [angular.json](https://github.com/ghiscoding/angular-slickgrid-demos/blob/master/bootstrap5-demo-with-translate/angular.json#L20) from 1 of the demo)
-```diff
-"allowedCommonJsDependencies": [
-+  "assign-deep",
-   "excel-builder-webpacker",
-+  "jquery-ui",
-+  "stream"
-]
-```
-and you should also update/create the `ngcc.config.js` in the root of your project (or copy the code live [demo](https://github.com/ghiscoding/angular-slickgrid-demos/blob/master/bootstrap5-demo-with-translate/ngcc.config.js))
-```diff
-module.exports = {
-  packages: {
-    'angular-slickgrid': {
-      ignorableDeepImportMatchers: [
-+       /assign-deep/,
-        /slickgrid\//,
-        /flatpickr/,
-+       /dequal/,
-+       /jquery-ui\//,
-      ]
-    },
-  }
-};
-```
-
-### Interfaces
-- renamed `CheckboxSelector` interface to `CheckboxSelectorOption`
-- renamed `EditorValidatorOutput` interface to `EditorValidationResult`
-- renamed `Sorter` interface to `SortComparer`
-- renamed `Sorters` to `SortComparers` (often used when using the Grouping feature)
-
-#### Backend Service APIs
-Note that the `BackendServiceApi` is no longer exposed in the `AngularGridInstance`, so if you wish to reference it (for example when you want to use it with an external export button), then create a reference while instantiating it or get it via the grid option `this.gridOptions.backendServiceApi.service`
-
-### Column Definitions
-- `headerKey` was replaced by `nameKey` (to align with SlickGrid `name` property when using I18N with translations)
-
-### Grid Events
-Removed grid events prefixes SlickGrid (`sg`).
-**However** please note that you can always add them back to avoid having to refactor all your grids at once, the main changes are in the global grid options:
-```diff
-export const GlobalGridOptions: Partial<GridOption> = {
-+  eventNamingStyle: EventNamingStyle.camelCase,
-}
-```
-
-##### _Optional (not recommended)_
-_In case you wish to keep `sg` prefix (only for SlickGrid/DataView events) to avoid too many refactoring, then could optionally add them back in your grid options via this option:_
-```ts
-this.gridOptions = {
-  defaultSlickgridEventPrefix: 'sg',
-  // ...
-}
-```
-
-### Event Emitters are replaced with Custom Events (event data accessibility also changes)
-Every events available from Angular-Slickgrid (the events that didn't start with the `sg` prefix, for example `angularGridReady`) are no longer exported as Event Emitter, they are instead available as Custom Events so that all Events (regardless or where they come from, that is from Angular-Slickgrid, SlickGrid or the DataView) are now **all** exported as Custom Events and this also means that the optional data is now accessed the same way across **all events** via the event detail property. So you will need to change some of your events
-```diff
-- (onAngularGridCreated)="angularGridReady($event)"
-+ (onAngularGridCreated)="angularGridReady($event.detail)"
-```
-
-
-#### Event Naming Convention (defaults to camel case)
-You might have notice the `eventNamingStyle` grid option, it is indeed a new option and with it you can change the names of the events following a defined naming convention. The default is camel case but you could also use the all lower case option (which is an acceptable ES6 syntax), if you take that for example that would become:
-
-So the **default is camelCase** event naming:
-```ts
-<angular-slickgrid (onClick)="handleOnClick($event.detail)">
-```
-
-##### _Optional (not recommended)_
-_But if you wish to use all lower case, you can change your grid options with_
-```diff
-this.gridOptions {
-+  eventNamingStyle: EventNamingStyle.lowerCase,
-}
-```
-_That would result in all lower case names_
-```diff
-<angular-slickgrid
--  (onClick)="handleOnClick($event.detail)">
-+  (onclick)="handleOnClick($event.detail)">
-```
-
-_Again note that the entire documentation is written with event names following the default camel case format (`onClick`)._
-
-### Grid Options
-- Grid Height/Width should now be passed through the Grid Options instead of the View, for example:
-```diff
-<angular-slickgrid gridId="grid1" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset"
--                   gridHeight="225"
--                   gridWidth="800">
-</angular-slickgrid>
-```
-were moved to the Grid Options in the ViewModel
-```diff
-this.gridOptions = {
-+   gridHeight: 225,
-+   gridWidth: 800 // or as a string like '100%'
-};
-```
-
-### Header Menu
-  - renamed `hideFilterCommands` to singular `hideFilterCommand` since there can only be 1 filter per column
-
-### Stylings
-The CSS/SASS Stylings now come from the `@slickgrid-universal/common` monorepo package, you need to adjust your imports
-
-##### with CSS (`angular.json`)
-```diff
-"styles": [
-    "node_modules/flatpickr/dist/flatpickr.css",
--   "node_modules/angular-slickgrid/lib/multiple-select/multiple-select.css",
--   "node_modules/node_modules/angular-slickgrid/styles/css/slickgrid-theme-bootstrap.css",
-+   "node_modules/multiple-select-modified/src/multiple-select.css",
-+   "node_modules/@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css",
-],
-```
-
-##### with SASS `.scss` (`styles.scss`)
-```diff
-# with SASS
-- @import 'angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';
-+ @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
-```
-
-## Services
-
-### Grid Service
-- `updateItem()` will no longer highlight the row by default (to get back this behavior add the option `highlightRow: true`)
-
-#### OData Service
-The `GridOdataService` is now an opt-in Service and is no longer exposed in the `AngularGridInstance`, you need create a reference while instantiating it or get it via the grid option `this.gridOptions.backendServiceApi.service`
-```diff
-- import { GridOdataService, OdataServiceApi, OdataOption } from 'angular-slickgrid';
-+ import { GridOdataService, OdataServiceApi, OdataOption } from '@slickgrid-universal/odata';
-
-export class MyExample {
-  prepareGrid {
-    this.columnDefinitions = [ /*...*/ ];
-    this.gridOptions = {
-      backendServiceApi: {
-        service: new GridOdataService(),
-        options: { /*...*/ } as OdataServiceApi
-    }
-  }
-}
-```
-
-#### GraphQL Service
-The `GraphqlService` is now an opt-in Service and is no longer exposed in the `AngularGridInstance`, you need create a reference while instantiating it or get it via the grid option `this.gridOptions.backendServiceApi.service`
-```diff
-- import { GraphqlService, GraphqlPaginatedResult, GraphqlServiceApi, } from 'angular-slickgrid';
-+ import { GraphqlService, GraphqlPaginatedResult, GraphqlServiceApi, } from '@slickgrid-universal/graphql';
-
-export class MyExample {
-  prepareGrid {
-    this.columnDefinitions = [ /*...*/ ];
-    this.gridOptions = {
-      backendServiceApi: {
-        service: new GraphqlService(),
-        options: { /*...*/ } as GraphqlServiceApi
-    }
-  }
-}
-```
-
-### Export Services
-#### Text File Export Service
-Export Service was renamed to `TextExportService` (export extensions are `.txt`, `.csv`) and is now an opt-in Servicem it is also no longer exposed in the `AngularGridInstance`. You need to use the new `@slickgrid-universal/text-export` packages and register the service(s) in your grid options as shown below.
-
-Also note that Text Export Service grid options changed as well, a few options got deprecated and renamed to have the word "textExport" instead of just "export". Also to be clear, it's deprecated but still exist, this will give you time to refactor your code. Here's the list
-- deprecate `exportOptions` and renamed to `textExportOptions`
-- deprecate `enableExport` flag and renamed to `enableTextExport`
-- the onBefore/onAfter events got renamed as well:
-   - `onGridBeforeExportToExcel` renamed to `onBeforeExportToExcel`
-   - `onGridAfterExportToExcel` renamed to `onAfterExportToExcel`
-   - `onGridBeforeExportToFile` renamed to `onBeforeExportToTextFile`
-   - `onGridAfterExportToFile` renamed to `onAfterExportToTextFile`
-
-```diff
-import { Column, GridOption } from 'angular-slickgrid';
-+ import { ExcelExportService } from '@slickgrid-universal/excel-export';
-+ import { TextExportService } from '@slickgrid-universal/text-export';
-
-export class MyExample {
-  prepareGrid {
-    this.columnDefinitions = [ /*...*/ ];
-    this.gridOptions = {
-      enableExcelExport: true,
-      excelExportOptions: { sanitizeDataExport: true },
--     enableExport: true,
--     exportOptions: { sanitizeDataExport: true },
-+     enableTextExport: true,
-+     textExportOptions: { sanitizeDataExport: true },
-
-      // add 2x Export Services (you can add a single or both export services, it should always be an array
-+     registerExternalResources: [new ExcelExportService(), new TextExportService()],
-    }
-  }
-}
-```
-
-#### Excel Export Service
-The `ExcelExportService` is also an opt-in Service and is no longer exposed in the `AngularGridInstance`, so if you wish to reference it (for example when you want to use it with an external export button), then create a reference while instantiating it (the `excelExportOptions` are the same as before).
-```diff
-import { Column, GridOption } from 'angular-slickgrid';
-+ import { ExcelExportService } from '@slickgrid-universal/excel-export';
-
-export class MyExample {
-+  excelExportService = new ExcelExportService(); // create a variable ref when you need to access it later
-
-  prepareGrid {
-    this.columnDefinitions = [ /*...*/ ];
-    this.gridOptions = {
-      enableExcelExport: true,
-      excelExportOptions: { sanitizeDataExport: true },
-+     registerExternalResources: [this.excelExportService],
-    }
-  }
-
-  exportToExcel() {
--    this.angularGrid.excelExportService.exportToExcel({ filename: 'Export', format: FileType.xlsx });
-+    this.excelExportService.exportToExcel({ filename: 'export', format: FileType.xlsx });
-  }
-}
-```
-
-### Custom Footer
-The Custom Footer component is now an external reusable component coming from Slickgrid-Universal and the `dateFormat` changed, it is now using the MomentJS date format (which is the same as all other Date Formatter) instead of the previous Angular date format. The changes in the global grid options is shown below, if you had it defined in your own grid options then make sure to use the correct format
-
-```diff
-customFooterOptions: {
--  dateFormat: 'yyyy-MM-dd, hh:mm aaaaa\'m\'',
-+  dateFormat: 'YYYY-MM-DD, hh:mm a',
-   // ...
-}
-```

package/docs/migrations/migration-to-4.x.md

@@ -1,83 +0,0 @@
-**NOTE:** if you come from an earlier 2.x version, you first have to follow the [Migration Guide to 3.x](https://github.com/ghiscoding/angular-slickgrid/wiki/Migration-to-3.x), if that is too much work, you can always go the easy route to simply clone the [Angular-Slickgrid-Demos](https://github.com/ghiscoding/angular-slickgrid-demos)
-
-## Major Changes List
-- [controls/plugins (extensions)](#slickgrid-controlsplugins-extensions)... read below for more info
-  - replace Grid Menu `customItems` by `commandItems`, see [here](#grid-menu-customitems-renamed-to-commanditems)
-  - remove all `image` options in favor of CSS classes only, see [here](#images-are-removed-in-favor-of-css-classes)
-- [CSS/SASS Styling Changes](#csssass-styling-changes)
-
-
-### @deprecated Code (removed)
-##### Grid Menu / Column Picker
-- `onColumnsChanged` removed `columns` property from Column Picker options, rename to `visibleColumns` instead.
-- `onColumnsChanged` removed `columns` property from Grid Menu options, rename to `visibleColumns` instead.
-##### Tree Data
-- removed `findItemInHierarchicalStructure()` method, use `findItemInTreeStructure` instead.
-
-## Changes
-
-### SlickGrid Controls/Plugins (Extensions)
-Every SlickGrid controls/plugins were rewritten and moved into Slickgrid-Universal (prior to this new release, we were using them directly from SlickGrid repo and we had Extension bridges/wrappers in Slickgrid-Universal but that is now thing of the past since their entire code exist in Slickgrid-Universal), they were also rewritten as plain vanilla JS (basically there's no more jQuery code with exception of Draggable Grouping which still require jQueryUI). It's also much easier to maintain (we no longer have to wait for the SlickGrid project to release a version) and we can also modify and add extra features, styling, etc...
-
-Because of all the rewriting, it makes sense to rename the method `getSlickgridAddonInstance` to `getExtensionInstanceByName` and it now returns the instance directly **and** as a bonus it now also automatically infers the correct return instance class as well.
-
-Here's an example of the code change that you need to do
-```diff
- toggleGridMenu(e: Event) {
-    if (this.angularGrid?.extensionService) {
--     const gridMenuInstance = this.angularGrid.extensionService.getSlickgridAddonInstance(ExtensionName.gridMenu); // return type was `any`
-+     const gridMenuInstance = this.angularGrid.extensionService.getExtensionInstanceByName(ExtensionName.gridMenu); // return type now infers `SlickGridMenu` instance
-      gridMenuInstance.showGridMenu(e);
-    }
-  }
-
-```
-
-#### Grid Menu `customItems` renamed to `commandItems`
-Replace all `custom...` properties to `command...` properties to align with all other menu plugins (CellMenu, ContextMenu, GridMenu, HeaderMenu are all using commands)
-- replace `customItems` by `commandItems`
-- replace `customTitle` by `commandTitle`
-- replace `customTitleKey` by `commandTitleKey`
-
-#### Images are removed in favor of CSS classes
-Another change possible the full plugin rewrite, all images related code were removed in favor of CSS classes only (that already existed and was always favored).
-
-- removed `deleteIconImage`, just use `deleteIconCssClass` instead.
-- removed `groupIconImage`, just use `groupIconCssClass` instead.
-- removed `buttonImage`, just use `buttonCssClass` instead.
-- removed `iconImage`, just use `iconCssClass` instead
-- removed `image`, just use `cssClass` instead
-
-##### What if you still want images?
-If you really want to use image, you can still work around that the new limitation by adding a CSS class similar to this:
-`background-image: url(images/my-image.gif);`
-
-## CSS/SASS Styling Changes
-#### All SASS variables were renamed to add the `$slick-...` prefix
-- the prefix is to avoid conflicts with other frameworks (CSS variables were already including this prefix, so no changes there)
-- there is only 1 small exception with `$primary-color` (to avoid too many styling changes) but even then there's also a new variable `$slick-primary-color`
-
-#### Simplify CSS
-To simplify and merge all menu styling together (now doable since all controls/plugins now exists in the lib source code), all the following CSS class names got changed with what is shown below
-- rename `title` to `slick-menu-title` (to avoid other framework conflicts)
-- rename `slick-cell-menu-command-list` to `slick-menu-command-list`
-- rename `slick-cell-menu-option-list` to `slick-menu-option-list`
-- rename `slick-cell-menu-item` to `slick-menu-item`
-- rename `slick-cell-menu-content` to `slick-menu-content`
-- rename `slick-context-menu-command-list` to `slick-menu-command-list`
-- rename `slick-context-menu-option-list` to `slick-menu-option-list`
-- rename `slick-context-menu-item` to `slick-menu-item`
-- rename `slick-context-menu-content` to `slick-menu-content`
-- rename `slick-header-menu-item` to `slick-menu-item`
-- rename `slick-header-menu-content` to `slick-menu-content`
-- rename `slick-grid-menu-item` to `slick-menu-item`
-- rename `slick-grid-menu-content` to `slick-menu-content`
-- rename `slick-grid-menu-command-list` to `slick-menu-command-list`
-- rename `slick-grid-menu-option-list` to `slick-menu-option-list`
-- rename `slick-grid-menu-list` to `slick-column-picker-list`
-- rename `slick-columnpicker` to `slick-column-picker`
-- rename `slick-columnpicker-list` to `slick-column-picker-list`
-- remove or rename `slick-gridmenu-list` to `slick-column-picker-list`
-   - we merge the Column Picker & Grid Menu column picker classes, read the note below
-
-#### NOTE: for simplification, it also means that all SASS/CSS variables got merged as well (e.g.: `$slick-cell-menu-item-disabled-color` got merged to a common `$slick-menu-item-disabled-color`), another change was to merge all the Grid Menu column picker & Column Picker variables with same styling (e.g.: `$slick-grid-menu-checkbox-icon-checked` is now `$slick-column-picker-checkbox-icon-checked` for both extensions)

package/docs/migrations/migration-to-5.x.md

@@ -1,160 +0,0 @@
-## Bye Bye jQueryUI... 👋🏻 welcome [SortableJS](https://sortablejs.github.io/Sortable/) 🚀
-
-This new release is rather small for the developer, but a lot changed internally and SortableJS will improve performance and usability since it also works great with touch. The main change for the developer would be if you use the `Editors.autoComplete` since that changed to `Editors.autocompleter` (same goes for associated Filters)... and that's about it for changes since the rest are mostly removal of deprecated things. If you want to know more about the reason behind the removal of jQueryUI (internally), then read the "Why replace jQueryUI with SortableJS?" section below (hint, the next major version will probably remove jQuery as well). 
-
-#### Major Changes - Quick Summary
-- minimum requirements
-  - Angular `>=14.0.0`
-  - RxJS `>=7.5.0`
-- replaced jQueryUI with [SortableJS](https://sortablejs.github.io/Sortable/)
-  - it required us to replace jQueryUI Autocomplete Editor/Filter, see [Kraaden Autocomplete](#replace-jqueryui-autocomplete-with-kraaden-autocomplete) below
-- [Why replace jQueryUI with SortableJS?](#why-replace-jqueryui-with-sortablejs)
-
----
-
-**NOTE:** if you come from a version earlier than 4.x, it is very important that you follow each migration in the respected order
-
-### Removed Code
-1. ~Since we dropped jQueryUI, and we were using jQueryUI Slider for the `Filters.SliderRange`, we had to remove the Slider Range and we don't currently have a replacement at the moment, though it might come in the future.~ The Slider Range Filter got rewritten in pure JS and is back in version **[v5.1.0](https://github.com/ghiscoding/angular-slickgrid/releases/tag/v5.1.0)** release (see [Example 25](https://ghiscoding.github.io/Angular-Slickgrid/#/range)).
-2. `BsDropdownService` was also removed, the alternative is simply to use the built-in [Cell Menu](/ghiscoding/angular-slickgrid/wiki/Cell-Menu)
-
-### @deprecated Code
-##### Text Export Service (see [code change](#text-export-service) sample below)
-- `enableExport` was renamed to `enableTextExport`
-- `exportOptions` was renamed to `textExportOptions`
-
-##### SASS - Autocomplete 
-Since we replaced the jQueryUI Autocomplete with the 3rd party lib [Kraaden Autocomplete](https://github.com/kraaden/autocomplete) (see below), there are a few SASS/CSS variables that we no longer need and were removed.
-
-###### variables removed
-- `$slick-autocomplete-box-shadow`
-- `$slick-autocomplete-border-radius`
-- `$slick-autocomplete-hover-color`
-- `$slick-autocomplete-hover-border-color`
-- `$slick-autocomplete-loading-input-bg-color`
-- `$slick-autocomplete-min-width`
-- `$slick-autocomplete-overflow-x`
-- `$slick-autocomplete-overflow-y`
-- `$slick-autocomplete-text-color`
-- `$slick-autocomplete-text-overflow`
-- `$slick-autocomplete-text-padding`
-
-## Changes
-
-### Text Export Service
-
-Here's an example of the code change that you need to do
-```diff
-this.gridOptions = {
-- enableExport: true,
-- exportOptions: {
-+ enableTextExport: true,
-+ textExportOptions: {
-    sanitizeDataExport: true
-  },
-```
-
-### Slickgrid-Universal
-If you use any of the Slickgrid-Universal extra dependencies then make sure to upgrade them to `2.0.0` so that they work with Angular-Slickgrid `5.0.0`
-
-```diff
-  "dependencies": {
--   "@slickgrid-universal/excel-export": "^1.4.0",
-+   "@slickgrid-universal/excel-export": "^2.0.0",
--   "angular-slickgrid": "^4.3.4",
-+   "angular-slickgrid": "^5.0.0",
-}
-```
-
-### `angular.json` config
-Since we dropped jQueryUI, you then need to remove it from your `angular.json` and anywhere else that might reference it, but you also need to add SortableJS 
-
-```diff
-# angular.json
-{ 
-   // ...
-    "allowedCommonJsDependencies": [
-      "assign-deep",
-+     "autocompleter",
-      "dompurify",
-      "excel-builder-webpacker",
-      "flatpickr",
-      "jquery",
--     "jquery-ui",
-      "stream"
-    ],
- 
-  // ...
-     "scripts": [
-         "node_modules/jquery/dist/jquery.min.js",
--        "node_modules/jquery-ui/dist/jquery-ui.min.js",
--        "node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
-         "node_modules/bootstrap/dist/js/bootstrap.min.js",
-         "node_modules/multiple-select-modified/src/multiple-select.js",
-+        "node_modules/sortablejs/Sortable.min.js"
-     ],
-```
-
-### Replaced JqueryUI Autocomplete with [Kraaden Autocomplete](https://github.com/kraaden/autocomplete)
-Since we dropped jQueryUI, we had to find an alternative for the AutoComplete Editor/Filter and we settled on the 3rd party lib [Kraaden Autocomplete](https://github.com/kraaden/autocomplete) which does nearly everything that the jQueryUI one was providing. There are subtle changes requiring few line of code change (see below). We also have a new [Autocomplete Editor (Kraaden)](https://github.com/ghiscoding/angular-slickgrid/wiki/Autocomplete-Editor-(Kraaden-lib)) Wiki (and we kept a reference to the old jQueryUI AutoComplete Wiki for users of older Angular-Slickgrid versions).
-
-You will notice that the Editor/Filter `model` name is quite similar, there are only 2 chars that are different to make it clear that there's a change for the developer (a lower `c` and a `r` at the end of the word which is forming the new name `model: Editors.autocompleter` and the same goes for `AutocompleterOption`)
-
-If you were using the Autocomplete `onSelect` callback, it got renamed to `onSelectItem`. If you were using `openSearchListOnFocus`, then that is now simply `showOnFocus` with the Kraaden Autocomplete (refer to Kraaden Autocomplete [options](https://github.com/kraaden/autocomplete#options), to use them in `editorOptions` or `filterOptions`)
-
-```diff
-import {
--  AutocompleteOption,
-+  AutocompleterOption,
-} from '@slickgrid-universal/common';
-
-prepareGrid() {
-  this.columnDefinitions = [{
-    id: 'cityOfOrigin', name: 'City of Origin', field: 'cityOfOrigin',
-    filterable: true,
-    editor: {
--     model: Editors.autoComplete,
-+     model: Editors.autocompleter,
-      editorOptions: {
-        minLength: 3,
-        forceUserInput: true,
--       source: (request, response) => {
-+       fetch: (searchText, updateCallback) => {
-          $.ajax({
-            url: 'http://gd.geobytes.com/AutoCompleteCity',
-            dataType: 'jsonp',
-            data: {
--             q: request.term
-+             q: searchText
-            },
-            success: (data) => {
--             response(data);
-+             updateCallback(data);
-            }
-          });
-        }
--     } as AutocompleteOption,
-+     } as AutocompleterOption,
-    filter: {
--     model: Filters.autoComplete,
-+     model: Filters.autocompleter,
-      filterOptions: {
-        // ... the rest is the same as the Editor
-      }
-    }
-  }
-}
-```
-
-### Why replace [jQueryUI](https://jqueryui.com/) with [SortableJS](https://sortablejs.github.io/Sortable/)?
-Prior to this new version, jQueryUI had to be installed, that was even for a basic grid, but the fact was that the only jQueryUI feature we needed in SlickGrid was [jQueryUI - Sortable](https://jqueryui.com/sortable/) for column reordering. Considering that SlickGrid required jQueryUI at 281Kb (js+css) just to get column reordering, we figured it was a rather large request, don't you think? We did use jQueryUI Autocomplete & Slider as well but the jQueryUI lib is rather large, is barely maintained and is now quite outdated. [SortableJS](https://sortablejs.github.io/Sortable/) is now the dependency used by SlickGrid and is a lot smaller and more up to date in the JS world.
-
-#### jQueryUI Cons
- - old and outdated, barely supported and rather large (probably because it was written when IE5 was a thing)
- - it does not support Touch that well (mobile devices)
- - it is rather large at 250Kb (min.js) + 31Kb (min.css)
-#### SortableJS Pros
- - much smaller at 44Kb (`min.js` doesn't require any css)
- - touch friendly (mobile devices)
- - much smoother UX and better performance
- - written in pure JS without any dependencies

package/docs/migrations/migration-to-6.x.md

@@ -1,128 +0,0 @@
-## SlickGrid is now jQuery free 🌊
-
-In our previous v5.0 release (see [Migration to v5.0](https://github.com/ghiscoding/angular-slickgrid/wiki/Migration-to-5.x)), we dropped jQueryUI and now in v6.0 we are going even further and are now dropping [jQuery](https://jquery.com/) entirely. You can still use jQuery but it's no longer a dependency. There are multiple benefits in dropping jQuery and go the vanilla route, the biggest advantages are:
-
-1. it should provide better performance (browser native)
-2. build size should be smaller (see table below) 
-
-#### Major Changes - Quick Summary
-- minimum requirements bump
-  - Angular `>=16.0.0`
-  - RxJS `>=8.7.1`
-- we dropped jQuery requirement
-  - it also required us to rewrite the `multiple-select` (jQuery based lib) into a brand new [`multiple-select-vanilla`](https://github.com/ghiscoding/multiple-select-vanilla) lib which is now native and has zero dependency
-
----
-
-**NOTE:** if you come from an earlier version other than 5.x, please make sure to follow each migration in their respected order
-
-## Changes
-
-### Dynamically Loading Component via `AngularUtilService`
-as shown in ([Example 21 - Row Detail](https://ghiscoding.github.io/Angular-Slickgrid/#/rowdetail) / [Example 22 - Angular Components](https://ghiscoding.github.io/Angular-Slickgrid/#/angular-components))
-
-In our `AngularUtilService` we were dynamically creating component by using `ComponentFactoryResolver` but that got removed in Angular 16 and so we had to replace it with `ViewContainerRef` and for that to work you might need to add `providers` to use it as a singleton
-
-When using AngularUtilService, you might need to add it in your `providers` list
-```diff
-@Component({
-  // ...
-+  providers: [AngularUtilService]
-})
-export class GridComponent
-```
-
-#### `createAngularComponentAppendToDom` signature change (starting from `v6.3.0`)
-Also in the same `AngularUtilService`, the method signature arguments `createAngularComponentAppendToDom` changed slightly, the 3rd argument was previously `clearTargetContent`, to match the signature of `createAngularComponent`, but is now replaced by `data` so that you can provide data to the new Component instance. The `clearTargetContent` was dropped because it is no longer needed since we should always replace the entire html content and that is now the default. 
-
-The new signature, in `v6.3.0`, for both `createAngularComponent` and `createAngularComponentAppendToDom` is now the following:
-```ts
-// the `CreateComponentOption` are the options you can provide to `ViewContainerRef.createComponent`
-createAngularComponent<C>(component: Type<C>, targetElement?: HTMLElement, data?: any, createCompOptions?: CreateComponentOption) {}
-createAngularComponentAppendToDom<C>(component: Type<C>, targetElement?: HTMLElement, data?: any, createCompOptions?: CreateComponentOption) {}
-```
-
-### replaced `multiple-select` with [`multiple-select-vanilla`](https://github.com/ghiscoding/multiple-select-vanilla)
-This change was required because the previous library was a jQuery based lib, so I rewrote the lib as a new native lib to drop jQuery. However with this change, there were a couple of options that were dropped and/or modified. 
-
-```diff
-// you can load `MultipleSelectOption` from either the new Multiple-Select-Vanilla lib or from Angular-Slickgrid (which is a re-export)
-  import { MultipleSelectOption } from 'angular-slickgrid';       // still works, but is a re-export of the import shown below
-+ import { MultipleSelectOption } from 'multiple-select-vanilla'; // preferred
-
-filterOptions: { 
--  autoDropWidth: true, // removed and no longer required
-} as MultipleSelectOption
-```
-
-The new lib also offers a bunch of new options as well, you can see the full interface at [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/lib/src/interfaces/multipleSelectOption.interface.ts)
-
-### Slickgrid-Universal
-If you use any of the Slickgrid-Universal extra dependencies then make sure to upgrade them to the new major `3.0.0` version so that they work with Angular-Slickgrid `6.0.0`
-
-```diff
-  "dependencies": {
--   "@slickgrid-universal/excel-export": "^2.6.4",
-+   "@slickgrid-universal/excel-export": "^3.0.0",
--   "angular-slickgrid": "^5.6.4",
-+   "angular-slickgrid": "^6.0.0",
-}
-```
-
-### `angular.json` config
-Since we dropped jQuery, you can also remove it from your `angular.json` list of scripts as well and anywhere else that might be referencing it. Also the `multiple-select-modified` now uses SASS and is now imported directly in Slickgrid-Universal, so CSS imports are no longer needed
-
-```diff
-# angular.json
-{ 
-   // ...
-    "allowedCommonJsDependencies": [
-      "assign-deep",
-      "autocompleter",
-      "dompurify",
-      "excel-builder-webpacker",
-      "flatpickr",
--     "jquery",
-      "stream"
-    ],
- 
-   // ...
-   "styles": [
-     "node_modules/bootstrap/dist/css/bootstrap.min.css",
-     "node_modules/flatpickr/dist/flatpickr.min.css",
--    "node_modules/multiple-select-modified/src/multiple-select.css",
-     "src/styles.scss"
-   ],
-   "scripts": [
-     "node_modules/bootstrap/dist/js/bootstrap.min.js",
--    "node_modules/jquery/dist/jquery.min.js",
--    "node_modules/multiple-select-modified/src/multiple-select.js",
-     "node_modules/sortablejs/Sortable.min.js"
-   ],
-```
-
-### Editor/Filter `params` should be using `editorOptions`/`filterOptions`
-For better TypeScript support, we now recommend to use either `editorOptions` or `filterOptions` depending if it's an Editor or a Filter.
-
-```diff
-this.columnDefinitions = [{
-  id: 'cost', name: 'Cost', field: 'cost',
-  editor: {
-    model: Editors.slider,
--    params: { hideSliderNumber: false }
-+    editorOptions: { hideSliderNumber: false } as SliderOption
-  },
-  filter: {
-    model: Filters.slider,
--    params: { hideSliderNumber: false }
-+    filterOptions: { hideSliderNumber: false } as SliderOption
-  },
-```
-
-### Final Note
-and that's about it, the migration is relatively simple as you can see :)
-
----
-
-### File Size Comparisons
-While comparing with the folder properties with "size on disk" on Windows, we're averaging 4-5% smaller size in our new release by removing jQuery with this new release.