chore: revert .sgi and keep using .mdi same as before

- the idea was to renamed mdi to `.sgi` for SlickGrid Icons but the change would bring a ton of change on the user side, so let's keep using `.mdi` and table this aside for maybe another future major version (or not)
ghiscoding · Apr 26, 2024 · 1473903 · 1473903
1 parent 4798b40
commit 1473903
Show file tree

Hide file tree

Showing 102 changed files with 1,400 additions and 1,416 deletions.
diff --git 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: 'sgi sgi-help-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: 'sgi sgi-check-box-outline' },
-        { option: false, title: 'False', iconCssClass: 'sgi sgi-checkbox-blank-outline' },
+        { 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)
@@ -173,9 +173,9 @@ this.columnDefinitions = [{
         const dataContext = args?.dataContext;
         return !dataContext.completed;
       },
-      { option: 1, iconCssClass: 'sgi sgi-star-outline yellow', title: 'Low' },
-      { option: 2, iconCssClass: 'sgi sgi-star orange', title: 'Medium' },
-      { option: 3, iconCssClass: 'sgi sgi-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' },
     }]
   }
 }];
@@ -189,9 +189,9 @@ this.columnDefinitions = [
     cellMenu: {
       optionTitleKey: 'COMMANDS', // optionally pass a title to show over the Options
       optionItems: [
-        { option: 1, titleKey: 'LOW', iconCssClass: 'sgi sgi-star-outline yellow' },
-        { option: 2, titleKey: 'MEDIUM', iconCssClass: 'sgi sgi-star orange' },
-        { option: 3, titleKey: 'HIGH', iconCssClass: 'sgi sgi-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/Formatters.md b/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="sgi sgi-fire" aria-hidden="true"></i>` : '<i class="sgi sgi-snowflake" 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: 'sgi sgi-fire', text: '', tooltip: 'burning fire' } : '<i class="sgi sgi-snowflake" 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
@@ -219,7 +219,7 @@ Demo
 ```ts
 export const iconFormatter: Formatter = (_row, _cell, _value, columnDef) => {
   const iconElm = document.createElement('span');
-  iconElm.className = 'sgi sgi-check';
+  iconElm.className = 'mdi mdi-check';
 
   return iconElm;
 };

diff --git a/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md b/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md
@@ -84,8 +84,8 @@ this.columnDefinitions = [
       // collectionAsync: this.http.get(URL_COUNTRIES_COLLECTION),
       collection: [
         { value: '', label: '' },
-        { value: true, label: 'True', labelPrefix: `<i class="sgi sgi-plus"></i> ` },
-        { value: false, label: 'False', labelPrefix: `<i class="sgi sgi-minus"></i> ` }
+        { value: true, label: 'True', labelPrefix: `<i class="mdi mdi-plus"></i> ` },
+        { value: false, label: 'False', labelPrefix: `<i class="mdi mdi-minus"></i> ` }
       ],
     }
   }
@@ -223,11 +223,11 @@ export class GridBasicComponent {
               layout: 'twoRows',
               templateCallback: (item: any) => `<div class="autocomplete-container-list">
                 <div class="autocomplete-left">
-                  <span class="sgi ${item.icon} sgi-26px"></span>
+                  <span class="mdi ${item.icon} mdi-26px"></span>
                 </div>
                 <div>
                   <span class="autocomplete-top-left">
-                    <span class="sgi ${item.itemTypeName === 'I' ? 'sgi-information-outline' : 'sgi-content-copy'} sgi-14px"></span>
+                    <span class="mdi ${item.itemTypeName === 'I' ? 'mdi-information-outline' : 'mdi-content-copy'} mdi-14px"></span>
                     ${item.itemName}
                   </span>
                 <div>
@@ -285,11 +285,11 @@ export class GridBasicComponent {
               layout: 'twoRows',
               templateCallback: (item: any) => `<div class="autocomplete-container-list">
                 <div class="autocomplete-left">
-                  <span class="sgi ${item.icon} sgi-26px"></span>
+                  <span class="mdi ${item.icon} mdi-26px"></span>
                 </div>
                 <div>
                   <span class="autocomplete-top-left">
-                    <span class="sgi ${item.itemTypeName === 'I' ? 'sgi-information-outline' : 'sgi-content-copy'} sgi-14px"></span>
+                    <span class="mdi ${item.itemTypeName === 'I' ? 'mdi-information-outline' : 'mdi-content-copy'} mdi-14px"></span>
                     ${item.itemName}
                   </span>
                 <div>
@@ -306,11 +306,11 @@ export class GridBasicComponent {
                   return `<div class="autocomplete-container-list">
                     <div class="autocomplete-left">
                       <!--<img src="http://i.stack.imgur.com/pC1Tv.jpg" width="50" />-->
-                      <span class="sgi ${item.icon} sgi-26px"></span>
+                      <span class="mdi ${item.icon} mdi-26px"></span>
                     </div>
                     <div>
                       <span class="autocomplete-top-left">
-                        <span class="sgi ${item.itemTypeName === 'I' ? 'sgi-information-outline' : 'sgi-content-copy'} sgi-14px"></span>
+                        <span class="mdi ${item.itemTypeName === 'I' ? 'mdi-information-outline' : 'mdi-content-copy'} mdi-14px"></span>
                         ${item.itemName}
                       </span>
                       <span class="autocomplete-top-right">${formatNumber(item.listPrice, 2, 2, false, '$')}</span>

diff --git a/docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md b/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="sgi sgi-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
     }
   }

diff --git a/docs/column-functionalities/filters/Select-Filter.md b/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="sgi sgi-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
     }
   }

