feat!: remove Font-Awesome and use new SVG icons

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' },
       ]
     }
   }

docs/column-functionalities/Editors.md

@@ -47,7 +47,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 }
   }
 ];
@@ -252,12 +252,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: `<i class="fa fa-check"></i> ` }, { value: false, label: 'False' }],
+      collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: `<i class="mdi mdi-check"></i> ` }, { value: false, label: 'False' }],
       model: Editors.singleSelect
     }
   }
@@ -455,7 +455,7 @@ Some of the Editors could receive extra options, which is mostly the case for Ed
 ```ts
 this.columnDefinitions = [{
   id: 'start', name: 'Start Date', field: 'start',
-  editor: { 
+  editor: {
     model: Editors.date,
     editorOptions: { minDate: 'today' }
   }
@@ -467,10 +467,10 @@ You could also define certain options as a global level (for the entire grid or
 
 ```ts
 this.gridOptions = {
-  defaultEditorOptions: { 
+  defaultEditorOptions: {
     autocompleter: { debounceWaitMs: 150 }, // typed as AutocompleterOption
     date: { minDate: 'today' },
-    longText: { cols: 50, rows: 5 } 
+    longText: { cols: 50, rows: 5 }
   }
 }
 ```

docs/column-functionalities/Formatters.md

@@ -17,7 +17,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.
 
@@ -35,7 +35,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
@@ -178,7 +177,7 @@ For example, we will use `Font-Awesome` with a `boolean` as input data, and disp
 ```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 ? `<i class="fa fa-fire" aria-hidden="true"></i>` : '<i class="fa fa-snowflake-o" aria-hidden="true"></i>';
+  value ? `<i class="mdi mdi-fire" aria-hidden="true"></i>` : '<i class="mdi mdi-snowflake" aria-hidden="true"></i>';
 ```
 
 #### Example with `FormatterResultObject` instead of a string
@@ -188,7 +187,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' } : '<i class="fa fa-snowflake-o" aria-hidden="true"></i>';
+  value ? { addClasses: 'mdi mdi-fire', text: '', tooltip: 'burning fire' } : '<i class="mdi mdi-snowflake" aria-hidden="true"></i>';
 ```
 
 ### Example of Custom Formatter with Native DOM Element

docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).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,

docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md

@@ -52,7 +52,7 @@ You could also define certain options as a global level (for the entire grid or
 
 ```ts
 this.gridOptions = {
-  defaultEditorOptions: { 
+  defaultEditorOptions: {
     // Note: that `select` combines both multipleSelect & singleSelect
     select: { minHeight: 350 }, // typed as MultipleSelectOption
   }
@@ -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: `<i class="fa fa-check"></i> ` }, { value: false, label: 'False' }],
+      collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: `<i class="mdi mdi-check"></i> ` }, { 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

docs/column-functionalities/filters/Compound-Filters.md

@@ -3,15 +3,14 @@
 - [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)
 - [Update Filters Dynamically](../Input-Filter.md#update-filters-dynamically)
 - [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/Angular-Slickgrid/#/clientside) / [Demo Component](https://github.com/ghiscoding/angular-slickgrid/blob/master/src/app/examples/grid-clientside.component.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,53 +121,15 @@ 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
-}
-```
-
-### 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
-
-```ts
-import { AngularSlickgridModule } from 'angular-slickgrid';
-
-// load necessary Flatpickr Locale(s), but make sure it's imported AFTER the SlickgridModule import
-import 'flatpickr/dist/l10n/fr';
-
-@NgModule({
-  declarations: [/*...*/],
-  imports: [
-    // ...
-    AngularSlickgridModule.forRoot({
-      // add any Global Grid Options/Config you might want
-    })
-  ],
-  providers: [/*...*/],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
-or in the App Component
-```ts
-import { Component } from '@angular/core';
-import 'flatpickr/dist/l10n/fr';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
-})
-export class AppComponent {
-  title = 'Angular SlickGrid Demo';
+    range: { min: 'today' }
+  } as VanillaCalendarOption
 }
 ```
 
@@ -180,10 +138,10 @@ You could also define certain options as a global level (for the entire grid or
 
 ```ts
 this.gridOptions = {
-  defaultFilterOptions: { 
+  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 }
   }
 }

docs/column-functionalities/filters/Select-Filter.md

@@ -114,7 +114,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: {
@@ -130,7 +130,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: {
@@ -147,7 +147,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: {
@@ -172,7 +172,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: {
@@ -202,7 +202,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: {
@@ -226,7 +226,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: {
@@ -263,7 +263,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: {
@@ -313,7 +313,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: {
@@ -338,7 +338,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: {
@@ -410,13 +410,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: `<i class="fa fa-check"></i> ` }, { value: false, label: 'False' }],
+      collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: `<i class="mdi mdi-check"></i> ` }, { value: false, label: 'False' }],
       model: Filters.singleSelect
     }
   }
@@ -569,7 +569,7 @@ filter: {
 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
 ```ts
 this.gridOptions = {
-  defaultFilterOptions: { 
+  defaultFilterOptions: {
     // Note: that `select` combines both multipleSelect & singleSelect
     select: { minHeight: 350 }, // typed as MultipleSelectOption
   }