angular-slickgrid 9.0.0 → 9.0.2

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

@@ -1,219 +0,0 @@
-## Embracing ESM-only builds ⚡ (WIP)
-
-This new release is focused around 2 things, we now ship ESM-only builds (in other words, CommonJS builds are fully dropped and only ESM will remain), this move will cut the npm download size by half. The other big change is an internal one which is an organizational one, I'm moving all framework wrappers directly into Slickgrid-Universal (Angular, Aurelia, React and Vue wrappers are now all located under the [frameworks/](https://github.com/ghiscoding/slickgrid-universal/tree/master/frameworks/) folder), this will help tremendously with the project maintenance (any new PR will now run against all frameworks all at once (catching bugs early), publishing a new version is becoming a single execution for all frameworks all at once, and finally having a single codebase to test & troubleshoot any wrapper, etc... will be so much easier to handle). Now Slickgrid-Universal name totally makes sense with this new structure change 🌐
-
-The other great thing about having everything under the same roof/project is that every package will be released at the exact same time with the exact same versions across the board. Everything will be released under v9.0 and whenever a new feature/bugfix comes in, then every package will be bumped to v9.1 and so on (no more version discrepancies).
-
-I also decided to align all SlickGrid examples in all frameworks and Angular-Slickgrid turned out to have many example offsets, so just be aware that the example numbering might have changed a little (ie: Row Detail is now Example 19 instead of 21).
-
-#### Major Changes - Quick Summary
-- minimum requirements bump
-  - Angular v19+
-  - Node v20+
-- upgrade Vanilla-Calendar-Pro to v3 with [flat config](#date-editorfilter-flat-config)
-- [shorter attribute names](#shorter-attribute-names)
-- now using `clipboard` API, used in ExcelCopyBuffer/ContextMenu/CellCopy, which might requires end user permissions
-- removing Arrow pointer from Custom Tooltip addon (because it was often offset with the cell text)
-
-> **Note:** if you come from an earlier version, please make sure to follow each migrations in their respected order (review previous migration guides)
-
-## Changes
-
-### Removed @deprecated code
-
-1. `colspanCallback` was deprecated and removed, please use the `globalItemMetadataProvider` instead
-
-```diff
-gridOptions = {
-- colspanCallback: this.renderDifferentColspan.bind(this),
-+ dataView: {
-+   globalItemMetadataProvider: {
-+     getRowMetadata: this.renderDifferentColspan.bind(this)
-+   }
-+ }
-}
-```
-
-2. `groupingService` from `AngularGridInstance` was deprecate and removed, but I would be very surprised if anyone used it. Simply use `headerGroupingService` instead.
-
-```diff
-function angularGridReady(angularGrid: AngularGridInstance) {
-  this.angularGrid = angularGrid;
--  angularGrid.groupingService.renderPreHeaderRowGroupingTitles();
-+  angularGrid.headerGroupingService.renderPreHeaderRowGroupingTitles();
-}
-```
-
-3. Row Detail changes
-- `itemDetail` property is removed, just use `item` (there's no reason to keep duplicate props)
-- `parent` property renamed to `parentRef`
-- `OnRowBackToViewportRangeArgs` and `OnRowOutOfViewportRangeArgs` were equal, so it was merged into a new `OnRowBackOrOutOfViewportRangeArgs` interface
-
-```diff
-export class Component {
-  gridOptions = {
-    enableRowDetailView: true,
-    rowTopOffsetRenderType: 'top', // RowDetail and/or RowSpan don't render well with "transform", you should use "top"
-    rowDetailView: {
--     onAsyncResponse: (e, args) => console.log('before toggling row detail', args.itemDetail),
-+     onAsyncResponse: (e, args) => console.log('before toggling row detail', args.item),
-    },
-  };
-
-  // `parent` renamed as `parentRef`
-  callParentMethod(model: any) {
--   this.parent!.someParentFunction(`We just called Parent Method from the Row Detail Child Component on ${model.title}`);
-+   this.parentRef!.someParentFunction(`We just called Parent Method from the Row Detail Child Component on ${model.title}`);
-  }
-}
-```
-
-4. Draggable Grouping `setDroppedGroups` to load grid with initial Groups was deprecated and now removed, simply use `initialGroupBy` instead
-
-```diff
-this.gridOptions = {
-  enableDraggableGrouping: true,
-  // frozenColumn: 2,
-  draggableGrouping: {
--   setDroppedGroups: () => ['duration', 'cost'],
-+   initialGroupBy: ['duration', 'cost'],
-  },
-};
-```
-
-5. for Header Menu, we had 2 similar events `onHeaderMenuHideColumns` and `onHideColumns` that were doing the same thing, so `onHeaderMenuHideColumns` was dropped
-
-```diff
-- onHeaderMenuHideColumns
-+ onHideColumns
-```
-
-### Grid Options
-
-`rowTopOffsetRenderType` default is changing from `'top'` to `'transform'` and the reason is because `transform` is known to have better styling perf,  especially on large dataset, and that is also what Ag-Grid uses by default.
-
-| previous default | new default |
-| --------------- | ------------ |
-| `rowTopOffsetRenderType: 'top'` | `rowTopOffsetRenderType: 'transform'` |
-
-- if you are using Cypress to get the row X in the grid, which is what we do ourselves, then you will need to adjust your tests
-
-| Cypress before | Cypress after  |
-| -------------- | -------------- |
-| `cy.get([style="top: ${GRID_ROW_HEIGHT * 0}px;"])` | `cy.get([style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"])` |
-| | OR `cy.get([data-row=0])` |
-
-> Please note that you will have to change the default to `rowTopOffsetRenderType: 'top'` when using either RowSpan and/or Row Detail features.
-
-### Shorter Attribute Names
-We are changing the `columnDefinitions` and `gridOptions` attribute names to much simpler single word names. Basically, I'm not exactly sure why I chose the long name in the past, but going forward, I think it would be much simpler to use single name attributes (which can help slightly with build size)
-
-```diff
-<angular-slickgrid gridId="grid1"
--  [columnDefinitions]="columnDefinitions"
--  [gridOptions]="gridOptions"
-+  [columns]="columnDefinitions"
-+  [options]="gridOptions"
-></angular-slickgrid>
-```
-
-## Column Functionalities
-
-### Date Editor/Filter (flat config)
-Vanilla-Calendar-Pro was upgraded to v3.0 and the main breaking change is that they migrated to flat config (instead of complex object config) and this mean that if you use any of their option, then you'll have to update them to be flat.
-
-The biggest change that you will most probably have to update is the min/max date setting when using the `'today'` shortcut as shown below:
-
-```diff
-import { type VanillaCalendarOption } from '@slickgrid-universal/common';
-
-prepareGrid() {
-  this.columnDefinitions = [{
-    id: 'finish', field: 'finish', name: 'Finish',
-    editor: {
-      model: Editors.date,
--      editorOptions: { range: { min: 'today' } } as VanillaCalendarOption,
-+      editorOptions: { displayDateMin: 'today' } as VanillaCalendarOption,
-    }
-  }];
-}
-```
-
-> [!NOTE]
-> for a complete list of option changes, visit the Vanilla-Calendar-Pro [migration](https://github.com/uvarov-frontend/vanilla-calendar-pro/wiki/%5BMigration-from-v2.*.*%5D-New-API-for-all-options-and-actions-in-v3.0.0) page, which details every single options with their new option names.
-
-## Grid Functionalities
-
-## Services
-
-The `GridService` has CRUD methods that were sometime returning a single item and other times an array of items and for that reason we had to rely on code like `onItemAdded.subscribe(item => { const items = Array.isArray(item) ? item : [item] }`. So for that reason, I decided to change the event names to plural and always return an array of items which is a lot more predictable.
-
-- `onItemAdded` renamed to `onItemsAdded`
-- `onItemDeleted` renamed to `onItemsDeleted`
-- `onItemUpdated` renamed to `onItemsUpdated`
-- `onItemUpserted` renamed to `onItemsUpserted`
-
----
-
-## Future Changes (next major)
-### Code being Deprecated (to be removed in the future, not before another year)
-#### You can start using new properties and options shown below in v9.0 and above.
-
-So when I created the project, I used a few TypeScript Enums and I though this was great but it turns out that all of these Enums end up in the final transpiled JS bundle. So in the next major, I'm planning to remove most of these Enums and replace them with string literal types (`type` instead of `enum`). So you should consider using string types as much and as soon as possible in all your new grids. Note that at the moment, they are only deprecations, and will only be dropped in the future (not now, but you should still consider this for the future), for example:
-
-```diff
-columns = [{
-  id: 'age', ...
-- type: FieldType.number,
-+ type: 'number',
-}];
-```
-> Note that migrating from `FieldType` to string types was already doable for the past couple years, so this one is far from new.
-
-Below are a list of Enums being deprecated and you should think about migrating them eventually because they will be removed in the next major release (whenever that happens, but that won't be before another year). Note that the list below are only a summary of these deprecations and replacements.
-
-| Enum Name   | from `enum`         | to string `type`    | Note |
-| ----------- | ------------------- | ------------------- | ---- |
-| `FileType`  | `FieldType.boolean` | `'boolean'`         |
-|             | `FileType.number`   | `'number'`          |
-| - | - | - |
-| `FieldType` | `FileType.csv`      | `'csv'`             |
-|             | `FileType.xlsx`     | `'xlsx'`            |
-| - | - | - |
-| `GridStateType`  | `GridStateType.columns` | `'columns'`  |
-|             | `GridStateType.filters`   | `'filters'`   |
-|             | `GridStateType.sorters`   | `'sorters'`   |
-| - | - | - |
-| `Operator`  | `Operator.greaterThan` | `'>'`  |    See [Operator](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/enums/operatorString.type.ts) list for all available opeators |
-|             | `Operator.lessThanOrEqual`   | `'<='`   |
-|             | `Operator.contains`   | `'Contains'` or `'CONTAINS'`  | Operators are written as PascalCase |
-|             | `Operator.equal`   | `'EQ'`  |
-|             | `Operator.rangeExclusive`   | `'RangeExclusive'`  |
-| - | - | - |
-| `SortDirection`  | `SortDirection.ASC` | `'ASC'` or `'asc'`  |
-|             | `SortDirection.DESC`   | `'DESC'` or `'desc'`  |
-| - | - | - |
-
-##### deprecating `editorOptions` and `filterOptions`, they are being renamed as `options`
-
-in order to make it easier to merge and simplify editor/filter options, I'm merging them into a single `options` property which will make it more easily transportable (you will be able to reuse the same `options` for both the editor/filter if need be). You can start using `options` in v9.0 and above.
-
-```diff
-import { type MultipleSelectOption } from '@slickgrid-universal/common';
-
-columnDefinitions = [{
-  id: 'duration', field: 'duration', name: 'Duration',
-  editor: {
--   editorOptions: {
-+   options: {
-      maxHeight: 250, useSelectOptionLabelToHtml: true,
-    } as MultipleSelectOption,
-  },
-  filter: {
--   filterOptions: {
-+   options: {
-      maxHeight: 250, useSelectOptionLabelToHtml: true,
-    } as MultipleSelectOption,
-  }
-}];
-```

package/docs/slick-grid-dataview-objects/slickgrid-dataview-objects.md

@@ -1,79 +0,0 @@
-In some cases you might want a feature that is not yet available in `Angular-Slickgrid` but exists in the original `SlickGrid`, what should you do? Fear not, we got you covered. `Angular-Slickgrid` exposes the SlickGrid `Grid` and `DataView` objects through Event Emitters, these objects are created when Angular-Slickgrid initialize the grid (with `ngAfterViewInit`). The ones we want to use for our usage would be `onGridCreated` and `onDataviewCreated`, depending on which object you want to obtain.
-
-**The new preferred way is now to use the `AngularGridInstance` via the `onAngularGridCreated` Event Emitter**
-
-### Event Emitter
-Angular-Slickgrid have the following Event Emitters that you can hook to
-- `onAngularGridCreated`
-- `onDataviewCreated`
-- `onGridCreated`
-- `onBeforeGridCreate`
-- `onBeforeGridDestroy`
-- `onAfterGridDestroyed`
-
-The ones we want to use for our usage would be `onGridCreated` and `onDataviewCreated`, depending on which object you want to obtain.
-
-### Grid & DataView objects through `onAngularGridCreated`
-Since version `1.x`, we can now access the Slick `Grid` & `DataView` objects directly from the `AngularGridInstance` through the `(onAngularGridCreated)` Event Emitter, for example:
-
-##### View
-```html
-<span id="radioAutoEdit">
-    <label class="radio-inline control-label" for="radioTrue">
-        <input type="radio" name="inlineRadioOptions" id="radioTrue" checked [value]="isAutoEdit" (change)="setAutoEdit(true)"> ON (single-click)
-    </label>
-    <label class="radio-inline control-label" for="radioFalse">
-        <input type="radio" name="inlineRadioOptions" id="radioFalse" [value]="isAutoEdit" (change)="setAutoEdit(false)"> OFF (double-click)
-    </label>
-</span>
-
-<angular-slickgrid gridId="grid2"
-          [columns]="columnDefinitions"
-          [options]="gridOptions"
-          [dataset]="dataset"
-          (onAngularGridCreated)="angularGridReady($event.detail">
-</angular-slickgrid>
-```
-
-##### Component
-```typescript
-import { AngularGridInstance, Column, GridOption } from 'angular-slickgrid';
-
-export class MyApp {
-  angularGrid: AngularGridInstance;
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-  isAutoEdit = true;
-  gridObj: any;
-  dataViewObj: any;
-
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridObj = angularGrid.slickGrid;
-    this.dataViewObj = angularGrid.dataView;
-  }
-
-  /** Change dynamically `autoEdit` grid options */
-  setAutoEdit(isAutoEdit) {
-    this.isAutoEdit = isAutoEdit;
-    this.gridObj.setOptions({ autoEdit: isAutoEdit }); // change the grid option dynamically
-    return true;
-  }
-
-  collapseAllGroups() {
-    this.dataviewObj.collapseAllGroups();
-  }
-
-  expandAllGroups() {
-    this.dataviewObj.expandAllGroups();
-  }
-}
-```
-
-### SlickGrid Events (original SlickGrid)
-You have access to all original SlickGrid events which you can subscribe, for more info refer to the [Docs - Grid & DataView Events](../events/Grid-&-DataView-Events.md)
-
-### Usage
-There's already all the necessary information on how to use this on the [Docs - Grid & DataView Events](../events/Grid-&-DataView-Events.md#view) page, so I suggest you to head over to that Documentation page on how to use the `SlickGrid` and `DataView` objects

package/docs/styling/dark-mode.md

@@ -1,100 +0,0 @@
-## Dark Mode
-
-When enabled (defaults to false), it will show the grid in Dark Mode by adding `slick-dark-mode` CSS class to the grid. Note that it is defined as a grid option because the grid uses a few elements that could be appended to the DOM `body` (e.g. ColumnPicker, GridMenu, LongTextEditor, CompositeEditorModal, ...) and when Dark Mode is enabled, it needs to inform all of these features that we are using Dark Mode (or Light Mode by default). So whenever any of these features are in play, and before it is appended to the `body`, it will add a `slick-dark-mode` (or `ms-dark-mode` for ms-select) CSS class to that element to let it know that we are in Dark Mode.
-
-
-### Toggle Light/Dark Mode
-
-You can easily toggle light/dark mode by using `grid.setOptions()`
-
-```ts
-export class MyDemo {
-  isDarkModeEnabled = false;
-  gridOptions: GridOption;
-
-  prepareGrid() {
-    this.gridOptions = {
-      // ...
-      darkMode: this.isDarkModeEnabled;
-    }
-  }
-
-  toggleDarkMode() {
-    this.isDarkModeEnabled = !this.isDarkModeEnabled;
-    this.sgb.slickGrid?.setOptions({ darkMode: this.isDarkModeEnabled });
-
-    // optionally update your local grid options as well
-    this.gridOptions = { ...this.gridOptions, darkMode: this.isDarkModeEnabled };
-  }
-}
-```
-
-### How to Auto-Detect Dark Mode?
-
-By default the grid will **not** automatically enable Dark Mode, neither read the browser's color scheme (the reason are mentioned in the description above). However, you could implement your own code to detect the color scheme (for modern browser only) when loading your browser and set it in your grid options. You can see a demo of that in the first grid of [Example 1](https://ghiscoding.github.io/Angular-Slickgrid/#/basic)
-
-```ts
-export class MyDemo {
-  gridOptions: GridOption;
-
-  // auto-detect browser's color scheme function
-  isBrowserDarkModeEnabled() {
-    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
-  }
-
-  prepareGrid() {
-    this.gridOptions = {
-      // ...
-      darkMode: this.isBrowserDarkModeEnabled();
-    }
-  }
-}
-```
-
-### Composite Editor Modal (for Bootstrap users)
-
-For `Bootstrap` users, it will also require the developer to add a `data-bs-theme="dark"` attribute which is also another reason why we added `darkMode` as a grid option. So for Bootstrap users, you will have to add this required attribute by yourself for the Dark Mode to display properly. If you forget to add this attribute, you might see some of the filter inputs and other sections displayed with a white background instead of an expected dark gray backgroud.
-
-> **Note** the `onRendered` is a new lifecycle callback of Composite Editor Modal that was added specifically for this Bootstrap use case
-
-```ts
-this.compositeEditorInstance?.openDetails({
-  // ...
-  onRendered: (modalElm) => modalElm.dataset.bsTheme = 'dark',
-});
-```
-
-### Grid Menu
-By default there is no command for toggling the Dark Mode from the Grid Menu, however you can show the command at any time via the following settings:
-
-```ts
-export class MyDemo {
-  isDarkModeEnabled = false;
-
-  defineGrid() {
-    this.gridOptions = {
-      darkMode: this.isDarkModeEnabled,
-      gridMenu: {
-        hideToggleDarkModeCommand: false, // hidden by default
-
-        // you can optionally add extra command to toggle your own page styling as well
-        onCommand: (_, args) => {
-          // ...
-        },
-
-        // you can also change the icon and/or command name
-        iconToggleDarkModeCommand: 'mdi mdi-brightness-4',
-        commandLabels: {
-          toggleDarkModeCommand: 'Toggle Dark Mode',
-        },
-      }
-    };
-  }
-}
-```
-
-### Tweaking Some Colors
-
-The Dark Mode Theme was created by setting a few CSS variables, in some cases you might need to tweak some of these variables. Take a look at the Slickgrid-Universal [CSS variables](https://github.com/ghiscoding/slickgrid-universal/blob/670946dcedd330a70d2e88127a0042474e7a5348/packages/common/src/styles/_variables.scss#L976-L985) to see which variables were reassigned. Also note that if you're using other Themes like Material or Salesforce, then there's also other variables that are set (see [Material variables](https://github.com/ghiscoding/slickgrid-universal/blob/670946dcedd330a70d2e88127a0042474e7a5348/packages/common/src/styles/_variables-theme-material.scss#L159-L189) or [Salesforce variables](https://github.com/ghiscoding/slickgrid-universal/blob/670946dcedd330a70d2e88127a0042474e7a5348/packages/common/src/styles/_variables-theme-salesforce.scss#L202-L219))
-
-> **Note** to support both Light and Dark Mode in the same Theme, we use CSS variables **only**. There some dedicated SASS variables for Dark Mode but very few, you can see them from the `_variables.scss` file at this [line](https://github.com/ghiscoding/slickgrid-universal/blob/dc5d402db61460a25e8921efeebda37ac1c18791/packages/common/src/styles/_variables.scss#L944-L953), if that is not enough then you'll want to override some colors for Dark Mode via the CSS variables. The best way to find the CSS variable assigned is to simply use your browser's debugger tool (F12).

package/docs/styling/styling.md

@@ -1,250 +0,0 @@
-#### index
-- [Using Built-in Themes (CSS or SASS)](#csssass-styles)
-- [Using CSS Variables](#using-css-variables-instead-of-sass)
-- [Bootstrap & Other Frameworks](#bootstrap-support)
-- [SVG Icons](#svg-icons)
-
-### CSS/SASS Styles
-Load the default Bootstrap theme style and/or customize it to your taste (customization can applied by using SASS)
-
-#### CSS
-Default compiled `css` (if you use the plain Bootstrap Theme CSS, you could simply add it to your `.angular-cli.json` file and be done with it)
-```json
-"styles": [
-    "../node_modules/bootstrap/dist/css/bootstrap.css",
-    "styles.css",
-    "../node_modules/angular-slickgrid/styles/css/slickgrid-theme-bootstrap.css"
-],
-```
-
-> **Note** Bootstrap is optional, you can use any other framework, other themes are also available as CSS and SCSS file extensions
-> `slickgrid-theme-default.css`, `slickgrid-theme-bootstrap.css`, `slickgrid-theme-material.css`, `slickgrid-theme-salesforce.css`
-
-### Using built-in Themes
-The Material & Salesforce Themes are using SVGs internally for the icons used by the grid. Each built-in Themes have CSS and SASS files associated with each theme. To take benefit of this, just import whichever CSS/SASS file associated with the Theme you wish to use.
-
-##### with CSS
-```scss
-/* style.css */
-@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-default.css';
-
-// or other Themes
-@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
-@use '@slickgrid-universal/common/dist/styles/styles/css/slickgrid-theme-material.css';
-@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
-```
-
-##### with SASS
-```scss
-/* style.scss */
-@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-default.scss' with (
-  $slick-primary-color: green,
-  $slick-cell-odd-background-color: lightyellow,
-  $slick-row-mouse-hover-color: lightgreen
-);
-
-// or other Themes
-@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
-@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
-```
-
-### Using CSS Variables _(instead of SASS)_
-You could change the SlickGrid styling with your own customization using [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). The variables that you can use (over 800 of them) are all predefined as SASS variables in the [_variables.scss](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss) file, you will simply have to rename the `$slick-` prefix with a `--slick-` prefix to the variable name to use them as CSS Variables. To be clear, you don't need SASS but the variables names were all declared as SASS and that is what the lib will use internally but you can optionally use them all as plain CSS Variables.
-
-For example, if we take the following 3 SASS variables (`$slick-header-menu-display`, `$slick-primary-color-dark` and `$slick-header-filter-row-border-bottom`) we can use the CSS Variables equivalent as the following
-
-```css
-/* use :host (local) or :root (global) */
-:root {
-    --slick-header-menu-display: inline-block;
-    --slick-primary-color-dark: pink;
-    --slick-header-filter-row-border-bottom: 2px solid pink;
-}
-```
-
-> **Note:** you could use `:host` to only change current grid styling, **however** there are many DOM elements that are appended to the DOM `body` (Grid Menu, Column Picker, Select Filter/Editor, Context Menu, ...) and the styles **will not** be applied when simply using `:host` and so in most cases you would want to use `:root` (if possible) to make a global change which will also work with elements appended to the `body`. Also note that `:root` is not available in Salesforce LWC and so you unfortunately won't be able to style everything in Salesforce.
-
-### Using Custom SVGs with SASS
-You could use Custom SVGs and create your own Theme and/or a different set of SVG Icons, each of the icons used in Slickgrid-Universal has an associated SASS variables ending with the suffix `"icon-svg-path"` which allow you to override any of the SVG vector path. All SVG icons are generated by following AntFu's [icons in pure CSS](https://antfu.me/posts/icons-in-pure-css) approach. If you want create your own SVGs in pure CSS, you can use the `generateSvgStyle()` function from our [`sass-utilities.scss`](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/sass-utilities.scss) (take a look at the [`slickgrid-icons.scss`](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/slickgrid-icons.scss) on its usage)
-
-##### with SVG
-```scss
-$primary-color: blue;
-
-// then on the last line, import the Theme that you wish to override
-@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-default.scss' with (
-  $slick-primary-color: $primary-color,
-  $slick-icon-group-color: $primary-color,
-  $slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z",
-  $slick-icon-group-expanded-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z",
-  $slick-icon-group-font-size: 13px
-);
-```
-
-> **Note** since the SVG are generated by a SASS function, you can easily override an SVG path in SASS but that is not the case with CSS variable. We still have a way to override an SVG via CSS variable but it requires to override the entire SVG content (not just its path) as can be seen below (also notice that the CSS variable is named without the `"-path"` suffix and also note that the URL must be encoded)
-
-```css
-:root {
-  --slick-checkbox-icon-checked-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"/%3E%3C/svg%3E');
-}
-```
-the SASS equivalent is a lot easier to override
-```scss
-$slick-checkbox-icon-checked-svg-path: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"
-```
-
-### SVG icons
-The project has a few built-in icons (sort, grouping, row detail, row move, row selection) and you can change them via SASS (or CSS with a bit more work). For that reason, all Styling Themes  Since this release now has pure CSS SVG icons, I decided to delete any Font-Awesome references (mostly in the Bootstrap Theme) because all the built-in icons are now all SVG icons (sort, grouping, row detail, row move) (you can change them using SASS). However, there are a few plugins that use external icons via CSS classes (mostly all menu plugins like Header Menu, Grid Menu, Content Menu, ...) and for that reason **all Styling Themes now include default SVG icons** (even the Bootstrap Theme).
-
-What if you want to use your own font/SVG library?
-This can be answered in 2 parts:
-1. the built-in icons can only be changed via SASS (or CSS with extra work), see above on how to change them.
-2. for all other area using icons via CSS classes (e.g. all menu plugins), you can use the "lite" Themes and then make sure to update all the menu plugins with the correct CSS classes, for example the global grid options of the Grid Menu is configured with the following CSS classes and you'll want to remap them with the correct CSS classes to fit your need:
-
-```ts
-// default global grid options
-export const GlobalGridOptions = {
-  gridMenu: {
-    iconCssClass: 'mdi mdi-menu',
-    iconClearAllFiltersCommand: 'mdi mdi-filter-remove-outline',
-    iconClearAllSortingCommand: 'mdi mdi-sort-variant-off',
-    iconClearFrozenColumnsCommand: 'mdi mdi-pin-off-outline',
-    iconExportCsvCommand: 'mdi mdi-download',
-    iconExportExcelCommand: 'mdi mdi-file-excel-outline',
-    iconExportTextDelimitedCommand: 'mdi mdi-download',
-    iconRefreshDatasetCommand: 'mdi mdi-sync',
-    iconToggleDarkModeCommand: 'mdi mdi-brightness-4',
-    iconToggleFilterCommand: 'mdi mdi-flip-vertical',
-    iconTogglePreHeaderCommand: 'mdi mdi-flip-vertical',
-  }
-}
-```
-
-and here's the file size difference with the "lite" version
-
-![image](https://github.com/ghiscoding/slickgrid-universal/assets/643976/0edc9962-d881-49d2-bc47-1f698213ad5e)
-
-### How to change SVG color?
-#### The following works for both CSS and SASS
-The new version 5.x of this project is now creating SVG icons as pure CSS, this mean that you can colorize the icons the same way that you would change a text color. We also provide a few different color CSS classes which start with the prefixes `$color-` or `$text-color-` (e.g. `$color-primary`).
-
-### SVG Colors - CSS Classes
-Since SVG can now be colorize via the `color` the same as any other text, there isn't much to do. However a small subset of default colors is provided that can be used with the SVG icons or any text (basically took the same colors used by Bootstrap [here](https://getbootstrap.com/docs/4.5/utilities/colors/)). We also added a `light` and `dark` shades for of each colors (except `color-light`, `color-dark` since there's no need), they both use a 6% lighter/darker shades (you can override the shade with `$color-lighten-percentage` and the same for darken). These colors can be used with the `color-X` (for example `color-primary`), also note that the primary color will follow your `$slick-primary-color` that you might have already overriden (it could also be different in each styling theme, shown below is the Salesforce theme colors). If you find that the colors are not exactly the colors you're looking for, we've also took some colors taken from [UiKit](https://getuikit.com/) and tagged them as `color-alt-X`.
-
-**NOTE 1:** The `colors.scss` is **only** included in the Material and Salesforce Themes since those are the only 2 themes currently using SVGs. If you wish to use these colors then simply add the necessary css/scss file.
-
-![image](https://github.com/ghiscoding/slickgrid-universal/assets/643976/986f16af-4e2b-4961-b2b5-32afc780b078)
-
-```scss
-// SASS colors
-$text-color-primary: $slick-primary-color;
-$text-color-secondary: #6c757d;
-$text-color-success: #28a745;
-$text-color-danger: #dc3545;
-$text-color-warning: #ffc107;
-$text-color-info: #17a2b8;
-$text-color-light: #f8f9fa;
-$text-color-dark: #343a40;
-$text-color-body: #212529;
-$text-color-muted: #6c757d;
-$text-color-white: #ffffff;
-$text-color-alt-default: #1e87f0;
-$text-color-alt-warning: #faa05a;
-$text-color-alt-danger: #f0506e;
-$text-color-alt-success: #32d296;
-$text-color-se-primary: #3dcd58;
-$text-color-se-link: #42b4e6;
-$text-color-se-link-dark: #337ab7;
-$text-color-se-danger: #b10043;
-$text-color-se-secondary: #9fa0a4;
-$text-color-se-warning: #e47f00;
-$text-color-se-warning-light: #ffd100;
-
-// lighter/darker shades
-$text-color-lighten-percentage: 6%;
-$text-color-darken-percentage: 6%;
-```
-
-##### HTML Color Test
-```html
-<div>
-  <span class="text-color-primary"> text-color-primary <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-primary-light"> text-color-primary-light <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-primary-dark"> text-color-primary-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div>
-  <span class="text-color-secondary"> text-color-secondary <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-secondary-light"> text-color-secondary-light <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-secondary-dark"> text-color-secondary-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div>
-  <span class="text-color-success"> text-color-success <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-success-light"> text-color-success-light <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-success-dark"> text-color-success-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div>
-  <span class="text-color-danger"> text-color-danger <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-danger-light"> text-color-danger-light <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-danger-dark"> text-color-danger-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div>
-  <span class="text-color-warning"> text-color-warning <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-warning-light"> text-color-warning-light <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-warning-dark"> text-color-warning-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div>
-  <span class="text-color-info"> text-color-info <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-info-light"> text-color-info-light <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-info-dark"> text-color-info-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div>
-  <span class="text-color-body"> text-color-body <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-body-light"> text-color-body-light <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-body-dark"> text-color-body-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div>
-  <span class="text-color-muted"> text-color-muted <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-muted-light"> text-color-muted-light <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-muted-dark"> text-color-muted-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div>
-  <span class="text-color-dark"> text-color-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div style="background-color: rgb(34, 34, 34)">
-  <span class="text-color-light"> text-color-light <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div style="background-color: rgb(34, 34, 34)">
-  <span class="text-color-white"> text-color-white <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div>
-  <span class="text-color-alt-default"> text-color-alt-default <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-alt-default-light"> text-color-alt-default-light <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-alt-default-dark"> text-color-alt-default-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div>
-  <span class="text-color-alt-warning"> text-color-alt-warning <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-alt-warning-light"> text-color-alt-warning-light <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-alt-warning-dark"> text-color-alt-warning-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div>
-  <span class="text-color-alt-success"> text-color-alt-success <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-alt-success-light"> text-color-alt-success-light <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-alt-success-dark"> text-color-alt-success-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div>
-  <span class="text-color-alt-danger"> text-color-alt-danger <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-alt-danger-light"> text-color-alt-danger-light <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-alt-danger-dark"> text-color-alt-danger-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div><span class="text-color-se-primary"> text-color-se-primary <i class="mdi mdi-help-circle"></i></span></div>
-<div>
-  <span class="text-color-se-link"> text-color-se-link <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-se-link-dark"> text-color-se-link-dark <i class="mdi mdi-help-circle"></i></span>
-</div>
-<div><span class="text-color-se-secondary"> text-color-se-secondary <i class="mdi mdi-help-circle"></i></span></div>
-<div><span class="text-color-se-danger"> text-color-se-danger <i class="mdi mdi-help-circle"></i></span></div>
-<div>
-  <span class="text-color-se-warning"> text-color-se-warning <i class="mdi mdi-help-circle"></i></span> -
-  <span class="text-color-se-warning-light"> text-color-se-warning-light <i class="mdi mdi-help-circle"></i></span>
-</div>
-```