diff --git a/docs/TOC.md b/docs/TOC.md
index 40038d548..89e717f13 100644
--- a/docs/TOC.md
+++ b/docs/TOC.md
@@ -10,7 +10,6 @@
* [Dark Mode](styling/dark-mode.md)
* [Styling CSS/SASS/Themes](styling/styling.md)
-* [SVG Icons](styling/svg-icons.md)
## Column Functionalities
@@ -18,6 +17,7 @@
* [Editors](column-functionalities/editors.md)
* [new Autocomplete (Kraaden-lib)](column-functionalities/editors/autocomplete-editor-kraaden.md)
* [Date Picker (flatpickr)](column-functionalities/editors/date-editor-flatpickr.md)
+ * [Date Picker (vanilla-calendar)](column-functionalities/editors/date-editor-(vanilla-calendar).md)
* [LongText (textarea)](column-functionalities/editors/longtext-editor-textarea.md)
* [Select Dropdown Editor (single/multiple)](column-functionalities/editors/select-dropdown-editor.md)
* [Filters](column-functionalities/filters/README.md)
diff --git a/docs/column-functionalities/cell-menu.md b/docs/column-functionalities/cell-menu.md
index 0fbe23077..8337ec1d2 100644
--- a/docs/column-functionalities/cell-menu.md
+++ b/docs/column-functionalities/cell-menu.md
@@ -38,7 +38,7 @@ this.columnDefinitions = [
console.log(args.dataContext, args.column); // action callback.. do something
}
},
- { command: 'help', title: 'HELP', iconCssClass: 'fa fa-question-circle', positionOrder: 62 },
+ { command: 'help', title: 'HELP', iconCssClass: 'mdi mdi-help-circle', positionOrder: 62 },
// you can add sub-menus by adding nested `commandItems`
{
// we can also have multiple nested sub-menus
@@ -74,8 +74,8 @@ this.columnDefinitions = [
cellMenu: {
optionTitle: 'Change Effort Driven Flag', // optional, add title
optionItems: [
- { option: true, title: 'True', iconCssClass: 'fa fa-check-square-o' },
- { option: false, title: 'False', iconCssClass: 'fa fa-square-o' },
+ { option: true, title: 'True', iconCssClass: 'mdi mdi-check-box-outline' },
+ { option: false, title: 'False', iconCssClass: 'mdi mdi-checkbox-blank-outline' },
{ divider: true, command: '', positionOrder: 60 },
],
// subscribe to Context Menu onOptionSelected event (or use the "action" callback on each option)
@@ -174,9 +174,9 @@ this.columnDefinitions = [
const dataContext = args && args.dataContext;
return !dataContext.completed;
},
- { option: 1, iconCssClass: 'fa fa-star-o yellow', title: 'Low' },
- { option: 2, iconCssClass: 'fa fa-star-half-o orange', title: 'Medium' },
- { option: 3, iconCssClass: 'fa fa-star red', title: 'High' },
+ { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' },
+ { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' },
+ { option: 3, iconCssClass: 'mdi mdi-star red', title: 'High' },
]
}
}
@@ -191,9 +191,9 @@ this.columnDefinitions = [
cellMenu: {
optionTitleKey: 'COMMANDS', // optionally pass a title to show over the Options
optionItems: [
- { option: 1, titleKey: 'LOW', iconCssClass: 'fa fa-star-o yellow' },
- { option: 2, titleKey: 'MEDIUM', iconCssClass: 'fa fa-star-half-o orange' },
- { option: 3, titleKey: 'HIGH', iconCssClass: 'fa fa-star red' },
+ { option: 1, titleKey: 'LOW', iconCssClass: 'mdi mdi-star-outline yellow' },
+ { option: 2, titleKey: 'MEDIUM', iconCssClass: 'mdi mdi-star orange' },
+ { option: 3, titleKey: 'HIGH', iconCssClass: 'mdi mdi-star red' },
]
}
}
diff --git a/docs/column-functionalities/editors.md b/docs/column-functionalities/editors.md
index 398911058..a8c9738e3 100644
--- a/docs/column-functionalities/editors.md
+++ b/docs/column-functionalities/editors.md
@@ -48,7 +48,7 @@ this.columnDefinitions = [
}
},
{
- id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark,
+ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmarkMaterial,
type: FieldType.number, editor: { model: Editors.checkbox }
}
];
@@ -91,7 +91,7 @@ this.columnDefinitions = [
];
```
-So to make it more clear, the `saveOutputType` is the format that will be sent to the `onCellChange` event, then the `outputType` is how the date will show up in the date picker (Flatpickr) and finally the `type` is basically the input format (coming from your dataset). Note however that each property are cascading, if 1 property is missing it will go to the next one until 1 is found... for example, on the `onCellChange` if you aren't defining `saveOutputType`, it will try to use `outputType`, if again none is provided it will try to use `type` and finally if none is provided it will use `FieldType.dateIso` as the default.
+So to make it more clear, the `saveOutputType` is the format that will be sent to the `onCellChange` event, then the `outputType` is how the date will show up in the date picker (Vanilla-Calendar) and finally the `type` is basically the input format (coming from your dataset). Note however that each property are cascading, if 1 property is missing it will go to the next one until 1 is found... for example, on the `onCellChange` if you aren't defining `saveOutputType`, it will try to use `outputType`, if again none is provided it will try to use `type` and finally if none is provided it will use `FieldType.dateIso` as the default.
## Perform an action After Inline Edit
#### Recommended way
@@ -325,12 +325,12 @@ By default HTML is not rendered and the `label` will simply show HTML as text. B
this.columnDefinitions = [
{
id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
editor: {
// display checkmark icon when True
enableRenderHtml: true,
- collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }],
+ collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }],
model: Editors.singleSelect
}
}
@@ -386,7 +386,7 @@ this.columnDefinitions = [{
id: 'start', name: 'Start Date', field: 'start',
editor: {
model: Editors.date,
- editorOptions: { minDate: 'today' }
+ editorOptions: { range: { date: 'today' } } as VanillaCalendarOption
}
}];
```
@@ -398,7 +398,7 @@ You could also define certain options as a global level (for the entire grid or
this.gridOptions = {
defaultEditorOptions: {
autocompleter: { debounceWaitMs: 150 }, // typed as AutocompleterOption
- date: { minDate: 'today' },
+ date: { range: { date: 'today' } },
longText: { cols: 50, rows: 5 }
}
}
diff --git a/docs/column-functionalities/editors/autocomplete-editor-kraaden.md b/docs/column-functionalities/editors/autocomplete-editor-kraaden.md
index a24c243f3..9042d78c9 100644
--- a/docs/column-functionalities/editors/autocomplete-editor-kraaden.md
+++ b/docs/column-functionalities/editors/autocomplete-editor-kraaden.md
@@ -69,7 +69,7 @@ By default HTML is not rendered and the `label` will simply show HTML as text. B
this.columnDefinitions = [
{
id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
editor: {
model: Editors.autocompleter,
diff --git a/docs/column-functionalities/editors/date-editor-(vanilla-calendar).md b/docs/column-functionalities/editors/date-editor-(vanilla-calendar).md
new file mode 100644
index 000000000..df1ecbec5
--- /dev/null
+++ b/docs/column-functionalities/editors/date-editor-(vanilla-calendar).md
@@ -0,0 +1,70 @@
+##### index
+- [Editor Options](#editor-options)
+- [Custom Validator](#custom-validator)
+- See the [Editors - Wiki](../Editors.md) for more general info about Editors (validators, event handlers, ...)
+
+### Information
+The Date Editor is provided through an external library named [Vanilla-Calendar-Picker](https://github.com/ghiscoding/vanilla-calendar-picker) (a fork of [Vanilla-Calendar-Pro](https://vanilla-calendar.pro)) and all options from that library can be added to your `editorOptions` (see below), so in order to add things like minimum date, disabling dates, ... just review all the [Vanilla-Calendar-Pro](https://vanilla-calendar.pro/docs/reference/additionally/settings) and then add them into `editorOptions`. Also just so you know, `editorOptions` is use by all other editors as well to expose external library like Autocompleter, Multiple-Select, etc...
+
+### Demo
+[Demo Page](https://ghiscoding.github.io/slickgrid-universal/#/example12) | [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts)
+
+### Editor Options
+You can use any of the Vanilla-Calendar [settings](https://vanilla-calendar.pro/docs/reference/additionally/settings) by adding them to `editorOptions` as shown below.
+
+> **Note** for easier implementation, you should import `VanillaCalendarOption` from Slickgrid-Universal common package.
+
+```ts
+import { type VanillaCalendarOption } from '@slickgrid-universal/common';
+
+prepareGrid() {
+ this.columnDefinitions = [
+ {
+ id: 'title', name: 'Title', field: 'title',
+ editor: {
+ model: Editors.date,
+ editorOptions: {
+ range: {
+ max: 'today',
+ disabled: ['2022-08-15', '2022-08-20'],
+ }
+ } as VanillaCalendarOption,
+ },
+ },
+ ];
+}
+```
+
+#### Grid Option `defaultEditorOptions
+You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultEditorOptions` Grid Option. Note that they are set via the editor type as a key name (`autocompleter`, `date`, ...) and then the content is the same as `editorOptions` (also note that each key is already typed with the correct editor option interface), for example
+
+```ts
+this.gridOptions = {
+ defaultEditorOptions: {
+ date: { range: { min: 'today' } }, // typed as VanillaCalendarOption
+ }
+}
+```
+
+### Custom Validator
+You can add a Custom Validator from an external function or inline (inline is shown below and comes from [Example 12](https://ghiscoding.github.io/slickgrid-universal/#/example12))
+```ts
+initializeGrid() {
+ this.columnDefinitions = [
+ {
+ id: 'title', name: 'Title', field: 'title',
+ editor: {
+ model: Editors.date,
+ required: true,
+ validator: (value, args) => {
+ const dataContext = args && args.item;
+ if (dataContext && (dataContext.completed && !value)) {
+ return { valid: false, msg: 'You must provide a "Finish" date when "Completed" is checked.' };
+ }
+ return { valid: true, msg: '' };
+ }
+ },
+ },
+ ];
+}
+```
\ No newline at end of file
diff --git a/docs/column-functionalities/editors/select-dropdown-editor.md b/docs/column-functionalities/editors/select-dropdown-editor.md
index d2915d465..d427556f2 100644
--- a/docs/column-functionalities/editors/select-dropdown-editor.md
+++ b/docs/column-functionalities/editors/select-dropdown-editor.md
@@ -158,12 +158,12 @@ By default HTML is not rendered and the `label` will simply show HTML as text. B
this.columnDefinitions = [
{
id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
editor: {
// display checkmark icon when True
enableRenderHtml: true,
- collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }],
+ collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }],
model: Editors.singleSelect
}
}
@@ -177,7 +177,7 @@ Sometime you wish that whenever you change your filter collection, you'd like th
this.columnDefinitions = [
{
id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
editor: {
// watch for any changes in the collection and re-render when that happens
diff --git a/docs/column-functionalities/filters/compound-filters.md b/docs/column-functionalities/filters/compound-filters.md
index 9fa3e82ec..3099b7ee7 100644
--- a/docs/column-functionalities/filters/compound-filters.md
+++ b/docs/column-functionalities/filters/compound-filters.md
@@ -3,7 +3,6 @@
- [SASS Styling](#sass-styling)
- [Compound Input Filter](#how-to-use-compoundinput-filter)
- [Compound Date Filter](#how-to-use-compounddate-filter)
- - [Filter Options (`FlatpickrOption` interface)](#filter-options-flatpickroption-interface)
- [Compound Operator List (custom list)](#compound-operator-list-custom-list)
- [Compound Operator Alternate Texts](#compound-operator-alternate-texts)
- [Filter Complex Object](../Input-Filter.md#how-to-filter-complex-objects)
@@ -11,7 +10,7 @@
- [How to avoid filtering when only Operator dropdown is changed?](#how-to-avoid-filtering-when-only-operator-dropdown-is-changed)
### Description
-Compound filters are a combination of 2 elements (Operator Select + Input Filter) used as a filter on a column. This is very useful to make it obvious to the user that there are Operator available and even more useful with a date picker (`Flatpickr`).
+Compound filters are a combination of 2 elements (Operator Select + Input Filter) used as a filter on a column. This is very useful to make it obvious to the user that there are Operator available and even more useful with a date picker (`Vanilla-Calendar`).
### Demo
[Demo Page](https://ghiscoding.github.io/aurelia-slickgrid/#/slickgrid/example4) / [Demo Component](https://github.com/ghiscoding/aurelia-slickgrid/blob/master/packages/demo/src/examples/slickgrid/example4.ts)
@@ -21,12 +20,9 @@ There are multiple types of compound filters available
1. `Filters.compoundInputText` adds an Operator combine to an Input of type `text` (alias to `Filters.compoundInput`).
2. `Filters.compoundInputNumber` adds an Operator combine to an Input of type `number`.
3. `Filters.compoundInputPassword` adds an Operator combine to an Input of type `password.
-4. `Filters.compoundDate` adds an Operator combine to a Date Picker (flatpickr).
+4. `Filters.compoundDate` adds an Operator combine to a Date Picker.
5. `Filters.compoundSlider` adds an Operator combine to a Slider Filter.
-### SASS Styling
-You can change the `$flatpickr-bgcolor` and any of the `$compound-filter-X` SASS [variables](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss#L660) for styling. For more info on how to use SASS in your project, read the [Wiki - Styling](../../styling/styling.md)
-
### How to use CompoundInput Filter
Simply set the flag `filterable` to True and use the filter type `Filters.compoundInput`. Here is an example with a full column definition:
```ts
@@ -125,34 +121,18 @@ this.gridOptions = {
};
```
-#### Filter Options (`FlatpickrOption` interface)
-All the available options that can be provided as `filterOptions` to your column definitions can be found under this [FlatpickrOption interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/flatpickrOption.interface.ts) and you should cast your `filterOptions` to that interface to make sure that you use only valid options of the [Flatpickr](https://flatpickr.js.org/) library.
+#### Filter Options (`VanillaCalendarOption` interface)
+All the available options that can be provided as `filterOptions` to your column definitions can be found under this [VanillaCalendarOption interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/vanillaCalendarOption.interface.ts) and you should cast your `filterOptions` with the expected interface to make sure that you use only valid settings of the [Vanilla-Calendar](https://vanilla-calendar.pro/docs/reference/additionally/settings) library.
```ts
filter: {
model: Filters.compoundDate,
filterOptions: {
- minDate: 'today'
- } as FlatpickrOption
+ range: { min: 'today' }
+ } as VanillaCalendarOption
}
```
-### Date Picker - Flatpickr Localization
-In order to use different locale, you will have to import whichever Flatpickr locale you need. The best place to do these imports is in your App Module so it's global and you do it only once. In some rare cases it might not be sufficient, you move the import into your first entry component, typically the App Component
-
-
-##### with WebPack
-```ts
-import { Aurelia } from 'aurelia-framework';
-import { GridOption } from 'aurelia-slickgrid';
-
-export function configure(aurelia: Aurelia) {
- aurelia.use.plugin(PLATFORM.moduleName('aurelia-slickgrid'), (config) => {
- // load necessary Flatpickr Locale(s), but make sure it's imported AFTER loading Aurelia-Slickgrid plugin
- import('flatpickr/dist/l10n/fr');
- });
-```
-
#### Grid Option `defaultFilterOptions
You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultFilterOptions` Grid Option. Note that they are set via the filter type as a key name (`autocompleter`, `date`, ...) and then the content is the same as `filterOptions` (also note that each key is already typed with the correct filter option interface), for example
@@ -160,8 +140,8 @@ You could also define certain options as a global level (for the entire grid or
this.gridOptions = {
defaultFilterOptions: {
// Note: that `date`, `select` and `slider` are combining both compound & range filters together
- date: { minDate: 'today' },
- select: { minHeight: 350 }, // typed as MultipleSelectOption
+ date: { range: { min: 'today' } }, // typed as VanillaCalendarOption
+ select: { minHeight: 350 }, // typed as MultipleSelectOption
slider: { sliderStartValue: 10 }
}
}
diff --git a/docs/column-functionalities/filters/range-filters.md b/docs/column-functionalities/filters/range-filters.md
index 45c444d74..f0b3f37ad 100644
--- a/docs/column-functionalities/filters/range-filters.md
+++ b/docs/column-functionalities/filters/range-filters.md
@@ -4,14 +4,10 @@
- [Using a Slider Range](#using-a-slider-range-filter)
- [Filter Options](#filter-options)
- [Using a Date Range](#using-a-date-range-filter)
- - [Filter Options (`FlatpickrOption` interface)](#filter-options-flatpickroption-interface)
- [Update Filters Dynamically](Input-Filter.md#update-filters-dynamically)
-### Demo
-[Demo Page](https://ghiscoding.github.io/aurelia-slickgrid/#/slickgrid/example23) | [Demo Component](https://github.com/ghiscoding/aurelia-slickgrid/blob/master/packages/demo/src/examples/slickgrid/example23.ts)
-
### Introduction
-Range filters allows you to search for a value between 2 min/max values, the 2 most common use case would be to filter between 2 numbers or dates, you can do that with the new Slider & Date Range Filters. The range can also be defined as inclusive (`>= 0 and <= 10`) or exclusive (`> 0 and < 10`), the default is exclusive but you can change that, see below for more info.
+Range filters allows you to search for a value between 2 min/max values, the 2 most common use case would be to filter between 2 numbers or dates, you can do that with the Slider & Date Range Filters. The range can also be defined as inclusive (`>= 0 and <= 10`) or exclusive (`> 0 and < 10`), the default is exclusive but you can change that, see below for more info.
### Using an Inclusive Range (default is Exclusive)
By default all the range filters are with exclusive range, which mean between value `x` and `y` but without including them. If you wish to include the `x` and `y` values, you can change that through the `operator` property.
@@ -38,8 +34,8 @@ this.columnDefinitions = [
You can use a regular input filter with the 2 dots (..) notation to represent a range, for example `5..90` would search between the value 5 and 90 (exclusive search unless specified).
##### Component
-```typescript
-import { Filters, Formatters, GridOption, OperatorType } from 'aurelia-slickgrid';
+```ts
+import { Filters, Formatters, GridOption, OperatorType } from '@slickgrid-universal/common';
export class GridBasicComponent {
columnDefinitions: Column[];
@@ -51,12 +47,12 @@ export class GridBasicComponent {
this.columnDefinitions = [
{
id: 'duration', field: 'duration', name: 'Duration',
- type: FieldType.number, // you can optionally specify that the data are numbers
+ type: 'number', // you can optionally specify that the data are numbers
filterable: true,
// input filter is the default, so you can skip this unless you want to specify the `operator`
filter: {
- model: Filters.input,
+ model: 'input',
operator: OperatorType.rangeInclusive // defaults to exclusive
}
},
@@ -73,8 +69,8 @@ export class GridBasicComponent {
The slider range filter is very useful if you can just want to use the mouse to drag/slide a cursor, you can also optionally show/hide the slider values on screen (hiding them would giving you more room without but without the precision).
##### Component
-```typescript
-import { Filters, Formatters, GridOption, SliderRangeOption, OperatorType } from 'aurelia-slickgrid';
+```ts
+import { Filters, Formatters, GridOption, SliderRangeOption, OperatorType } from '@slickgrid-universal/commomn';
export class GridBasicComponent {
columnDefinitions: Column[];
@@ -88,7 +84,7 @@ export class GridBasicComponent {
id: 'complete', name: '% Complete', field: 'percentComplete', headerKey: 'PERCENT_COMPLETE', minWidth: 120,
sortable: true,
formatter: Formatters.progressBar,
- type: FieldType.number,
+ type: 'number',
filterable: true,
filter: {
model: Filters.sliderRange,
@@ -96,7 +92,7 @@ export class GridBasicComponent {
operator: OperatorType.rangeInclusive, // optional, defaults to exclusive
params: { hideSliderNumbers: false }, // you can hide/show the slider numbers on both side
- // you can also optionally pass any option of the Slider filter
+ // you can also optionally pass any option of the Slider filter
filterOptions: { sliderStartValue: 5 } as SliderRangeOption
}
},
@@ -109,7 +105,7 @@ export class GridBasicComponent {
}
```
-##### Filter Options (`JQueryUiSliderOption` interface)
+##### Filter Options
All the available options that can be provided as `filterOptions` to your column definitions and you should try to cast your `filterOptions` to the specific interface as much as possible to make sure that you use only valid options of allowed by the targeted filter
```ts
@@ -128,7 +124,7 @@ You could also define certain options as a global level (for the entire grid or
this.gridOptions = {
defaultFilterOptions: {
// Note: that `date`, `select` and `slider` are combining both compound & range filters together
- date: { minDate: 'today' },
+ date: { range: { min: 'today' } },
select: { minHeight: 350 }, // typed as MultipleSelectOption
slider: { sliderStartValue: 10 }
}
@@ -136,29 +132,31 @@ this.gridOptions = {
```
### Using a Date Range Filter
-The date range filter allows you to search data between 2 dates (it uses [Flatpickr Range](https://flatpickr.js.org/examples/#range-calendar) feature).
+The date range filter allows you to search data between 2 dates (it uses [Vanilla-Calendar Range](https://vanilla-calendar.pro/) feature).
##### Component
-import { Filters, FlatpickrOption, Formatters, GridOption, OperatorType } from '@slickgrid-universal/common';
+import { Filters, Formatters, GridOption, OperatorType, VanillaCalendarOption } from '@slickgrid-universal/common';
```typescript
-export class GridBasicComponent implement OnInit {
+export class GridBasicComponent {
columnDefinitions: Column[];
gridOptions: GridOption;
dataset: any[];
- ngOnInit(): void {
+ attached(): void {
// your columns definition
this.columnDefinitions = [
{
- id: 'finish', name: 'Finish', field: 'finish', nameKey: 'FINISH', formatter: Formatters.dateIso, sortable: true, minWidth: 75, width: 120, exportWithFormatter: true,
+ id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH',
+ minWidth: 75, width: 120, exportWithFormatter: true,
+ formatter: Formatters.dateIso, sortable: true,
type: FieldType.date,
filterable: true,
filter: {
model: Filters.dateRange,
- // override any of the Flatpickr options through "filterOptions"
- editorOptions: { minDate: 'today' } as FlatpickrOption
+ // override any of the Vanilla-Calendar options through "filterOptions"
+ editorOptions: { range: { min: 'today' } } as VanillaCalendarOption
}
},
];
@@ -170,14 +168,14 @@ export class GridBasicComponent implement OnInit {
}
```
-##### Filter Options (`FlatpickrOption` interface)
-All the available options that can be provided as `filterOptions` to your column definitions can be found under this [FlatpickrOption interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/flatpickrOption.interface.ts) and you should cast your `filterOptions` to that interface to make sure that you use only valid options of the [Flatpickr](https://flatpickr.js.org/) library.
+#### Filter Options (`VanillaCalendarOption` interface)
+All the available options that can be provided as `filterOptions` to your column definitions can be found under this [VanillaCalendarOption interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/vanillaCalendarOption.interface.ts) and you should cast your `filterOptions` with the expected interface to make sure that you use only valid settings of the [Vanilla-Calendar](https://vanilla-calendar.pro/docs/reference/additionally/settings) library.
```ts
filter: {
- model: Filters.dateRange,
+ model: Filters.compoundDate,
filterOptions: {
- minDate: 'today'
- } as FlatpickrOption
+ range: { min: 'today' }
+ } as VanillaCalendarOption
}
```
diff --git a/docs/column-functionalities/filters/select-filter.md b/docs/column-functionalities/filters/select-filter.md
index 30ce345cd..121b6050f 100644
--- a/docs/column-functionalities/filters/select-filter.md
+++ b/docs/column-functionalities/filters/select-filter.md
@@ -117,7 +117,7 @@ For the Select (dropdown) filter, you can fill in the "labelKey" property, if fo
// define you columns, in this demo Effort Driven will use a Select Filter
this.columnDefinitions = [
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
filterable: true,
filter: {
@@ -133,7 +133,7 @@ You could also use the `enableTranslateLabel` which will translate regardless of
// define you columns, in this demo Effort Driven will use a Select Filter
this.columnDefinitions = [
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
filterable: true,
filter: {
@@ -150,7 +150,7 @@ What if your select options (collection) have totally different value/label pair
// define you columns, in this demo Effort Driven will use a Select Filter
this.columnDefinitions = [
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
filterable: true,
filter: {
@@ -175,7 +175,7 @@ What if you want to use `customStructure` and translate the labels? Simply pass
// define you columns, in this demo Effort Driven will use a Select Filter
this.columnDefinitions = [
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
filterable: true,
filter: {
@@ -205,7 +205,7 @@ Note: the defaults for single & multiple select filters are different
// define you columns, in this demo Effort Driven will use a Select Filter
this.columnDefinitions = [
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
filterable: true,
filter: {
@@ -229,7 +229,7 @@ Full example:
// define you columns, in this demo Effort Driven will use a Select Filter
this.columnDefinitions = [
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
filterable: true,
filter: {
@@ -266,7 +266,7 @@ for (let i = 0; i < 365; i++) {
this.columnDefinitions = [
{ id: 'duration', name: 'Duration', field: 'duration',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
filterable: true,
filter: {
@@ -316,7 +316,7 @@ What if you want to use `customStructure` and translate the labels? Simply pass
// define you columns, in this demo Effort Driven will use a Select Filter
this.columnDefinitions = [
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
filterable: true,
filter: {
@@ -341,7 +341,7 @@ You can also pre-sort or pre-filter the collection given to the multipleSelect/s
// define you columns, in this demo Effort Driven will use a Select Filter
this.columnDefinitions = [
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
filterable: true,
filter: {
@@ -413,13 +413,13 @@ By default HTML is not rendered and the `label` will simply show HTML as text. B
this.columnDefinitions = [
{
id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
- formatter: Formatters.checkmark,
+ formatter: Formatters.checkmarkMaterial,
type: FieldType.boolean,
filterable: true,
filter: {
// display checkmark icon when True
enableRenderHtml: true,
- collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }],
+ collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }],
model: Filters.singleSelect
}
}
diff --git a/docs/column-functionalities/filters/styling-filled-filters.md b/docs/column-functionalities/filters/styling-filled-filters.md
index 8ac7c970b..895d103f0 100644
--- a/docs/column-functionalities/filters/styling-filled-filters.md
+++ b/docs/column-functionalities/filters/styling-filled-filters.md
@@ -1,55 +1,45 @@
-You can style any (or all) of the Filter(s) when they have value, the lib will automatically add a `filled` CSS class which you can style as your wish. There is no style by default, if you wish to add styling, you will be required to add your own.
+You can style any (or all) of the Filter(s) when they have value, the lib will automatically add a `filled` CSS class which you can style as your wish. There is no style by default, if you wish to add styling, you will be required to add your own.
-## Styled Example
+## Styled Example
## Code example
-For example, the print screen shown earlier was styled using this piece of SASS (`.scss`) code. Also note that the demo adds a Font-Awesome icon which can be used with `font-family: "FontAwesome"` and the relevent unicode character, for example the filter icon is `content: " \f0b0"`. You can basically add a lot of different styling to your populated filters.
+For example, the print screen shown earlier was styled using this piece of SASS (`.scss`) code. You can customize the styling to your liking.
```scss
-$filter-filled-bg-color: darkorange;
-
-.search-filter.filled {
- // color: rgb(189, 104, 1);
- // font-weight: bold;
- background-color: $filter-filled-bg-color;
- .ms-choice {
- // color: rgb(189, 104, 1);
- // font-weight: bold;
- background-color: $filter-filled-bg-color;
- }
-
-
- input, input.flatpickr-input {
- // border: 1px solid darken(rgb(204, 204, 204), 15%) !important;
- // color: rgb(189, 104, 1);
- // font-weight: bold;
- background-color: $filter-filled-bg-color !important;
+$slick-filled-filter-color: $slick-form-control-focus-border-color;
+$slick-filled-filter-border: $slick-form-control-border;
+$slick-filled-filter-box-shadow: $slick-form-control-focus-border-color;
+$slick-filled-filter-font-weight: 400;
+
+.slick-headerrow {
+ input.search-filter.filled,
+ .search-filter.filled input,
+ .search-filter.filled .date-picker input,
+ .search-filter.filled .input-group-addon.slider-value,
+ .search-filter.filled .input-group-addon.slider-range-value,
+ .search-filter.filled .input-group-addon select {
+ color: $slick-filled-filter-color;
+ font-weight: $slick-filled-filter-font-weight;
+ border: $slick-filled-filter-border;
+ box-shadow: $slick-filled-filter-box-shadow;
+ &.input-group-prepend {
+ border-right: 0;
+ }
+ &.input-group-append {
+ border-left: 0;
+ }
}
- /*
- &.ms-parent, .flatpickr > input, .input-group > input {
- border: 1px solid darken(rgb(204, 204, 204), 15%) !important;
- }
- */
-
- div.flatpickr:after, button > div:after, & + span:after, .input-group > span:after {
- font-family: "FontAwesome";
- font-size: 75%;
- content: " \f0b0";
- position: absolute;
- top: 2px;
- right: 5px;
- z-index: 1000;
- color: #ca880f;
- }
-
- .ms-choice > div:after {
- top: -4px;
- right: 16px;
+ .search-filter.filled .input-group-prepend select {
+ border-right: 0;
}
- & + span:after {
- top: 6px;
- right: 10px;
+ .search-filter.filled .ms-choice {
+ box-shadow: $slick-filled-filter-box-shadow;
+ border:$slick-filled-filter-border;
+ span {
+ font-weight: $slick-filled-filter-font-weight;
+ color: $slick-filled-filter-color;
+ }
}
}
```
diff --git a/docs/column-functionalities/formatters.md b/docs/column-functionalities/formatters.md
index a0e0b35d8..02bfb5713 100644
--- a/docs/column-functionalities/formatters.md
+++ b/docs/column-functionalities/formatters.md
@@ -20,7 +20,7 @@
`Formatters` are functions that can be used to change and format certain column(s) in the grid. Please note that it does not alter the input data, it simply changes the styling by formatting the data differently to the screen (what the user visually see).
-A good example of a `Formatter` could be a column name `isActive` which is a `boolean` field with input data as `True` or `False`. User would prefer to simply see a checkbox as a visual indication representing the `True` flag, for this behavior you can use `Formatters.checkmark` which will use [Font-Awesome](http://fontawesome.io/icons/) icon of `fa-check` when `True` or an empty string when `False`.
+A good example of a `Formatter` could be a column name `isActive` which is a `boolean` field with input data as `True` or `False`. User would prefer to simply see a checkbox as a visual indication representing the `True` flag, for this behavior you can use `Formatters.checkmark` which will use Material Design icon of `mdi-check` when `True` or an empty string when `False`.
For a [UI sample](#ui-sample), scroll down below.
@@ -34,7 +34,6 @@ For a [UI sample](#ui-sample), scroll down below.
* `arrayObjectToCsv`: Takes an array of complex objects converts it to a comma delimited string.
* `arrayToCsv` : takes an array of text and returns it as CSV string
-* `checkmark` : uses Font-Awesome [(fa-check)](http://fontawesome.io/icon/check/)
* `checkmarkMaterial` use Material Design to display a checkmark icon
* `collection`: Looks up values from the columnDefinition.params.collection property and displays the label in CSV or string format
* `complexObject`: takes a complex object (with a `field` that has a `.` notation) and pull correct value, there are multiple ways to use it
@@ -176,14 +175,13 @@ export interface FormatterResultObject {
}
```
-#### Example of a Custom Formatter with HTML string
-
-For example, we will use `Font-Awesome` with a `boolean` as input data, and display a (fire) icon when `True` or a (snowflake) when `False`. This custom formatter is actually display in the [UI sample](#ui-sample) shown below.
+### Example of a Custom Formatter with HTML string
+For example, we will use our optional SVG icons `.mdi` with a `boolean` as input data, and display a (fire) icon when `True` or a (snowflake) when `False`. This custom formatter is actually display in the [UI sample](#ui-sample) shown below.
```ts
// create a custom Formatter with the Formatter type
-const myCustomCheckboxFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid?: any) =>
- value ? `` : '';
+const myCustomCheckboxFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) =>
+ value ? `` : '';
```
#### Example with `FormatterResultObject` instead of a string
@@ -193,7 +191,7 @@ Using this object return type will provide the user the same look and feel, it w
```ts
// create a custom Formatter and returning a string and/or an object of type FormatterResultObject
const myCustomCheckboxFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid?: any) =>
- value ? { addClasses: 'fa fa-fire', text: '', tooltip: 'burning fire' } : '';
+ value ? { addClasses: 'mdi mdi-fire', text: '', tooltip: 'burning fire' } : '';
```
### Example of Custom Formatter with Native DOM Element
diff --git a/docs/getting-started/quick-start.md b/docs/getting-started/quick-start.md
index a5e75437d..7257a77a5 100644
--- a/docs/getting-started/quick-start.md
+++ b/docs/getting-started/quick-start.md
@@ -8,12 +8,12 @@ The easiest is to simply clone the [Aurelia-Slickgrid-Demos](https://github.com/
### 1. Install NPM Package
Install the `Aurelia-Slickgrid`, `Bootstrap` and potentially a font library like `Font-Awesome`
```bash
-npm install --save aurelia-slickgrid bootstrap font-awesome # the last deps are optional
+npm install --save aurelia-slickgrid bootstrap # the last deps are optional
# install required @types
npm install --save-dev @types/sortablejs @types/dompurify
```
-_Note: `Bootstrap` and `Font-Awesome` are both optional, you can use any other libs too_
+_Note: `Bootstrap` is optional, you can use any other lib that you want_
### 2. CSS / SASS Styles
Load the default Bootstrap theme style or scroll down for SASS customization.
@@ -24,8 +24,6 @@ Default compiled `css` (if you use the plain Bootstrap Theme CSS, you could simp
##### WebPack
```typescript
import 'bootstrap/dist/css/bootstrap.css';
-import 'font-awesome/css/font-awesome.css';
-import 'flatpickr/dist/flatpickr.min.css';
import 'multiple-select-modified/src/multiple-select.css';
// if you use CSS instead of SASS
@@ -62,9 +60,6 @@ To provide locales other than English (default locale), you have 2 options that
1. Using [Custom Locale](../localization/localization-with-custom-locales.md), that is when you use **only 1** locale (other thank English)... this is a new feature starting from version `2.10.0` and up.
2. Using [Localization with I18N](../localization/localization.md), that is when you want to use multiple locales dynamically.
-#### Date Picker - Flatpickr Localization
-If you use multiple locale, you will also need to import necessary Flatpickr Locale, for more info see this [Flatpickr Localization Wiki](../column-functionalities/filters/compound-filters.md)
-
### 5. Create a basic grid
#### View
```html
diff --git a/docs/grid-functionalities/composite-editor-modal.md b/docs/grid-functionalities/composite-editor-modal.md
index 71852c6ef..85a0330b3 100644
--- a/docs/grid-functionalities/composite-editor-modal.md
+++ b/docs/grid-functionalities/composite-editor-modal.md
@@ -403,6 +403,7 @@ export class GridExample {
if (columnDef.id === 'completed') {
this.compositeEditorInstance.changeFormEditorOption('percentComplete', 'filter', formValues.completed);
this.compositeEditorInstance.changeFormEditorOption('product', 'minLength', 3);
+ this.compositeEditorInstance.changeFormEditorOption('finish', 'range', { min: 'today' });
}
}
}
@@ -439,7 +440,7 @@ export class GridExample {
if (columnDef.id === 'completed') {
this.compositeEditorInstance.changeFormEditorOption('percentComplete', 'filter', true); // multiple-select.js, show filter in dropdown
this.compositeEditorInstance.changeFormEditorOption('product', 'minLength', 3); // autocomplete, change minLength char to type
- this.compositeEditorInstance.changeFormEditorOption('finish', 'minDate', 'today'); // flatpickr date picker, change minDate to today
+ this.compositeEditorInstance.changeFormEditorOption('finish', 'range', { min: 'today' });
}
}
}
diff --git a/docs/grid-functionalities/context-menu.md b/docs/grid-functionalities/context-menu.md
index 76697547b..458b21bdd 100644
--- a/docs/grid-functionalities/context-menu.md
+++ b/docs/grid-functionalities/context-menu.md
@@ -42,7 +42,7 @@ this.gridOptions = {
console.log(args.dataContext, args.column); // action callback.. do something
}
},
- { command: 'help', title: 'HELP', iconCssClass: 'fa fa-question-circle', positionOrder: 62 },
+ { command: 'help', title: 'HELP', iconCssClass: 'mdi mdi-help-circle', positionOrder: 62 },
// you can add sub-menus by adding nested `commandItems`
{
// we can also have multiple nested sub-menus
@@ -72,8 +72,8 @@ this.gridOptions = {
hideCloseButton: false,
optionTitle: 'Change Effort Driven Flag', // optional, add title
optionItems: [
- { option: true, title: 'True', iconCssClass: 'fa fa-check-square-o' },
- { option: false, title: 'False', iconCssClass: 'fa fa-square-o' },
+ { option: true, title: 'True', iconCssClass: 'mdi mdi-check-box-outline' },
+ { option: false, title: 'False', iconCssClass: 'mdi mdi-checkbox-blank-outline' },
{ divider: true, command: '', positionOrder: 60 },
],
// subscribe to Context Menu onOptionSelected event (or use the "action" callback on each option)
@@ -157,9 +157,9 @@ contextMenu: {
return !dataContext.completed;
},
},
- { option: 1, iconCssClass: 'fa fa-star-o yellow', title: 'Low' },
- { option: 2, iconCssClass: 'fa fa-star-half-o orange', title: 'Medium' },
- { option: 3, iconCssClass: 'fa fa-star red', title: 'High' },
+ { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' },
+ { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' },
+ { option: 3, iconCssClass: 'mdi mdi-star red', title: 'High' },
]
}
```
@@ -170,9 +170,9 @@ It works exactly like the rest of the library when `enableTranslate` is set, all
contextMenu: {
optionTitleKey: 'COMMANDS', // optionally pass a title to show over the Options
optionItems: [
- { option: 1, titleKey: 'LOW', iconCssClass: 'fa fa-star-o yellow' },
- { option: 2, titleKey: 'MEDIUM', iconCssClass: 'fa fa-star-half-o orange' },
- { option: 3, titleKey: 'HIGH', iconCssClass: 'fa fa-star red' },
+ { option: 1, titleKey: 'LOW', iconCssClass: 'mdi mdi-star-outline yellow' },
+ { option: 2, titleKey: 'MEDIUM', iconCssClass: 'mdi mdi-star orange' },
+ { option: 3, titleKey: 'HIGH', iconCssClass: 'mdi mdi-star red' },
]
}
```
@@ -206,10 +206,10 @@ contextMenu: {
hideExportTextDelimitedCommand: true,
hideMenuOnScroll: true,
hideOptionSection: false,
- iconCopyCellValueCommand: 'fa fa-clone',
- iconExportCsvCommand: 'fa fa-download',
- iconExportExcelCommand: 'fa fa-file-excel-o text-success',
- iconExportTextDelimitedCommand: 'fa fa-download',
+ iconCopyCellValueCommand: 'mdi mdi-content-copy',
+ iconExportCsvCommand: 'mdi mdi-download',
+ iconExportExcelCommand: 'mdi mdi-file-excel-outline text-success',
+ iconExportTextDelimitedCommand: 'mdi mdi-download',
width: 200,
},
```
diff --git a/docs/grid-functionalities/export-to-excel.md b/docs/grid-functionalities/export-to-excel.md
index a2041e402..96acfa161 100644
--- a/docs/grid-functionalities/export-to-excel.md
+++ b/docs/grid-functionalities/export-to-excel.md
@@ -63,7 +63,7 @@ defineGrid() {
- So basically, if `exportWithFormatter` is set to True in the `excelExportOptions` of the Grid Options, but is set to False in the Column Definition, then the result will be False and will not evaluate it's Formatter.
- `exportCustomFormatter` will let you choose a different Formatter when exporting
- For example, you might have `formatter: Formatters.checkmark` but you want to see a boolean translated value, in this case you would define an extra property of `customFormatter: Formatters.translateBoolean`.
-- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `True` will export `True` without any HTML (data is sanitized).
+- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `True` will export `True` without any HTML (data is sanitized).
- this flag can be used in the Grid Options (all columns) or in a Column Definition (per column).
#### Grid Options
@@ -78,7 +78,7 @@ Inside the column definition there are couple of flags you can set in `excelExpo
- `sheetName` allows you to change the Excel Sheet Name (defaults to "Sheet1")
- `groupingColumnHeaderTitle` The column header title (at A0 in Excel) of the Group by. If nothing is provided it will use "Group By"
- `groupingAggregatorRowText` The default text to display in 1st column of the File Export, which will identify that the current row is a Grouping Aggregator
-- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `True` will export `True` without any HTML (data is sanitized).
+- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `True` will export `True` without any HTML (data is sanitized).
- this flag can be used in the Grid Options (all columns) or in a Column Definition (per column).
- `customExcelHeader` is a callback method that can be used to provide a custom Header Title to your Excel File
@@ -106,7 +106,7 @@ defineGrid() {
formatter: Formatters.dateIso // this formatter will be used for the export
},
{ id: 'completed', name: 'Completed', field: 'completed', headerKey: 'COMPLETED',
- formatter: Formatters.checkmark, // will display a checkmark icon in the UI
+ formatter: Formatters.checkmarkMaterial, // will display a checkmark icon in the UI
customFormatter: Formatters.translateBoolean, // will export a translated value, e.g. in French, True would show as 'Vrai'
}
];
@@ -242,7 +242,7 @@ If you have lots of data, you might want to show a spinner telling the user that
#### View
```html
-
+
True` will export `True` without any HTML (data is sanitized).
+- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `True` will export `True` without any HTML (data is sanitized).
- this flag can be used in the Grid Options (all columns) or in a Column Definition (per column).
#### Behaviors
@@ -81,7 +81,7 @@ defineGrid() {
formatter: Formatters.dateIso // this formatter will be used for the export
},
{ id: 'completed', name: 'Completed', field: 'completed', headerKey: 'COMPLETED',
- formatter: Formatters.checkmark, // will display a checkmark icon in the UI
+ formatter: Formatters.checkmarkMaterial, // will display a checkmark icon in the UI
customFormatter: Formatters.translateBoolean, // will export a translated value, e.g. in French, True would show as 'Vrai'
}
];
@@ -140,7 +140,7 @@ If you have lots of data, you might want to show a spinner telling the user that
#### View
```html
-
+
: {{ isFrozenBottom ? 'Bottom' : 'Top' }}
diff --git a/docs/grid-functionalities/global-options.md b/docs/grid-functionalities/global-options.md
index 5f1eed3c2..311f6fe05 100644
--- a/docs/grid-functionalities/global-options.md
+++ b/docs/grid-functionalities/global-options.md
@@ -9,7 +9,7 @@ export function configure(aurelia) {
aurelia.use.plugin('aurelia-slickgrid', config => {
// change any of the default global options
// for example we can change the Grid Menu (hamburger menu) default icon
- config.options.gridMenu.iconCssClass = 'fa fa-ellipsis-v';
+ config.options.gridMenu.iconCssClass = 'mdi mdi-dots-vertical';
});
aurelia.start().then(() => aurelia.setRoot('app'));
@@ -23,7 +23,7 @@ export function configure(aurelia) {
aurelia.use.plugin(PLATFORM.moduleName('aurelia-slickgrid'), config => {
// change any of the default global options
// for example we can change the Grid Menu (hamburger menu) default icon
- config.options.gridMenu.iconCssClass = 'fa fa-ellipsis-v';
+ config.options.gridMenu.iconCssClass = 'mdi mdi-dots-vertical';
});
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
diff --git a/docs/grid-functionalities/grid-menu.md b/docs/grid-functionalities/grid-menu.md
index 3e900de91..c1abf2b77 100644
--- a/docs/grid-functionalities/grid-menu.md
+++ b/docs/grid-functionalities/grid-menu.md
@@ -30,18 +30,18 @@ this.gridOptions = {
gridMenu: {
commandTitle: 'Custom Commands',
columnTitle: 'Columns',
- iconCssClass: 'fa fa-ellipsis-v',
+ iconCssClass: 'mdi mdi-dots-vertical',
menuWidth: 17,
resizeOnShowHeaderRow: true,
commandItems: [
{
- iconCssClass: 'fa fa-filter text-danger',
+ iconCssClass: 'mdi mdi-filter text-danger',
title: 'Clear All Filters',
disabled: false,
command: 'clear-filter'
},
{
- iconCssClass: 'fa fa-random',
+ iconCssClass: 'mdi mdi-flip-vertical',
title: 'Toggle Filter Row',
disabled: false,
command: 'toggle-filter'
@@ -108,16 +108,16 @@ For more info on all the available properties of the custom commands, you can re
### How to change an icon of all default commands?
You can change any of the default command icon(s) by changing the `icon[X-command]`, for example, see below for the defaults.
-```typescript
+```ts
this.gridOptions = {
enableGridMenu: true,
gridMenu: {
- iconClearAllFiltersCommand: 'fa fa-filter text-danger'
- iconClearAllSortingCommand: 'fa fa-unsorted text-danger',
- iconExportCsvCommand: 'fa fa-download',
- iconExportTextDelimitedCommand: 'fa fa-download',
- iconRefreshDatasetCommand: 'fa fa-refresh',
- iconToggleFilterCommand: 'fa fa-random',
+ iconClearAllFiltersCommand: 'mdi mdi-filter-remove-outline'
+ iconClearAllSortingCommand: 'mdi mdi-sort-variant-off',
+ iconExportCsvCommand: 'mdi mdi-download',
+ iconExportTextDelimitedCommand: 'mdi mdi-download',
+ iconRefreshDatasetCommand: 'mdi mdi-sync',
+ iconToggleFilterCommand: 'mdi-flip-vertical',
},
};
```
diff --git a/docs/grid-functionalities/grouping-aggregators.md b/docs/grid-functionalities/grouping-aggregators.md
index e1b724f48..ef73f6266 100644
--- a/docs/grid-functionalities/grouping-aggregators.md
+++ b/docs/grid-functionalities/grouping-aggregators.md
@@ -213,21 +213,19 @@ To "Clear all Grouping", "Collapse all Groups" and "Expand all Groups", we can s
```
### Styling (change icons)
-The current icons are Font Awesome chevron (right/down), however if you wish to use +/- icons. You can simply update the SASS variables to use whichever icons (or even Font Family icon) you desire. The SASS variables you can change are
+The current icons are chevron (right/down), however if you wish to use +/- icons. You can simply update the SASS variables to use whichever SVG icon paths. The SASS variables you can change are
```css
-$icon-group-color: $primary-color;
-$icon-group-expanded: "\f107";
-$icon-group-collapsed: "\f105";
-$icon-group-font-size: ($icon-font-size + 2px);
-$icon-group-font-weight: bold;
-$icon-group-margin-right: 2px;
-$icon-group-height: 20px;
-$icon-group-width: 14px;
+$slick-icon-group-color: $primary-color;
+$slick-icon-group-expanded-svg-path: "M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z";
+$slick-icon-group-collapsed-svg-path: "M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z";
+$slick-icon-group-font-size: 20px;
+$slick-icon-group-font-weight: bold;
+$slick-icon-group-margin-right: 2px;
/* Grouping Totals Formatter */
-$group-totals-formatter-color: gray;
-$group-totals-formatter-bgcolor: white;
-$group-totals-formatter-font-size: 14px;
+$slick-group-totals-formatter-color: gray;
+$slick-group-totals-formatter-bgcolor: white;
+$slick-group-totals-formatter-font-size: 14px;
```
For more info on SASS styling and variables, please read the [Wiki - SASS Styling](../styling/styling.md),
diff --git a/docs/grid-functionalities/header-menu-header-buttons.md b/docs/grid-functionalities/header-menu-header-buttons.md
index 5bef92b17..c8e5fe063 100644
--- a/docs/grid-functionalities/header-menu-header-buttons.md
+++ b/docs/grid-functionalities/header-menu-header-buttons.md
@@ -64,9 +64,9 @@ You can change any of the default command icon(s) by changing the `icon[X-comman
this.gridOptions = {
enableHeaderMenu: true,
headerMenu: {
- iconColumnHideCommand: 'fa fa-times'
- iconSortAscCommand: 'fa fa-sort-asc'
- iconSortDescCommand: 'fa fa-sort-desc',
+ iconColumnHideCommand: 'mdi mdi-close'
+ iconSortAscCommand: 'mdi mdi-sort-ascending'
+ iconSortDescCommand: 'mdi mdi-sort-descending',
},
};
```
diff --git a/docs/grid-functionalities/row-detail.md b/docs/grid-functionalities/row-detail.md
index 782a9c78e..25358d21f 100644
--- a/docs/grid-functionalities/row-detail.md
+++ b/docs/grid-functionalities/row-detail.md
@@ -136,7 +136,7 @@ Most of the time we would get data asynchronously, during that time we can show
###### View (`preload.html`)
```html
-
Loading...
+
Loading...
```
@@ -184,7 +184,7 @@ Same concept as the preload, we pass an Aurelia ViewModel to the `viewModel` tha
${model.start | dateFormat: 'YYYY-MM-DD'}
${model.finish | dateFormat: 'YYYY-MM-DD'}
-
+
@@ -192,7 +192,7 @@ Same concept as the preload, we pass an Aurelia ViewModel to the `viewModel` tha
Find out who is the Assignee
-
+
@@ -217,9 +217,9 @@ export class DetailViewCustomElement {
bind(bindingContext, overrideContext) {
if (bindingContext.model) {
this.model = bindingContext.model;
- } else if (overrideContext && overrideContext.bindingContext && overrideContext.bindingContext.model) {
+ } else if (overrideContext?.bindingContext?.model) {
this.model = overrideContext.bindingContext.model;
- } else if (overrideContext && overrideContext.parentOverrideContext && overrideContext.parentOverrideContext.bindingContext && overrideContext.parentOverrideContext.bindingContext.model) {
+ } else if (overrideContext?.parentOverrideContext?.bindingContext?.model) {
this.model = overrideContext.parentOverrideContext.bindingContext.model;
}
}
diff --git a/docs/localization/localization-with-custom-locales.md b/docs/localization/localization-with-custom-locales.md
index ddc952782..8f8342219 100644
--- a/docs/localization/localization-with-custom-locales.md
+++ b/docs/localization/localization-with-custom-locales.md
@@ -62,6 +62,3 @@ export class MyGrid {
#### 3. Use the lib (without I18N)
There's nothing else to do, just use the library without defining or providing I18N and you're good to go. Read through the Wiki of the [HOWTO](../getting-started/quick-start.md) for basic grid samples.
-
-### Date Picker - Flatpickr Localization
-If you use multiple locale, you will also need to import necessary Flatpickr Locale, for more info see this [Flatpickr Localization Wiki](../column-functionalities/filters/compound-filters.md#date-picker---flatpickr-localization)
diff --git a/docs/localization/localization.md b/docs/localization/localization.md
index c1988114d..faf23bd67 100644
--- a/docs/localization/localization.md
+++ b/docs/localization/localization.md
@@ -145,6 +145,3 @@ The final step is of course the actual translations. There's multiple ways to co
"copy:i18n": "cross-env copyfiles -f node_modules/aurelia-slickgrid/i18n/*.json assets/i18n"
```
If you want to manually re-create the translation in your own files, the list of translations that you will need are displayed in the [asset i18n](https://github.com/ghiscoding/aurelia-slickgrid/tree/master/aurelia-slickgrid/assets/i18n) translation folder (from that file, you need all translations shown before the 'BILLING', the next few ones are for the demo page only).
-
-### Date Picker - Flatpickr Localization
-If you use multiple locale, you will also need to import necessary Flatpickr Locale, for more info see this [Flatpickr Localization Wiki](../column-functionalities/filters/compound-filters.md#date-picker---flatpickr-localization)
diff --git a/docs/styling/dark-mode.md b/docs/styling/dark-mode.md
index 7fc0b211a..05445682a 100644
--- a/docs/styling/dark-mode.md
+++ b/docs/styling/dark-mode.md
@@ -83,7 +83,7 @@ export class MyDemo {
},
// you can also change the icon and/or command name
- iconToggleDarkModeCommand: 'fa fa-moon-o',
+ iconToggleDarkModeCommand: 'mdi mdi-brightness-4',
commandLabels: {
toggleDarkModeCommand: 'Toggle Dark Mode',
},
diff --git a/docs/styling/styling.md b/docs/styling/styling.md
index 8f4abf484..271ca45ff 100644
--- a/docs/styling/styling.md
+++ b/docs/styling/styling.md
@@ -2,7 +2,6 @@
- [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 or scroll down for SASS customization.
@@ -12,39 +11,47 @@ Default compiled `css` (if you use the plain Bootstrap Theme CSS, you could simp
##### Aurelia-CLI
```html
-
-
-
```
##### WebPack
```typescript
import 'bootstrap/dist/css/bootstrap.css';
-import 'font-awesome/css/font-awesome.css';
-import 'flatpickr/dist/flatpickr.min.css';
// if you use CSS instead of SASS
import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
```
-#### SASS (scss)
-You could also compile the SASS files with your own customization, for that simply take any of the [_variables.scss](https://github.com/ghiscoding/aurelia-slickgrid/blob/master/aurelia-slickgrid/src/aurelia-slickgrid/styles/_variables.scss) (without the `!default` flag) variable from the file and make sure to import the Bootstrap Theme afterward. For example, you could modify your `style.scss` with the following changes:
+### 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 */
+@import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
+
+// or other Themes
+// @import '@slickgrid-universal/common/dist/styles/styles/css/slickgrid-theme-material.css';
+// @import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
+```
+##### with SASS
```scss
-/* for example, let's change the mouse hover color */
+/* change any SASS variables before loading the theme */
+$slick-primary-color: green;
$slick-cell-odd-background-color: lightyellow;
$slick-row-mouse-hover-color: lightgreen;
-/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '../node_modules/@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
-
-/* or with */
+/* style.scss */
@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+
+// or other Themes
+// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
+// @import '@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](/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.
+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
@@ -57,25 +64,187 @@ For example, if we take the following 3 SASS variables (`$slick-header-menu-disp
}
```
-**NOTE:** you could use `:host` to only change current grid styling, **however** there are many DOM elements that are appended to the Document `body` (Grid Menu, Column Picker, Select Filter/Editor, Context Menu, ...) and the style **will not** be applied with `:host` and so in most cases you would want to use `:root` to make a global change which will also work with elements appended to the `body`.
+> **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
+$slick-primary-color: blue;
+$slick-icon-group-color: $slick-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;
+
+// then on the last line, import the Theme that you wish to override
+@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+```
+
+> **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
-### Bootstrap support
-The creation of `Aurelia-Slickgrid` works with `Bootstrap 4` and event the last `Bootstrap 5` version.
-- [Bootstrap 4 demo](https://ghiscoding.github.io/aurelia-slickgrid-bs4-demo) / [examples repo](https://github.com/ghiscoding/aurelia-slickgrid-bs4-demo/tree/master/src/examples/slickgrid)
-- [Bootstrap 5 demo](https://ghiscoding.github.io/aurelia-slickgrid) / [examples repo](https://github.com/ghiscoding/aurelia-slickgrid-demos/tree/master/webpack-bs5-demo)
+
-### Other UI frameworks
-Note that Bootstrap is totally optional, you could use any other UI framework, also 2 new themes were added in version `2.18.x`, first is a Material Design Theme and also a Salesforce Theme.
-- Material Theme - [demo](https://ghiscoding.github.io/aurelia-slickgrid/#/slickgrid/example27)
-- Salesforce Theme - [demo](https://ghiscoding.github.io/aurelia-slickgrid/#/slickgrid/example28)
+### 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`).
-For more demo, you can also take a look at my other repo (Slickgrid-Universal) [demos](https://ghiscoding.github.io/slickgrid-universal). Also, note that Bootstrap is completely optional (and has been for some time), the other demo that I mentioned was created using only the [Bulma](https://bulma.io/documentation) CSS framework, you will also notice that only the Material & Salesforce Themes were used across these multiple examples.
+### 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`.
-Each of these Styling Themes are compiled in CSS and created from a SASS file, so you can use either or. Both Themes are shown in each Tree Data demo
-- **Note:** you might need to refresh the page to see the theme correctly since the styling is global and if you change page, the style will follow on the next page (unless you refresh).
+**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.
-### SVG Icons
-The 2 new Themes were created with only SVG icons, most of the icons were pulled from the [Material Design Icons](https://materialdesignicons.com/) set. If you wish to create your own set of SVG Icons, you can refer to the new [docs - SVG Icons](../styling/SVG-Icons.md)
-- [docs - SVG Icons](../styling/SVG-Icons.md).
+
-**Note:** Just to point out that both the Fonts and SVG icons are supported, the default Bootstrap theme will keep Font-Awesome 4 so that it still works for everyone. You could however use SASS to override the Font and use SVG, again see the [docs - SVG Icons](../styling/SVG-Icons.md) for more details.
+```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
+
+```
diff --git a/docs/styling/svg-icons.md b/docs/styling/svg-icons.md
deleted file mode 100644
index 47513c62c..000000000
--- a/docs/styling/svg-icons.md
+++ /dev/null
@@ -1,213 +0,0 @@
-#### index
-- [Using built-in Themes](#using-built-in-themes)
-- [Bare and Lite versions](#bare-and-lite-versions)
-- [Using SVG with SASS](#using-custom-svgs-with-sass)
-- [How to change SVG color?](#how-to-change-svg-color)
-- [List of included Material SVG Icons](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/material-svg-icons.scss)
- - We only included the most popular icons, about 100 out of the 4000 available [Material Design icons](https://materialdesignicons.com/)
-- [SVG Colors CSS Classes](#svg-colors---css-classes)
-
-
-### Description
-Aurelia-Slickgrid was built with a Font set, mainly Font-Awesome 4, and if you use SASS it was easy enough to replace Font-Awesome to any other Font based set. The question is how do we use SVG instead of a Font? Most frameworks are switching to SVGs instead of Fonts (for smaller size and also efficiency). Aurelia-Slickgrid now has 2/3 Styling Themes that support SVGs which are Material Design & Salesforce Themes. These 2 new Themes use a subset of [Material Design Icons](https://materialdesignicons.com/) SVGs (even a portion of the Salesforce theme). There are no Font-Awesome 5, I wouldn't mind adding a new Theme for that and if you wish to contribute then please open a new issue.
-
-If you use SASS, you will find out that it's super easy to use either (Font) or (SVG), you simply have to replace the SASS necessary variables, more on that later.
-
-### Demo
-- Material Theme - [demo](https://ghiscoding.github.io/aurelia-slickgrid/#/slickgrid/example27)
-- Salesforce Theme - [demo](https://ghiscoding.github.io/aurelia-slickgrid/#/slickgrid/example28)
-
-### Using built-in Themes
-The Material & Salesforce Themes are now using SVGs 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 */
-@import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
-
-/* or other Themes */
-// @import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-material.css';
-// @import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
-```
-
-##### with SASS
-```scss
-/* change any SASS variables before loading the theme */
-$slick-primary-color: green;
-
-/* style.scss */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
-
-// or other Themes
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
-```
-
-### Bare and Lite versions
-If you wish to have a lighter CSS file and not include the `colors.scss` shown below, you could use the new `bare` versions which doesn't include any non-essential styling (it doesn't have any SVG/Color, Flatpickr & Multiple-Select styling, e.g. `slickgrid-theme-material.bare.css`), there's also a `lite` version which is roughly the same as the `bare` version except that it adds the SVG/Colors to it (e.g. `slickgrid-theme-material.lite.css`) while the regular version have it all that is (SVG/Color, Flatpickr & Multiple-Select styling, e.g.`slickgrid-theme-material.css`).
-
-### 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 Aurelia-Slickgrid has an associated SASS variables which allow you to override any one of them. All of the icons are loaded with the `content` property of the `:before` pseudo (for example, see this [line](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/slick-bootstrap.scss#L351)) and the difference between Font and SVG is simple, if you want to use a Font then you use the Font Unicode but if you want an SVG then you use a `url` with `svg+xml` as shown below.
-
-##### with Font
-```scss
-$slick-primary-color: blue;
-$slick-icon-sort-color: $slick-primary-color
-$slick-icon-sort-asc: "\f0d8";
-$slick-icon-sort-desc: "\f0d7";
-$slick-icon-sort-font-size: 13px;
-$slick-icon-sort-width: 13px;
-
-// then on the last line, import the Theme that you wish to override
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
-```
-
-##### with SVG
-```scss
-// a simple utility that will encode a color with hash sign into a valid HTML URL (e.g. #red => %23red)
-// you could also skip the use of this and simply manually change # symbol to %23
-@import '@slickgrid-universal/common/dist/styles/sass/sass-utilities';
-
-$slick-primary-color: blue;
-
-$slick-icon-sort-color: $slick-primary-color
-$slick-icon-sort-asc: url('data:image/svg+xml,');
-$slick-icon-sort-desc: url('data:image/svg+xml,');
-$slick-icon-sort-font-size: 13px;
-$slick-icon-sort-width: 13px;
-
-// then on the last line, import the Theme that you wish to override
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
-```
-
-### How to change SVG color?
-#### The following works for both CSS and SASS
-So there's a known caveat with using embedded SVG (which is what this lib does), you can only add color once with the `fill` property and for that I added SASS variables for each icon (for example `$slick-icon-sort-color` for the Sort icon color, or `$slick-icon-color` for all icons) but once you do that it will apply that same color across the document (want it or not).
-
-##### for CSS and SASS
-After lot of research, I found a way to hack it via this SO answer [change any SVGs color via CSS `filter`](https://stackoverflow.com/a/53336754/1212166), for example if we wish to apply a red color on the `mdi-close` icon (for the Draggable Grouping feat), we'll have to do this `filter`
-```css
-.slick-groupby-remove.mdi-close {
- /* close icon - red */
- filter: invert(32%) sepia(96%) saturate(7466%) hue-rotate(356deg) brightness(97%) contrast(120%);
-}
-```
-You might be thinking, like I did, but how to get this long `filter` calculation???
-For that you can visit the following blog post and use its **[color filter converter](https://dev.to/jsm91/css-filter-generator-to-convert-from-black-to-target-hex-color-188h)** that was posted to answer this SO [question](https://stackoverflow.com/q/42966641/1212166)
-
-##### for SASS only
-There is also a SASS Mixin to convert the color using only SASS as posted [here](https://stackoverflow.com/a/62880368/1212166) in the same SO question. That will be part of the lib soon enough and we'll be able to use it this way (much cleaner):
-```scss
-.slick-groupby-remove.mdi-close {
- /* close icon - red */
- @include recolor(#ff0000, 0.8);
-}
-```
-Note that even though the code looks smaller and more human readable, in reality the code produced will still be a `filter`
-
-`@include recolor(#ff0000, 0.8);` will in fact be converted to `filter: invert(32%) sepia(96%) saturate(7466%) hue-rotate(356deg) brightness(97%) contrast(120%);`
-
-### SVG Colors - CSS Classes
-To help with all of this, we added a few icon colors (basically took the same colors used by Bootstrap [here](https://getbootstrap.com/docs/4.5/utilities/colors/) using CSS `filter` and 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 override (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:** You can use these colors on Icon and/or Text **but** remember that we're using CSS `filter` here which is very different compare to using regular CSS `color` or `background-color`.
-
-**NOTE 2:** 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.
-
-
-
-```scss
-// SASS colors
-$color-primary: $slick-primary-color;
-$color-secondary: #6c757d;
-$color-success: #28a745;
-$color-danger: #dc3545;
-$color-warning: #ffc107;
-$color-info: #17a2b8;
-$color-light: #f8f9fa;
-$color-dark: #343a40;
-$color-body: #212529;
-$color-muted: #6c757d;
-$color-white: #ffffff;
-$color-alt-default: #1e87f0;
-$color-alt-warning: #faa05a;
-$color-alt-danger: #f0506e;
-$color-alt-success: #32d296;
-
-// lighter/darker shades
-$color-lighten-percentage: 6%;
-$color-darken-percentage: 6%;
-```
-
-##### HTML Color Test
-```html
-