diff --git a/docs/grid-functionalities/Context-Menu.md b/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: 'sgi sgi-help-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,8 +68,8 @@ this.gridOptions = {
     hideCloseButton: false,
     optionTitle: 'Change Effort Driven Flag', // optional, add title
     optionItems: [
-      { option: true, title: 'True', iconCssClass: 'sgi sgi-check-box-outline' },
-      { option: false, title: 'False', iconCssClass: 'sgi sgi-checkbox-blank-outline' },
+      { 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)
@@ -148,9 +148,9 @@ contextMenu: {
       const dataContext = args?.dataContext;
       return !dataContext.completed;
     },
-    { option: 1, iconCssClass: 'sgi sgi-star-outline yellow', title: 'Low' },
-    { option: 2, iconCssClass: 'sgi sgi-star orange', title: 'Medium' },
-    { option: 3, iconCssClass: 'sgi sgi-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,9 +161,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: 'sgi sgi-star-outline yellow' },
-    { option: 2, titleKey: 'MEDIUM', iconCssClass: 'sgi sgi-star orange' },
-    { option: 3, titleKey: 'HIGH', iconCssClass: 'sgi sgi-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' },
   }]
 }
 ```
@@ -197,10 +197,10 @@ contextMenu: {
     hideExportTextDelimitedCommand: true,
     hideMenuOnScroll: true,
     hideOptionSection: false,
-    iconCopyCellValueCommand: 'sgi sgi-content-copy',
-    iconExportCsvCommand: 'sgi sgi-download',
-    iconExportExcelCommand: 'sgi sgi-file-excel-outline text-success',
-    iconExportTextDelimitedCommand: 'sgi sgi-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
@@ -58,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="sgi sgi-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
@@ -73,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="sgi sgi-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
 
@@ -222,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="sgi sgi-load sgi-spin-1s sgi-22px"></i>
+   <i class="mdi mdi-load mdi-spin-1s mdi-22px"></i>
 </span>
 
 <div class="grid2">

diff --git a/docs/grid-functionalities/Export-to-Text-File.md b/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="sgi sgi-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="sgi sgi-load sgi-spin-1s sgi-22px"></i>
+   <i class="mdi mdi-load mdi-spin-1s mdi-22px"></i>
 </span>
 
 <div class="grid2">

diff --git a/docs/grid-functionalities/Grid-Menu.md b/docs/grid-functionalities/Grid-Menu.md
@@ -29,18 +29,18 @@ this.gridOptions = {
    gridMenu: {
      commandTitle: 'Custom Commands',
      columnTitle: 'Columns',
-     iconCssClass: 'sgi sgi-dots-vertical',
+     iconCssClass: 'mdi mdi-dots-vertical',
      menuWidth: 17,
      resizeOnShowHeaderRow: true,
      commandItems: [
        {
-         iconCssClass: 'sgi sgi-filter-remove-outline',
+         iconCssClass: 'mdi mdi-filter-remove-outline',
          title: 'Clear All Filters',
          disabled: false,
          command: 'clear-filter'
        },
        {
-         iconCssClass: 'sgi-flip-vertical',
+         iconCssClass: 'mdi-flip-vertical',
          title: 'Toggle Filter Row',
          disabled: false,
          command: 'toggle-filter'
@@ -85,7 +85,7 @@ gridMenu: {
   // commandItems: [
   //   { command: 'help', title: 'Help', positionOrder: 70, action: (e, args) => console.log(args) },
   //   { command: '', divider: true, positionOrder: 72 },
-  //   { command: 'hello', title: 'Hello', positionOrder: 69, action: (e, args) => alert('Hello World'), cssClass: 'red', tooltip: 'Hello World', iconCssClass: 'sgi sgi-close' },
+  //   { command: 'hello', title: 'Hello', positionOrder: 69, action: (e, args) => alert('Hello World'), cssClass: 'red', tooltip: 'Hello World', iconCssClass: 'mdi mdi-close' },
   // ],
   // menuUsabilityOverride: () => false,
   onBeforeMenuShow: () => {
@@ -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: 'sgi sgi-filter-remove-outline'
-     iconClearAllSortingCommand: 'sgi sgi-sort-variant-off',
-     iconExportCsvCommand: 'sgi sgi-download',
-     iconExportTextDelimitedCommand: 'sgi sgi-download',
-     iconRefreshDatasetCommand: 'sgi sgi-sync',
-     iconToggleFilterCommand: 'sgi-flip-vertical',
+     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/Tree-Data-Grid.md b/docs/grid-functionalities/Tree-Data-Grid.md
@@ -149,7 +149,7 @@ this.gridOptions = {
     titleFormatter: (_row, _cell, value, _def, dataContext) => {
       let prefix = '';
       if (dataContext.treeLevel > 0) {
-        prefix = `<span class="sgi sgi-subdirectory-arrow-right"></span>`;
+        prefix = `<span class="mdi mdi-subdirectory-arrow-right"></span>`;
       }
       return `${prefix}<span class="bold">${value}</span><span style="font-size:11px; margin-left: 15px;">(parentId: ${dataContext.parentId})</span>`;
     },
@@ -179,7 +179,7 @@ treeFormatter: Formatter = (row, cell, value, columnDef, dataContext, grid) => {
     const spacer = `<span style="display:inline-block; width:${(15 * dataContext[treeLevelPropName])}px;"></span>`;
 
     if (data[idx + 1] && data[idx + 1][treeLevelPropName] > data[idx][treeLevelPropName]) {
-      const folderPrefix = `<i class="sgi icon ${dataContext.__collapsed ? 'sgi-folder' : 'sgi-folder-open'}"></i>`;
+      const folderPrefix = `<i class="mdi icon ${dataContext.__collapsed ? 'mdi-folder' : 'mdi-folder-open'}"></i>`;
       if (dataContext.__collapsed) {
         return `${spacer} <span class="slick-group-toggle collapsed" level="${dataContext[treeLevelPropName]}"></span>${folderPrefix} ${prefix}&nbsp;${value}`;
       } else {

diff --git a/docs/grid-functionalities/frozen-columns-rows.md b/docs/grid-functionalities/frozen-columns-rows.md
@@ -81,7 +81,7 @@ You can change the number of pinned columns/rows and even the pinning of columns
     </span>
     <span style="margin-left: 15px">
       <button class="btn btn-default btn-sm" click.delegate="toggleFrozenBottomRows()">
-         <i class="sgi-flip-vertical"></i> Toggle Pinned Rows
+         <i class="mdi-flip-vertical"></i> Toggle Pinned Rows
       </button>
       <span style="font-weight: bold;">: ${ isFrozenBottom ? 'Bottom' : 'Top' }</span>
     </span>