feat(styling)!: convert SVG icons to pure CSS (#1474)

* feat(styling): use regular CSS for icons instead of :before pseudo
- by using regular CSS, we can use regular font-size and even regular CSS color which was not possible with previous implementation, the technique is credited to UnoCSS project https://antfu.me/posts/icons-in-pure-css
- this is just a draft since it needs more investigation and it might actually turn out to be a breaking change because at the moment we use CSS `content` with `:before` pseudo to previously add SVG icons but with the new approach this might not be needed and might also mean that the default Font-Awesome (font) may no longer work, need investigation. - It might be a breaking change too for the users who configured different icons via content SASS vars. Unless we keep them for users but we defined them as unset.

* fix(plugin): Custom Tooltip should append className when provided
- when user adds a `className` to SlickCustomTooltip, it was overriding the default class name and by doing so, it was breaking the CSS styling because the CSS Theme still expect the default CSS class name, so we need to append to the default instead of overriding it
- also fix a few more Dark Mode styling and provide alternate colors for Tooltip demo in Dark Mode
- also add alternate colors to `text-color-primary` and `text-color-secondary` for Dark Mode

docs/TOC.md

@@ -76,3 +76,4 @@
 * [Migration Guide to 2.x](migrations/migration-to-2.x.md)
 * [Migration Guide to 3.x](migrations/migration-to-3.x.md)
 * [Migration Guide to 4.x](migrations/migration-to-4.x.md)
+* [Migration Guide to 5.x](migrations/migration-to-5.x.md)

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)
@@ -153,7 +153,7 @@ this.columnDefinitions = [
   { id: 'action', field: 'action', name: 'Action',
     cellMenu: {
       menuUsabilityOverride: (args) => {
-        const dataContext = args && args.dataContext;
+        const dataContext = args?.dataContext;
         return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20
       },
     }
@@ -163,24 +163,22 @@ this.columnDefinitions = [
 
 To give another example, with Options this time, we could say that we enable the `n/a` option only when the row is Completed. So we could do it this way
 ```ts
-this.columnDefinitions = [
-  { id: 'action', field: 'action', name: 'Action',
-    cellMenu: {
-      optionItems: [
-      {
-        option: 0, title: 'n/a', textCssClass: 'italic',
-        // only enable this option when the task is Not Completed
-        itemUsabilityOverride: (args) => {
-          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' },
-      ]
-    }
+this.columnDefinitions = [{ 
+  id: 'action', field: 'action', name: 'Action',
+  cellMenu: {
+    optionItems: [{
+      option: 0, title: 'n/a', textCssClass: 'italic',
+      // only enable this option when the task is Not Completed
+      itemUsabilityOverride: (args) => {
+        const dataContext = args?.dataContext;
+        return !dataContext.completed;
+      },
+      { 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' },
+    }]
   }
-];
+}];
 ```
 
 ### How to add Translations?
@@ -191,9 +189,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/Formatters.md

@@ -195,15 +195,15 @@ 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) =>
-  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
 Using this object return type will provide the user the same look and feel, it will actually be quite different. The major difference is that all of the options (`addClasses`, `tooltip`, ...) will be added the CSS container of the cell instead of the content of that container. For example a typically cell looks like the following `<div class="slick-cell l4 r4">Task 4</div>` and if use `addClasses: 'red'`, it will end up being `<div class="slick-cell l4 r4 red">Task 4</div>` while if we use a string output of let say `<span class="red">${value></span>`, then our final result of the cell will be `<div class="slick-cell l4 r4"><span class="red">Task 4</span></div>`. This can be useful if you plan to use multiple Formatters and don't want to lose or overwrite the previous Formatter result (we do that in our project).
 ```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

@@ -276,11 +276,6 @@ export class GridBasicComponent {
           editorOptions: {
             showOnFocus: true,
             minLength: 1,
-            classes: {
-              // choose a custom style layout
-              // 'ui-autocomplete': 'autocomplete-custom-two-rows',
-              'ui-autocomplete': 'autocomplete-custom-four-corners',
-            },
             fetch: (searchText, updateCallback) => {
               yourAsyncApiCall(searchText) // typically you'll want to return no more than 10 results
                  .then(result => updateCallback((results.length > 0) ? results : [{ label: 'No match found.', value: '' }]); })

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

@@ -163,7 +163,7 @@ this.columnDefinitions = [
     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
     }
   }

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

@@ -416,7 +416,7 @@ this.columnDefinitions = [
     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
     }
   }

docs/grid-functionalities/Context-Menu.md

@@ -39,7 +39,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
@@ -68,14 +68,14 @@ 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)
     onOptionSelected: (e, args) => {
       // change Priority
-      const dataContext = args && args.dataContext;
+      const dataContext = args?.dataContext;
       if (dataContext && dataContext.hasOwnProperty('priority')) {
         dataContext.priority = args.item.option;
         this.sgb.gridService.updateItem(dataContext);
@@ -133,26 +133,25 @@ For example, say we want the Context Menu to only be available on the first 20 r
 ```ts
 contextMenu: {
   menuUsabilityOverride: (args) => {
-    const dataContext = args && args.dataContext;
+    const dataContext = args?.dataContext;
     return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20
   },
 ```
 
 To give another example, with Options this time, we could say that we enable the `n/a` option only when the row is Completed. So we could do it this way
 ```ts
 contextMenu: {
-  optionItems: [
-  {
+  optionItems: [{
     option: 0, title: 'n/a', textCssClass: 'italic',
     // only enable this option when the task is Not Completed
     itemUsabilityOverride: (args) => {
-      const dataContext = args && args.dataContext;
+      const dataContext = 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' },
+  }]
 }
 ```
 
@@ -161,12 +160,11 @@ It works exactly like the rest of the library when `enableTranslate` is set, all
 ```ts
 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' },
-  ]
+  optionItems: [{
+    { 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' },
+  }]
 }
 ```
 
@@ -199,10 +197,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,
   },
 ```

docs/grid-functionalities/Export-to-Excel.md

@@ -1,7 +1,6 @@
 #### index
 - [Grid Options](#grid-options)
 - [Column Definition & Options](#column-definition-and-options)
-- [Custom Column Width](#custom-column-width)
 - [Custom Cell Styling](#custom-cell-styling)
   - [Cell Value Parser](#cell-value-parser)
 - [Cell Format Auto-Detect Disable](#cell-format-auto-detect-disable)
@@ -59,7 +58,7 @@ initializeGrid() {
   - 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 `<span class="fa fa-check">True</span>` 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 `<span class="mdi mdi-check">True</span>` 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
@@ -74,7 +73,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 `<span class="fa fa-check">True</span>` 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 `<span class="mdi mdi-check">True</span>` 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
 
@@ -118,21 +117,6 @@ initializeGrid() {
 
 What we can see from the example, is that it will use all Formatters (when exist) on this grid, except for the last column "Completed" since that column has explicitly defined `exportWithFormatter: false`
 
-### Custom Column Width
-
-**NOTE** now deprecated, please use [Custom Cell Styling](#custom-cell-styling) instead
-
-You can define a custom Excel column width (the width Excel's own width which is not in pixel). You can define a custom width per column (in your column definitions) and/or for the entire grid (in your grid options).
-
-#### Per Column
-You could set a custom width per column
-```ts
-this.columnDefinitions = [
-  { id: 'firstName', name: 'FirstName', exportColumnWidth: 10, },
-  // ...
-];
-```
-
 #### For the entire Grid
 You could also set a custom width for the entire grid export via the `excelExportOptions`
 ```ts
@@ -238,7 +222,7 @@ If you have lots of data, you might want to show a spinner telling the user that
 ##### View
 ```html
 <span if.bind="!processing">
-   <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
+   <i class="mdi mdi-load mdi-spin-1s mdi-22px"></i>
 </span>
 
 <div class="grid2">

docs/grid-functionalities/Export-to-Text-File.md

@@ -52,7 +52,7 @@ Inside the column definition there are couple of flags you can set and also some
 - `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 `exportCustomFormatter: Formatters.translateBoolean`.
 - you can set `exportCsvForceToKeepAsString` flag, this one will wrap the cell value into double quotes and add an equal sign in the front, this is especially useful on a column that could be turned into an exponential number by Excel. For example, we could have "1E06" and without this flag will become (1.0E06) in Excel, unless we enable the flag which will become `="1E06"` which will keep it as a string, also note that it will be shown as "1E06" but if you click on the cell value, you will see `="1E06"`
-- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `<span class="fa fa-check">True</span>` 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 `<span class="mdi mdi-check">True</span>` 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
@@ -140,7 +140,7 @@ If you have lots of data, you might want to show a spinner telling the user that
 ##### View
 ```html
 <span if.bind="!processing">
-   <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
+   <i class="mdi mdi-load mdi-spin-1s mdi-22px"></i>
 </span>
 
 <div class="grid2">

docs/grid-functionalities/Grid-Menu.md

@@ -29,18 +29,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-remove-outline',
          title: 'Clear All Filters',
          disabled: false,
          command: 'clear-filter'
        },
        {
-         iconCssClass: 'fa fa-random',
+         iconCssClass: 'mdi-flip-vertical',
          title: 'Toggle Filter Row',
          disabled: false,
          command: 'toggle-filter'
@@ -110,12 +110,12 @@ You can change any of the default command icon(s) by changing the `icon[X-comman
 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',
    },
 };
 ```

docs/grid-functionalities/Tree-Data-Grid.md

@@ -349,10 +349,10 @@ this.columnDefinitions = [
 
         if (avgVal !== undefined && sumVal !== undefined) {
           // when found Avg & Sum, we'll display both
-          return isNaN(sumVal) ? '' : `<span class="color-primary bold">sum: ${decimalFormatted(sumVal, 0, 2)} MB</span> / <span class="avg-total">avg: ${decimalFormatted(avgVal, 0, 2)} MB</span> <span class="total-suffix">(${treeLevel === 0 ? 'total' : 'sub-total'})</span>`;
+          return isNaN(sumVal) ? '' : `<span class="text-color-primary bold">sum: ${decimalFormatted(sumVal, 0, 2)} MB</span> / <span class="avg-total">avg: ${decimalFormatted(avgVal, 0, 2)} MB</span> <span class="total-suffix">(${treeLevel === 0 ? 'total' : 'sub-total'})</span>`;
         } else if (sumVal !== undefined) {
           // or when only Sum is aggregated, then just show Sum
-          return isNaN(sumVal) ? '' : `<span class="color-primary bold">sum: ${decimalFormatted(sumVal, 0, 2)} MB</span> <span class="total-suffix">(${treeLevel === 0 ? 'total' : 'sub-total'})</span>`;
+          return isNaN(sumVal) ? '' : `<span class="text-color-primary bold">sum: ${decimalFormatted(sumVal, 0, 2)} MB</span> <span class="total-suffix">(${treeLevel === 0 ? 'total' : 'sub-total'})</span>`;
         }
       }
       // reaching this line means it's a regular dataContext without totals, so regular formatter output will be used