From 1473903d4eaed87404ccea46140438dd87225b72 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 26 Apr 2024 18:16:35 -0400 Subject: [PATCH] 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) --- docs/column-functionalities/Cell-Menu.md | 18 +- docs/column-functionalities/Formatters.md | 6 +- .../Autocomplete-Editor-(Kraaden-lib).md | 16 +- ...elect-Dropdown-Editor-(single,multiple).md | 2 +- .../filters/Select-Filter.md | 2 +- docs/grid-functionalities/Context-Menu.md | 26 +- docs/grid-functionalities/Export-to-Excel.md | 6 +- .../Export-to-Text-File.md | 4 +- docs/grid-functionalities/Grid-Menu.md | 20 +- docs/grid-functionalities/Tree-Data-Grid.md | 4 +- .../frozen-columns-rows.md | 2 +- .../header-menu-header-buttons.md | 6 +- docs/migrations/migration-to-5.x.md | 48 +- docs/styling/dark-mode.md | 2 +- docs/styling/styling.md | 96 ++-- .../vite-demo-vanilla-bundle/src/app.html | 4 +- .../vite-demo-vanilla-bundle/src/bulma.scss | 4 +- .../src/examples/example01.html | 8 +- .../src/examples/example01.ts | 16 +- .../src/examples/example02.html | 10 +- .../src/examples/example02.ts | 2 +- .../src/examples/example03.html | 12 +- .../src/examples/example03.ts | 18 +- .../src/examples/example04.html | 10 +- .../src/examples/example04.ts | 44 +- .../src/examples/example05.html | 18 +- .../src/examples/example05.ts | 6 +- .../src/examples/example06.html | 16 +- .../src/examples/example06.scss | 12 +- .../src/examples/example06.ts | 14 +- .../src/examples/example07.html | 22 +- .../src/examples/example07.ts | 40 +- .../src/examples/example08.html | 8 +- .../src/examples/example09.html | 10 +- .../src/examples/example10.html | 10 +- .../src/examples/example11.html | 14 +- .../src/examples/example11.ts | 140 +++--- .../src/examples/example12.html | 22 +- .../src/examples/example12.ts | 124 +++--- .../src/examples/example13.html | 2 +- .../src/examples/example13.ts | 18 +- .../src/examples/example14.html | 12 +- .../src/examples/example14.ts | 148 +++---- .../src/examples/example15.html | 10 +- .../src/examples/example15.ts | 2 +- .../src/examples/example16.html | 4 +- .../src/examples/example16.ts | 12 +- .../src/examples/example17.html | 2 +- .../src/examples/example18.html | 6 +- .../src/examples/example18.ts | 12 +- .../src/examples/example19.html | 6 +- .../src/examples/example20.html | 2 +- .../src/examples/example21.html | 4 +- .../src/examples/example21.ts | 2 +- .../src/examples/example22.html | 2 +- .../src/examples/example22.ts | 8 +- .../src/examples/icons.html | 156 +++---- .../src/examples/icons.ts | 418 +++++++++--------- .../src/material-styles.scss | 4 +- .../editors/__tests__/selectEditor.spec.ts | 12 +- .../__tests__/singleSelectEditor.spec.ts | 10 +- .../__tests__/slickCellMenu.plugin.spec.ts | 24 +- .../slickCheckboxSelectColumn.spec.ts | 6 +- .../__tests__/slickContextMenu.spec.ts | 22 +- .../__tests__/slickDraggableGrouping.spec.ts | 38 +- .../__tests__/slickGridMenu.spec.ts | 42 +- .../__tests__/slickHeaderButtons.spec.ts | 48 +- .../__tests__/slickHeaderMenu.spec.ts | 98 ++-- .../src/extensions/extensionCommonUtils.ts | 10 +- .../extensions/slickCheckboxSelectColumn.ts | 12 +- .../common/src/extensions/slickContextMenu.ts | 14 +- .../common/src/extensions/slickGridMenu.ts | 22 +- .../common/src/extensions/slickHeaderMenu.ts | 14 +- .../src/extensions/slickRowBasedEdit.ts | 8 +- .../filters/__tests__/selectFilter.spec.ts | 8 +- .../__tests__/checkmarkFormatter.spec.ts | 16 +- .../checkmarkMaterialFormatter.spec.ts | 16 +- .../__tests__/iconBooleanFormatter.spec.ts | 42 +- .../__tests__/iconFormatter.spec.ts | 8 +- .../__tests__/treeFormatter.spec.ts | 4 +- .../src/formatters/checkmarkFormatter.ts | 2 +- .../formatters/checkmarkMaterialFormatter.ts | 4 +- .../common/src/formatters/formatters.index.ts | 2 +- .../src/formatters/iconBooleanFormatter.ts | 2 +- .../common/src/formatters/iconFormatter.ts | 4 +- packages/common/src/global-grid-options.ts | 58 +-- .../services/__tests__/filter.service.spec.ts | 4 +- .../services/__tests__/sort.service.spec.ts | 2 +- packages/common/src/styles/slick-editors.scss | 2 +- packages/common/src/styles/slick-plugins.scss | 12 +- .../src/styles/slickgrid-icons-svg-utils.scss | 32 +- .../common/src/styles/slickgrid-icons.scss | 416 ++++++++--------- .../slick-composite-editor.component.spec.ts | 6 +- .../src/__tests__/slickCustomTooltip.spec.ts | 12 +- .../src/slick-empty-warning.spec.ts | 12 +- .../src/salesforce-global-grid-options.ts | 10 +- test/cypress/e2e/example03.cy.ts | 4 +- test/cypress/e2e/example07.cy.ts | 12 +- test/cypress/e2e/example11.cy.ts | 8 +- test/cypress/e2e/example12.cy.ts | 42 +- test/cypress/e2e/example13.cy.ts | 20 +- test/cypress/e2e/example16.cy.ts | 4 +- 102 files changed, 1400 insertions(+), 1416 deletions(-) diff --git a/docs/column-functionalities/Cell-Menu.md b/docs/column-functionalities/Cell-Menu.md index 9bf0a523e..4afffbfd1 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: '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 index c626b21b6..aa16d44e4 100644 --- a/docs/column-functionalities/Formatters.md +++ b/docs/column-functionalities/Formatters.md @@ -195,7 +195,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) => - value ? `` : ''; + value ? `` : ''; ``` #### Example with `FormatterResultObject` instead of a string @@ -203,7 +203,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: 'sgi sgi-fire', text: '', tooltip: 'burning fire' } : ''; + value ? { addClasses: 'mdi mdi-fire', text: '', tooltip: 'burning fire' } : ''; ``` ### 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 index 10477b688..7af780e4a 100644 --- 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: ` ` }, - { value: false, label: 'False', labelPrefix: ` ` } + { value: true, label: 'True', labelPrefix: ` ` }, + { value: false, label: 'False', labelPrefix: ` ` } ], } } @@ -223,11 +223,11 @@ export class GridBasicComponent { layout: 'twoRows', templateCallback: (item: any) => `
- +
- + ${item.itemName}
@@ -285,11 +285,11 @@ export class GridBasicComponent { layout: 'twoRows', templateCallback: (item: any) => `
- +
- + ${item.itemName}
@@ -306,11 +306,11 @@ export class GridBasicComponent { return `
- +
- + ${item.itemName} ${formatNumber(item.listPrice, 2, 2, false, '$')} diff --git a/docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md b/docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md index c749c9aff..54bb00a4c 100644 --- 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: ` ` }, { value: false, label: 'False' }], + collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { 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 index 6e9d2c257..a59ff38f9 100644 --- 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: ` ` }, { value: false, label: 'False' }], + collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], model: Filters.singleSelect } } diff --git a/docs/grid-functionalities/Context-Menu.md b/docs/grid-functionalities/Context-Menu.md index acf6810f6..5e94673e9 100644 --- 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 index 4035ce797..e6bbc0bdb 100644 --- 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 `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 @@ -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 `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 @@ -222,7 +222,7 @@ If you have lots of data, you might want to show a spinner telling the user that ##### View ```html - +
diff --git a/docs/grid-functionalities/Export-to-Text-File.md b/docs/grid-functionalities/Export-to-Text-File.md index b78b70553..b32b4e651 100644 --- 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 `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 @@ -140,7 +140,7 @@ If you have lots of data, you might want to show a spinner telling the user that ##### View ```html - +
diff --git a/docs/grid-functionalities/Grid-Menu.md b/docs/grid-functionalities/Grid-Menu.md index 3e4466213..fce112f7e 100644 --- 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 index de7c86d3e..34afee089 100644 --- 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 = ``; + prefix = ``; } return `${prefix}${value}(parentId: ${dataContext.parentId})`; }, @@ -179,7 +179,7 @@ treeFormatter: Formatter = (row, cell, value, columnDef, dataContext, grid) => { const spacer = ``; if (data[idx + 1] && data[idx + 1][treeLevelPropName] > data[idx][treeLevelPropName]) { - const folderPrefix = ``; + const folderPrefix = ``; if (dataContext.__collapsed) { return `${spacer} ${folderPrefix} ${prefix} ${value}`; } else { diff --git a/docs/grid-functionalities/frozen-columns-rows.md b/docs/grid-functionalities/frozen-columns-rows.md index c9284b77b..f3aba1c33 100644 --- 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 : ${ isFrozenBottom ? 'Bottom' : 'Top' } diff --git a/docs/grid-functionalities/header-menu-header-buttons.md b/docs/grid-functionalities/header-menu-header-buttons.md index ab6bf80bb..97d6dfe64 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: 'sgi sgi-close' - iconSortAscCommand: 'sgi sgi-sort-ascending' - iconSortDescCommand: 'sgi sgi-sort-descending', + iconColumnHideCommand: 'mdi mdi-close' + iconSortAscCommand: 'mdi mdi-sort-ascending' + iconSortDescCommand: 'mdi mdi-sort-descending', }, }; ``` diff --git a/docs/migrations/migration-to-5.x.md b/docs/migrations/migration-to-5.x.md index 7bc34a2e3..24f172227 100644 --- a/docs/migrations/migration-to-5.x.md +++ b/docs/migrations/migration-to-5.x.md @@ -1,5 +1,5 @@ ## Version 5 - Better Dark Mode with Pure CSS SVG icons -This new release brings a lot of changes oriented towards better UI/UX, our SVG icons are now pure CSS and can be colorized like any other text via the `color` CSS property (which helps a lot for the Dark Mode Theme). However this change come with an important change to the user (you), that is if you were using any of the `.mdi` SVG icons, these icons were renamed to `.sgi` (SlickGrid Icons) because of how the SVG are created which is entirely different compare to previous `.mdi` +This new release brings a lot of changes oriented towards better UI/UX, our SVG icons are now pure CSS and can be colorized like any other text via the `color` CSS property (which helps a lot for the Dark Mode Theme). Another noticeable UI change is the migration from [Flatpickr](https://flatpickr.js.org/) to [Vanilla-Calendar-Picker](https://github.com/ghiscoding/vanilla-calendar-picker) (which is in fact a fork of [Vanilla-Calendar-Pro](https://vanilla-calendar.pro/) and maybe one day we'll drop the fork if possible), there are multiple reasons to migrate our date picker to another library: - Flatpickr cons: @@ -18,7 +18,7 @@ Another noticeable UI change is the migration from [Flatpickr](https://flatpickr - some settings were missing, like the `'today'` shortcut which is why I forked the project - I did open a few PRs on the main project, so the hope is to drop the fork in the future while being a totally transparent change to the user (you) -Similar to previous releases, I managed to decrease the project build size even more (about 5%). At this point, the project has a similar size to what it was in v2.x that is when we were using jQuery/jQueryUI but since we're no longer using jQuery the project is in fact much smaller than it was 2 years ago. This is really nice to see, that is even considering the fact that we keep adding new features to the project and the project size managed to decrease yet again :) +Similar to previous releases, I managed to decrease the project build size even more (about 5%). At this point, the project has a similar size to what it was in v2.x that is when we were using jQuery/jQueryUI separately. However, since we're no longer using jQuery in the project, our project build size is in fact much smaller than it was 2 years ago. This is really nice to see especially since we keep adding features (like Dark Mode and others), we still size managed to decrease the project size yet again :) #### Major Changes - Quick Summary - minimum requirements bump @@ -29,35 +29,11 @@ Similar to previous releases, I managed to decrease the project build size even --- -**NOTE:** if you come from an earlier version, please make sure to follow each migration in their respected order (review other migration guides) +**NOTE:** if you come from an earlier version, please make sure to follow each migrations in their respected order (review other migration guides) ## Changes -### Styling -#### `.mdi` SVG icons were renamed to `.sgi` -The previous `.mdi` Material Design Icons were renamed to `.sgi` SlickGrid Icons mostly because the icons are now pure CSS and the way we create the icons is totally different in comparison to the `.mdi` icons. The `.sgi` icons can now be colorized like any other text via the `color` CSS property but that was not possible with the previous `.mdi` icons. - - -We recommend to do a search and replace in your editor (below is 1 of **many** changes you will have to do) -```diff -this.columnDefinitions = { - id: 'action', name: 'Action', field: 'action', - cellMenu: { - hideCloseButton: false, - commandTitle: 'Commands', - commandItems: [ - { - command: 'edit', - title: 'Edit Row', -- iconCssClass: 'mdi mdi-square-edit-outline', -+ iconCssClass: 'sgi sgi-square-edit-outline', - positionOrder: 66, - action: () => this.openCompositeModal('edit'), - }, - ] - } -} -``` +### Styling #### `.color-xx` are removed (use `.text-color-xx` instead) Since the SVG icons are now pure CSS, we can now colorize them the same way that we would do for any other text via the `color` CSS property. Because of that, we no longer need any of the `.color-xx` classes (which were created via CSS [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)). They were useful to override the SVG icon colors, but since we can now use regular `color` property, I decided to keep only the `text-color-xx` and remove all `color-xx` @@ -65,8 +41,16 @@ Since the SVG icons are now pure CSS, we can now colorize them the same way that ```diff +``` +or move the class to the parent container and have both the icon and the text inherit the color :) +```diff ++ ``` @@ -78,7 +62,7 @@ A lot of SASS variables changed, we recommend you take a look at the [_variables ##### SASS `math` polyfills are removed When Dart-SASS released their version 1.33, it caused a lot of console warnings (and lot of unhappy users) in projects that were using `/` (for math division) instead of their new `math.div` function. To avoid seeing all these warnings, I had created a temporary polyfill (that piece of code was actually copied from Bootstrap project). This change happened 3 years ago, so I'm assuming that most users have already upgraded their SASS and fix these warnings and I think it's time to remove this polyfill since it was always meant to be a temp patch. If you see these warnings coming back, you can use the SASS option `--quiet-upstream`. -For reference, below is an example of these old Math warnings when we were compiling SASS +For reference, below is an example of these old Math warnings when we used to compile it with SASS CLI ```sh Recommendation: math.div($m, $columns) @@ -119,5 +103,5 @@ prepareGrid() { } ``` -> **Note** the `'today'` shortcut currently only exist in `Vanilla-Calendar-Picker` fork, however the rest of the settings should be similar, visit `Vanilla-Calendar-Pro` [settings](https://vanilla-calendar.pro/docs/reference/additionally/settings) website for all other options. +> **Note** the `'today'` shortcut currently only exist in `Vanilla-Calendar-Picker` fork, however the rest of the settings should be similar, visit `Vanilla-Calendar-Pro` [settings](https://vanilla-calendar.pro/docs/reference/additionally/settings) website for all other options. The hope is to drop the fork whenever the original project receives all missing features. diff --git a/docs/styling/dark-mode.md b/docs/styling/dark-mode.md index dfef76547..b371694d4 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: 'sgi sgi-brightness-4', + iconToggleDarkModeCommand: 'mdi mdi-brightness-4', commandLabels: { toggleDarkModeCommand: 'Toggle Dark Mode', }, diff --git a/docs/styling/styling.md b/docs/styling/styling.md index 730a6968e..c500c2090 100644 --- a/docs/styling/styling.md +++ b/docs/styling/styling.md @@ -9,9 +9,9 @@ - [SVG Colors CSS Classes](#svg-colors---css-classes) ### Description -Slickgrid-Universal was originally using Font-Awesome to display internal icons but we now use SVG only and the font was dropped completely. We now use SVG only and they are all pure CSS which mean that you can colorize them the same as any other text (which helps for dark mode). Slickgrid-Universal now has 2-3 Styling Themes (Bootstrap, Material and Salesforce) and we also optionally provide extra SVG icons, which are a tiny a subset of [Material Design Icons](https://materialdesignicons.com/) SVGs. These extra SVG icons are optionals and can be imported manually (however, they do come by default in the Material and Salesforce themes), when imported you'll want to use the `.sgi` CSS classes which is a short name for SlickGrid Icons. +Slickgrid-Universal was originally using Font-Awesome to display internal icons but we now use SVG only for icons and the font was dropped completely. Our SVG are now also using pure CSS which mean that you can colorize them the same way that you would change text color (which is also helpful in dark mode). Slickgrid-Universal has 3 Styling Themes (Bootstrap, Material and Salesforce) and we also optionally provide extra SVG icons, which are a tiny a subset of [Material Design Icons](https://materialdesignicons.com/) SVGs. These extra SVG icons are optionals and can be imported manually (note however, they are part of the Material and Salesforce themes by default), when imported you'll want to use the `.mdi` CSS classes. -> **Note** some icons are built-ins (sorting, grouping, row selections, ...) while other icons are defined by CSS classes (grid menu, column picker, header menu, context menu, ...) and you could use `.sgi` icons or any other icons framework (you'll want to override global grid options). +> **Note** some icons are built-ins (sorting, grouping, row selections, ...) while some other icons are defined by CSS classes (grid menu, column picker, header menu, context menu, ...) and you could use `.mdi` icons or any other icons framework (if you do, then you'll want to override global grid options). If you use SASS and you want to change some of the default SVGs, you will find out it super easy to simply replace the SVG path via associated SASS variable, more on further down. @@ -135,83 +135,83 @@ $text-color-darken-percentage: 6%; ##### HTML Color Test ```html
- text-color-primary - - text-color-primary-light - - text-color-primary-dark + text-color-primary - + text-color-primary-light - + text-color-primary-dark
- text-color-secondary - - text-color-secondary-light - - text-color-secondary-dark + text-color-secondary - + text-color-secondary-light - + text-color-secondary-dark
- text-color-success - - text-color-success-light - - text-color-success-dark + text-color-success - + text-color-success-light - + text-color-success-dark
- text-color-danger - - text-color-danger-light - - text-color-danger-dark + text-color-danger - + text-color-danger-light - + text-color-danger-dark
- text-color-warning - - text-color-warning-light - - text-color-warning-dark + text-color-warning - + text-color-warning-light - + text-color-warning-dark
- text-color-info - - text-color-info-light - - text-color-info-dark + text-color-info - + text-color-info-light - + text-color-info-dark
- text-color-body - - text-color-body-light - - text-color-body-dark + text-color-body - + text-color-body-light - + text-color-body-dark
- text-color-muted - - text-color-muted-light - - text-color-muted-dark + text-color-muted - + text-color-muted-light - + text-color-muted-dark
- text-color-dark + text-color-dark
- text-color-light + text-color-light
- text-color-white + text-color-white
- text-color-alt-default - - text-color-alt-default-light - - text-color-alt-default-dark + text-color-alt-default - + text-color-alt-default-light - + text-color-alt-default-dark
- text-color-alt-warning - - text-color-alt-warning-light - - text-color-alt-warning-dark + text-color-alt-warning - + text-color-alt-warning-light - + text-color-alt-warning-dark
- text-color-alt-success - - text-color-alt-success-light - - text-color-alt-success-dark + text-color-alt-success - + text-color-alt-success-light - + text-color-alt-success-dark
- text-color-alt-danger - - text-color-alt-danger-light - - text-color-alt-danger-dark + text-color-alt-danger - + text-color-alt-danger-light - + text-color-alt-danger-dark
-
text-color-se-primary
+
text-color-se-primary
- text-color-se-link - - text-color-se-link-dark + text-color-se-link - + text-color-se-link-dark
-
text-color-se-secondary
-
text-color-se-danger
+
text-color-se-secondary
+
text-color-se-danger
- text-color-se-warning - - text-color-se-warning-light + text-color-se-warning - + text-color-se-warning-light
``` \ No newline at end of file diff --git a/examples/vite-demo-vanilla-bundle/src/app.html b/examples/vite-demo-vanilla-bundle/src/app.html index cab77870f..12f0efdde 100644 --- a/examples/vite-demo-vanilla-bundle/src/app.html +++ b/examples/vite-demo-vanilla-bundle/src/app.html @@ -2,7 +2,7 @@
- +

Slickgrid-Universal

@@ -30,7 +30,7 @@

Slickgrid-Universal

Documentation - SlickGrid Icons + SlickGrid Material Icons
diff --git a/examples/vite-demo-vanilla-bundle/src/bulma.scss b/examples/vite-demo-vanilla-bundle/src/bulma.scss index 791f58bcb..00704f2fe 100644 --- a/examples/vite-demo-vanilla-bundle/src/bulma.scss +++ b/examples/vite-demo-vanilla-bundle/src/bulma.scss @@ -40,8 +40,8 @@ html, body { .navbar-item, .navbar-link { color: white; } - .icon.sgi, - .icon .sgi { + .icon.mdi, + .icon .mdi { height: 1em; width: 1em; } diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example01.html b/examples/vite-demo-vanilla-bundle/src/examples/example01.html index b62c3cc2c..1f0b096f3 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example01.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example01.html @@ -5,7 +5,7 @@

Example 01 - Basic Grids - code + code

@@ -17,7 +17,7 @@
Grid 1

@@ -39,12 +39,12 @@
Grid 2

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example01.ts b/examples/vite-demo-vanilla-bundle/src/examples/example01.ts index cd3c1cbd1..55e29eaa4 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example01.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example01.ts @@ -89,12 +89,12 @@ export default class Example01 { onColumnsChanged: (_e, args) => console.log('onColumnPickerColumnsChanged - visible columns count', args.visibleColumns.length), }, gridMenu: { - subItemChevronClass: 'sgi sgi-chevron-down sgi-rotate-270', + subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', commandItems: [ { command: '', divider: true, positionOrder: 98 }, { // we can also have multiple nested sub-menus - command: 'export', title: 'Exports', iconCssClass: 'sgi sgi-download', positionOrder: 99, + command: 'export', title: 'Exports', iconCssClass: 'mdi mdi-download', positionOrder: 99, commandItems: [ { command: 'exports-txt', title: 'Text (tab delimited)' }, { @@ -107,16 +107,16 @@ export default class Example01 { ] }, { - command: 'feedback', title: 'Feedback', iconCssClass: 'sgi sgi-information-outline', positionOrder: 100, + command: 'feedback', title: 'Feedback', iconCssClass: 'mdi mdi-information-outline', positionOrder: 100, commandItems: [ - { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'sgi sgi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, + { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, 'divider', { - command: 'sub-menu', title: 'Contact Us', iconCssClass: 'sgi sgi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', + command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', commandItems: [ - { command: 'contact-email', title: 'Email us', iconCssClass: 'sgi sgi-pencil-outline' }, - { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'sgi sgi-message-text-outline' }, - { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'sgi sgi-coffee' }, + { command: 'contact-email', title: 'Email us', iconCssClass: 'mdi mdi-pencil-outline' }, + { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'mdi mdi-message-text-outline' }, + { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'mdi mdi-coffee' }, ] } ] diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example02.html b/examples/vite-demo-vanilla-bundle/src/examples/example02.html index e6e231800..2a55646eb 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example02.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example02.html @@ -6,7 +6,7 @@

- code + code

@@ -20,19 +20,19 @@

50k rows

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example02.ts b/examples/vite-demo-vanilla-bundle/src/examples/example02.ts index 801a383ed..74ef024d0 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example02.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example02.ts @@ -42,7 +42,7 @@ export default class Example02 { this.dataset = this.loadData(NB_ITEMS); const gridContainerElm = document.querySelector('.grid2') as HTMLDivElement; - this._bindingEventService.bind(gridContainerElm, 'onbeforeexporttoexcel', () => this.loadingClass = 'sgi sgi-load sgi-spin-1s sgi-22px'); + this._bindingEventService.bind(gridContainerElm, 'onbeforeexporttoexcel', () => this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-22px'); this._bindingEventService.bind(gridContainerElm, 'onafterexporttoexcel', () => this.loadingClass = ''); this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset); diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example03.html b/examples/vite-demo-vanilla-bundle/src/examples/example03.html index cbec08971..569227142 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example03.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example03.html @@ -3,7 +3,7 @@

(with Salesforce Theme) @@ -12,7 +12,7 @@

- code + code

@@ -26,19 +26,19 @@

50k rows

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example03.ts b/examples/vite-demo-vanilla-bundle/src/examples/example03.ts index d11b658f2..182a60e2b 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example03.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example03.ts @@ -61,7 +61,7 @@ export default class Example03 { this._bindingEventService.bind(gridContainerElm, 'oncellchange', this.handleOnCellChange.bind(this)); this._bindingEventService.bind(gridContainerElm, 'onvalidationerror', this.handleValidationError.bind(this)); this._bindingEventService.bind(gridContainerElm, 'onitemdeleted', this.handleItemDeleted.bind(this)); - this._bindingEventService.bind(gridContainerElm, 'onbeforeexporttoexcel', () => this.loadingClass = 'sgi sgi-load sgi-spin-1s sgi-22px'); + this._bindingEventService.bind(gridContainerElm, 'onbeforeexporttoexcel', () => this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-22px'); this._bindingEventService.bind(gridContainerElm, 'onafterexporttoexcel', () => this.loadingClass = ''); this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset); } @@ -249,7 +249,7 @@ export default class Example03 { { command: 'command1', title: 'Command 1', cssClass: 'orange', positionOrder: 61 }, { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'sgi sgi-close', cssClass: 'red', textCssClass: 'bold', + iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold', // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext.completed; @@ -263,15 +263,15 @@ export default class Example03 { { command: 'help', title: 'Help', - iconCssClass: 'sgi sgi-help-circle-outline', + iconCssClass: 'mdi mdi-help-circle-outline', positionOrder: 66, }, { command: 'something', title: 'Disabled Command', disabled: true, positionOrder: 67, } ], optionTitle: 'Change Effort-Driven Flag', 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' }, ] } }, @@ -312,12 +312,12 @@ export default class Example03 { draggableGrouping: { dropPlaceHolderText: 'Drop a column header here to group by the column', // hideGroupSortIcons: true, - deleteIconCssClass: 'sgi sgi-close text-color-danger', - sortAscIconCssClass: 'sgi sgi-arrow-up', - sortDescIconCssClass: 'sgi sgi-arrow-down', + deleteIconCssClass: 'mdi mdi-close text-color-danger', + sortAscIconCssClass: 'mdi mdi-arrow-up', + sortDescIconCssClass: 'mdi mdi-arrow-down', onGroupChanged: (_e, args) => this.onGroupChanged(args), onExtensionRegistered: (extension) => this.draggableGroupingPlugin = extension, - // groupIconCssClass: 'sgi sgi-drag-vertical', + // groupIconCssClass: 'mdi mdi-drag-vertical', }, enableCheckboxSelector: true, enableRowSelection: true, diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example04.html b/examples/vite-demo-vanilla-bundle/src/examples/example04.html index 9e4e56eb6..182961024 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example04.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example04.html @@ -5,7 +5,7 @@

- code + code

@@ -32,19 +32,19 @@
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example04.ts b/examples/vite-demo-vanilla-bundle/src/examples/example04.ts index 87cc370ef..12ac82a91 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example04.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example04.ts @@ -106,7 +106,7 @@ export default class Example04 { // We can also add HTML text to be rendered (any bad script will be sanitized) but we have to opt-in, else it will be sanitized enableRenderHtml: true, // collection: [{ value: '1', label: '1' }, { value: '2', label: '2' }, { value: '3', label: '3' }, { value: '4', label: '4' }, { value: '5', label: '5' }], - collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k, symbol: '' })), + collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k, symbol: '' })), customStructure: { value: 'value', label: 'label', @@ -240,7 +240,7 @@ export default class Example04 { // // collectionAsync: fetch(URL_COUNTRIES_COLLECTION), // enableRenderHtml: true, - // collection: [{ code: true, name: 'True', labelPrefix: ` ` }, { code: false, name: 'False', labelSuffix: '' }], + // collection: [{ code: true, name: 'True', labelPrefix: ` ` }, { code: false, name: 'False', labelSuffix: '' }], // editorOptions: { minLength: 1 } // }, editor: { @@ -267,7 +267,7 @@ export default class Example04 { // collectionAsync: fetch(URL_COUNTRIES_COLLECTION), // // enableRenderHtml: true, - // // collection: [{ code: true, name: 'True', labelPrefix: ` ` }, { code: false, name: 'False', labelSuffix: '' }], + // // collection: [{ code: true, name: 'True', labelPrefix: ` ` }, { code: false, name: 'False', labelSuffix: '' }], // // filterOptions: { minLength: 1 } // }, filter: { @@ -326,7 +326,7 @@ export default class Example04 { { command: 'command1', title: 'Command 1', cssClass: 'orange', positionOrder: 61 }, { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'sgi sgi-close', cssClass: 'red', textCssClass: 'bold', + iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold', // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext.completed; @@ -337,13 +337,13 @@ export default class Example04 { { divider: true, command: '', positionOrder: 63 }, // 'divider', - { command: 'help', title: 'Help', iconCssClass: 'sgi sgi-help-circle', positionOrder: 66, }, + { command: 'help', title: 'Help', iconCssClass: 'mdi mdi-help-circle', positionOrder: 66, }, { command: 'something', title: 'Disabled Command', disabled: true, positionOrder: 67, }, ], optionTitle: 'Change Complete Flag', 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' }, ] } }, @@ -392,7 +392,7 @@ export default class Example04 { // when using the cellMenu, you can change some of the default options and all use some of the callback methods enableCellMenu: true, cellMenu: { - subItemChevronClass: 'sgi sgi-chevron-down sgi-rotate-270', + subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', // all the Cell Menu callback methods (except the action callback) // are available under the grid options as shown below onCommand: (e, args) => this.executeCommand(e, args), @@ -410,7 +410,7 @@ export default class Example04 { enableContextMenu: true, contextMenu: { optionShownOverColumnIds: ['percentComplete'], - subItemChevronClass: 'sgi sgi-chevron-down sgi-rotate-270', + subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', hideCloseButton: true, optionTitle: 'Change Percent Complete', onOptionSelected: (_e, args) => { @@ -424,16 +424,16 @@ export default class Example04 { } }, optionItems: [ - { option: 0, iconCssClass: 'sgi sgi-checkbox-blank-outline text-color-secondary', title: 'Not Started (0%)' }, - { option: 50, iconCssClass: 'sgi sgi-flip-vertical', title: 'Half Completed (50%)' }, - { option: 100, iconCssClass: 'sgi sgi-checkbox-marked text-color-success', title: 'Completed (100%)' }, + { option: 0, iconCssClass: 'mdi mdi-checkbox-blank-outline text-color-secondary', title: 'Not Started (0%)' }, + { option: 50, iconCssClass: 'mdi mdi-flip-vertical', title: 'Half Completed (50%)' }, + { option: 100, iconCssClass: 'mdi mdi-checkbox-marked text-color-success', title: 'Completed (100%)' }, 'divider', { // we can also have multiple nested sub-menus option: null, title: 'Sub-Options (demo)', subMenuTitle: 'Set Percent Complete', optionItems: [ - { option: 0, iconCssClass: 'sgi sgi-checkbox-blank-outline text-color-secondary', title: 'Not Started (0%)' }, - { option: 50, iconCssClass: 'sgi sgi-flip-vertical', title: 'Half Completed (50%)' }, - { option: 100, iconCssClass: 'sgi sgi-checkbox-marked text-color-success', title: 'Completed (100%)' }, + { option: 0, iconCssClass: 'mdi mdi-checkbox-blank-outline text-color-secondary', title: 'Not Started (0%)' }, + { option: 50, iconCssClass: 'mdi mdi-flip-vertical', title: 'Half Completed (50%)' }, + { option: 100, iconCssClass: 'mdi mdi-checkbox-marked text-color-success', title: 'Completed (100%)' }, ] } ], @@ -441,7 +441,7 @@ export default class Example04 { { command: '', divider: true, positionOrder: 98 }, { // we can also have multiple nested sub-menus - command: 'export', title: 'Exports', iconCssClass: 'sgi sgi-download', positionOrder: 99, + command: 'export', title: 'Exports', iconCssClass: 'mdi mdi-download', positionOrder: 99, commandItems: [ { command: 'exports-txt', title: 'Text (tab delimited)' }, { @@ -454,16 +454,16 @@ export default class Example04 { ] }, { - command: 'feedback', title: 'Feedback', iconCssClass: 'sgi sgi-information-outline', positionOrder: 100, + command: 'feedback', title: 'Feedback', iconCssClass: 'mdi mdi-information-outline', positionOrder: 100, commandItems: [ - { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'sgi sgi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, + { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, 'divider', { - command: 'sub-menu', title: 'Contact Us', iconCssClass: 'sgi sgi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', + command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', commandItems: [ - { command: 'contact-email', title: 'Email us', iconCssClass: 'sgi sgi-pencil-outline' }, - { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'sgi sgi-message-text-outline' }, - { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'sgi sgi-coffee' }, + { command: 'contact-email', title: 'Email us', iconCssClass: 'mdi mdi-pencil-outline' }, + { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'mdi mdi-message-text-outline' }, + { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'mdi mdi-coffee' }, ] } ] diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example05.html b/examples/vite-demo-vanilla-bundle/src/examples/example05.html index 5c71439f1..23106916e 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example05.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example05.html @@ -1,13 +1,13 @@

Example 05 - Tree Data - + (from a flat dataset with parentId references)
see - code + code

@@ -26,11 +26,11 @@
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example06.scss b/examples/vite-demo-vanilla-bundle/src/examples/example06.scss index 5aabed2c9..2bd1ce618 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example06.scss +++ b/examples/vite-demo-vanilla-bundle/src/examples/example06.scss @@ -20,25 +20,25 @@ display: none; } - .sgi-file-pdf-outline { + .mdi-file-pdf-outline { color: #f14668; opacity: 0.9; } - .sgi-folder, .sgi-folder-open { + .mdi-folder, .mdi-folder-open { color: #ffa500; opacity: 0.9; } - .sgi-file-music-outline { + .mdi-file-music-outline { color: #3298dc; opacity: 0.9; } - .sgi-file-excel-outline { + .mdi-file-excel-outline { color: #1E9F75; opacity: 0.9; } - .sgi-file-document-outline, - .sgi-file-question-outline { + .mdi-file-document-outline, + .mdi-file-question-outline { color: #686868; opacity: 0.9; } diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example06.ts b/examples/vite-demo-vanilla-bundle/src/examples/example06.ts index d3ed5af93..a346a680a 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example06.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example06.ts @@ -126,7 +126,7 @@ export default class Example06 { sanitizeDataExport: true }, gridMenu: { - iconCssClass: 'sgi sgi-dots-grid', + iconCssClass: 'mdi mdi-dots-grid', }, externalResources: [new ExcelExportService(), new TextExportService()], enableFiltering: true, @@ -247,7 +247,7 @@ export default class Example06 { const indentSpacer = addWhiteSpaces(5 * treeLevel); if (data[idx + 1]?.[treeLevelPropName] > data[idx][treeLevelPropName] || data[idx]['__hasChildren']) { - const folderPrefix = ``; + const folderPrefix = ``; if (dataContext.__collapsed) { return `${spacer}${indentSpacer} ${folderPrefix} ${prefix} ${value}`; } else { @@ -261,15 +261,15 @@ export default class Example06 { getFileIcon(value: string) { let prefix = ''; if (value.includes('.pdf')) { - prefix = ''; + prefix = ''; } else if (value.includes('.txt')) { - prefix = ''; + prefix = ''; } else if (value.includes('.csv') || value.includes('.xls')) { - prefix = ''; + prefix = ''; } else if (value.includes('.mp3')) { - prefix = ''; + prefix = ''; } else if (value.includes('.')) { - prefix = ''; + prefix = ''; } return prefix; } diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.html b/examples/vite-demo-vanilla-bundle/src/examples/example07.html index c58e813a9..a38bdb013 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example07.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example07.html @@ -2,7 +2,7 @@

Example 07 - Row Move & Row Selections @@ -10,42 +10,42 @@

see - code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts index 90cdaf246..b5342c067 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts @@ -32,10 +32,10 @@ export default class Example07 { translateService: TranslateService; set isFilteringEnabled(enabled: boolean) { - this.filteringEnabledClass = enabled ? 'icon sgi sgi-toggle-switch' : 'icon sgi sgi-toggle-switch-off-outline'; + this.filteringEnabledClass = enabled ? 'icon mdi mdi-toggle-switch' : 'icon mdi mdi-toggle-switch-off-outline'; } set isSortingEnabled(enabled: boolean) { - this.sortingEnabledClass = enabled ? 'icon sgi sgi-toggle-switch' : 'icon sgi sgi-toggle-switch-off-outline'; + this.sortingEnabledClass = enabled ? 'icon mdi mdi-toggle-switch' : 'icon mdi mdi-toggle-switch-off-outline'; } constructor() { @@ -78,15 +78,15 @@ export default class Example07 { { id: 'action', name: 'Action', field: 'action', minWidth: 60, maxWidth: 60, excludeFromExport: true, excludeFromHeaderMenu: true, - formatter: () => `
`, + formatter: () => `
`, cellMenu: { hideCloseButton: false, - subItemChevronClass: 'sgi sgi-chevron-down sgi-rotate-270', + subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', commandTitleKey: 'COMMANDS', commandItems: [ { command: 'command1', titleKey: 'DELETE_ROW', - iconCssClass: 'sgi sgi-close', cssClass: 'has-text-danger', textCssClass: 'bold', + iconCssClass: 'mdi mdi-close', cssClass: 'has-text-danger', textCssClass: 'bold', action: (_e, args) => { if (confirm(`Do you really want to delete row (${args.row! + 1}) with "${args.dataContext.title}"?`)) { this.sgb?.gridService.deleteItemById(args.dataContext.id); @@ -95,13 +95,13 @@ export default class Example07 { }, 'divider', { - command: 'help', titleKey: 'HELP', iconCssClass: 'sgi sgi-help-circle', + command: 'help', titleKey: 'HELP', iconCssClass: 'mdi mdi-help-circle', action: () => alert('Please help!') }, { command: '', divider: true, positionOrder: 98 }, { // we can also have multiple nested sub-menus - command: 'export', title: 'Exports', iconCssClass: 'sgi sgi-download', positionOrder: 99, + command: 'export', title: 'Exports', iconCssClass: 'mdi mdi-download', positionOrder: 99, commandItems: [ { command: 'exports-txt', title: 'Text (tab delimited)' }, { @@ -116,14 +116,14 @@ export default class Example07 { { command: 'feedback', title: 'Feedback', positionOrder: 100, commandItems: [ - { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'sgi sgi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, + { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, 'divider', { - command: 'sub-menu', title: 'Contact Us', iconCssClass: 'sgi sgi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', + command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', commandItems: [ - { command: 'contact-email', title: 'Email us', iconCssClass: 'sgi sgi-pencil-outline' }, - { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'sgi sgi-message-text-outline' }, - { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'sgi sgi-coffee' }, + { command: 'contact-email', title: 'Email us', iconCssClass: 'mdi mdi-pencil-outline' }, + { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'mdi mdi-message-text-outline' }, + { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'mdi mdi-coffee' }, ] } ] @@ -150,13 +150,13 @@ export default class Example07 { }, optionTitleKey: 'CHANGE_COMPLETED_FLAG', optionItems: [ - { option: true, titleKey: 'TRUE', iconCssClass: 'sgi sgi-check-box-outline' }, - { option: false, titleKey: 'FALSE', iconCssClass: 'sgi sgi-checkbox-blank-outline' }, + { option: true, titleKey: 'TRUE', iconCssClass: 'mdi mdi-check-box-outline' }, + { option: false, titleKey: 'FALSE', iconCssClass: 'mdi mdi-checkbox-blank-outline' }, { // we can also have multiple nested sub-menus option: null, title: 'Sub-Options (demo)', subMenuTitleKey: 'CHANGE_COMPLETED_FLAG', optionItems: [ - { option: true, titleKey: 'TRUE', iconCssClass: 'sgi sgi-check-box-outline' }, - { option: false, titleKey: 'FALSE', iconCssClass: 'sgi sgi-checkbox-blank-outline' }, + { option: true, titleKey: 'TRUE', iconCssClass: 'mdi mdi-check-box-outline' }, + { option: false, titleKey: 'FALSE', iconCssClass: 'mdi mdi-checkbox-blank-outline' }, ] } ], @@ -193,8 +193,8 @@ export default class Example07 { enableRenderHtml: true, collection: [ { value: '', label: '' }, - { value: true, label: 'True', labelSuffix: ` ` }, - { value: false, label: 'False', labelSuffix: ` ` } + { value: true, label: 'True', labelSuffix: ` ` }, + { value: false, label: 'False', labelSuffix: ` ` } ], model: Filters.singleSelect }, @@ -208,8 +208,8 @@ export default class Example07 { enableRenderHtml: true, collectionAsync: new Promise(resolve => setTimeout(() => { resolve([ - { value: true, label: 'True', labelSuffix: ` ` }, - { value: false, label: 'False', labelSuffix: ` ` } + { value: true, label: 'True', labelSuffix: ` ` }, + { value: false, label: 'False', labelSuffix: ` ` } ]); }, 250)), }, diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example08.html b/examples/vite-demo-vanilla-bundle/src/examples/example08.html index 4f904b49a..d0e4149b1 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example08.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example08.html @@ -5,7 +5,7 @@

- code + code

@@ -42,7 +42,7 @@

Grid 1 (with Header Grouping & Colspan)

- +

@@ -50,11 +50,11 @@

Grid 1 (with Header Grouping & Colspan)

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example09.html b/examples/vite-demo-vanilla-bundle/src/examples/example09.html index eabd643bf..fe9bab6a7 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example09.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example09.html @@ -5,7 +5,7 @@

- code + code

@@ -21,7 +21,7 @@
@@ -45,10 +45,10 @@
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example10.html b/examples/vite-demo-vanilla-bundle/src/examples/example10.html index ed7d1c819..52e818858 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example10.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example10.html @@ -2,7 +2,7 @@

Example 10 - Grid with GraphQL Backend Service @@ -11,7 +11,7 @@

see - code + code

@@ -23,7 +23,7 @@
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11.html b/examples/vite-demo-vanilla-bundle/src/examples/example11.html index 319fad406..f5a2a0c41 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example11.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example11.html @@ -6,7 +6,7 @@

- code + code

@@ -15,19 +15,19 @@

@@ -71,7 +71,7 @@

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts index ff7597bc8..40af7bf03 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts @@ -270,15 +270,15 @@ export default class Example11 { { id: 'action', name: 'Action', field: 'action', minWidth: 70, width: 75, maxWidth: 75, excludeFromExport: true, - formatter: () => ` -  `, + formatter: () => ` +  `, onCellClick: (event: Event, args) => { const dataContext = args.dataContext; - if ((event.target as HTMLElement).classList.contains('sgi-close')) { + if ((event.target as HTMLElement).classList.contains('mdi-close')) { if (confirm(`Do you really want to delete row (${args.row + 1}) with "${dataContext.title}"`)) { this.slickerGridInstance?.gridService.deleteItemById(dataContext.id); } - } else if ((event.target as HTMLElement).classList.contains('sgi-check-underline')) { + } else if ((event.target as HTMLElement).classList.contains('mdi-check-underline')) { this.slickerGridInstance?.gridService.updateItem({ ...dataContext, completed: true }); alert(`The "${dataContext.title}" is now Completed`); } @@ -336,7 +336,7 @@ export default class Example11 { { command: 'modal', title: 'Mass Update', - iconCssClass: 'sgi sgi-table-edit', + iconCssClass: 'mdi mdi-table-edit', }, ], onCommand: (e, args) => this.executeCommand(e, args) @@ -350,7 +350,7 @@ export default class Example11 { { command: 'modal', title: 'Mass Update', - iconCssClass: 'sgi sgi-table-edit', + iconCssClass: 'mdi mdi-table-edit', positionOrder: 66, }, ], @@ -746,7 +746,7 @@ export default class Example11 { listPrice: 2100.23, itemTypeName: 'I', image: 'http://i.stack.imgur.com/pC1Tv.jpg', - icon: `sgi ${this.getRandomIcon(0)}`, + icon: `mdi ${this.getRandomIcon(0)}`, }, { id: 1, @@ -755,7 +755,7 @@ export default class Example11 { listPrice: 3200.12, itemTypeName: 'I', image: 'https://i.imgur.com/Fnm7j6h.jpg', - icon: `sgi ${this.getRandomIcon(1)}`, + icon: `mdi ${this.getRandomIcon(1)}`, }, { id: 2, @@ -764,7 +764,7 @@ export default class Example11 { listPrice: 15.00, itemTypeName: 'I', image: 'https://i.imgur.com/RaVJuLr.jpg', - icon: `sgi ${this.getRandomIcon(2)}`, + icon: `mdi ${this.getRandomIcon(2)}`, }, { id: 3, @@ -773,7 +773,7 @@ export default class Example11 { listPrice: 25.76, itemTypeName: 'I', image: 'http://i.stack.imgur.com/pC1Tv.jpg', - icon: `sgi ${this.getRandomIcon(3)}`, + icon: `mdi ${this.getRandomIcon(3)}`, }, { id: 4, @@ -782,7 +782,7 @@ export default class Example11 { listPrice: 13.35, itemTypeName: 'I', image: 'https://i.imgur.com/Fnm7j6h.jpg', - icon: `sgi ${this.getRandomIcon(4)}`, + icon: `mdi ${this.getRandomIcon(4)}`, }, { id: 5, @@ -791,7 +791,7 @@ export default class Example11 { listPrice: 23.33, itemTypeName: 'I', image: 'https://i.imgur.com/RaVJuLr.jpg', - icon: `sgi ${this.getRandomIcon(5)}`, + icon: `mdi ${this.getRandomIcon(5)}`, }, { id: 6, @@ -800,7 +800,7 @@ export default class Example11 { listPrice: 71.21, itemTypeName: 'I', image: 'http://i.stack.imgur.com/pC1Tv.jpg', - icon: `sgi ${this.getRandomIcon(6)}`, + icon: `mdi ${this.getRandomIcon(6)}`, }, { id: 7, @@ -809,7 +809,7 @@ export default class Example11 { listPrice: 2.43, itemTypeName: 'I', image: 'https://i.imgur.com/Fnm7j6h.jpg', - icon: `sgi ${this.getRandomIcon(7)}`, + icon: `mdi ${this.getRandomIcon(7)}`, }, { id: 8, @@ -818,7 +818,7 @@ export default class Example11 { listPrice: 31288.39, itemTypeName: 'I', image: 'https://i.imgur.com/RaVJuLr.jpg', - icon: `sgi ${this.getRandomIcon(8)}`, + icon: `mdi ${this.getRandomIcon(8)}`, }, ]; } @@ -826,57 +826,57 @@ export default class Example11 { /** List of icons that are supported in this lib Material Design Icons */ getRandomIcon(iconIndex?: number) { const icons = [ - 'sgi-arrow-collapse', - 'sgi-arrow-expand', - 'sgi-cancel', - 'sgi-check', - 'sgi-checkbox-blank-outline', - 'sgi-check-box-outline', - 'sgi-checkbox-marked', - 'sgi-close', - 'sgi-close-circle', - 'sgi-close-circle-outline', - 'sgi-close-thick', - 'sgi-content-copy', - 'sgi-database-refresh', - 'sgi-download', - 'sgi-file-document-outline', - 'sgi-file-excel-outline', - 'sgi-file-music-outline', - 'sgi-file-pdf-outline', - 'sgi-filter-remove-outline', - 'sgi-flip-vertical', - 'sgi-folder', - 'sgi-folder-open', - 'sgi-help-circle', - 'sgi-help-circle-outline', - 'sgi-history', - 'sgi-information', - 'sgi-information-outline', - 'sgi-link', - 'sgi-link-variant', - 'sgi-menu', - 'sgi-microsoft-excel', - 'sgi-minus', - 'sgi-page-first', - 'sgi-page-last', - 'sgi-paperclip', - 'sgi-pin-off-outline', - 'sgi-pin-outline', - 'sgi-playlist-plus', - 'sgi-playlist-remove', - 'sgi-plus', - 'sgi-redo', - 'sgi-refresh', - 'sgi-shape-square-plus', - 'sgi-sort-ascending', - 'sgi-sort-descending', - 'sgi-swap-horizontal', - 'sgi-swap-vertical', - 'sgi-sync', - 'sgi-table-edit', - 'sgi-table-refresh', - 'sgi-undo', + 'mdi-arrow-collapse', + 'mdi-arrow-expand', + 'mdi-cancel', + 'mdi-check', + 'mdi-checkbox-blank-outline', + 'mdi-check-box-outline', + 'mdi-checkbox-marked', + 'mdi-close', + 'mdi-close-circle', + 'mdi-close-circle-outline', + 'mdi-close-thick', + 'mdi-content-copy', + 'mdi-database-refresh', + 'mdi-download', + 'mdi-file-document-outline', + 'mdi-file-excel-outline', + 'mdi-file-music-outline', + 'mdi-file-pdf-outline', + 'mdi-filter-remove-outline', + 'mdi-flip-vertical', + 'mdi-folder', + 'mdi-folder-open', + 'mdi-help-circle', + 'mdi-help-circle-outline', + 'mdi-history', + 'mdi-information', + 'mdi-information-outline', + 'mdi-link', + 'mdi-link-variant', + 'mdi-menu', + 'mdi-microsoft-excel', + 'mdi-minus', + 'mdi-page-first', + 'mdi-page-last', + 'mdi-paperclip', + 'mdi-pin-off-outline', + 'mdi-pin-outline', + 'mdi-playlist-plus', + 'mdi-playlist-remove', + 'mdi-plus', + 'mdi-redo', + 'mdi-refresh', + 'mdi-shape-square-plus', + 'mdi-sort-ascending', + 'mdi-sort-descending', + 'mdi-swap-horizontal', + 'mdi-swap-vertical', + 'mdi-sync', + 'mdi-table-edit', + 'mdi-table-refresh', + 'mdi-undo', ]; const randomNumber = Math.floor((Math.random() * icons.length - 1)); return icons[iconIndex ?? randomNumber]; @@ -886,11 +886,11 @@ export default class Example11 { return `
- +
- + ${item.itemName}
@@ -904,11 +904,11 @@ export default class Example11 { return `
- +
- + ${item.itemName} ${formatNumber(item.listPrice, 2, 2, false, '$')} diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.html b/examples/vite-demo-vanilla-bundle/src/examples/example12.html index e8b6df040..d094df950 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example12.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example12.html @@ -3,7 +3,7 @@

(with Salesforce Theme) @@ -12,7 +12,7 @@

- code + code

@@ -21,25 +21,25 @@

@@ -55,35 +55,35 @@

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts index 5867f6e3e..e7c799ea0 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts @@ -153,7 +153,7 @@ export default class Example12 { initializeGrid() { this.columnDefinitions = [ { - id: 'title', name: ' Title ', field: 'title', sortable: true, type: FieldType.string, minWidth: 75, + id: 'title', name: ' Title ', field: 'title', sortable: true, type: FieldType.string, minWidth: 75, cssClass: 'text-bold text-uppercase', filterable: true, columnGroup: 'Common Factor', filter: { model: Filters.compoundInputText }, @@ -364,7 +364,7 @@ export default class Example12 { { id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70, excludeFromExport: true, - formatter: () => `
`, + formatter: () => `
`, cellMenu: { hideCloseButton: false, commandTitle: 'Commands', @@ -372,21 +372,21 @@ export default class Example12 { { command: 'edit', title: 'Edit Row', - iconCssClass: 'sgi sgi-square-edit-outline', + iconCssClass: 'mdi mdi-square-edit-outline', positionOrder: 66, action: () => this.openCompositeModal('edit'), }, { command: 'clone', title: 'Clone Row', - iconCssClass: 'sgi sgi-content-copy', + iconCssClass: 'mdi mdi-content-copy', positionOrder: 66, action: () => this.openCompositeModal('clone'), }, 'divider', { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'sgi sgi-close', cssClass: 'has-text-danger', textCssClass: 'text-italic', + iconCssClass: 'mdi mdi-close', cssClass: 'has-text-danger', textCssClass: 'text-italic', // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext?.completed; @@ -590,9 +590,9 @@ export default class Example12 { const args = event?.detail?.args; const eventData = event?.detail?.eventData; console.log(eventData, args); - // if (eventData.target.classList.contains('sgi-help-circle-outline')) { + // if (eventData.target.classList.contains('mdi-help-circle-outline')) { // alert('please HELP!!!'); - // } else if (eventData.target.classList.contains('sgi-chevron-down')) { + // } else if (eventData.target.classList.contains('mdi-chevron-down')) { // alert('do something else...'); // } } @@ -865,57 +865,57 @@ export default class Example12 { /** List of icons that are supported in this lib Material Design Icons */ getRandomIcon(iconIndex?: number) { const icons = [ - 'sgi-arrow-collapse', - 'sgi-arrow-expand', - 'sgi-cancel', - 'sgi-check', - 'sgi-checkbox-blank-outline', - 'sgi-check-box-outline', - 'sgi-checkbox-marked', - 'sgi-close', - 'sgi-close-circle', - 'sgi-close-circle-outline', - 'sgi-close-thick', - 'sgi-content-copy', - 'sgi-database-refresh', - 'sgi-download', - 'sgi-file-document-outline', - 'sgi-file-excel-outline', - 'sgi-file-music-outline', - 'sgi-file-pdf-outline', - 'sgi-filter-remove-outline', - 'sgi-flip-vertical', - 'sgi-folder', - 'sgi-folder-open', - 'sgi-help-circle', - 'sgi-help-circle-outline', - 'sgi-history', - 'sgi-information', - 'sgi-information-outline', - 'sgi-link', - 'sgi-link-variant', - 'sgi-menu', - 'sgi-microsoft-excel', - 'sgi-minus', - 'sgi-page-first', - 'sgi-page-last', - 'sgi-paperclip', - 'sgi-pin-off-outline', - 'sgi-pin-outline', - 'sgi-playlist-plus', - 'sgi-playlist-remove', - 'sgi-plus', - 'sgi-redo', - 'sgi-refresh', - 'sgi-shape-square-plus', - 'sgi-sort-ascending', - 'sgi-sort-descending', - 'sgi-swap-horizontal', - 'sgi-swap-vertical', - 'sgi-sync', - 'sgi-table-edit', - 'sgi-table-refresh', - 'sgi-undo', + 'mdi-arrow-collapse', + 'mdi-arrow-expand', + 'mdi-cancel', + 'mdi-check', + 'mdi-checkbox-blank-outline', + 'mdi-check-box-outline', + 'mdi-checkbox-marked', + 'mdi-close', + 'mdi-close-circle', + 'mdi-close-circle-outline', + 'mdi-close-thick', + 'mdi-content-copy', + 'mdi-database-refresh', + 'mdi-download', + 'mdi-file-document-outline', + 'mdi-file-excel-outline', + 'mdi-file-music-outline', + 'mdi-file-pdf-outline', + 'mdi-filter-remove-outline', + 'mdi-flip-vertical', + 'mdi-folder', + 'mdi-folder-open', + 'mdi-help-circle', + 'mdi-help-circle-outline', + 'mdi-history', + 'mdi-information', + 'mdi-information-outline', + 'mdi-link', + 'mdi-link-variant', + 'mdi-menu', + 'mdi-microsoft-excel', + 'mdi-minus', + 'mdi-page-first', + 'mdi-page-last', + 'mdi-paperclip', + 'mdi-pin-off-outline', + 'mdi-pin-outline', + 'mdi-playlist-plus', + 'mdi-playlist-remove', + 'mdi-plus', + 'mdi-redo', + 'mdi-refresh', + 'mdi-shape-square-plus', + 'mdi-sort-ascending', + 'mdi-sort-descending', + 'mdi-swap-horizontal', + 'mdi-swap-vertical', + 'mdi-sync', + 'mdi-table-edit', + 'mdi-table-refresh', + 'mdi-undo', ]; const randomNumber = Math.floor((Math.random() * icons.length - 1)); return icons[iconIndex ?? randomNumber]; @@ -925,11 +925,11 @@ export default class Example12 { return `
- +
- + ${item.itemName}
@@ -943,11 +943,11 @@ export default class Example12 { return `
- +
- + ${item.itemName} ${formatNumber(item.listPrice, 2, 2, false, '$')} diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example13.html b/examples/vite-demo-vanilla-bundle/src/examples/example13.html index 42aeaaafc..1dfc16936 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example13.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example13.html @@ -5,7 +5,7 @@

- code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example13.ts b/examples/vite-demo-vanilla-bundle/src/examples/example13.ts index 51c8905ab..8d07b5fd3 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example13.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example13.ts @@ -98,13 +98,13 @@ export default class Example13 { const command = args.command; if (command === 'toggle-highlight') { - if (button.cssClass === 'sgi sgi-lightbulb-on text-color-danger') { + if (button.cssClass === 'mdi mdi-lightbulb-on text-color-danger') { if (gridNo === 1) { delete columns1WithHighlightingById[column.id]; } else { delete columns2WithHighlightingById[column.id]; } - button.cssClass = 'sgi sgi-lightbulb-outline text-color-warning faded'; + button.cssClass = 'mdi mdi-lightbulb-outline text-color-warning faded'; button.tooltip = 'Highlight negative numbers.'; } else { if (gridNo === 1) { @@ -112,7 +112,7 @@ export default class Example13 { } else { columns2WithHighlightingById[column.id] = true; } - button.cssClass = 'sgi sgi-lightbulb-on text-color-danger'; + button.cssClass = 'mdi mdi-lightbulb-on text-color-danger'; button.tooltip = 'Remove highlight.'; } this[`sgb${gridNo}`].slickGrid?.invalidate(); @@ -143,7 +143,7 @@ export default class Example13 { header: { buttons: [ { - cssClass: 'sgi sgi-lightbulb-outline text-color-warning faded', + cssClass: 'mdi mdi-lightbulb-outline text-color-warning faded', command: 'toggle-highlight', tooltip: 'Highlight negative numbers.', itemVisibilityOverride: (args) => { @@ -170,25 +170,25 @@ export default class Example13 { this[`columnDefinitions${gridNo}`][0].header = { buttons: [ { - cssClass: 'sgi sgi-message-text', + cssClass: 'mdi mdi-message-text', handler: () => { alert('Tag'); } }, { - cssClass: 'sgi sgi-forum-outline', + cssClass: 'mdi mdi-forum-outline', handler: () => { alert('Comment'); } }, { - cssClass: 'sgi sgi-information-outline', + cssClass: 'mdi mdi-information-outline', handler: () => { alert('Info'); } }, { - cssClass: 'sgi sgi-help-circle-outline', + cssClass: 'mdi mdi-help-circle-outline', handler: () => { alert('Help'); } @@ -206,7 +206,7 @@ export default class Example13 { this[`columnDefinitions${gridNo}`][1].header = { buttons: [ { - cssClass: 'sgi sgi-help-circle-outline', + cssClass: 'mdi mdi-help-circle-outline', showOnHover: true, tooltip: 'This button only appears on hover.', handler: () => { diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.html b/examples/vite-demo-vanilla-bundle/src/examples/example14.html index 69acbb5d1..4714072f4 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example14.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example14.html @@ -6,7 +6,7 @@

- code + code

@@ -30,14 +30,14 @@

Container Width (1000px)

@@ -46,20 +46,20 @@

Container Width (1000px)

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts index cf6117f9e..f8fadce2b 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts @@ -326,7 +326,7 @@ export default class Example14 { { id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70, excludeFromExport: true, - formatter: () => `
`, + formatter: () => `
`, cellMenu: { hideCloseButton: false, commandTitle: 'Commands', @@ -334,14 +334,14 @@ export default class Example14 { { command: 'help', title: 'Help!', - iconCssClass: 'sgi sgi-circle-question', + iconCssClass: 'mdi mdi-circle-question', positionOrder: 66, action: () => alert('Please Help!'), }, 'divider', { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'sgi sgi-close text-color-danger', cssClass: 'red', textCssClass: 'text-italic text-color-danger-light', + iconCssClass: 'mdi mdi-close text-color-danger', cssClass: 'red', textCssClass: 'text-italic text-color-danger-light', // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext?.completed; @@ -384,14 +384,14 @@ export default class Example14 { { command: 'feedback', title: 'Feedback', positionOrder: 100, commandItems: [ - { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'sgi sgi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, + { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, 'divider', { - command: 'sub-menu', title: 'Contact Us', iconCssClass: 'sgi sgi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', + command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', commandItems: [ - { command: 'contact-email', title: 'Email us', iconCssClass: 'sgi sgi-pencil-outline' }, - { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'sgi sgi-message-text-outline' }, - { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'sgi sgi-coffee' }, + { command: 'contact-email', title: 'Email us', iconCssClass: 'mdi mdi-pencil-outline' }, + { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'mdi mdi-message-text-outline' }, + { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'mdi mdi-coffee' }, ] } ] @@ -486,7 +486,7 @@ export default class Example14 { // when using the cellMenu, you can change some of the default options and all use some of the callback methods enableCellMenu: true, headerMenu: { - subItemChevronClass: 'sgi sgi-chevron-down sgi-rotate-270', + subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', onCommand: (_e, args) => { // e.preventDefault(); // preventing default event would keep the menu open after the execution const command = args.item?.command; @@ -507,7 +507,7 @@ export default class Example14 { } showSpinner() { - this.loadingClass = 'sgi sgi-load sgi-spin-1s sgi-24px text-color-alt-success'; + this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-24px text-color-alt-success'; } loadData(count: number) { @@ -760,7 +760,7 @@ export default class Example14 { listPrice: 2100.23, itemTypeName: 'I', image: 'http://i.stack.imgur.com/pC1Tv.jpg', - icon: `sgi ${this.getRandomIcon(0)}`, + icon: `mdi ${this.getRandomIcon(0)}`, }, { id: 1, @@ -769,7 +769,7 @@ export default class Example14 { listPrice: 3200.12, itemTypeName: 'I', image: 'https://i.imgur.com/Fnm7j6h.jpg', - icon: `sgi ${this.getRandomIcon(1)}`, + icon: `mdi ${this.getRandomIcon(1)}`, }, { id: 2, @@ -778,7 +778,7 @@ export default class Example14 { listPrice: 15.00, itemTypeName: 'I', image: 'https://i.imgur.com/RaVJuLr.jpg', - icon: `sgi ${this.getRandomIcon(2)}`, + icon: `mdi ${this.getRandomIcon(2)}`, }, { id: 3, @@ -787,7 +787,7 @@ export default class Example14 { listPrice: 25.76, itemTypeName: 'I', image: 'http://i.stack.imgur.com/pC1Tv.jpg', - icon: `sgi ${this.getRandomIcon(3)}`, + icon: `mdi ${this.getRandomIcon(3)}`, }, { id: 4, @@ -796,7 +796,7 @@ export default class Example14 { listPrice: 13.35, itemTypeName: 'I', image: 'https://i.imgur.com/Fnm7j6h.jpg', - icon: `sgi ${this.getRandomIcon(4)}`, + icon: `mdi ${this.getRandomIcon(4)}`, }, { id: 5, @@ -805,7 +805,7 @@ export default class Example14 { listPrice: 23.33, itemTypeName: 'I', image: 'https://i.imgur.com/RaVJuLr.jpg', - icon: `sgi ${this.getRandomIcon(5)}`, + icon: `mdi ${this.getRandomIcon(5)}`, }, { id: 6, @@ -814,7 +814,7 @@ export default class Example14 { listPrice: 71.21, itemTypeName: 'I', image: 'http://i.stack.imgur.com/pC1Tv.jpg', - icon: `sgi ${this.getRandomIcon(6)}`, + icon: `mdi ${this.getRandomIcon(6)}`, }, { id: 7, @@ -823,7 +823,7 @@ export default class Example14 { listPrice: 2.43, itemTypeName: 'I', image: 'https://i.imgur.com/Fnm7j6h.jpg', - icon: `sgi ${this.getRandomIcon(7)}`, + icon: `mdi ${this.getRandomIcon(7)}`, }, { id: 8, @@ -832,7 +832,7 @@ export default class Example14 { listPrice: 31288.39, itemTypeName: 'I', image: 'https://i.imgur.com/RaVJuLr.jpg', - icon: `sgi ${this.getRandomIcon(8)}`, + icon: `mdi ${this.getRandomIcon(8)}`, }, ]; } @@ -840,57 +840,57 @@ export default class Example14 { /** List of icons that are supported in this lib Material Design Icons */ getRandomIcon(iconIndex?: number) { const icons = [ - 'sgi-arrow-collapse', - 'sgi-arrow-expand', - 'sgi-cancel', - 'sgi-check', - 'sgi-checkbox-blank-outline', - 'sgi-check-box-outline', - 'sgi-checkbox-marked', - 'sgi-close', - 'sgi-close-circle', - 'sgi-close-circle-outline', - 'sgi-close-thick', - 'sgi-content-copy', - 'sgi-database-refresh', - 'sgi-download', - 'sgi-file-document-outline', - 'sgi-file-excel-outline', - 'sgi-file-music-outline', - 'sgi-file-pdf-outline', - 'sgi-filter-remove-outline', - 'sgi-flip-vertical', - 'sgi-folder', - 'sgi-folder-open', - 'sgi-help-circle', - 'sgi-help-circle-outline', - 'sgi-history', - 'sgi-information', - 'sgi-information-outline', - 'sgi-link', - 'sgi-link-variant', - 'sgi-menu', - 'sgi-microsoft-excel', - 'sgi-minus', - 'sgi-page-first', - 'sgi-page-last', - 'sgi-paperclip', - 'sgi-pin-off-outline', - 'sgi-pin-outline', - 'sgi-playlist-plus', - 'sgi-playlist-remove', - 'sgi-plus', - 'sgi-redo', - 'sgi-refresh', - 'sgi-shape-square-plus', - 'sgi-sort-ascending', - 'sgi-sort-descending', - 'sgi-swap-horizontal', - 'sgi-swap-vertical', - 'sgi-sync', - 'sgi-table-edit', - 'sgi-table-refresh', - 'sgi-undo', + 'mdi-arrow-collapse', + 'mdi-arrow-expand', + 'mdi-cancel', + 'mdi-check', + 'mdi-checkbox-blank-outline', + 'mdi-check-box-outline', + 'mdi-checkbox-marked', + 'mdi-close', + 'mdi-close-circle', + 'mdi-close-circle-outline', + 'mdi-close-thick', + 'mdi-content-copy', + 'mdi-database-refresh', + 'mdi-download', + 'mdi-file-document-outline', + 'mdi-file-excel-outline', + 'mdi-file-music-outline', + 'mdi-file-pdf-outline', + 'mdi-filter-remove-outline', + 'mdi-flip-vertical', + 'mdi-folder', + 'mdi-folder-open', + 'mdi-help-circle', + 'mdi-help-circle-outline', + 'mdi-history', + 'mdi-information', + 'mdi-information-outline', + 'mdi-link', + 'mdi-link-variant', + 'mdi-menu', + 'mdi-microsoft-excel', + 'mdi-minus', + 'mdi-page-first', + 'mdi-page-last', + 'mdi-paperclip', + 'mdi-pin-off-outline', + 'mdi-pin-outline', + 'mdi-playlist-plus', + 'mdi-playlist-remove', + 'mdi-plus', + 'mdi-redo', + 'mdi-refresh', + 'mdi-shape-square-plus', + 'mdi-sort-ascending', + 'mdi-sort-descending', + 'mdi-swap-horizontal', + 'mdi-swap-vertical', + 'mdi-sync', + 'mdi-table-edit', + 'mdi-table-refresh', + 'mdi-undo', ]; const randomNumber = Math.floor((Math.random() * icons.length - 1)); return icons[iconIndex ?? randomNumber]; @@ -900,11 +900,11 @@ export default class Example14 { return `
- +
- + ${item.itemName}
@@ -918,11 +918,11 @@ export default class Example14 { return `
- +
- + ${item.itemName} ${formatNumber(item.listPrice, 2, 2, false, '$')} diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example15.html b/examples/vite-demo-vanilla-bundle/src/examples/example15.html index 1caa2e6c4..2bbc1879f 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example15.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example15.html @@ -5,7 +5,7 @@

- code + code

@@ -20,7 +20,7 @@
@@ -45,10 +45,10 @@
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example15.ts b/examples/vite-demo-vanilla-bundle/src/examples/example15.ts index 65f85377a..75ac5c3f5 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example15.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example15.ts @@ -99,7 +99,7 @@ export default class Example15 { // example 2 (async w/Observable): // when using async, the `formatter` will contain the loading spinner // you will need to provide an `asyncPost` function returning a Promise and also `asyncPostFormatter` formatter to display the result once the Promise resolves - formatter: () => `
loading...
`, + formatter: () => `
loading...
`, asyncProcess: (_row, _cell, _value, _column, dataContext) => new Observable((observer) => { observer.next({ // return random door number & zip code to simulare company address diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.html b/examples/vite-demo-vanilla-bundle/src/examples/example16.html index 1e36f862c..25f2e5f16 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example16.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example16.html @@ -3,7 +3,7 @@

(with Salesforce Theme) @@ -12,7 +12,7 @@

- code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.ts b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts index 6e1982010..4f6e37153 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example16.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts @@ -40,7 +40,7 @@ export default class Example16 { this.dataset = this.loadData(500); const gridContainerElm = document.querySelector(`.grid16`) as HTMLDivElement; - this._bindingEventService.bind(gridContainerElm, 'onbeforeexporttoexcel', () => this.loadingClass = 'sgi sgi-load sgi-spin-1s sgi-22px'); + this._bindingEventService.bind(gridContainerElm, 'onbeforeexporttoexcel', () => this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-22px'); this._bindingEventService.bind(gridContainerElm, 'onafterexporttoexcel', () => this.loadingClass = ''); this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset); } @@ -73,7 +73,7 @@ export default class Example16 { // example 2 (async): // when using async, the `formatter` will contain the loading spinner // you will need to provide an `asyncPost` function returning a Promise and also `asyncPostFormatter` formatter to display the result once the Promise resolves - formatter: () => `
loading...
`, + formatter: () => `
loading...
`, asyncProcess: () => new Promise(resolve => { setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), this.serverApiDelay); }), @@ -280,7 +280,7 @@ export default class Example16 { }, { id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70, - formatter: () => `
`, + formatter: () => `
`, excludeFromExport: true, // customTooltip: { // formatter: () => `Click to open Cell Menu`, // return empty so it won't show any pre-tooltip @@ -306,7 +306,7 @@ export default class Example16 { { command: 'command1', title: 'Command 1', cssClass: 'orange', positionOrder: 61 }, { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'sgi sgi-close', cssClass: 'red', textCssClass: 'bold', + iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold', // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext.completed; @@ -319,7 +319,7 @@ export default class Example16 { { command: 'help', title: 'Help', - iconCssClass: 'sgi sgi-help-circle-outline', + iconCssClass: 'mdi mdi-help-circle-outline', positionOrder: 66, }, { command: 'something', title: 'Disabled Command', disabled: true, positionOrder: 67, } @@ -506,7 +506,7 @@ export default class Example16 { } for (let i = 0; i < iconCount; i++) { const iconColor = iconCount === 5 ? 'text-color-success' : iconCount >= 3 ? 'text-color-alt-warning' : 'text-color-se-secondary-light'; - output += ``; + output += ``; } return output; } diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example17.html b/examples/vite-demo-vanilla-bundle/src/examples/example17.html index efdcc77c8..8abcbf8c2 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example17.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example17.html @@ -4,7 +4,7 @@

Example 17 - Auto-Scroll with Range Selector see - code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example18.html b/examples/vite-demo-vanilla-bundle/src/examples/example18.html index 5a83f81bf..474d3e91e 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example18.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example18.html @@ -5,7 +5,7 @@

see - code + code

@@ -26,13 +26,13 @@
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example18.ts b/examples/vite-demo-vanilla-bundle/src/examples/example18.ts index 9e5c13acc..42dfb0be5 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example18.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example18.ts @@ -25,7 +25,7 @@ const priceFormatter: Formatter = (_cell, _row, value, _col, dataContext) => { const direction = dataContext.priceChange >= 0 ? 'up' : 'down'; const fragment = new DocumentFragment(); const spanElm = document.createElement('span'); - spanElm.className = `sgi sgi-arrow-${direction} text-color-${direction === 'up' ? 'success' : 'danger'}`; + spanElm.className = `mdi mdi-arrow-${direction} text-color-${direction === 'up' ? 'success' : 'danger'}`; fragment.appendChild(spanElm); if (value instanceof HTMLElement) { fragment.appendChild(value); @@ -34,7 +34,7 @@ const priceFormatter: Formatter = (_cell, _row, value, _col, dataContext) => { }; const transactionTypeFormatter: Formatter = (_row, _cell, value: string) => - ` ${value}`; + ` ${value}`; const historicSparklineFormatter: Formatter = (_row, _cell, _value: string, _col, dataContext) => { const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); @@ -57,7 +57,7 @@ export default class Example18 { maxChangePerCycle = 10; refreshRate = 75; timer: any; - toggleClassName = this.isFullScreen ? 'icon sgi sgi-arrow-collapse' : 'icon sgi sgi-arrow-expand'; + toggleClassName = this.isFullScreen ? 'icon mdi mdi-arrow-collapse' : 'icon mdi mdi-arrow-expand'; sgb: SlickVanillaGridBundle; attached() { @@ -176,9 +176,9 @@ export default class Example18 { }, draggableGrouping: { dropPlaceHolderText: 'Drop a column header here to group by any of these available columns: Currency, Market or Type', - deleteIconCssClass: 'sgi sgi-close text-color-danger', - sortAscIconCssClass: 'sgi sgi-arrow-up', - sortDescIconCssClass: 'sgi sgi-arrow-down', + deleteIconCssClass: 'mdi mdi-close text-color-danger', + sortAscIconCssClass: 'mdi mdi-arrow-up', + sortDescIconCssClass: 'mdi mdi-arrow-down', }, enableDraggableGrouping: true, createPreHeaderPanel: true, diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example19.html b/examples/vite-demo-vanilla-bundle/src/examples/example19.html index 0810caea4..7ceb872d1 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example19.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example19.html @@ -12,7 +12,7 @@

see - code + code

@@ -26,11 +26,11 @@
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example20.html b/examples/vite-demo-vanilla-bundle/src/examples/example20.html index ef8f2b546..eda0c3e8c 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example20.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example20.html @@ -5,7 +5,7 @@

see - code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example21.html b/examples/vite-demo-vanilla-bundle/src/examples/example21.html index 5bb52ec95..6f82bbfa2 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example21.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example21.html @@ -3,7 +3,7 @@

(with Salesforce Theme) @@ -12,7 +12,7 @@

see - code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example21.ts b/examples/vite-demo-vanilla-bundle/src/examples/example21.ts index 9511b03e1..4a78a3b4f 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example21.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example21.ts @@ -195,7 +195,7 @@ export default class Example21 { /** Loading template, can be an HTML string or an HTML Element */ loadingTemplate() { const headerElm = createDomElement('h5', { className: 'title is-5' }); - headerElm.appendChild(createDomElement('i', { className: 'sgi sgi-load sgi-spin-1s sgi-40px' })); + headerElm.appendChild(createDomElement('i', { className: 'mdi mdi-load mdi-spin-1s mdi-40px' })); headerElm.appendChild(document.createTextNode('Loading...')); return headerElm; diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example22.html b/examples/vite-demo-vanilla-bundle/src/examples/example22.html index f7cf887f4..54d794e1b 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example22.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example22.html @@ -8,7 +8,7 @@

target="_blank" href="https://github.com/ghiscoding/slickgrid-universal/blob/master/examples/vite-demo-vanilla-bundle/src/examples/example22.ts" > - code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example22.ts b/examples/vite-demo-vanilla-bundle/src/examples/example22.ts index 633f69bb4..8cc705e12 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example22.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example22.ts @@ -183,7 +183,7 @@ export default class Example22 { }, actionButtons: { editButtonClassName: 'button-style padding-3px mr-2', - iconEditButtonClassName: 'sgi sgi-pencil', + iconEditButtonClassName: 'mdi mdi-pencil', // since no title and no titleKey is provided, it will fallback to the default text provided by the plugin // if the title is provided but no titleKey, it will override the default text // last but not least if a titleKey is provided, it will use the translation key to translate the text @@ -192,18 +192,18 @@ export default class Example22 { cancelButtonClassName: 'button-style padding-3px', cancelButtonTitle: 'Cancel row', cancelButtonTitleKey: 'RBE_BTN_CANCEL', - iconCancelButtonClassName: 'sgi sgi-undo text-color-danger', + iconCancelButtonClassName: 'mdi mdi-undo text-color-danger', cancelButtonPrompt: 'Are you sure you want to cancel your changes?', updateButtonClassName: 'button-style padding-3px mr-2', updateButtonTitle: 'Update row', updateButtonTitleKey: 'RBE_BTN_UPDATE', - iconUpdateButtonClassName: 'sgi sgi-check text-color-success', + iconUpdateButtonClassName: 'mdi mdi-check text-color-success', updateButtonPrompt: 'Save changes?', deleteButtonClassName: 'button-style padding-3px', deleteButtonTitle: 'Delete row', - iconDeleteButtonClassName: 'sgi sgi-trash-can text-color-danger', + iconDeleteButtonClassName: 'mdi mdi-trash-can text-color-danger', deleteButtonPrompt: 'Are you sure you want to delete this row?', }, }, diff --git a/examples/vite-demo-vanilla-bundle/src/examples/icons.html b/examples/vite-demo-vanilla-bundle/src/examples/icons.html index edae47479..02350566a 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/icons.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/icons.html @@ -1,8 +1,8 @@ -

SlickGrid Icons +

SlickGrid Material Icons (icons & utilities that are available in Slickgrid-Universal) @@ -10,7 +10,7 @@

SlickGrid Icons - + All icons came from Material Design Icons - Official Website (+5000 icons) @@ -25,19 +25,19 @@

-
sgi-spin
-
sgi-spin-1s
-
sgi-spin-2s
-
sgi-spin-3s
-
sgi-spin-4s
-
sgi-spin-5s
-
sgi-rotate-45
-
sgi-rotate-90
-
sgi-rotate-135
-
sgi-rotate-180
-
sgi-rotate-220
-
sgi-flip-h
-
sgi-flip-v
+
mdi-spin
+
mdi-spin-1s
+
mdi-spin-2s
+
mdi-spin-3s
+
mdi-spin-4s
+
mdi-spin-5s
+
mdi-rotate-45
+
mdi-rotate-90
+
mdi-rotate-135
+
mdi-rotate-180
+
mdi-rotate-220
+
mdi-flip-h
+
mdi-flip-v

@@ -45,12 +45,12 @@

(from 8px up to 50px)

-
sgi-8px
-
sgi-10px
-
sgi-15px
-
sgi-20px
-
sgi-25px
-
sgi-50px
+
mdi-8px
+
mdi-10px
+
mdi-15px
+
mdi-20px
+
mdi-25px
+
mdi-50px
@@ -83,27 +83,27 @@
- + button-style padding-0px
- + button-style padding-1px
- + button-style padding-2px
- + button-style padding-5px
- + button-style padding-15px
- + button-style padding-18px
@@ -115,203 +115,203 @@

- + text-color-primary
- + text-color-primary-light
- + text-color-primary-dark
- + text-color-secondary
- + text-color-secondary-light
- + text-color-secondary-dark
- + text-color-success
- + text-color-success-light
- + text-color-success-dark
- + text-color-danger
- + text-color-danger-light
- + text-color-danger-dark
- + text-color-warning
- + text-color-warning-light
- + text-color-warning-dark
- + text-color-info
- + text-color-info-light
- + text-color-info-dark
- + text-color-muted
- + text-color-muted-light
- + text-color-muted-dark
- + text-color-alt-default
- + text-color-alt-default-light
- + text-color-alt-default-dark
- + text-color-alt-warning
- + text-color-alt-warning-light
- + text-color-alt-warning-dark
- + text-color-alt-danger
- + text-color-alt-danger-light
- + text-color-alt-danger-dark
- + text-color-alt-success
- + text-color-alt-success-light
- + text-color-alt-success-dark
- + text-color-se-primary
- + text-color-se-link
- + text-color-se-link-dark
- + text-color-se-danger
- + text-color-se-secondary-light
- + text-color-se-secondary
- + text-color-se-warning
- + text-color-se-warning-light
- + text-color-sf-highlight
- + text-color-sf-primary
- + text-color-sf-primary-dark
- + text-color-dark
- + text-color-body
- + text-color-disabled
- + text-color-disabled-dark
- + text-color-light
- + text-color-white
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/icons.ts b/examples/vite-demo-vanilla-bundle/src/examples/icons.ts index cd7474229..a19cda238 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/icons.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/icons.ts @@ -17,17 +17,17 @@ export default class Icons { const iconElm = document.createElement('span'); iconElm.className = icon.replace(/\./gi, ' '); - if (icon.includes('sgi-change-record-type')) { - iconElm.classList.add('sgi-20px'); + if (icon.includes('mdi-change-record-type')) { + iconElm.classList.add('mdi-20px'); } else { - iconElm.classList.add('sgi-24px'); + iconElm.classList.add('mdi-24px'); } - iconElm.title = icon.replace('.sgi.', ''); + iconElm.title = icon.replace('.mdi.', ''); iconElm.style.marginRight = '5px'; iconDivElm.appendChild(iconElm); const iconNameElm = document.createElement('span'); - iconNameElm.textContent = icon.replace('.sgi.', ''); + iconNameElm.textContent = icon.replace('.mdi.', ''); iconDivElm.appendChild(iconNameElm); iconContainerElm.appendChild(iconDivElm); @@ -52,210 +52,210 @@ export default class Icons { getIcons() { return [ - '.sgi.sgi-account', - '.sgi.sgi-account-box', - '.sgi.sgi-account-box-outline', - '.sgi.sgi-account-circle', - '.sgi.sgi-account-edit', - '.sgi.sgi-account-minus', - '.sgi.sgi-account-off', - '.sgi.sgi-account-plus', - '.sgi.sgi-account-search', - '.sgi.sgi-alarm', - '.sgi.sgi-alarm-check', - '.sgi.sgi-alarm-off', - '.sgi.sgi-alert', - '.sgi.sgi-alert-box', - '.sgi.sgi-alert-box-outline', - '.sgi.sgi-alert-circle', - '.sgi.sgi-alert-octagon', - '.sgi.sgi-alert-outline', - '.sgi.sgi-alert-rhombus', - '.sgi.sgi-alert-rhombus-outline', - '.sgi.sgi-arrow-collapse', - '.sgi.sgi-arrow-down', - '.sgi.sgi-arrow-down-bold', - '.sgi.sgi-arrow-down-bold-box', - '.sgi.sgi-arrow-down-bold-box-outline', - '.sgi.sgi-arrow-down-bold-outline', - '.sgi.sgi-arrow-expand', - '.sgi.sgi-arrow-expand-horizontal', - '.sgi.sgi-arrow-split-vertical', - '.sgi.sgi-brightness-4', - '.sgi.sgi-calendar', - '.sgi.sgi-calendar-check', - '.sgi.sgi-calendar-clock', - '.sgi.sgi-calendar-edit', - '.sgi.sgi-calendar-remove', - '.sgi.sgi-calendar-search', - '.sgi.sgi-call-split', - '.sgi.sgi-cancel', - '.sgi.sgi-cash-check', - '.sgi.sgi-cash-remove', - '.sgi.sgi-certificate', - '.sgi.sgi-certificate-outline', - '.sgi.sgi-change-record-type', - '.sgi.sgi-check', - '.sgi.sgi-check-all', - '.sgi.sgi-check-bold', - '.sgi.sgi-checkbox-blank-outline', - '.sgi.sgi-checkbox-marked-circle-outline', - '.sgi.sgi-check-box-outline', - '.sgi.sgi-checkbox-marked', - '.sgi.sgi-check-circle', - '.sgi.sgi-check-circle-outline', - '.sgi.sgi-check-outline', - '.sgi.sgi-check-underline', - '.sgi.sgi-chevron-down', - '.sgi.sgi-chevron-down-box', - '.sgi.sgi-chevron-down-box-outline', - '.sgi.sgi-chevron-down-circle', - '.sgi.sgi-chevron-down-circle-outline', - '.sgi.sgi-clipboard-check', - '.sgi.sgi-clipboard-check-outline', - '.sgi.sgi-clipboard-edit', - '.sgi.sgi-clipboard-edit-outline', - '.sgi.sgi-clipboard-multiple', - '.sgi.sgi-clipboard-multiple-outline', - '.sgi.sgi-clipboard-outline', - '.sgi.sgi-close', - '.sgi.sgi-close-circle', - '.sgi.sgi-close-circle-outline', - '.sgi.sgi-close-thick', - '.sgi.sgi-coffee', - '.sgi.sgi-coffee-outline', - '.sgi.sgi-cog', - '.sgi.sgi-cog-outline', - '.sgi.sgi-content-copy', - '.sgi.sgi-currency-usd', - '.sgi.sgi-currency-usd-off', - '.sgi.sgi-database-refresh', - '.sgi.sgi-delete', - '.sgi.sgi-delete-outline', - '.sgi.sgi-dots-grid', - '.sgi.sgi-dots-vertical', - '.sgi.sgi-download', - '.sgi.sgi-drag', - '.sgi.sgi-drag-vertical', - '.sgi.sgi-eye-off-outline', - '.sgi.sgi-eye-outline', - '.sgi.sgi-file', - '.sgi.sgi-file-alert', - '.sgi.sgi-file-alert-outline', - '.sgi.sgi-file-cad', - '.sgi.sgi-file-check', - '.sgi.sgi-file-check-outline', - '.sgi.sgi-file-document-outline', - '.sgi.sgi-file-excel-outline', - '.sgi.sgi-file-move', - '.sgi.sgi-file-move-outline', - '.sgi.sgi-file-multiple', - '.sgi.sgi-file-multiple-outline', - '.sgi.sgi-file-music-outline', - '.sgi.sgi-file-outline', - '.sgi.sgi-file-pdf-outline', - '.sgi.sgi-file-question', - '.sgi.sgi-file-question-outline', - '.sgi.sgi-file-search-outline', - '.sgi.sgi-file-send', - '.sgi.sgi-file-send-outline', - '.sgi.sgi-file-tree', - '.sgi.sgi-file-tree-outline', - '.sgi.sgi-file-upload', - '.sgi.sgi-file-upload-outline', - '.sgi.sgi-filter', - '.sgi.sgi-filter-minus-outline', - '.sgi.sgi-filter-off-outline', - '.sgi.sgi-filter-outline', - '.sgi.sgi-filter-plus-outline', - '.sgi.sgi-filter-remove-outline', - '.sgi.sgi-fire', - '.sgi.sgi-flip-vertical', - '.sgi.sgi-folder', - '.sgi.sgi-folder-open', - '.sgi.sgi-forum', - '.sgi.sgi-forum-outline', - '.sgi.sgi-github', - '.sgi.sgi-help', - '.sgi.sgi-help-circle', - '.sgi.sgi-help-circle-outline', - '.sgi.sgi-history', - '.sgi.sgi-information', - '.sgi.sgi-information-outline', - '.sgi.sgi-lightbulb', - '.sgi.sgi-lightbulb-off', - '.sgi.sgi-lightbulb-off-outline', - '.sgi.sgi-lightbulb-on', - '.sgi.sgi-lightbulb-on-outline', - '.sgi.sgi-lightbulb-outline', - '.sgi.sgi-link', - '.sgi.sgi-link-variant', - '.sgi.sgi-load', - '.sgi.sgi-magnify', - '.sgi.sgi-map-marker-radius', - '.sgi.sgi-map-marker-radius-outline', - '.sgi.sgi-menu', - '.sgi.sgi-message-text', - '.sgi.sgi-message-text-outline', - '.sgi.sgi-microsoft-excel', - '.sgi.sgi-minus', - '.sgi.sgi-minus-circle', - '.sgi.sgi-minus-circle-outline', - '.sgi.sgi-order-bool-ascending-variant', - '.sgi.sgi-page-first', - '.sgi.sgi-page-last', - '.sgi.sgi-paperclip', - '.sgi.sgi-pencil', - '.sgi.sgi-pencil-outline', - '.sgi.sgi-pencil-box-multiple', - '.sgi.sgi-pencil-box-multiple-outline', - '.sgi.sgi-percent', - '.sgi.sgi-percent-outline', - '.sgi.sgi-pin-off-outline', - '.sgi.sgi-pin-outline', - '.sgi.sgi-play-circle-outline', - '.sgi.sgi-playlist-plus', - '.sgi.sgi-playlist-remove', - '.sgi.sgi-plus', - '.sgi.sgi-plus-circle', - '.sgi.sgi-plus-circle-outline', - '.sgi.sgi-progress-download', - '.sgi.sgi-redo', - '.sgi.sgi-refresh', - '.sgi.sgi-shape-square-plus', - '.sgi.sgi-snowflake', - '.sgi.sgi-sort-ascending', - '.sgi.sgi-sort-descending', - '.sgi.sgi-sort-variant-off', - '.sgi.sgi-sort-variant-remove', - '.sgi.sgi-square-edit-outline', - '.sgi.sgi-star', - '.sgi.sgi-star-outline', - '.sgi.sgi-stop-circle-outline', - '.sgi.sgi-subdirectory-arrow-right', - '.sgi.sgi-swap-horizontal', - '.sgi.sgi-swap-vertical', - '.sgi.sgi-sync', - '.sgi.sgi-sync-circle', - '.sgi.sgi-table-edit', - '.sgi.sgi-table-refresh', - '.sgi.sgi-text-box-remove', - '.sgi.sgi-text-box-remove-outline', - '.sgi.sgi-text-box-search-outline', - '.sgi.sgi-theme-light-dark', - '.sgi.sgi-toggle-switch', - '.sgi.sgi-toggle-switch-off-outline', - '.sgi.sgi-trash-can', - '.sgi.sgi-trash-can-outline', - '.sgi.sgi-truck', - '.sgi.sgi-truck-delivery-outline', - '.sgi.sgi-tune', - '.sgi.sgi-tune-variant', - '.sgi.sgi-undo', - '.sgi.sgi-upload', - '.sgi.sgi-vanish', - '.sgi.sgi-wrench', - '.sgi.sgi-wrench-outline', + '.mdi.mdi-account', + '.mdi.mdi-account-box', + '.mdi.mdi-account-box-outline', + '.mdi.mdi-account-circle', + '.mdi.mdi-account-edit', + '.mdi.mdi-account-minus', + '.mdi.mdi-account-off', + '.mdi.mdi-account-plus', + '.mdi.mdi-account-search', + '.mdi.mdi-alarm', + '.mdi.mdi-alarm-check', + '.mdi.mdi-alarm-off', + '.mdi.mdi-alert', + '.mdi.mdi-alert-box', + '.mdi.mdi-alert-box-outline', + '.mdi.mdi-alert-circle', + '.mdi.mdi-alert-octagon', + '.mdi.mdi-alert-outline', + '.mdi.mdi-alert-rhombus', + '.mdi.mdi-alert-rhombus-outline', + '.mdi.mdi-arrow-collapse', + '.mdi.mdi-arrow-down', + '.mdi.mdi-arrow-down-bold', + '.mdi.mdi-arrow-down-bold-box', + '.mdi.mdi-arrow-down-bold-box-outline', + '.mdi.mdi-arrow-down-bold-outline', + '.mdi.mdi-arrow-expand', + '.mdi.mdi-arrow-expand-horizontal', + '.mdi.mdi-arrow-split-vertical', + '.mdi.mdi-brightness-4', + '.mdi.mdi-calendar', + '.mdi.mdi-calendar-check', + '.mdi.mdi-calendar-clock', + '.mdi.mdi-calendar-edit', + '.mdi.mdi-calendar-remove', + '.mdi.mdi-calendar-search', + '.mdi.mdi-call-split', + '.mdi.mdi-cancel', + '.mdi.mdi-cash-check', + '.mdi.mdi-cash-remove', + '.mdi.mdi-certificate', + '.mdi.mdi-certificate-outline', + '.mdi.mdi-change-record-type', + '.mdi.mdi-check', + '.mdi.mdi-check-all', + '.mdi.mdi-check-bold', + '.mdi.mdi-checkbox-blank-outline', + '.mdi.mdi-checkbox-marked-circle-outline', + '.mdi.mdi-check-box-outline', + '.mdi.mdi-checkbox-marked', + '.mdi.mdi-check-circle', + '.mdi.mdi-check-circle-outline', + '.mdi.mdi-check-outline', + '.mdi.mdi-check-underline', + '.mdi.mdi-chevron-down', + '.mdi.mdi-chevron-down-box', + '.mdi.mdi-chevron-down-box-outline', + '.mdi.mdi-chevron-down-circle', + '.mdi.mdi-chevron-down-circle-outline', + '.mdi.mdi-clipboard-check', + '.mdi.mdi-clipboard-check-outline', + '.mdi.mdi-clipboard-edit', + '.mdi.mdi-clipboard-edit-outline', + '.mdi.mdi-clipboard-multiple', + '.mdi.mdi-clipboard-multiple-outline', + '.mdi.mdi-clipboard-outline', + '.mdi.mdi-close', + '.mdi.mdi-close-circle', + '.mdi.mdi-close-circle-outline', + '.mdi.mdi-close-thick', + '.mdi.mdi-coffee', + '.mdi.mdi-coffee-outline', + '.mdi.mdi-cog', + '.mdi.mdi-cog-outline', + '.mdi.mdi-content-copy', + '.mdi.mdi-currency-usd', + '.mdi.mdi-currency-usd-off', + '.mdi.mdi-database-refresh', + '.mdi.mdi-delete', + '.mdi.mdi-delete-outline', + '.mdi.mdi-dots-grid', + '.mdi.mdi-dots-vertical', + '.mdi.mdi-download', + '.mdi.mdi-drag', + '.mdi.mdi-drag-vertical', + '.mdi.mdi-eye-off-outline', + '.mdi.mdi-eye-outline', + '.mdi.mdi-file', + '.mdi.mdi-file-alert', + '.mdi.mdi-file-alert-outline', + '.mdi.mdi-file-cad', + '.mdi.mdi-file-check', + '.mdi.mdi-file-check-outline', + '.mdi.mdi-file-document-outline', + '.mdi.mdi-file-excel-outline', + '.mdi.mdi-file-move', + '.mdi.mdi-file-move-outline', + '.mdi.mdi-file-multiple', + '.mdi.mdi-file-multiple-outline', + '.mdi.mdi-file-music-outline', + '.mdi.mdi-file-outline', + '.mdi.mdi-file-pdf-outline', + '.mdi.mdi-file-question', + '.mdi.mdi-file-question-outline', + '.mdi.mdi-file-search-outline', + '.mdi.mdi-file-send', + '.mdi.mdi-file-send-outline', + '.mdi.mdi-file-tree', + '.mdi.mdi-file-tree-outline', + '.mdi.mdi-file-upload', + '.mdi.mdi-file-upload-outline', + '.mdi.mdi-filter', + '.mdi.mdi-filter-minus-outline', + '.mdi.mdi-filter-off-outline', + '.mdi.mdi-filter-outline', + '.mdi.mdi-filter-plus-outline', + '.mdi.mdi-filter-remove-outline', + '.mdi.mdi-fire', + '.mdi.mdi-flip-vertical', + '.mdi.mdi-folder', + '.mdi.mdi-folder-open', + '.mdi.mdi-forum', + '.mdi.mdi-forum-outline', + '.mdi.mdi-github', + '.mdi.mdi-help', + '.mdi.mdi-help-circle', + '.mdi.mdi-help-circle-outline', + '.mdi.mdi-history', + '.mdi.mdi-information', + '.mdi.mdi-information-outline', + '.mdi.mdi-lightbulb', + '.mdi.mdi-lightbulb-off', + '.mdi.mdi-lightbulb-off-outline', + '.mdi.mdi-lightbulb-on', + '.mdi.mdi-lightbulb-on-outline', + '.mdi.mdi-lightbulb-outline', + '.mdi.mdi-link', + '.mdi.mdi-link-variant', + '.mdi.mdi-load', + '.mdi.mdi-magnify', + '.mdi.mdi-map-marker-radius', + '.mdi.mdi-map-marker-radius-outline', + '.mdi.mdi-menu', + '.mdi.mdi-message-text', + '.mdi.mdi-message-text-outline', + '.mdi.mdi-microsoft-excel', + '.mdi.mdi-minus', + '.mdi.mdi-minus-circle', + '.mdi.mdi-minus-circle-outline', + '.mdi.mdi-order-bool-ascending-variant', + '.mdi.mdi-page-first', + '.mdi.mdi-page-last', + '.mdi.mdi-paperclip', + '.mdi.mdi-pencil', + '.mdi.mdi-pencil-outline', + '.mdi.mdi-pencil-box-multiple', + '.mdi.mdi-pencil-box-multiple-outline', + '.mdi.mdi-percent', + '.mdi.mdi-percent-outline', + '.mdi.mdi-pin-off-outline', + '.mdi.mdi-pin-outline', + '.mdi.mdi-play-circle-outline', + '.mdi.mdi-playlist-plus', + '.mdi.mdi-playlist-remove', + '.mdi.mdi-plus', + '.mdi.mdi-plus-circle', + '.mdi.mdi-plus-circle-outline', + '.mdi.mdi-progress-download', + '.mdi.mdi-redo', + '.mdi.mdi-refresh', + '.mdi.mdi-shape-square-plus', + '.mdi.mdi-snowflake', + '.mdi.mdi-sort-ascending', + '.mdi.mdi-sort-descending', + '.mdi.mdi-sort-variant-off', + '.mdi.mdi-sort-variant-remove', + '.mdi.mdi-square-edit-outline', + '.mdi.mdi-star', + '.mdi.mdi-star-outline', + '.mdi.mdi-stop-circle-outline', + '.mdi.mdi-subdirectory-arrow-right', + '.mdi.mdi-swap-horizontal', + '.mdi.mdi-swap-vertical', + '.mdi.mdi-sync', + '.mdi.mdi-sync-circle', + '.mdi.mdi-table-edit', + '.mdi.mdi-table-refresh', + '.mdi.mdi-text-box-remove', + '.mdi.mdi-text-box-remove-outline', + '.mdi.mdi-text-box-search-outline', + '.mdi.mdi-theme-light-dark', + '.mdi.mdi-toggle-switch', + '.mdi.mdi-toggle-switch-off-outline', + '.mdi.mdi-trash-can', + '.mdi.mdi-trash-can-outline', + '.mdi.mdi-truck', + '.mdi.mdi-truck-delivery-outline', + '.mdi.mdi-tune', + '.mdi.mdi-tune-variant', + '.mdi.mdi-undo', + '.mdi.mdi-upload', + '.mdi.mdi-vanish', + '.mdi.mdi-wrench', + '.mdi.mdi-wrench-outline', ]; } } diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss index e73cd37b0..ae3dd1ef1 100644 --- a/examples/vite-demo-vanilla-bundle/src/material-styles.scss +++ b/examples/vite-demo-vanilla-bundle/src/material-styles.scss @@ -81,10 +81,10 @@ .icon-checkbox-container { --slick-checkbox-icon-container-bg-color: transparent; --slick-checkbox-unchecked-opacity: 0.9; - .sgi-icon-check { + .mdi-icon-check { --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') !important; } - .sgi-icon-uncheck { + .mdi-icon-uncheck { --slick-checkbox-icon-unchecked-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="M19,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,3M19,5V19H5V5H19Z"/%3E%3C/svg%3E') !important; } } diff --git a/packages/common/src/editors/__tests__/selectEditor.spec.ts b/packages/common/src/editors/__tests__/selectEditor.spec.ts index 0637a477e..a33a1f9ad 100644 --- a/packages/common/src/editors/__tests__/selectEditor.spec.ts +++ b/packages/common/src/editors/__tests__/selectEditor.spec.ts @@ -840,7 +840,7 @@ describe('SelectEditor', () => { it('should create the multi-select editor with a default search term and have the HTML rendered when "enableRenderHtml" is set', () => { mockColumn.editor = { enableRenderHtml: true, - collection: [{ value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], + collection: [{ value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], customStructure: { value: 'isEffort', label: 'label', @@ -854,13 +854,13 @@ describe('SelectEditor', () => { editorBtnElm.click(); expect(editorListElm.length).toBe(2); - expect(editorListElm[0].innerHTML).toBe(' True'); + expect(editorListElm[0].innerHTML).toBe(' True'); }); it('should create the multi-select editor with a default search term and have the HTML rendered and sanitized when "enableRenderHtml" is set and has ` }, { isEffort: false, label: 'False' }], + collection: [{ isEffort: true, label: 'True', labelPrefix: ` ` }, { isEffort: false, label: 'False' }], collectionOptions: { separatorBetweenTextLabels: ': ', includePrefixSuffixToSelectedValues: true, @@ -882,13 +882,13 @@ describe('SelectEditor', () => { expect(editor.getValue()).toEqual(['']); expect(editorListElm.length).toBe(2); - expect(editorListElm[0].innerHTML).toBe(' : True'); + expect(editorListElm[0].innerHTML).toBe(' : True'); }); it('should create the multi-select editor with a default search term and have the HTML rendered and sanitized when using a custom "sanitizer" and "enableRenderHtml" flag is set and has ` }, { isEffort: false, label: 'False' }], + collection: [{ isEffort: true, label: 'True', labelPrefix: ` ` }, { isEffort: false, label: 'False' }], collectionOptions: { separatorBetweenTextLabels: ': ', includePrefixSuffixToSelectedValues: true, @@ -911,7 +911,7 @@ describe('SelectEditor', () => { expect(editor.getValue()).toEqual(['']); expect(editorListElm.length).toBe(2); - expect(editorListElm[0].innerHTML).toBe(' : True'); + expect(editorListElm[0].innerHTML).toBe(' : True'); }); }); }); diff --git a/packages/common/src/editors/__tests__/singleSelectEditor.spec.ts b/packages/common/src/editors/__tests__/singleSelectEditor.spec.ts index a13ce42e1..1d380bca7 100644 --- a/packages/common/src/editors/__tests__/singleSelectEditor.spec.ts +++ b/packages/common/src/editors/__tests__/singleSelectEditor.spec.ts @@ -234,7 +234,7 @@ describe('SingleSelectEditor', () => { it('should create the multi-select editor with a default value and have the HTML rendered when "enableRenderHtml" is set', () => { mockColumn.editor = { enableRenderHtml: true, - collection: [{ value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], + collection: [{ value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], customStructure: { value: 'isEffort', label: 'label', @@ -252,14 +252,14 @@ describe('SingleSelectEditor', () => { expect(editor.selectOptions.useSelectOptionLabelToHtml).toBeFalsy(); expect(editor.getValue()).toEqual(''); expect(editorListElm.length).toBe(2); - expect(editorListElm[0].innerHTML).toBe(' True'); + expect(editorListElm[0].innerHTML).toBe(' True'); }); it('should create the multi-select editor with a default value and have the HTML rendered and sanitized when "enableRenderHtml" is set and has ` }, { isEffort: false, label: 'False' }], + collection: [{ isEffort: true, label: 'True', labelPrefix: ` ` }, { isEffort: false, label: 'False' }], collectionOptions: { separatorBetweenTextLabels: ': ', includePrefixSuffixToSelectedValues: true, @@ -281,9 +281,9 @@ describe('SingleSelectEditor', () => { editorListElm[0].click(); expect(editorBtnElm).toBeTruthy(); - expect(editor.getValue()).toEqual(` : true`); + expect(editor.getValue()).toEqual(` : true`); expect(editorListElm.length).toBe(2); - expect(editorListElm[0].innerHTML).toBe(' : True'); + expect(editorListElm[0].innerHTML).toBe(' : True'); }); }); }); diff --git a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts index e58cc44c4..26013358c 100644 --- a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts @@ -88,7 +88,7 @@ const commandItemsMock = [ { divider: true, command: '', positionOrder: 63 }, { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'sgi sgi-close', cssClass: 'red', textCssClass: 'bold', + iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold', }, 'divider', { @@ -114,7 +114,7 @@ const optionItemsMock = [ { divider: true, option: '', positionOrder: 63 }, { option: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'sgi sgi-checked', cssClass: 'sky', textCssClass: 'underline', + iconCssClass: 'mdi mdi-checked', cssClass: 'sky', textCssClass: 'underline', }, 'divider', { @@ -323,7 +323,7 @@ describe('CellMenu Plugin', () => { @@ -367,7 +367,7 @@ describe('CellMenu Plugin', () => { expect(commandLabelElm1.textContent).toBe('Command 1'); expect(commandItemElm2.classList.contains('slick-menu-item-divider')).toBeTruthy(); expect(commandItemElm2.innerHTML).toBe(''); - expect(commandIconElm3.classList.contains('sgi-close')).toBeTruthy(); + expect(commandIconElm3.classList.contains('mdi-close')).toBeTruthy(); expect(commandLabelElm3.textContent).toBe('Delete Row'); }); @@ -628,7 +628,7 @@ describe('CellMenu Plugin', () => { plugin.dispose(); plugin.init({ commandItems: deepCopy(commandItemsMock), dropSide: 'left' }); (columnsMock[3].cellMenu!.commandItems![1] as MenuCommandItem).action = actionMock; - plugin.addonOptions.subItemChevronClass = 'sgi sgi-chevron-right'; + plugin.addonOptions.subItemChevronClass = 'mdi mdi-chevron-right'; plugin.addonOptions.autoAdjustDropOffset = -780; plugin.addonOptions.dropSide = 'left'; gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); @@ -656,7 +656,7 @@ describe('CellMenu Plugin', () => { expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); - expect(commandChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); + expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); expect(cellMenu1Elm.classList.contains('dropleft')); @@ -679,7 +679,7 @@ describe('CellMenu Plugin', () => { plugin.dispose(); plugin.init({ commandItems: deepCopy(commandItemsMock) }); (columnsMock[3].cellMenu!.commandItems![1] as MenuCommandItem).action = actionMock; - plugin.addonOptions.subItemChevronClass = 'sgi sgi-chevron-right'; + plugin.addonOptions.subItemChevronClass = 'mdi mdi-chevron-right'; plugin.addonOptions.autoAdjustDropOffset = -780; plugin.addonOptions.dropSide = 'right'; gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); @@ -707,7 +707,7 @@ describe('CellMenu Plugin', () => { expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); - expect(commandChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); + expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); expect(cellMenu1Elm.classList.contains('dropright')); @@ -812,7 +812,7 @@ describe('CellMenu Plugin', () => { @@ -851,7 +851,7 @@ describe('CellMenu Plugin', () => { expect(optionLabelElm1.textContent).toBe('Option 1'); expect(optionItemElm2.classList.contains('slick-menu-item-divider')).toBeTruthy(); expect(optionItemElm2.innerHTML).toBe(''); - expect(optionIconElm3.classList.contains('sgi-checked')).toBeTruthy(); + expect(optionIconElm3.classList.contains('mdi-checked')).toBeTruthy(); expect(optionLabelElm3.textContent).toBe('Delete Row'); }); @@ -1048,7 +1048,7 @@ describe('CellMenu Plugin', () => { plugin.dispose(); plugin.init({ optionItems: deepCopy(optionItemsMock) }); (columnsMock[4].cellMenu!.optionItems![1] as MenuOptionItem).action = actionMock; - plugin.addonOptions.subItemChevronClass = 'sgi sgi-chevron-right'; + plugin.addonOptions.subItemChevronClass = 'mdi mdi-chevron-right'; gridStub.onClick.notify({ cell: 4, row: 1, grid: gridStub }, eventData, gridStub); const cellMenu1Elm = document.body.querySelector('.slick-cell-menu.slickgrid12345.slick-menu-level-0') as HTMLDivElement; @@ -1065,7 +1065,7 @@ describe('CellMenu Plugin', () => { expect(optionList1Elm.querySelectorAll('.slick-menu-item').length).toBe(6); expect(optionList2Elm.querySelectorAll('.slick-menu-item').length).toBe(2); expect(optionContentElm2.textContent).toBe('Sub Options'); - expect(optionChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); + expect(optionChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subOption3Elm.textContent).toContain('Option 3'); }); diff --git a/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts b/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts index 4327c6c60..df2d02b38 100644 --- a/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts @@ -428,7 +428,7 @@ describe('SlickCheckboxSelectColumn Plugin', () => { name: expect.any(DocumentFragment), formatter: expect.toBeFunction(), }); - expect(nameHtmlOutput).toBe(``); + expect(nameHtmlOutput).toBe(``); }); it('should create the plugin and add the Toggle All checkbox in the filter header row and expect toggle all to work when clicked', () => { @@ -477,7 +477,7 @@ describe('SlickCheckboxSelectColumn Plugin', () => { }); expect(plugin).toBeTruthy(); expect(mockColumns[0]).toEqual(expect.objectContaining({ ...checkboxColumnMock, formatter: expect.toBeFunction() })); - expect(nameHtmlOutput).toBe(``); + expect(nameHtmlOutput).toBe(``); }); @@ -505,7 +505,7 @@ describe('SlickCheckboxSelectColumn Plugin', () => { width: 30, maxWidth: 30, }); - expect(nameHtmlOutput).toBe(``); + expect(nameHtmlOutput).toBe(``); }); it('should add a "name" and "hideSelectAllCheckbox: true" and call the "create" method and expect plugin to be created with a column name and without a checkbox', () => { diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts index 6c9959ebe..40d09adf4 100644 --- a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts @@ -18,7 +18,7 @@ const commandItemsMock = [ { divider: true, command: '', positionOrder: 63 }, { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'sgi sgi-close', cssClass: 'red', textCssClass: 'bold', + iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold', }, 'divider', { @@ -39,7 +39,7 @@ const optionItemsMock = [ { divider: true, option: '', positionOrder: 63 }, { option: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'sgi sgi-checked', cssClass: 'sky', textCssClass: 'underline', + iconCssClass: 'mdi mdi-checked', cssClass: 'sky', textCssClass: 'underline', }, 'divider', { @@ -351,7 +351,7 @@ describe('ContextMenu Plugin', () => { @@ -402,7 +402,7 @@ describe('ContextMenu Plugin', () => { expect(commandLabelElm1.textContent).toBe('Command 1'); expect(commandItemElm2.classList.contains('slick-menu-item-divider')).toBeTruthy(); expect(commandItemElm2.innerHTML).toBe(''); - expect(commandIconElm3.classList.contains('sgi-close')).toBeTruthy(); + expect(commandIconElm3.classList.contains('mdi-close')).toBeTruthy(); expect(commandLabelElm3.textContent).toBe('Delete Row'); }); @@ -677,7 +677,7 @@ describe('ContextMenu Plugin', () => { plugin.dispose(); plugin.init({ commandItems: deepCopy(commandItemsMock) }); (gridOptionsMock.contextMenu!.commandItems![1] as MenuCommandItem).action = actionMock; - plugin.addonOptions.subItemChevronClass = 'sgi sgi-chevron-right'; + plugin.addonOptions.subItemChevronClass = 'mdi mdi-chevron-right'; gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); let contextMenu1Elm = document.body.querySelector('.slick-context-menu.slickgrid12345.slick-menu-level-0') as HTMLDivElement; @@ -704,7 +704,7 @@ describe('ContextMenu Plugin', () => { expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); - expect(commandChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); + expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); @@ -832,7 +832,7 @@ describe('ContextMenu Plugin', () => { expect(closeBtnElm).toBeTruthy(); expect(commandListElm.querySelectorAll('.slick-menu-item').length).toBe(1); expect(commandItemElm1.classList.contains('slick-menu-item-disabled')).toBeFalsy(); - expect(commandIconElm1.classList.contains('sgi-content-copy')).toBeTruthy(); + expect(commandIconElm1.classList.contains('mdi-content-copy')).toBeTruthy(); expect(commandLabelElm1.textContent).toBe('Copy'); commandItemElm1.dispatchEvent(new CustomEvent('click')); @@ -1364,7 +1364,7 @@ describe('ContextMenu Plugin', () => { @@ -1403,7 +1403,7 @@ describe('ContextMenu Plugin', () => { expect(optionLabelElm1.textContent).toBe('Option 1'); expect(optionItemElm2.classList.contains('slick-menu-item-divider')).toBeTruthy(); expect(optionItemElm2.innerHTML).toBe(''); - expect(optionIconElm3.classList.contains('sgi-checked')).toBeTruthy(); + expect(optionIconElm3.classList.contains('mdi-checked')).toBeTruthy(); expect(optionLabelElm3.textContent).toBe('Delete Row'); }); @@ -1611,7 +1611,7 @@ describe('ContextMenu Plugin', () => { plugin.dispose(); plugin.init({ optionItems: deepCopy(optionItemsMock) }); (gridOptionsMock.contextMenu!.optionItems![1] as MenuOptionItem).action = actionMock; - plugin.addonOptions.subItemChevronClass = 'sgi sgi-chevron-right'; + plugin.addonOptions.subItemChevronClass = 'mdi mdi-chevron-right'; gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); const contextMenu1Elm = document.body.querySelector('.slick-context-menu.slickgrid12345.slick-menu-level-0') as HTMLDivElement; @@ -1632,7 +1632,7 @@ describe('ContextMenu Plugin', () => { expect(optionContentElm2.textContent).toBe('Sub Options'); expect(subMenuTitleElm.textContent).toBe('Sub Option Title'); expect(subMenuTitleElm.className).toBe('slick-menu-title bold italic'); - expect(optionChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); + expect(optionChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subOption3Elm.textContent).toContain('Option 3'); document.body.dispatchEvent(new Event('mousedown')); diff --git a/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts b/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts index 1ecb81855..bff30f9d8 100644 --- a/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts +++ b/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts @@ -54,7 +54,7 @@ const gridOptionsMock = { enableDraggableGrouping: true, draggableGrouping: { hideToggleAllButton: false, - deleteIconCssClass: 'sgi sgi-close text-color-danger', + deleteIconCssClass: 'mdi mdi-close text-color-danger', }, showHeaderRow: false, showTopPanel: false, @@ -224,13 +224,13 @@ describe('Draggable Grouping Plugin', () => { it('should add an icon beside each column title when "groupIconCssClass" is provided', () => { jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue({ ...gridOptionsMock, enableTranslate: true }); translateService.use('fr'); - plugin.init(gridStub, { ...addonOptions, groupIconCssClass: 'sgi sgi-drag' }); + plugin.init(gridStub, { ...addonOptions, groupIconCssClass: 'mdi mdi-drag' }); const eventData = { ...new SlickEventData(), preventDefault: jest.fn() }; gridStub.onHeaderCellRendered.notify({ column: mockColumns[2], node: headerDiv, grid: gridStub }, eventData as any, gridStub); const groupableElm = headerDiv.querySelector('.slick-column-groupable') as HTMLSpanElement; expect(headerDiv.style.cursor).toBe('pointer'); - expect(groupableElm.classList.contains('sgi-drag')).toBeTruthy(); + expect(groupableElm.classList.contains('mdi-drag')).toBeTruthy(); }); describe('setupColumnReorder definition', () => { @@ -329,14 +329,14 @@ describe('Draggable Grouping Plugin', () => { it('should execute the "onEnd" callback of Sortable and expect sortable to be cancelled', () => { plugin.init(gridStub, { ...addonOptions }); - plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-close text-color-danger' }); + plugin.setAddonOptions({ deleteIconCssClass: 'mdi mdi-close text-color-danger' }); const fn = plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); fn.sortableLeftInstance!.options.onStart!({} as any); plugin.droppableInstance!.options.onAdd!({ item: headerColumnDiv3, clone: headerColumnDiv3.cloneNode(true) } as any); fn.sortableLeftInstance.options.onEnd!(new CustomEvent('end') as any); - const groupByRemoveElm = document.querySelector('.slick-groupby-remove.sgi-close') as HTMLDivElement; + const groupByRemoveElm = document.querySelector('.slick-groupby-remove.mdi-close') as HTMLDivElement; expect(groupByRemoveElm).toBeTruthy(); expect(setColumnsSpy).not.toHaveBeenCalled(); @@ -346,7 +346,7 @@ describe('Draggable Grouping Plugin', () => { it('should clear grouping and expect placeholder to be displayed when calling "onEnd" callback', () => { plugin.init(gridStub, { ...addonOptions }); - plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-close text-color-danger' }); + plugin.setAddonOptions({ deleteIconCssClass: 'mdi mdi-close text-color-danger' }); const fn = plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); fn.sortableLeftInstance!.options.onStart!({} as any); @@ -361,7 +361,7 @@ describe('Draggable Grouping Plugin', () => { it('should execute the "onEnd" callback of Sortable and expect css classes to be updated', () => { plugin.init(gridStub, { ...addonOptions }); plugin.setColumns(mockColumns); - plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-close' }); + plugin.setAddonOptions({ deleteIconCssClass: 'mdi mdi-close' }); jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(true); getColumnIndexSpy.mockReturnValue(2); const fn = plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); @@ -370,7 +370,7 @@ describe('Draggable Grouping Plugin', () => { fn.sortableLeftInstance!.options.onStart!({} as any); plugin.droppableInstance!.options.onAdd!({ item: headerColumnDiv3, clone: headerColumnDiv3.cloneNode(true) } as any); - const groupByRemoveElm = document.querySelector('.slick-groupby-remove.sgi-close'); + const groupByRemoveElm = document.querySelector('.slick-groupby-remove.mdi-close'); expect(groupByRemoveElm).toBeTruthy(); fn.sortableLeftInstance.options.onEnd!(new CustomEvent('end') as any); @@ -382,7 +382,7 @@ describe('Draggable Grouping Plugin', () => { it('should drag over dropzone and expect hover css class be added and removed when dragging outside of dropzone', () => { plugin.init(gridStub, { ...addonOptions }); - plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-close text-color-danger' }); + plugin.setAddonOptions({ deleteIconCssClass: 'mdi mdi-close text-color-danger' }); const fn = plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); fn.sortableLeftInstance!.options.onStart!({} as any); @@ -428,8 +428,8 @@ describe('Draggable Grouping Plugin', () => { mockHeaderColumnDiv1.appendChild(mockDivPaneContainer1); mockHeaderColumnDiv2.appendChild(mockDivPaneContainer1); - plugin.init(gridStub, { ...addonOptions, deleteIconCssClass: 'sgi sgi-close', onGroupChanged: onGroupChangedCallbackSpy }); - plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-close' }); + plugin.init(gridStub, { ...addonOptions, deleteIconCssClass: 'mdi mdi-close', onGroupChanged: onGroupChangedCallbackSpy }); + plugin.setAddonOptions({ deleteIconCssClass: 'mdi mdi-close' }); jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(false); const fn = plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); @@ -644,7 +644,7 @@ describe('Draggable Grouping Plugin', () => { it('should toggle ascending/descending order with different icons when original sort is ascending then user clicked the sorting icon twice', () => { const onGroupChangedCallbackSpy = jest.fn(); - plugin.init(gridStub, { ...addonOptions, sortAscIconCssClass: 'sgi sgi-arrow-up', sortDescIconCssClass: 'sgi sgi-arrow-down', onGroupChanged: onGroupChangedCallbackSpy }); + plugin.init(gridStub, { ...addonOptions, sortAscIconCssClass: 'mdi mdi-arrow-up', sortDescIconCssClass: 'mdi mdi-arrow-down', onGroupChanged: onGroupChangedCallbackSpy }); const fn = plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); jest.spyOn(fn.sortableLeftInstance, 'toArray').mockReturnValue(['age', 'medals']); const invalidateSpy = jest.spyOn(gridStub, 'invalidate'); @@ -653,7 +653,7 @@ describe('Draggable Grouping Plugin', () => { plugin.droppableInstance!.options.onAdd!({ item: headerColumnDiv3, clone: headerColumnDiv3.cloneNode(true) } as any); let groupBySortElm = preHeaderDiv.querySelector('.slick-groupby-sort') as HTMLDivElement; - let groupBySortAscIconElm = preHeaderDiv.querySelector('.sgi-arrow-up') as HTMLDivElement; + let groupBySortAscIconElm = preHeaderDiv.querySelector('.mdi-arrow-up') as HTMLDivElement; expect(fn.sortableLeftInstance).toEqual(plugin.sortableLeftInstance); expect(fn.sortableRightInstance).toEqual(plugin.sortableRightInstance); @@ -662,16 +662,16 @@ describe('Draggable Grouping Plugin', () => { expect(groupBySortAscIconElm).toBeTruthy(); groupBySortAscIconElm.dispatchEvent(new Event('click')); - groupBySortAscIconElm = preHeaderDiv.querySelector('.sgi-arrow-up') as HTMLDivElement; - let groupBySortDescIconElm = preHeaderDiv.querySelector('.sgi-arrow-down') as HTMLDivElement; + groupBySortAscIconElm = preHeaderDiv.querySelector('.mdi-arrow-up') as HTMLDivElement; + let groupBySortDescIconElm = preHeaderDiv.querySelector('.mdi-arrow-down') as HTMLDivElement; expect(setGroupingSpy).toHaveBeenCalledWith(expect.toBeArray()); expect(groupBySortAscIconElm).toBeFalsy(); expect(groupBySortDescIconElm).toBeTruthy(); groupBySortDescIconElm.dispatchEvent(new Event('click')); - groupBySortAscIconElm = preHeaderDiv.querySelector('.sgi-arrow-up') as HTMLDivElement; - groupBySortDescIconElm = preHeaderDiv.querySelector('.sgi-arrow-down') as HTMLDivElement; + groupBySortAscIconElm = preHeaderDiv.querySelector('.mdi-arrow-up') as HTMLDivElement; + groupBySortDescIconElm = preHeaderDiv.querySelector('.mdi-arrow-down') as HTMLDivElement; expect(setGroupingSpy).toHaveBeenCalledWith(expect.toBeArray()); expect(groupBySortAscIconElm).toBeTruthy(); @@ -704,7 +704,7 @@ describe('Draggable Grouping Plugin', () => { it('should execute the "onEnd" callback of Sortable and expect sortable to be cancelled', () => { plugin.init(gridStub, { ...addonOptions }); - plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-close text-color-danger' }); + plugin.setAddonOptions({ deleteIconCssClass: 'mdi mdi-close text-color-danger' }); const fn = plugin.setupColumnReorder(gridStub, [mockHeaderLeftDiv1, mockHeaderLeftDiv2], {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); jest.spyOn(fn.sortableLeftInstance, 'toArray').mockReturnValue(['firstName', 'lastName', 'age']); jest.spyOn(fn.sortableRightInstance, 'toArray').mockReturnValue(['gender']); @@ -713,7 +713,7 @@ describe('Draggable Grouping Plugin', () => { plugin.droppableInstance!.options.onAdd!({ item: headerColumnDiv3, clone: headerColumnDiv3.cloneNode(true) } as any); fn.sortableLeftInstance.options.onEnd!(new CustomEvent('end') as any); - const groupByRemoveElm = document.querySelector('.slick-groupby-remove.sgi-close') as HTMLDivElement; + const groupByRemoveElm = document.querySelector('.slick-groupby-remove.mdi-close') as HTMLDivElement; expect(groupByRemoveElm).toBeTruthy(); mockColumns.pop(); // all original columns except last column which is what we returned on sortableRightInstance diff --git a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts index 1db229cd3..fb7b6e843 100644 --- a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts @@ -849,7 +849,7 @@ describe('GridMenuControl', () => { }); it('should add a custom Grid Menu item with "iconCssClass" and expect an icon to be included on the item DOM element', () => { - gridOptionsMock.gridMenu!.commandItems = [{ command: 'help', title: 'Help', iconCssClass: 'sgi sgi-close' }]; + gridOptionsMock.gridMenu!.commandItems = [{ command: 'help', title: 'Help', iconCssClass: 'mdi mdi-close' }]; control.columns = columnsMock; control.init(); const buttonElm = document.querySelector('.slick-grid-menu-button') as HTMLDivElement; @@ -860,9 +860,9 @@ describe('GridMenuControl', () => { expect(helpTextElm.textContent).toBe('Help'); expect(helpIconElm.classList.contains('slick-menu-icon')).toBeTrue(); - expect(helpIconElm.classList.contains('sgi')).toBeTrue(); - expect(helpIconElm.classList.contains('sgi-close')).toBeTrue(); - expect(helpIconElm.className).toBe('slick-menu-icon sgi sgi-close'); + expect(helpIconElm.classList.contains('mdi')).toBeTrue(); + expect(helpIconElm.classList.contains('mdi-close')).toBeTrue(); + expect(helpIconElm.className).toBe('slick-menu-icon mdi mdi-close'); }); it('should add a custom Grid Menu item with "tooltip" and expect the item title attribute to be part of the item DOM element', () => { @@ -931,7 +931,7 @@ describe('GridMenuControl', () => { const disposeSubMenuSpy = jest.spyOn(control, 'disposeSubMenus'); Object.defineProperty(document.documentElement, 'clientWidth', { writable: true, configurable: true, value: 50 }); - gridOptionsMock.gridMenu!.subItemChevronClass = 'sgi sgi-chevron-right'; + gridOptionsMock.gridMenu!.subItemChevronClass = 'mdi mdi-chevron-right'; gridOptionsMock.gridMenu!.dropSide = 'left'; gridOptionsMock.gridMenu!.commandItems = mockCommandItems; control.columns = columnsMock; @@ -964,7 +964,7 @@ describe('GridMenuControl', () => { expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); - expect(commandChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); + expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); expect(gridMenu1Elm.classList.contains('dropleft')); @@ -990,7 +990,7 @@ describe('GridMenuControl', () => { const disposeSubMenuSpy = jest.spyOn(control, 'disposeSubMenus'); Object.defineProperty(document.documentElement, 'clientWidth', { writable: true, configurable: true, value: 50 }); - gridOptionsMock.gridMenu!.subItemChevronClass = 'sgi sgi-chevron-right'; + gridOptionsMock.gridMenu!.subItemChevronClass = 'mdi mdi-chevron-right'; gridOptionsMock.gridMenu!.dropSide = 'right'; gridOptionsMock.gridMenu!.commandItems = mockCommandItems; control.columns = columnsMock; @@ -1020,7 +1020,7 @@ describe('GridMenuControl', () => { expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); - expect(commandChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); + expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); expect(gridMenu1Elm.classList.contains('dropright')); @@ -1094,7 +1094,7 @@ describe('GridMenuControl', () => { control.columns = columnsMock; control.init(); expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ - { iconCssClass: 'sgi sgi-pin-off-outline', titleKey: 'CLEAR_PINNING', title: 'Dégeler les colonnes/rangées', disabled: false, command: 'clear-pinning', positionOrder: 52 }, + { iconCssClass: 'mdi mdi-pin-off-outline', titleKey: 'CLEAR_PINNING', title: 'Dégeler les colonnes/rangées', disabled: false, command: 'clear-pinning', positionOrder: 52 }, ]); }); @@ -1106,9 +1106,9 @@ describe('GridMenuControl', () => { control.init(); control.init(); // calling 2x register to make sure it doesn't duplicate commands expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ - { iconCssClass: 'sgi sgi-filter-remove-outline', titleKey: 'CLEAR_ALL_FILTERS', title: 'Supprimer tous les filtres', disabled: false, command: 'clear-filter', positionOrder: 50 }, - { iconCssClass: 'sgi sgi-flip-vertical', titleKey: 'TOGGLE_FILTER_ROW', title: 'Basculer la ligne des filtres', disabled: false, command: 'toggle-filter', positionOrder: 53 }, - { iconCssClass: 'sgi sgi-sync', titleKey: 'REFRESH_DATASET', title: 'Rafraîchir les données', disabled: false, command: 'refresh-dataset', positionOrder: 58 } + { iconCssClass: 'mdi mdi-filter-remove-outline', titleKey: 'CLEAR_ALL_FILTERS', title: 'Supprimer tous les filtres', disabled: false, command: 'clear-filter', positionOrder: 50 }, + { iconCssClass: 'mdi mdi-flip-vertical', titleKey: 'TOGGLE_FILTER_ROW', title: 'Basculer la ligne des filtres', disabled: false, command: 'toggle-filter', positionOrder: 53 }, + { iconCssClass: 'mdi mdi-sync', titleKey: 'REFRESH_DATASET', title: 'Rafraîchir les données', disabled: false, command: 'refresh-dataset', positionOrder: 58 } ]); }); @@ -1124,7 +1124,7 @@ describe('GridMenuControl', () => { control.init(); control.init(); // calling 2x register to make sure it doesn't duplicate commands expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ - { iconCssClass: 'sgi sgi-filter-remove-outline', titleKey: 'CLEAR_ALL_FILTERS', title: 'Supprimer tous les filtres', disabled: false, command: 'clear-filter', positionOrder: 50 } + { iconCssClass: 'mdi mdi-filter-remove-outline', titleKey: 'CLEAR_ALL_FILTERS', title: 'Supprimer tous les filtres', disabled: false, command: 'clear-filter', positionOrder: 50 } ]); }); @@ -1140,7 +1140,7 @@ describe('GridMenuControl', () => { control.init(); control.init(); // calling 2x register to make sure it doesn't duplicate commands expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ - { iconCssClass: 'sgi sgi-flip-vertical', titleKey: 'TOGGLE_FILTER_ROW', title: 'Basculer la ligne des filtres', disabled: false, command: 'toggle-filter', positionOrder: 53 }, + { iconCssClass: 'mdi mdi-flip-vertical', titleKey: 'TOGGLE_FILTER_ROW', title: 'Basculer la ligne des filtres', disabled: false, command: 'toggle-filter', positionOrder: 53 }, ]); }); @@ -1157,7 +1157,7 @@ describe('GridMenuControl', () => { control.init(); control.init(); // calling 2x register to make sure it doesn't duplicate commands expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ - { iconCssClass: 'sgi sgi-brightness-4', titleKey: 'TOGGLE_DARK_MODE', title: 'Basculer le mode clair/sombre', disabled: false, command: 'toggle-dark-mode', positionOrder: 54 }, + { iconCssClass: 'mdi mdi-brightness-4', titleKey: 'TOGGLE_DARK_MODE', title: 'Basculer le mode clair/sombre', disabled: false, command: 'toggle-dark-mode', positionOrder: 54 }, ]); }); @@ -1173,7 +1173,7 @@ describe('GridMenuControl', () => { control.init(); control.init(); // calling 2x register to make sure it doesn't duplicate commands expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ - { iconCssClass: 'sgi sgi-sync', titleKey: 'REFRESH_DATASET', title: 'Rafraîchir les données', disabled: false, command: 'refresh-dataset', positionOrder: 58 } + { iconCssClass: 'mdi mdi-sync', titleKey: 'REFRESH_DATASET', title: 'Rafraîchir les données', disabled: false, command: 'refresh-dataset', positionOrder: 58 } ]); }); @@ -1185,7 +1185,7 @@ describe('GridMenuControl', () => { control.init(); control.init(); // calling 2x register to make sure it doesn't duplicate commands expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ - { iconCssClass: 'sgi sgi-flip-vertical', titleKey: 'TOGGLE_PRE_HEADER_ROW', title: 'Basculer la ligne de pré-en-tête', disabled: false, command: 'toggle-preheader', positionOrder: 53 } + { iconCssClass: 'mdi mdi-flip-vertical', titleKey: 'TOGGLE_PRE_HEADER_ROW', title: 'Basculer la ligne de pré-en-tête', disabled: false, command: 'toggle-preheader', positionOrder: 53 } ]); }); @@ -1211,7 +1211,7 @@ describe('GridMenuControl', () => { control.init(); control.init(); // calling 2x register to make sure it doesn't duplicate commands expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ - { iconCssClass: 'sgi sgi-sort-variant-off', titleKey: 'CLEAR_ALL_SORTING', title: 'Supprimer tous les tris', disabled: false, command: 'clear-sorting', positionOrder: 51 } + { iconCssClass: 'mdi mdi-sort-variant-off', titleKey: 'CLEAR_ALL_SORTING', title: 'Supprimer tous les tris', disabled: false, command: 'clear-sorting', positionOrder: 51 } ]); }); @@ -1241,7 +1241,7 @@ describe('GridMenuControl', () => { control.init(); control.init(); // calling 2x register to make sure it doesn't duplicate commands expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ - { iconCssClass: 'sgi sgi-download', titleKey: 'EXPORT_TO_CSV', title: 'Exporter en format CSV', disabled: false, command: 'export-csv', positionOrder: 55 } + { iconCssClass: 'mdi mdi-download', titleKey: 'EXPORT_TO_CSV', title: 'Exporter en format CSV', disabled: false, command: 'export-csv', positionOrder: 55 } ]); }); @@ -1271,7 +1271,7 @@ describe('GridMenuControl', () => { control.init(); control.init(); // calling 2x register to make sure it doesn't duplicate commands expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ - { iconCssClass: 'sgi sgi-file-excel-outline text-success', titleKey: 'EXPORT_TO_EXCEL', title: 'Exporter vers Excel', disabled: false, command: 'export-excel', positionOrder: 56 } + { iconCssClass: 'mdi mdi-file-excel-outline text-success', titleKey: 'EXPORT_TO_EXCEL', title: 'Exporter vers Excel', disabled: false, command: 'export-excel', positionOrder: 56 } ]); }); @@ -1287,7 +1287,7 @@ describe('GridMenuControl', () => { control.init(); control.init(); // calling 2x register to make sure it doesn't duplicate commands expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ - { iconCssClass: 'sgi sgi-download', titleKey: 'EXPORT_TO_TAB_DELIMITED', title: 'Exporter en format texte (délimité par tabulation)', disabled: false, command: 'export-text-delimited', positionOrder: 57 } + { iconCssClass: 'mdi mdi-download', titleKey: 'EXPORT_TO_TAB_DELIMITED', title: 'Exporter en format texte (délimité par tabulation)', disabled: false, command: 'export-text-delimited', positionOrder: 57 } ]); }); diff --git a/packages/common/src/extensions/__tests__/slickHeaderButtons.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderButtons.spec.ts index 6f874e2b0..a50e5a1a4 100644 --- a/packages/common/src/extensions/__tests__/slickHeaderButtons.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHeaderButtons.spec.ts @@ -35,11 +35,11 @@ const pubSubServiceStub = { const headerMock = { buttons: [ { - cssClass: 'sgi sgi-lightbulb-outline', + cssClass: 'mdi mdi-lightbulb-outline', command: 'show-positive-numbers', }, { - cssClass: 'sgi sgi-lightbulb-on', + cssClass: 'mdi mdi-lightbulb-on', command: 'show-negative-numbers', tooltip: 'Highlight negative numbers.', } @@ -110,7 +110,7 @@ describe('HeaderButton Plugin', () => { jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub); columnsMock[0].header!.buttons![1] = undefined as any; columnsMock[0].header!.buttons![1] = { - cssClass: 'sgi sgi-lightbulb-on', + cssClass: 'mdi mdi-lightbulb-on', command: 'show-negative-numbers', tooltip: 'Highlight negative numbers.', }; @@ -129,7 +129,7 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (only 1x) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ``)); + ``)); gridStub.onBeforeHeaderCellDestroy.notify({ column: columnsMock[0], node: headerDiv, grid: gridStub }, eventData as any, gridStub); expect(headerDiv.innerHTML).toBe(''); @@ -148,7 +148,7 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (only 1x) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ``)); + ``)); }); it('should populate 2x Header Buttons when cell is being rendered and a 2nd button item visibility & usability callbacks returns true', () => { @@ -165,8 +165,8 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); }); it('should populate 2x Header Buttons and a 2nd button item usability callback returns false and expect button to be disabled', () => { @@ -183,8 +183,8 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); }); it('should populate 2x Header Buttons and a 2nd button is "disabled" and expect button to be disabled', () => { @@ -201,8 +201,8 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); }); it('should populate 2x Header Buttons and a 2nd button and property "showOnHover" is enabled and expect button to be hidden until we hover it', () => { @@ -219,8 +219,8 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); }); it('should populate 2x Header Buttons and a 2nd button and a "handler" callback to be executed when defined', () => { @@ -234,12 +234,12 @@ describe('HeaderButton Plugin', () => { const eventData = { ...new SlickEventData(), preventDefault: jest.fn() }; gridStub.onHeaderCellRendered.notify({ column: columnsMock[0], node: headerDiv, grid: gridStub }, eventData as any, gridStub); - headerDiv.querySelector('.slick-header-button.sgi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + headerDiv.querySelector('.slick-header-button.mdi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); expect(handlerMock).toHaveBeenCalled(); }); @@ -254,12 +254,12 @@ describe('HeaderButton Plugin', () => { const eventData = { ...new SlickEventData(), preventDefault: jest.fn() }; gridStub.onHeaderCellRendered.notify({ column: columnsMock[0], node: headerDiv, grid: gridStub }, eventData as any, gridStub); - headerDiv.querySelector('.slick-header-button.sgi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + headerDiv.querySelector('.slick-header-button.mdi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); expect(actionMock).toHaveBeenCalled(); }); @@ -275,12 +275,12 @@ describe('HeaderButton Plugin', () => { const eventData = { ...new SlickEventData(), preventDefault: jest.fn() }; gridStub.onHeaderCellRendered.notify({ column: columnsMock[0], node: headerDiv, grid: gridStub }, eventData as any, gridStub); - headerDiv.querySelector('.slick-header-button.sgi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + headerDiv.querySelector('.slick-header-button.mdi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); expect(onCommandMock).toHaveBeenCalled(); expect(updateColSpy).toHaveBeenCalledWith('field1'); }); @@ -301,8 +301,8 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); }); }); }); diff --git a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts index 82b34cee7..6b2a33c80 100644 --- a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts @@ -25,7 +25,7 @@ const gridOptionsMock = { postProcess: jest.fn(), }, headerMenu: { - buttonCssClass: 'sgi sgi-chevron-down', + buttonCssClass: 'mdi mdi-chevron-down', hideFreezeColumnsCommand: false, hideColumnResizeByContentCommand: false, hideForceFitButton: false, @@ -95,11 +95,11 @@ const headerMock = { menu: { commandItems: [ { - cssClass: 'sgi sgi-lightbulb-outline', + cssClass: 'mdi mdi-lightbulb-outline', command: 'show-positive-numbers', }, { - cssClass: 'sgi sgi-lightbulb-on', + cssClass: 'mdi mdi-lightbulb-on', command: 'show-negative-numbers', tooltip: 'Highlight negative numbers.', }, @@ -177,7 +177,7 @@ describe('HeaderMenu Plugin', () => { jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub); columnsMock[0].header!.menu!.commandItems![1] = undefined as any; columnsMock[0].header!.menu!.commandItems![1] = { - cssClass: 'sgi sgi-lightbulb-on', + cssClass: 'mdi mdi-lightbulb-on', command: 'show-negative-numbers', tooltip: 'Highlight negative numbers.', } as MenuCommandItem; @@ -200,14 +200,14 @@ describe('HeaderMenu Plugin', () => { it('should populate a Header Menu button with extra button css classes when header menu option "buttonCssClass" and cell is being rendered', () => { plugin.dispose(); - plugin.init({ buttonCssClass: 'sgi sgi-chevron-down' }); + plugin.init({ buttonCssClass: 'mdi mdi-chevron-down' }); (columnsMock[0].header!.menu!.commandItems![1] as MenuCommandItem).itemVisibilityOverride = () => undefined as any; const eventData = { ...new SlickEventData(), preventDefault: jest.fn() }; gridStub.onHeaderCellRendered.notify({ column: columnsMock[0], node: headerDiv, grid: gridStub }, eventData as any, gridStub); expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - `
`)); + `
`)); }); it('should populate a Header Menu button with extra tooltip title attribute when header menu option "tooltip" and cell is being rendered', () => { @@ -268,7 +268,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -290,7 +290,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -314,7 +314,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -334,7 +334,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -354,7 +354,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -376,13 +376,13 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` )); - gridContainerDiv.querySelector('.slick-menu-item.sgi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + gridContainerDiv.querySelector('.slick-menu-item.mdi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); expect(actionMock).toHaveBeenCalled(); expect(headerDiv.querySelector('.slick-header-menu-button')!.innerHTML).toBe(''); }); @@ -402,13 +402,13 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` )); - gridContainerDiv.querySelector('.slick-menu-item.sgi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + gridContainerDiv.querySelector('.slick-menu-item.mdi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); expect(onCommandMock).toHaveBeenCalled(); expect(headerDiv.querySelector('.slick-header-menu-button')!.innerHTML).toBe(''); }); @@ -431,7 +431,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -458,7 +458,7 @@ describe('HeaderMenu Plugin', () => { expect(menuElm.clientWidth).toBe(275); expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -513,7 +513,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -688,7 +688,7 @@ describe('HeaderMenu Plugin', () => { Object.defineProperty(document.documentElement, 'clientWidth', { writable: true, configurable: true, value: 50 }); jest.spyOn(gridStub, 'getColumns').mockReturnValueOnce(columnsMock); - plugin.init({ autoAlign: true, subItemChevronClass: 'sgi sgi-chevron-right' }); + plugin.init({ autoAlign: true, subItemChevronClass: 'mdi mdi-chevron-right' }); plugin.addonOptions.onCommand = onCommandMock; const eventData = { ...new SlickEventData(), preventDefault: jest.fn() }; @@ -718,7 +718,7 @@ describe('HeaderMenu Plugin', () => { expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); - expect(commandChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); + expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); expect(headerMenu1Elm.classList.contains('dropright')); @@ -813,7 +813,7 @@ describe('HeaderMenu Plugin', () => { const commandDivElm = gridContainerDiv.querySelector('[data-command="freeze-columns"]') as HTMLDivElement; expect((originalColumnDefinitions[1] as any).header!.menu!.commandItems!).toEqual([ - { iconCssClass: 'sgi sgi-pin-outline', title: 'Freeze Columns', titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 47 }, + { iconCssClass: 'mdi mdi-pin-outline', title: 'Freeze Columns', titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 47 }, { divider: true, command: '', positionOrder: 49 }, ]); expect(commandDivElm).toBeFalsy(); @@ -834,12 +834,12 @@ describe('HeaderMenu Plugin', () => { headerButtonElm.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); const clearFilterSpy = jest.spyOn(filterServiceStub, 'clearFilterByColumnId'); - const headerMenuExpected = [{ iconCssClass: 'sgi sgi-filter-remove-outline', title: 'Remove Filter', titleKey: 'REMOVE_FILTER', command: 'clear-filter', positionOrder: 53 }]; + const headerMenuExpected = [{ iconCssClass: 'mdi mdi-filter-remove-outline', title: 'Remove Filter', titleKey: 'REMOVE_FILTER', command: 'clear-filter', positionOrder: 53 }]; const commandDivElm = gridContainerDiv.querySelector('[data-command="clear-filter"]') as HTMLDivElement; const commandIconElm = commandDivElm.querySelector('.slick-menu-icon') as HTMLDivElement; const commandLabelElm = commandDivElm.querySelector('.slick-menu-content') as HTMLDivElement; expect(columnsMock[1].header!.menu!.commandItems!).toEqual(headerMenuExpected); - expect(commandIconElm.classList.contains('sgi-filter-remove-outline')).toBeTruthy(); + expect(commandIconElm.classList.contains('mdi-filter-remove-outline')).toBeTruthy(); expect(commandLabelElm.textContent).toBe('Remove Filter'); const clickEvent = new Event('click'); @@ -870,15 +870,15 @@ describe('HeaderMenu Plugin', () => { const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish'); const headerMenuExpected = [ - { iconCssClass: 'sgi sgi-arrow-expand-horizontal', title: 'Resize by Content', titleKey: 'COLUMN_RESIZE_BY_CONTENT', command: 'column-resize-by-content', positionOrder: 48 }, + { iconCssClass: 'mdi mdi-arrow-expand-horizontal', title: 'Resize by Content', titleKey: 'COLUMN_RESIZE_BY_CONTENT', command: 'column-resize-by-content', positionOrder: 48 }, { divider: true, command: '', positionOrder: 49 }, - { iconCssClass: 'sgi sgi-close', title: 'Hide Column', titleKey: 'HIDE_COLUMN', command: 'hide-column', positionOrder: 55 } + { iconCssClass: 'mdi mdi-close', title: 'Hide Column', titleKey: 'HIDE_COLUMN', command: 'hide-column', positionOrder: 55 } ]; const commandDivElm = gridContainerDiv.querySelector('[data-command="column-resize-by-content"]') as HTMLDivElement; const commandIconElm = commandDivElm.querySelector('.slick-menu-icon') as HTMLDivElement; const commandLabelElm = commandDivElm.querySelector('.slick-menu-content') as HTMLDivElement; expect(columnsMock[1].header!.menu!.commandItems!).toEqual(headerMenuExpected); - expect(commandIconElm.classList.contains('sgi-arrow-expand-horizontal')).toBeTruthy(); + expect(commandIconElm.classList.contains('mdi-arrow-expand-horizontal')).toBeTruthy(); expect(commandLabelElm.textContent).toBe('Resize by Content'); const clickEvent = new Event('click'); @@ -904,15 +904,15 @@ describe('HeaderMenu Plugin', () => { const autosizeSpy = jest.spyOn(gridStub, 'autosizeColumns'); const headerMenuExpected = [ - { iconCssClass: 'sgi sgi-pin-outline', title: 'Freeze Columns', titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 47 }, + { iconCssClass: 'mdi mdi-pin-outline', title: 'Freeze Columns', titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 47 }, { divider: true, command: '', positionOrder: 49 }, - { iconCssClass: 'sgi sgi-close', title: 'Hide Column', titleKey: 'HIDE_COLUMN', command: 'hide-column', positionOrder: 55 } + { iconCssClass: 'mdi mdi-close', title: 'Hide Column', titleKey: 'HIDE_COLUMN', command: 'hide-column', positionOrder: 55 } ]; const commandDivElm = gridContainerDiv.querySelector('[data-command="hide-column"]') as HTMLDivElement; const commandIconElm = commandDivElm.querySelector('.slick-menu-icon') as HTMLDivElement; const commandLabelElm = commandDivElm.querySelector('.slick-menu-content') as HTMLDivElement; expect(columnsMock[1].header!.menu!.commandItems!).toEqual(headerMenuExpected); - expect(commandIconElm.classList.contains('sgi-close')).toBeTruthy(); + expect(commandIconElm.classList.contains('mdi-close')).toBeTruthy(); expect(commandLabelElm.textContent).toBe('Hide Column'); commandDivElm.dispatchEvent(new Event('click')); @@ -933,12 +933,12 @@ describe('HeaderMenu Plugin', () => { headerButtonElm.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); const clearFilterSpy = jest.spyOn(filterServiceStub, 'clearFilterByColumnId'); - const headerMenuExpected = [{ iconCssClass: 'sgi sgi-filter-remove-outline', title: 'Remove Filter', titleKey: 'REMOVE_FILTER', command: 'clear-filter', positionOrder: 53 }]; + const headerMenuExpected = [{ iconCssClass: 'mdi mdi-filter-remove-outline', title: 'Remove Filter', titleKey: 'REMOVE_FILTER', command: 'clear-filter', positionOrder: 53 }]; const commandDivElm = gridContainerDiv.querySelector('[data-command="clear-filter"]') as HTMLDivElement; const commandIconElm = commandDivElm.querySelector('.slick-menu-icon') as HTMLDivElement; const commandLabelElm = commandDivElm.querySelector('.slick-menu-content') as HTMLDivElement; expect(columnsMock[1].header!.menu!.commandItems!).toEqual(headerMenuExpected); - expect(commandIconElm.classList.contains('sgi-filter-remove-outline')).toBeTruthy(); + expect(commandIconElm.classList.contains('mdi-filter-remove-outline')).toBeTruthy(); expect(commandLabelElm.textContent).toBe('Remove Filter'); const clickEvent = new Event('click'); @@ -964,21 +964,21 @@ describe('HeaderMenu Plugin', () => { const commandIconElm = commandDivElm.querySelector('.slick-menu-icon') as HTMLDivElement; const commandLabelElm = commandDivElm.querySelector('.slick-menu-content') as HTMLDivElement; expect(columnsMock[1].header!.menu!.commandItems!).toEqual([ - { iconCssClass: 'sgi sgi-sort-ascending', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, - { iconCssClass: 'sgi sgi-flip-v sgi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 }, + { iconCssClass: 'mdi mdi-sort-ascending', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, + { iconCssClass: 'mdi mdi-flip-v mdi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 }, { divider: true, command: '', positionOrder: 52 }, - { iconCssClass: 'sgi sgi-sort-variant-off', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 }, + { iconCssClass: 'mdi mdi-sort-variant-off', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 }, ]); - expect(commandIconElm.classList.contains('sgi-sort-variant-off')).toBeTruthy(); + expect(commandIconElm.classList.contains('mdi-sort-variant-off')).toBeTruthy(); expect(commandLabelElm.textContent).toBe('Remove Sort'); translateService.use('fr'); plugin.translateHeaderMenu(); expect(columnsMock[1].header!.menu!.commandItems!).toEqual([ - { iconCssClass: 'sgi sgi-sort-ascending', title: 'Trier par ordre croissant', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, - { iconCssClass: 'sgi sgi-flip-v sgi-sort-descending', title: 'Trier par ordre décroissant', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 }, + { iconCssClass: 'mdi mdi-sort-ascending', title: 'Trier par ordre croissant', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, + { iconCssClass: 'mdi mdi-flip-v mdi-sort-descending', title: 'Trier par ordre décroissant', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 }, { divider: true, command: '', positionOrder: 52 }, - { iconCssClass: 'sgi sgi-sort-variant-off', title: 'Supprimer le tri', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 }, + { iconCssClass: 'mdi mdi-sort-variant-off', title: 'Supprimer le tri', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 }, ]); const clickEvent = new Event('click'); @@ -1005,16 +1005,16 @@ describe('HeaderMenu Plugin', () => { const commandIconElm = commandDivElm.querySelector('.slick-menu-icon') as HTMLDivElement; const commandLabelElm = commandDivElm.querySelector('.slick-menu-content') as HTMLDivElement; expect(columnsMock[1].header!.menu!.commandItems!).toEqual([ - { iconCssClass: 'sgi sgi-pin-outline', title: 'Freeze Columns', titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 47 }, + { iconCssClass: 'mdi mdi-pin-outline', title: 'Freeze Columns', titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 47 }, { divider: true, command: '', positionOrder: 49 }, ]); - expect(commandIconElm.classList.contains('sgi-pin-outline')).toBeTruthy(); + expect(commandIconElm.classList.contains('mdi-pin-outline')).toBeTruthy(); expect(commandLabelElm.textContent).toBe('Freeze Columns'); translateService.use('fr'); plugin.translateHeaderMenu(); expect(columnsMock[1].header!.menu!.commandItems!).toEqual([ - { iconCssClass: 'sgi sgi-pin-outline', title: 'Geler les colonnes', titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 47 }, + { iconCssClass: 'mdi mdi-pin-outline', title: 'Geler les colonnes', titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 47 }, { divider: true, command: '', positionOrder: 49 }, ]); @@ -1038,7 +1038,7 @@ describe('HeaderMenu Plugin', () => { const commandDivElm = gridContainerDiv.querySelector('[data-command="freeze-columns"]') as HTMLDivElement; expect(columnsMock[2].header!.menu!.commandItems!).toEqual([ - { iconCssClass: 'sgi sgi-pin-outline', title: 'Freeze Columns', titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 47 }, + { iconCssClass: 'mdi mdi-pin-outline', title: 'Freeze Columns', titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 47 }, { divider: true, command: '', positionOrder: 49 }, ]); @@ -1066,7 +1066,7 @@ describe('HeaderMenu Plugin', () => { const commandDivElm = gridContainerDiv.querySelector('[data-command="freeze-columns"]') as HTMLDivElement; expect((originalColumnDefinitions[1] as any).header!.menu!.commandItems!).toEqual([ - { iconCssClass: 'sgi sgi-pin-outline', title: 'Freeze Columns', titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 47 }, + { iconCssClass: 'mdi mdi-pin-outline', title: 'Freeze Columns', titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 47 }, { divider: true, command: '', positionOrder: 49 }, ]); @@ -1093,10 +1093,10 @@ describe('HeaderMenu Plugin', () => { const commandDivElm = gridContainerDiv.querySelector('[data-command="sort-asc"]') as HTMLDivElement; expect(columnsMock[1].header!.menu!.commandItems!).toEqual([ - { iconCssClass: 'sgi sgi-sort-ascending', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, - { iconCssClass: 'sgi sgi-flip-v sgi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 }, + { iconCssClass: 'mdi mdi-sort-ascending', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, + { iconCssClass: 'mdi mdi-flip-v mdi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 }, { divider: true, command: '', positionOrder: 52 }, - { iconCssClass: 'sgi sgi-sort-variant-off', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 }, + { iconCssClass: 'mdi mdi-sort-variant-off', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 }, ]); const clickEvent = new Event('click'); @@ -1125,10 +1125,10 @@ describe('HeaderMenu Plugin', () => { const commandDivElm = gridContainerDiv.querySelector('[data-command="sort-desc"]') as HTMLDivElement; expect(columnsMock[1].header!.menu!.commandItems!).toEqual([ - { iconCssClass: 'sgi sgi-sort-ascending', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, - { iconCssClass: 'sgi sgi-flip-v sgi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 }, + { iconCssClass: 'mdi mdi-sort-ascending', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, + { iconCssClass: 'mdi mdi-flip-v mdi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 }, { divider: true, command: '', positionOrder: 52 }, - { iconCssClass: 'sgi sgi-sort-variant-off', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 }, + { iconCssClass: 'mdi mdi-sort-variant-off', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 }, ]); const clickEvent = new Event('click'); diff --git a/packages/common/src/extensions/extensionCommonUtils.ts b/packages/common/src/extensions/extensionCommonUtils.ts index 6bacf869b..a31158d28 100644 --- a/packages/common/src/extensions/extensionCommonUtils.ts +++ b/packages/common/src/extensions/extensionCommonUtils.ts @@ -5,8 +5,8 @@ import type { Column, ColumnPickerOption, DOMEvent, GridMenuOption } from '../in import { SlickColumnPicker } from './slickColumnPicker'; import { SlickGridMenu } from './slickGridMenu'; -const PICKER_CHECK_ICON = 'sgi-icon-picker-check'; -const PICKER_UNCHECK_ICON = 'sgi-icon-picker-uncheck'; +const PICKER_CHECK_ICON = 'mdi-icon-picker-check'; +const PICKER_UNCHECK_ICON = 'mdi-icon-picker-uncheck'; /** Create a Close button element and add it to the Menu element */ export function addCloseButtomElement(this: SlickColumnPicker | SlickGridMenu, menuElm: HTMLDivElement) { @@ -41,7 +41,7 @@ export function handleColumnPickerItemClick(this: SlickColumnPicker | SlickGridM const context: any = this; const controlType = context instanceof SlickColumnPicker ? 'columnPicker' : 'gridMenu'; const iconContainerElm = event.target?.closest('.icon-checkbox-container') as HTMLDivElement; - const iconElm = iconContainerElm?.querySelector('.sgi'); + const iconElm = iconContainerElm?.querySelector('.mdi'); const isChecked = !!(event.target.checked); event.target.ariaChecked = String(isChecked); togglePickerCheckbox(iconElm, isChecked); @@ -120,7 +120,7 @@ export function handleColumnPickerItemClick(this: SlickColumnPicker | SlickGridM function togglePickerCheckbox(iconElm: HTMLDivElement | null, checked = false) { if (iconElm) { - iconElm.className = `sgi ${checked ? PICKER_CHECK_ICON : PICKER_UNCHECK_ICON}`; + iconElm.className = `mdi ${checked ? PICKER_CHECK_ICON : PICKER_UNCHECK_ICON}`; } } @@ -128,7 +128,7 @@ function generatePickerCheckbox(columnLiElm: HTMLLIElement, inputId: string, inp const labelElm = createDomElement('label', { className: 'checkbox-picker-label', htmlFor: inputId }); const divElm = createDomElement('div', { className: 'icon-checkbox-container' }); const inputElm = createDomElement('input', { id: inputId, type: 'checkbox', dataset: inputData }); - const colInputDivElm = createDomElement('div', { className: `sgi ${checked ? PICKER_CHECK_ICON : PICKER_UNCHECK_ICON}` }); + const colInputDivElm = createDomElement('div', { className: `mdi ${checked ? PICKER_CHECK_ICON : PICKER_UNCHECK_ICON}` }); const labelSpanElm = createDomElement('span', { className: 'checkbox-label' }); divElm.appendChild(inputElm); divElm.appendChild(colInputDivElm); diff --git a/packages/common/src/extensions/slickCheckboxSelectColumn.ts b/packages/common/src/extensions/slickCheckboxSelectColumn.ts index a901d3804..fc3cd1dcf 100644 --- a/packages/common/src/extensions/slickCheckboxSelectColumn.ts +++ b/packages/common/src/extensions/slickCheckboxSelectColumn.ts @@ -9,8 +9,8 @@ import type { SelectionModel } from '../enums/index'; export interface RowLookup { [row: number]: boolean; } -const CHECK_ICON = 'sgi-icon-check'; -const UNCHECK_ICON = 'sgi-icon-uncheck'; +const CHECK_ICON = 'mdi-icon-check'; +const UNCHECK_ICON = 'mdi-icon-uncheck'; export class SlickCheckboxSelectColumn { pluginName: 'CheckboxSelectColumn' = 'CheckboxSelectColumn' as const; @@ -228,7 +228,7 @@ export class SlickCheckboxSelectColumn { createDomElement('input', { id: inputId, type: 'checkbox', checked, ariaChecked: String(checked) }) ); divElm.appendChild( - createDomElement('div', { className: `sgi ${checked ? CHECK_ICON : UNCHECK_ICON}` }) + createDomElement('div', { className: `mdi ${checked ? CHECK_ICON : UNCHECK_ICON}` }) ); labelElm.appendChild(divElm); fragmentElm.appendChild(labelElm); @@ -335,7 +335,7 @@ export class SlickCheckboxSelectColumn { createDomElement('input', { id: inputId, type: 'checkbox', ariaChecked: 'false' }) ); divElm.appendChild( - createDomElement('div', { className: 'sgi sgi-icon-uncheck' }) + createDomElement('div', { className: 'mdi mdi-icon-uncheck' }) ); labelElm.appendChild(divElm); @@ -404,13 +404,13 @@ export class SlickCheckboxSelectColumn { } if (!this._addonOptions.hideInFilterHeaderRow) { const selectAllElm = this.headerRowNode?.querySelector(`#header-filter-selector${this._selectAll_UID}`); - const selectAllIconElm = this.headerRowNode?.querySelector('.icon-checkbox-container .sgi'); + const selectAllIconElm = this.headerRowNode?.querySelector('.icon-checkbox-container .mdi'); if (selectAllElm) { selectAllElm.ariaChecked = String(this._isSelectAllChecked); selectAllElm.checked = this._isSelectAllChecked; } if (selectAllIconElm) { - selectAllIconElm.className = `sgi ${this._isSelectAllChecked ? CHECK_ICON : UNCHECK_ICON}`; + selectAllIconElm.className = `mdi ${this._isSelectAllChecked ? CHECK_ICON : UNCHECK_ICON}`; } } } diff --git a/packages/common/src/extensions/slickContextMenu.ts b/packages/common/src/extensions/slickContextMenu.ts index a6523d38b..b99db084c 100644 --- a/packages/common/src/extensions/slickContextMenu.ts +++ b/packages/common/src/extensions/slickContextMenu.ts @@ -169,7 +169,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass { if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { menuCommandItems.push( { - iconCssClass: contextMenu.iconCopyCellValueCommand || 'sgi sgi-content-copy', + iconCssClass: contextMenu.iconCopyCellValueCommand || 'mdi mdi-content-copy', titleKey: `${translationPrefix}COPY`, disabled: false, command: commandName, @@ -202,7 +202,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass { if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { menuCommandItems.push( { - iconCssClass: contextMenu.iconExportCsvCommand || 'sgi sgi-download', + iconCssClass: contextMenu.iconExportCsvCommand || 'mdi mdi-download', titleKey: `${translationPrefix}EXPORT_TO_CSV`, disabled: false, command: commandName, @@ -230,7 +230,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass { if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { menuCommandItems.push( { - iconCssClass: contextMenu.iconExportExcelCommand || 'sgi sgi-file-excel-outline text-success', + iconCssClass: contextMenu.iconExportExcelCommand || 'mdi mdi-file-excel-outline text-success', titleKey: `${translationPrefix}EXPORT_TO_EXCEL`, disabled: false, command: commandName, @@ -255,7 +255,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass { if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { menuCommandItems.push( { - iconCssClass: contextMenu.iconExportTextDelimitedCommand || 'sgi sgi-download', + iconCssClass: contextMenu.iconExportTextDelimitedCommand || 'mdi mdi-download', titleKey: `${translationPrefix}EXPORT_TO_TAB_DELIMITED`, disabled: false, command: commandName, @@ -290,7 +290,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass { if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { menuCommandItems.push( { - iconCssClass: contextMenu.iconClearGroupingCommand || 'sgi sgi-close', + iconCssClass: contextMenu.iconClearGroupingCommand || 'mdi mdi-close', titleKey: `${translationPrefix}CLEAR_ALL_GROUPING`, disabled: false, command: commandName, @@ -315,7 +315,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass { if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { menuCommandItems.push( { - iconCssClass: contextMenu.iconCollapseAllGroupsCommand || 'sgi sgi-arrow-collapse', + iconCssClass: contextMenu.iconCollapseAllGroupsCommand || 'mdi mdi-arrow-collapse', titleKey: `${translationPrefix}COLLAPSE_ALL_GROUPS`, disabled: false, command: commandName, @@ -347,7 +347,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass { if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { menuCommandItems.push( { - iconCssClass: contextMenu.iconExpandAllGroupsCommand || 'sgi sgi-arrow-expand', + iconCssClass: contextMenu.iconExpandAllGroupsCommand || 'mdi mdi-arrow-expand', titleKey: `${translationPrefix}EXPAND_ALL_GROUPS`, disabled: false, command: commandName, diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts index 5bc4fcdff..807becb0b 100644 --- a/packages/common/src/extensions/slickGridMenu.ts +++ b/packages/common/src/extensions/slickGridMenu.ts @@ -570,7 +570,7 @@ export class SlickGridMenu extends MenuBaseClass { const commandName = 'clear-pinning'; if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { gridMenuCommandItems.push({ - iconCssClass: this._addonOptions.iconClearFrozenColumnsCommand || 'sgi sgi-pin-off-outline', + iconCssClass: this._addonOptions.iconClearFrozenColumnsCommand || 'mdi mdi-pin-off-outline', titleKey: `${translationPrefix}${commandLabels?.clearFrozenColumnsCommandKey ?? 'CLEAR_PINNING'}`, disabled: false, command: commandName, @@ -585,7 +585,7 @@ export class SlickGridMenu extends MenuBaseClass { const commandName = 'clear-filter'; if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { gridMenuCommandItems.push({ - iconCssClass: this._addonOptions.iconClearAllFiltersCommand || 'sgi sgi-filter-remove-outline', + iconCssClass: this._addonOptions.iconClearAllFiltersCommand || 'mdi mdi-filter-remove-outline', titleKey: `${translationPrefix}${commandLabels?.clearAllFiltersCommandKey ?? 'CLEAR_ALL_FILTERS'}`, disabled: false, command: commandName, @@ -599,7 +599,7 @@ export class SlickGridMenu extends MenuBaseClass { const commandName = 'toggle-filter'; if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { gridMenuCommandItems.push({ - iconCssClass: this._addonOptions.iconToggleFilterCommand || 'sgi sgi-flip-vertical', + iconCssClass: this._addonOptions.iconToggleFilterCommand || 'mdi mdi-flip-vertical', titleKey: `${translationPrefix}${commandLabels?.toggleFilterCommandKey ?? 'TOGGLE_FILTER_ROW'}`, disabled: false, command: commandName, @@ -613,7 +613,7 @@ export class SlickGridMenu extends MenuBaseClass { const commandName = 'refresh-dataset'; if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { gridMenuCommandItems.push({ - iconCssClass: this._addonOptions.iconRefreshDatasetCommand || 'sgi sgi-sync', + iconCssClass: this._addonOptions.iconRefreshDatasetCommand || 'mdi mdi-sync', titleKey: `${translationPrefix}${commandLabels?.refreshDatasetCommandKey ?? 'REFRESH_DATASET'}`, disabled: false, command: commandName, @@ -628,7 +628,7 @@ export class SlickGridMenu extends MenuBaseClass { const commandName = 'toggle-dark-mode'; if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { gridMenuCommandItems.push({ - iconCssClass: this._addonOptions.iconToggleDarkModeCommand || 'sgi sgi-brightness-4', + iconCssClass: this._addonOptions.iconToggleDarkModeCommand || 'mdi mdi-brightness-4', titleKey: `${translationPrefix}${commandLabels?.toggleDarkModeCommandKey ?? 'TOGGLE_DARK_MODE'}`, disabled: false, command: commandName, @@ -643,7 +643,7 @@ export class SlickGridMenu extends MenuBaseClass { const commandName = 'toggle-preheader'; if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { gridMenuCommandItems.push({ - iconCssClass: this._addonOptions.iconTogglePreHeaderCommand || 'sgi sgi-flip-vertical', + iconCssClass: this._addonOptions.iconTogglePreHeaderCommand || 'mdi mdi-flip-vertical', titleKey: `${translationPrefix}${commandLabels?.togglePreHeaderCommandKey ?? 'TOGGLE_PRE_HEADER_ROW'}`, disabled: false, command: commandName, @@ -659,7 +659,7 @@ export class SlickGridMenu extends MenuBaseClass { const commandName = 'clear-sorting'; if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { gridMenuCommandItems.push({ - iconCssClass: this._addonOptions.iconClearAllSortingCommand || 'sgi sgi-sort-variant-off', + iconCssClass: this._addonOptions.iconClearAllSortingCommand || 'mdi mdi-sort-variant-off', titleKey: `${translationPrefix}${commandLabels?.clearAllSortingCommandKey ?? 'CLEAR_ALL_SORTING'}`, disabled: false, command: commandName, @@ -674,7 +674,7 @@ export class SlickGridMenu extends MenuBaseClass { const commandName = 'export-csv'; if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { gridMenuCommandItems.push({ - iconCssClass: this._addonOptions.iconExportCsvCommand || 'sgi sgi-download', + iconCssClass: this._addonOptions.iconExportCsvCommand || 'mdi mdi-download', titleKey: `${translationPrefix}${commandLabels?.exportCsvCommandKey ?? 'EXPORT_TO_CSV'}`, disabled: false, command: commandName, @@ -688,7 +688,7 @@ export class SlickGridMenu extends MenuBaseClass { const commandName = 'export-excel'; if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { gridMenuCommandItems.push({ - iconCssClass: this._addonOptions.iconExportExcelCommand || 'sgi sgi-file-excel-outline text-success', + iconCssClass: this._addonOptions.iconExportExcelCommand || 'mdi mdi-file-excel-outline text-success', titleKey: `${translationPrefix}${commandLabels?.exportExcelCommandKey ?? 'EXPORT_TO_EXCEL'}`, disabled: false, command: commandName, @@ -702,7 +702,7 @@ export class SlickGridMenu extends MenuBaseClass { const commandName = 'export-text-delimited'; if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) { gridMenuCommandItems.push({ - iconCssClass: this._addonOptions.iconExportTextDelimitedCommand || 'sgi sgi-download', + iconCssClass: this._addonOptions.iconExportTextDelimitedCommand || 'mdi mdi-download', titleKey: `${translationPrefix}${commandLabels?.exportTextDelimitedCommandKey ?? 'EXPORT_TO_TAB_DELIMITED'}`, disabled: false, command: commandName, @@ -830,7 +830,7 @@ export class SlickGridMenu extends MenuBaseClass { columnTitle: this.extensionUtility.getPickerTitleOutputString('columnTitle', 'gridMenu'), forceFitTitle: this.extensionUtility.getPickerTitleOutputString('forceFitTitle', 'gridMenu'), syncResizeTitle: this.extensionUtility.getPickerTitleOutputString('syncResizeTitle', 'gridMenu'), - iconCssClass: 'sgi sgi-menu', + iconCssClass: 'mdi mdi-menu', menuWidth: 18, commandItems: [], hideClearAllFiltersCommand: false, diff --git a/packages/common/src/extensions/slickHeaderMenu.ts b/packages/common/src/extensions/slickHeaderMenu.ts index 2ec367d1c..a6893d5ab 100644 --- a/packages/common/src/extensions/slickHeaderMenu.ts +++ b/packages/common/src/extensions/slickHeaderMenu.ts @@ -357,7 +357,7 @@ export class SlickHeaderMenu extends MenuBaseClass { hasFrozenOrResizeCommand = true; if (!columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'freeze-columns')) { columnHeaderMenuItems.push({ - iconCssClass: headerMenuOptions.iconFreezeColumns || 'sgi sgi-pin-outline', + iconCssClass: headerMenuOptions.iconFreezeColumns || 'mdi mdi-pin-outline', titleKey: `${translationPrefix}FREEZE_COLUMNS`, command: 'freeze-columns', positionOrder: 47 @@ -370,7 +370,7 @@ export class SlickHeaderMenu extends MenuBaseClass { hasFrozenOrResizeCommand = true; if (!columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'column-resize-by-content')) { columnHeaderMenuItems.push({ - iconCssClass: headerMenuOptions.iconColumnResizeByContentCommand || 'sgi sgi-arrow-expand-horizontal', + iconCssClass: headerMenuOptions.iconColumnResizeByContentCommand || 'mdi mdi-arrow-expand-horizontal', titleKey: `${translationPrefix}COLUMN_RESIZE_BY_CONTENT`, command: 'column-resize-by-content', positionOrder: 48 @@ -387,7 +387,7 @@ export class SlickHeaderMenu extends MenuBaseClass { if (gridOptions.enableSorting && columnDef.sortable && headerMenuOptions && !headerMenuOptions.hideSortCommands) { if (!columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'sort-asc')) { columnHeaderMenuItems.push({ - iconCssClass: headerMenuOptions.iconSortAscCommand || 'sgi sgi-sort-ascending', + iconCssClass: headerMenuOptions.iconSortAscCommand || 'mdi mdi-sort-ascending', titleKey: `${translationPrefix}SORT_ASCENDING`, command: 'sort-asc', positionOrder: 50 @@ -395,7 +395,7 @@ export class SlickHeaderMenu extends MenuBaseClass { } if (!columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'sort-desc')) { columnHeaderMenuItems.push({ - iconCssClass: headerMenuOptions.iconSortDescCommand || 'sgi sgi-flip-v sgi-sort-descending', + iconCssClass: headerMenuOptions.iconSortDescCommand || 'mdi mdi-flip-v mdi-sort-descending', titleKey: `${translationPrefix}SORT_DESCENDING`, command: 'sort-desc', positionOrder: 51 @@ -409,7 +409,7 @@ export class SlickHeaderMenu extends MenuBaseClass { if (!headerMenuOptions.hideClearSortCommand && !columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'clear-sort')) { columnHeaderMenuItems.push({ - iconCssClass: headerMenuOptions.iconClearSortCommand || 'sgi sgi-sort-variant-off', + iconCssClass: headerMenuOptions.iconClearSortCommand || 'mdi mdi-sort-variant-off', titleKey: `${translationPrefix}REMOVE_SORT`, command: 'clear-sort', positionOrder: 54 @@ -421,7 +421,7 @@ export class SlickHeaderMenu extends MenuBaseClass { if (gridOptions.enableFiltering && columnDef.filterable && headerMenuOptions && !headerMenuOptions.hideFilterCommand) { if (!headerMenuOptions.hideClearFilterCommand && !columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'clear-filter')) { columnHeaderMenuItems.push({ - iconCssClass: headerMenuOptions.iconClearFilterCommand || 'sgi sgi-filter-remove-outline', + iconCssClass: headerMenuOptions.iconClearFilterCommand || 'mdi mdi-filter-remove-outline', titleKey: `${translationPrefix}REMOVE_FILTER`, command: 'clear-filter', positionOrder: 53 @@ -432,7 +432,7 @@ export class SlickHeaderMenu extends MenuBaseClass { // Hide Column Command if (headerMenuOptions && !headerMenuOptions.hideColumnHideCommand && !columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'hide-column')) { columnHeaderMenuItems.push({ - iconCssClass: headerMenuOptions.iconColumnHideCommand || 'sgi sgi-close', + iconCssClass: headerMenuOptions.iconColumnHideCommand || 'mdi mdi-close', titleKey: `${translationPrefix}HIDE_COLUMN`, command: 'hide-column', positionOrder: 55 diff --git a/packages/common/src/extensions/slickRowBasedEdit.ts b/packages/common/src/extensions/slickRowBasedEdit.ts index 0de31fca3..7a5765bec 100644 --- a/packages/common/src/extensions/slickRowBasedEdit.ts +++ b/packages/common/src/extensions/slickRowBasedEdit.ts @@ -439,7 +439,7 @@ export class SlickRowBasedEdit { .appendChild( createDomElement('span', { className: - options.rowBasedEditOptions?.actionButtons?.iconEditButtonClassName || 'sgi sgi-table-edit text-color-primary', + options.rowBasedEditOptions?.actionButtons?.iconEditButtonClassName || 'mdi mdi-table-edit text-color-primary', }) ); actionFragment @@ -455,7 +455,7 @@ export class SlickRowBasedEdit { .appendChild( createDomElement('span', { className: - options.rowBasedEditOptions?.actionButtons?.iconDeleteButtonClassName || 'sgi sgi-close text-color-danger', + options.rowBasedEditOptions?.actionButtons?.iconDeleteButtonClassName || 'mdi mdi-close text-color-danger', }) ); actionFragment @@ -471,7 +471,7 @@ export class SlickRowBasedEdit { .appendChild( createDomElement('span', { className: - options.rowBasedEditOptions?.actionButtons?.iconUpdateButtonClassName || 'sgi sgi-check-bold text-color-success', + options.rowBasedEditOptions?.actionButtons?.iconUpdateButtonClassName || 'mdi mdi-check-bold text-color-success', }) ); actionFragment @@ -487,7 +487,7 @@ export class SlickRowBasedEdit { .appendChild( createDomElement('span', { className: - options.rowBasedEditOptions?.actionButtons?.iconCancelButtonClassName || 'sgi sgi-cancel text-color-danger', + options.rowBasedEditOptions?.actionButtons?.iconCancelButtonClassName || 'mdi mdi-cancel text-color-danger', }) ); diff --git a/packages/common/src/filters/__tests__/selectFilter.spec.ts b/packages/common/src/filters/__tests__/selectFilter.spec.ts index 3ffb458b3..050fe7ee2 100644 --- a/packages/common/src/filters/__tests__/selectFilter.spec.ts +++ b/packages/common/src/filters/__tests__/selectFilter.spec.ts @@ -502,7 +502,7 @@ describe('SelectFilter', () => { it('should create the multi-select filter with a default search term and have the HTML rendered when "enableRenderHtml" is set', () => { mockColumn.filter = { enableRenderHtml: true, - collection: [{ value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], + collection: [{ value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], customStructure: { value: 'isEffort', label: 'label', @@ -519,13 +519,13 @@ describe('SelectFilter', () => { expect(filter.selectOptions.renderOptionLabelAsHtml).toBeTruthy(); expect(filter.selectOptions.useSelectOptionLabelToHtml).toBeFalsy(); expect(filterListElm.length).toBe(2); - expect(filterListElm[0].innerHTML).toBe(' True'); + expect(filterListElm[0].innerHTML).toBe(' True'); }); it('should create the multi-select filter with a default search term and have the HTML rendered and sanitized when "enableRenderHtml" is set and has ` }, { value: false, label: 'False' }], + collection: [{ value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], customStructure: { value: 'isEffort', label: 'label', @@ -539,7 +539,7 @@ describe('SelectFilter', () => { filterBtnElm.click(); expect(filterListElm.length).toBe(2); - expect(filterListElm[0].innerHTML).toBe(' True'); + expect(filterListElm[0].innerHTML).toBe(' True'); }); it('should create the multi-select filter with a blank entry at the beginning of the collection when "addBlankEntry" is set in the "collectionOptions" property', () => { diff --git a/packages/common/src/formatters/__tests__/checkmarkFormatter.spec.ts b/packages/common/src/formatters/__tests__/checkmarkFormatter.spec.ts index a38c13643..b66ec585b 100644 --- a/packages/common/src/formatters/__tests__/checkmarkFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/checkmarkFormatter.spec.ts @@ -26,20 +26,20 @@ describe('the Checkmark Formatter', () => { const value = 'True'; const result1 = checkmarkFormatter(0, 0, value.toLowerCase(), {} as Column, {}, {} as any); const result2 = checkmarkFormatter(0, 0, value.toUpperCase(), {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - expect((result2 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result2 as HTMLElement).outerHTML).toBe(''); }); it('should return the Font Awesome Checkmark icon when input is True', () => { const value = true; const result = checkmarkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result as HTMLElement).outerHTML).toBe(''); + expect((result as HTMLElement).outerHTML).toBe(''); }); it('should return the Font Awesome Checkmark icon when input is a string even if it start with 0', () => { const value = '005A00ABC'; const result1 = checkmarkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); }); it('should return an empty string when the string "0" is provided', () => { @@ -51,13 +51,13 @@ describe('the Checkmark Formatter', () => { it('should return the Font Awesome Checkmark icon when input is a number greater than 0', () => { const value = 0.000001; const result1 = checkmarkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); }); it('should return the Font Awesome Checkmark icon when input is a number as a text greater than 0', () => { const value = '0.000001'; const result1 = checkmarkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); }); it('should return an empty string when input is a number lower or equal to 0', () => { @@ -92,7 +92,7 @@ describe('the Checkmark Formatter', () => { const value2 = 'undefined'; const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {}, {} as any); const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - expect((result2 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result2 as HTMLElement).outerHTML).toBe(''); }); }); diff --git a/packages/common/src/formatters/__tests__/checkmarkMaterialFormatter.spec.ts b/packages/common/src/formatters/__tests__/checkmarkMaterialFormatter.spec.ts index 53f289ceb..e1a896ebb 100644 --- a/packages/common/src/formatters/__tests__/checkmarkMaterialFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/checkmarkMaterialFormatter.spec.ts @@ -26,20 +26,20 @@ describe('the Checkmark Formatter with Material Design Icon', () => { const value = 'True'; const result1 = checkmarkMaterialFormatter(0, 0, value.toLowerCase(), {} as Column, {}, {} as any); const result2 = checkmarkMaterialFormatter(0, 0, value.toUpperCase(), {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - expect((result2 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result2 as HTMLElement).outerHTML).toBe(''); }); it('should return the Material Checkmark icon when input is True', () => { const value = true; const result = checkmarkMaterialFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result as HTMLElement).outerHTML).toBe(''); + expect((result as HTMLElement).outerHTML).toBe(''); }); it('should return the Material Checkmark icon when input is a string even if it start with 0', () => { const value = '005A00ABC'; const result1 = checkmarkMaterialFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); }); it('should return an empty string when the string "0" is provided', () => { @@ -51,13 +51,13 @@ describe('the Checkmark Formatter with Material Design Icon', () => { it('should return the Material Checkmark icon when input is a number greater than 0', () => { const value = 0.000001; const result1 = checkmarkMaterialFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); }); it('should return the Material Checkmark icon when input is a number as a text greater than 0', () => { const value = '0.000001'; const result1 = checkmarkMaterialFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); }); it('should return an empty string when input is a number lower or equal to 0', () => { @@ -92,7 +92,7 @@ describe('the Checkmark Formatter with Material Design Icon', () => { const value2 = 'undefined'; const result1 = checkmarkMaterialFormatter(0, 0, value1, {} as Column, {}, {} as any); const result2 = checkmarkMaterialFormatter(0, 0, value2, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - expect((result2 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result2 as HTMLElement).outerHTML).toBe(''); }); }); diff --git a/packages/common/src/formatters/__tests__/iconBooleanFormatter.spec.ts b/packages/common/src/formatters/__tests__/iconBooleanFormatter.spec.ts index 52a56e664..44b638a1e 100644 --- a/packages/common/src/formatters/__tests__/iconBooleanFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/iconBooleanFormatter.spec.ts @@ -9,21 +9,21 @@ describe('the Checkmark Formatter', () => { it('should return an empty string when no value is passed', () => { const value = null; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result = iconBooleanFormatter(0, 0, value, { field: 'user', params: { cssClass } } as Column, {}, {} as any); expect(result).toBe(''); }); it('should return an empty string when False is provided', () => { const value = false; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result = iconBooleanFormatter(0, 0, value, { field: 'user', params: { cssClass } } as Column, {}, {} as any); expect(result).toBe(''); }); it('should return an empty string when the string "FALSE" (case insensitive) is provided', () => { const value = 'FALSE'; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result1 = iconBooleanFormatter(0, 0, value.toLowerCase(), { field: 'user', params: { cssClass } } as Column, {}, {} as any); const result2 = iconBooleanFormatter(0, 0, value.toUpperCase(), { field: 'user', params: { cssClass } } as Column, {}, {} as any); expect(result1).toBe(''); @@ -32,52 +32,52 @@ describe('the Checkmark Formatter', () => { it('should return the Checkmark icon when the string "True" (case insensitive) is provided', () => { const value = 'True'; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result1 = iconBooleanFormatter(0, 0, value.toLowerCase(), { field: 'user', params: { cssClass } } as Column, {}, {} as any); const result2 = iconBooleanFormatter(0, 0, value.toUpperCase(), { field: 'user', params: { cssClass } } as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - expect((result2 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result2 as HTMLElement).outerHTML).toBe(''); }); it('should return the Checkmark icon when input is True', () => { const value = true; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result = iconBooleanFormatter(0, 0, value, { field: 'user', params: { cssClass } } as Column, {}, {} as any); - expect((result as HTMLElement).outerHTML).toBe(''); + expect((result as HTMLElement).outerHTML).toBe(''); }); it('should return the Checkmark icon when input is a string even if it start with 0', () => { const value = '005A00ABC'; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result1 = iconBooleanFormatter(0, 0, value, { field: 'user', params: { cssClass } } as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); }); it('should return an empty string when the string "0" is provided', () => { const value = '0'; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result = iconBooleanFormatter(0, 0, value, { field: 'user', params: { cssClass } } as Column, {}, {} as any); expect(result).toBe(''); }); it('should return the Checkmark icon when input is a number greater than 0', () => { const value = 0.000001; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result1 = iconBooleanFormatter(0, 0, value, { field: 'user', params: { cssClass } } as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); }); it('should return the Checkmark icon when input is a number as a text greater than 0', () => { const value = '0.000001'; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result1 = iconBooleanFormatter(0, 0, value, { field: 'user', params: { cssClass } } as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); }); it('should return an empty string when input is a number lower or equal to 0', () => { const value1 = 0; const value2 = -0.5; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result1 = iconBooleanFormatter(0, 0, value1, { field: 'user', params: { cssClass } } as Column, {}, {} as any); const result2 = iconBooleanFormatter(0, 0, value2, { field: 'user', params: { cssClass } } as Column, {}, {} as any); expect(result1).toBe(''); @@ -87,7 +87,7 @@ describe('the Checkmark Formatter', () => { it('should return an empty string when input is a number as a text and lower or equal to 0', () => { const value1 = '0'; const value2 = '-0.5'; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result1 = iconBooleanFormatter(0, 0, value1, { field: 'user', params: { cssClass } } as Column, {}, {} as any); const result2 = iconBooleanFormatter(0, 0, value2, { field: 'user', params: { cssClass } } as Column, {}, {} as any); expect(result1).toBe(''); @@ -97,7 +97,7 @@ describe('the Checkmark Formatter', () => { it('should return an empty string when input is type null or undefined', () => { const value1 = null; const value2 = undefined; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result1 = iconBooleanFormatter(0, 0, value1, { field: 'user', params: { cssClass } } as Column, {}, {} as any); const result2 = iconBooleanFormatter(0, 0, value2, { field: 'user', params: { cssClass } } as Column, {}, {} as any); expect(result1).toBe(''); @@ -107,10 +107,10 @@ describe('the Checkmark Formatter', () => { it('should return the Checkmark icon when input is the "null" or "undefined"', () => { const value1 = 'null'; const value2 = 'undefined'; - const cssClass = 'sgi sgi-check'; + const cssClass = 'mdi mdi-check'; const result1 = iconBooleanFormatter(0, 0, value1, { field: 'user', params: { cssClass } } as Column, {}, {} as any); const result2 = iconBooleanFormatter(0, 0, value2, { field: 'user', params: { cssClass } } as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - expect((result2 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result2 as HTMLElement).outerHTML).toBe(''); }); }); diff --git a/packages/common/src/formatters/__tests__/iconFormatter.spec.ts b/packages/common/src/formatters/__tests__/iconFormatter.spec.ts index f6319b747..671fff9dc 100644 --- a/packages/common/src/formatters/__tests__/iconFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/iconFormatter.spec.ts @@ -11,23 +11,23 @@ describe('the Icon Formatter', () => { it('should always return a with the icon class name provided in the "icon" property from "params"', () => { const input = null; - const icon = 'sgi sgi-magnify'; + const icon = 'mdi mdi-magnify'; const result = iconFormatter(0, 0, input, { field: 'user', params: { icon } } as Column, {}, {} as any); expect((result as HTMLElement).outerHTML).toBe(``); }); it('should always return a with the icon class name provided in the "formatterIcon" property from "params"', () => { const input = null; - const icon = 'sgi sgi-magnify'; + const icon = 'mdi mdi-magnify'; const result = iconFormatter(0, 0, input, { field: 'user', params: { formatterIcon: icon } } as Column, {}, {} as any); expect((result as HTMLElement).outerHTML).toBe(``); }); it('should show console warning when using deprecated icon/formatterIcon params', () => { const input = null; - const icon = 'sgi sgi-magnify'; + const icon = 'mdi mdi-magnify'; const result = iconFormatter(0, 0, input, { field: 'user', params: { icon } } as Column, {}, {} as any); expect((result as HTMLElement).outerHTML).toBe(``); - expect(consoleWarnSpy).toHaveBeenCalledWith('[Slickgrid-Universal] deprecated params.icon or params.formatterIcon are deprecated when using `Formatters.icon` in favor of params.iconCssClass. (e.g.: `{ formatter: Formatters.icon, params: { iconCssClass: "sgi sgi-magnify" }}`'); + expect(consoleWarnSpy).toHaveBeenCalledWith('[Slickgrid-Universal] deprecated params.icon or params.formatterIcon are deprecated when using `Formatters.icon` in favor of params.iconCssClass. (e.g.: `{ formatter: Formatters.icon, params: { iconCssClass: "mdi mdi-magnify" }}`'); }); }); diff --git a/packages/common/src/formatters/__tests__/treeFormatter.spec.ts b/packages/common/src/formatters/__tests__/treeFormatter.spec.ts index 7fb1d855d..a0ed0002c 100644 --- a/packages/common/src/formatters/__tests__/treeFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/treeFormatter.spec.ts @@ -103,7 +103,7 @@ describe('Tree Formatter', () => { mockGridOptions.treeDataOptions!.levelPropName = 'indent'; mockGridOptions.treeDataOptions!.titleFormatter = (_row, _cell, value, _def, dataContext) => { if (dataContext.indent > 0) { - return `${value}`; + return `${value}`; } return value || ''; }; @@ -112,7 +112,7 @@ describe('Tree Formatter', () => { expect(output.addClasses).toBe('slick-tree-level-1'); expect(getHtmlStringOutput(output.html as DocumentFragment, 'outerHTML')) - .toEqual(`
Jane`); + .toEqual(`
Jane`); }); it('should execute "queryFieldNameGetterFn" callback to get field name to use when it is defined', () => { diff --git a/packages/common/src/formatters/checkmarkFormatter.ts b/packages/common/src/formatters/checkmarkFormatter.ts index 513a0a012..ccdf43ae4 100644 --- a/packages/common/src/formatters/checkmarkFormatter.ts +++ b/packages/common/src/formatters/checkmarkFormatter.ts @@ -20,5 +20,5 @@ export const checkmarkFormatter: Formatter = (_row, _cell, value) => { isChecked = true; } - return isChecked ? createDomElement('i', { className: 'sgi sgi-check checkmark-icon', ariaHidden: 'true' }) : ''; + return isChecked ? createDomElement('i', { className: 'mdi mdi-check checkmark-icon', ariaHidden: 'true' }) : ''; }; diff --git a/packages/common/src/formatters/checkmarkMaterialFormatter.ts b/packages/common/src/formatters/checkmarkMaterialFormatter.ts index b1a0881fa..49aa7b929 100644 --- a/packages/common/src/formatters/checkmarkMaterialFormatter.ts +++ b/packages/common/src/formatters/checkmarkMaterialFormatter.ts @@ -3,7 +3,7 @@ import { createDomElement, isNumber } from '@slickgrid-universal/utils'; import type { Formatter } from './../interfaces/index'; /** - * When value is filled, or if the value is a number and is bigger than 0, it will display a Material Design check icon (sgi-check). + * When value is filled, or if the value is a number and is bigger than 0, it will display a Material Design check icon (mdi-check). * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined) * Anything else than the condition specified will display the icon, so a text with "00123" will display the icon but "0" will not. * Also note that a string ("null", "undefined") will display the icon but (null, undefined) will not, so the typeof is also important @@ -20,5 +20,5 @@ export const checkmarkMaterialFormatter: Formatter = (_row, _cell, value) => { isChecked = true; } - return isChecked ? createDomElement('i', { className: 'sgi sgi-18px sgi-check checkmark-icon', ariaHidden: 'true' }) : ''; + return isChecked ? createDomElement('i', { className: 'mdi mdi-18px mdi-check checkmark-icon', ariaHidden: 'true' }) : ''; }; diff --git a/packages/common/src/formatters/formatters.index.ts b/packages/common/src/formatters/formatters.index.ts index a60c210fe..94530933d 100644 --- a/packages/common/src/formatters/formatters.index.ts +++ b/packages/common/src/formatters/formatters.index.ts @@ -51,7 +51,7 @@ export const Formatters = { checkmark: checkmarkFormatter, /** - * When value is filled, or if the value is a number and is bigger than 0, it will display a Material Design check icon (sgi-check). + * When value is filled, or if the value is a number and is bigger than 0, it will display a Material Design check icon (mdi-check). * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined) * Anything else than the condition specified will display the icon, so a text with "00123" will display the icon but "0" will not. * Also note that a string ("null", "undefined") will display the icon but (null, undefined) will not, so the typeof is also important diff --git a/packages/common/src/formatters/iconBooleanFormatter.ts b/packages/common/src/formatters/iconBooleanFormatter.ts index a6d6ee128..c14a72243 100644 --- a/packages/common/src/formatters/iconBooleanFormatter.ts +++ b/packages/common/src/formatters/iconBooleanFormatter.ts @@ -8,7 +8,7 @@ export const iconBooleanFormatter: Formatter = (_row, _cell, value, columnDef) = const cssClasses = columnParams.cssClass; if (!cssClasses) { - throw new Error('[Slickgrid-Universal] When using `Formatters.iconBoolean`, you must provide You must provide the "cssClass", e.g.: { formatter: Formatters.iconBoolean, params: { cssClass: "sgi sgi-check" }}'); + throw new Error('[Slickgrid-Universal] When using `Formatters.iconBoolean`, you must provide You must provide the "cssClass", e.g.: { formatter: Formatters.iconBoolean, params: { cssClass: "mdi mdi-check" }}'); } let isTruthy = false; diff --git a/packages/common/src/formatters/iconFormatter.ts b/packages/common/src/formatters/iconFormatter.ts index fb416af2f..3d9c9386a 100644 --- a/packages/common/src/formatters/iconFormatter.ts +++ b/packages/common/src/formatters/iconFormatter.ts @@ -7,11 +7,11 @@ export const iconFormatter: Formatter = (_row, _cell, _value, columnDef) => { const columnParams = columnDef?.params ?? {}; const cssClasses = columnParams.iconCssClass || columnParams.icon || columnParams.formatterIcon; if (columnParams.icon || columnParams.formatterIcon) { - console.warn('[Slickgrid-Universal] deprecated params.icon or params.formatterIcon are deprecated when using `Formatters.icon` in favor of params.iconCssClass. (e.g.: `{ formatter: Formatters.icon, params: { iconCssClass: "sgi sgi-magnify" }}`'); + console.warn('[Slickgrid-Universal] deprecated params.icon or params.formatterIcon are deprecated when using `Formatters.icon` in favor of params.iconCssClass. (e.g.: `{ formatter: Formatters.icon, params: { iconCssClass: "mdi mdi-magnify" }}`'); } if (!cssClasses) { - throw new Error('[Slickgrid-Universal] When using `Formatters.icon`, you must provide the "iconCssClass" via the generic "params". (e.g.: `{ formatter: Formatters.icon, params: { iconCssClass: "sgi sgi-magnify" }}`'); + throw new Error('[Slickgrid-Universal] When using `Formatters.icon`, you must provide the "iconCssClass" via the generic "params". (e.g.: `{ formatter: Formatters.icon, params: { iconCssClass: "mdi mdi-magnify" }}`'); } return createDomElement('i', { className: cssClasses, ariaHidden: 'true' }); }; diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts index 63577accd..17c065093 100644 --- a/packages/common/src/global-grid-options.ts +++ b/packages/common/src/global-grid-options.ts @@ -40,7 +40,7 @@ export const GlobalGridOptions: Partial = { hideCommandSection: false, hideOptionSection: false, showBulletWhenIconMissing: true, - subItemChevronClass: 'sgi sgi-chevron-down sgi-rotate-270', + subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', }, compositeEditorOptions: { labels: { @@ -69,15 +69,15 @@ export const GlobalGridOptions: Partial = { hideExportTextDelimitedCommand: true, hideMenuOnScroll: true, hideOptionSection: false, - iconCollapseAllGroupsCommand: 'sgi sgi-arrow-collapse', - iconExpandAllGroupsCommand: 'sgi sgi-arrow-expand', - iconClearGroupingCommand: 'sgi sgi-close', - iconCopyCellValueCommand: 'sgi sgi-content-copy', - iconExportCsvCommand: 'sgi sgi-download', - iconExportExcelCommand: 'sgi sgi-file-excel-outline', - iconExportTextDelimitedCommand: 'sgi sgi-download', + iconCollapseAllGroupsCommand: 'mdi mdi-arrow-collapse', + iconExpandAllGroupsCommand: 'mdi mdi-arrow-expand', + iconClearGroupingCommand: 'mdi mdi-close', + iconCopyCellValueCommand: 'mdi mdi-content-copy', + iconExportCsvCommand: 'mdi mdi-download', + iconExportExcelCommand: 'mdi mdi-file-excel-outline', + iconExportTextDelimitedCommand: 'mdi mdi-download', showBulletWhenIconMissing: true, - subItemChevronClass: 'sgi sgi-chevron-down sgi-rotate-270', + subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', }, customFooterOptions: { dateFormat: 'YYYY-MM-DD, hh:mm a', @@ -198,41 +198,41 @@ export const GlobalGridOptions: Partial = { hideToggleFilterCommand: false, hideToggleDarkModeCommand: true, hideTogglePreHeaderCommand: false, - iconCssClass: 'sgi sgi-menu', - iconClearAllFiltersCommand: 'sgi sgi-filter-remove-outline', - iconClearAllSortingCommand: 'sgi sgi-sort-variant-off', - iconClearFrozenColumnsCommand: 'sgi sgi-pin-off-outline', - iconExportCsvCommand: 'sgi sgi-download', - iconExportExcelCommand: 'sgi sgi-file-excel-outline', - iconExportTextDelimitedCommand: 'sgi sgi-download', - iconRefreshDatasetCommand: 'sgi sgi-sync', - iconToggleDarkModeCommand: 'sgi sgi-brightness-4', - iconToggleFilterCommand: 'sgi sgi-flip-vertical', - iconTogglePreHeaderCommand: 'sgi sgi-flip-vertical', + 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', menuWidth: 16, resizeOnShowHeaderRow: true, showBulletWhenIconMissing: true, - subItemChevronClass: 'sgi sgi-chevron-down sgi-rotate-270', + subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', headerColumnValueExtractor: pickerHeaderColumnValueExtractor }, headerMenu: { autoAlign: true, autoAlignOffset: 4, minWidth: 140, - iconClearFilterCommand: 'sgi sgi-filter-remove-outline', - iconClearSortCommand: 'sgi sgi-sort-variant-off', - iconFreezeColumns: 'sgi sgi-pin-outline', - iconSortAscCommand: 'sgi sgi-sort-ascending', - iconSortDescCommand: 'sgi sgi-flip-v sgi-sort-descending', - iconColumnHideCommand: 'sgi sgi-close', - iconColumnResizeByContentCommand: 'sgi sgi-arrow-expand-horizontal', + iconClearFilterCommand: 'mdi mdi-filter-remove-outline', + iconClearSortCommand: 'mdi mdi-sort-variant-off', + iconFreezeColumns: 'mdi mdi-pin-outline', + iconSortAscCommand: 'mdi mdi-sort-ascending', + iconSortDescCommand: 'mdi mdi-flip-v mdi-sort-descending', + iconColumnHideCommand: 'mdi mdi-close', + iconColumnResizeByContentCommand: 'mdi mdi-arrow-expand-horizontal', hideColumnResizeByContentCommand: false, hideColumnHideCommand: false, hideClearFilterCommand: false, hideClearSortCommand: false, hideFreezeColumnsCommand: true, // opt-in command hideSortCommands: false, - subItemChevronClass: 'sgi sgi-chevron-down sgi-rotate-270', + subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', }, ignoreAccentOnStringFilterAndSort: false, multiColumnSort: true, diff --git a/packages/common/src/services/__tests__/filter.service.spec.ts b/packages/common/src/services/__tests__/filter.service.spec.ts index a3725db73..e13f98165 100644 --- a/packages/common/src/services/__tests__/filter.service.spec.ts +++ b/packages/common/src/services/__tests__/filter.service.spec.ts @@ -46,14 +46,14 @@ const gridOptionMock = { commandItems: [{ command: 'clear-filter', disabled: false, - iconCssClass: 'sgi sgi-filter-remove-outline', + iconCssClass: 'mdi mdi-filter-remove-outline', positionOrder: 50, title: 'Clear all Filters' }, { command: 'toggle-filter', disabled: false, hidden: true, - iconCssClass: 'sgi sgi-flip-vertical', + iconCssClass: 'mdi mdi-flip-vertical', positionOrder: 52, title: 'Toggle Filter Row' }] diff --git a/packages/common/src/services/__tests__/sort.service.spec.ts b/packages/common/src/services/__tests__/sort.service.spec.ts index b0aad98cb..01aa0753d 100644 --- a/packages/common/src/services/__tests__/sort.service.spec.ts +++ b/packages/common/src/services/__tests__/sort.service.spec.ts @@ -33,7 +33,7 @@ const gridOptionMock = { command: 'clear-sorting', disabled: false, hidden: true, - iconCssClass: 'sgi sgi-sort-variant-off', + iconCssClass: 'mdi mdi-sort-variant-off', positionOrder: 51, title: 'Clear all Sorting' }] diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss index 7ef95fd16..ce309617e 100644 --- a/packages/common/src/styles/slick-editors.scss +++ b/packages/common/src/styles/slick-editors.scss @@ -220,7 +220,7 @@ color: var(--slick-editor-modal-reset-btn-color, $slick-editor-modal-reset-btn-color); background-color: var(--slick-editor-modal-reset-btn-bg-color, $slick-editor-modal-reset-btn-bg-color); float: right; - span.sgi { + span.mdi { margin-right: 5px; } } diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss index 89dc45aa0..8a6392ca8 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -159,15 +159,15 @@ li.hidden { border: var(--slick-column-picker-icon-border, $slick-column-picker-icon-border); border-radius: var(--slick-column-picker-icon-border-radius, $slick-column-picker-icon-border-radius); - div.sgi { + div.mdi { opacity: 1; font-size: var(--slick-column-picker-icon-font-size, $slick-column-picker-icon-font-size); color: var(--slick-column-picker-icon-color, $slick-column-picker-icon-color); - &.sgi-icon-picker-check { + &.mdi-icon-picker-check { @include generateSvgStyle('slick-column-picker-icon-checked-svg', $slick-column-picker-icon-checked-svg-path); } - &.sgi-icon-picker-uncheck { + &.mdi-icon-picker-uncheck { @include generateSvgStyle('slick-column-picker-icon-unchecked-svg', $slick-column-picker-icon-unchecked-svg-path); opacity: var(--slick-column-picker-unchecked-opacity, $slick-column-picker-unchecked-opacity); /* unchecked icon */ &:hover { @@ -608,15 +608,15 @@ li.hidden { border: var(--slick-checkbox-icon-border, $slick-checkbox-icon-border); border-radius: var(--slick-checkbox-icon-border-radius, $slick-checkbox-icon-border-radius); - div.sgi { + div.mdi { opacity: 1; font-size: var(--slick-checkbox-icon-font-size, $slick-checkbox-icon-font-size); color: var(--slick-checkbox-icon-color, $slick-checkbox-icon-color); - &.sgi-icon-check { + &.mdi-icon-check { @include generateSvgStyle('slick-checkbox-icon-checked-svg', $slick-checkbox-icon-checked-svg-path); } - &.sgi-icon-uncheck { + &.mdi-icon-uncheck { @include generateSvgStyle('slick-checkbox-icon-unchecked-svg', $slick-checkbox-icon-unchecked-svg-path); opacity: var(--slick-checkbox-unchecked-opacity, $slick-checkbox-unchecked-opacity); /* unchecked icon */ &:hover { diff --git a/packages/common/src/styles/slickgrid-icons-svg-utils.scss b/packages/common/src/styles/slickgrid-icons-svg-utils.scss index 6c4a8d244..bbdf5a0f5 100644 --- a/packages/common/src/styles/slickgrid-icons-svg-utils.scss +++ b/packages/common/src/styles/slickgrid-icons-svg-utils.scss @@ -13,44 +13,44 @@ $slick-icon-width-max-size: 50; transform: rotate($degrees); } -.sgi { - &.sgi-flip-h { +.mdi { + &.mdi-flip-h { transform: scaleX(-1); } - &.sgi-flip-v { + &.mdi-flip-v { transform: scaleY(-1); } - &.sgi-pulse { + &.mdi-pulse { animation: sg-spin 1s infinite steps(8); } - /* use sgi-spin or sgi-spin-1s to change the speed */ - &.sgi-spin { + /* use mdi-spin or mdi-spin-1s to change the speed */ + &.mdi-spin { align-items: center; display: inline-flex; justify-content: center; animation: sg-spin 2s infinite linear; } @for $i from 1 through 5 { - &.sgi-spin-#{$i}s { + &.mdi-spin-#{$i}s { align-items: center; display: inline-flex; justify-content: center; animation: sg-spin #{$i}s infinite linear; } } - &.sgi-rotate-45 { @include sg-icon-rotate(45deg, 1); } - &.sgi-rotate-90 { @include sg-icon-rotate(90deg, 1); } - &.sgi-rotate-135 { @include sg-icon-rotate(135deg, 2); } - &.sgi-rotate-180 { @include sg-icon-rotate(180deg, 2); } - &.sgi-rotate-220 { @include sg-icon-rotate(220deg, 3); } - &.sgi-rotate-270 { @include sg-icon-rotate(270deg, 3); } - &.sgi-rotate-315 { @include sg-icon-rotate(315deg, 3); } - &.sgi-rotate-45, .sgi-rotate-90, .sgi-rotate-135, .sgi-rotate-180, .sgi-rotate-220 .sgi-rotate-270, .sgi-rotate-315 { + &.mdi-rotate-45 { @include sg-icon-rotate(45deg, 1); } + &.mdi-rotate-90 { @include sg-icon-rotate(90deg, 1); } + &.mdi-rotate-135 { @include sg-icon-rotate(135deg, 2); } + &.mdi-rotate-180 { @include sg-icon-rotate(180deg, 2); } + &.mdi-rotate-220 { @include sg-icon-rotate(220deg, 3); } + &.mdi-rotate-270 { @include sg-icon-rotate(270deg, 3); } + &.mdi-rotate-315 { @include sg-icon-rotate(315deg, 3); } + &.mdi-rotate-45, .mdi-rotate-90, .mdi-rotate-135, .mdi-rotate-180, .mdi-rotate-220 .mdi-rotate-270, .mdi-rotate-315 { filter: none; } @for $i from $slick-icon-width-min-size through $slick-icon-width-max-size { - &.sgi-#{$i}px { + &.mdi-#{$i}px { font-size: #{$i}px; height: #{$i}px; width: #{$i}px; diff --git a/packages/common/src/styles/slickgrid-icons.scss b/packages/common/src/styles/slickgrid-icons.scss index 3d2043a93..be27ad263 100644 --- a/packages/common/src/styles/slickgrid-icons.scss +++ b/packages/common/src/styles/slickgrid-icons.scss @@ -1,1033 +1,1033 @@ $slick-icon-font-size: $slick-icon-width; -/* SlickGrid icons (which all came from Material Design Icons) */ +/* SlickGrid Material icons (which all came from Material Design Icons) */ @include generateSvgClass( - "sgi-account", + "mdi-account", "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" ); @include generateSvgClass( - "sgi-account-box", + "mdi-account-box", "M6,17C6,15 10,13.9 12,13.9C14,13.9 18,15 18,17V18H6M15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6A3,3 0 0,1 15,9M3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5C3.89,3 3,3.9 3,5Z" ); @include generateSvgClass( - "sgi-account-box-outline", + "mdi-account-box-outline", "M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M16.5,16.25C16.5,14.75 13.5,14 12,14C10.5,14 7.5,14.75 7.5,16.25V17H16.5M12,12.25A2.25,2.25 0 0,0 14.25,10A2.25,2.25 0 0,0 12,7.75A2.25,2.25 0 0,0 9.75,10A2.25,2.25 0 0,0 12,12.25Z" ); @include generateSvgClass( - "sgi-account-circle", + "mdi-account-circle", "M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" ); @include generateSvgClass( - "sgi-account-edit", + "mdi-account-edit", "M21.7,13.35L20.7,14.35L18.65,12.3L19.65,11.3C19.86,11.09 20.21,11.09 20.42,11.3L21.7,12.58C21.91,12.79 21.91,13.14 21.7,13.35M12,18.94L18.06,12.88L20.11,14.93L14.06,21H12V18.94M12,14C7.58,14 4,15.79 4,18V20H10V18.11L14,14.11C13.34,14.03 12.67,14 12,14M12,4A4,4 0 0,0 8,8A4,4 0 0,0 12,12A4,4 0 0,0 16,8A4,4 0 0,0 12,4Z" ); @include generateSvgClass( - "sgi-account-minus", + "mdi-account-minus", "M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M1,10V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z" ); @include generateSvgClass( - "sgi-account-off", + "mdi-account-off", "M12,4A4,4 0 0,1 16,8C16,9.95 14.6,11.58 12.75,11.93L8.07,7.25C8.42,5.4 10.05,4 12,4M12.28,14L18.28,20L20,21.72L18.73,23L15.73,20H4V18C4,16.16 6.5,14.61 9.87,14.14L2.78,7.05L4.05,5.78L12.28,14M20,18V19.18L15.14,14.32C18,14.93 20,16.35 20,18Z" ); @include generateSvgClass( - "sgi-account-plus", + "mdi-account-plus", "M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z" ); @include generateSvgClass( - "sgi-account-search", + "mdi-account-search", "M15.5,12C18,12 20,14 20,16.5C20,17.38 19.75,18.21 19.31,18.9L22.39,22L21,23.39L17.88,20.32C17.19,20.75 16.37,21 15.5,21C13,21 11,19 11,16.5C11,14 13,12 15.5,12M15.5,14A2.5,2.5 0 0,0 13,16.5A2.5,2.5 0 0,0 15.5,19A2.5,2.5 0 0,0 18,16.5A2.5,2.5 0 0,0 15.5,14M10,4A4,4 0 0,1 14,8C14,8.91 13.69,9.75 13.18,10.43C12.32,10.75 11.55,11.26 10.91,11.9L10,12A4,4 0 0,1 6,8A4,4 0 0,1 10,4M2,20V18C2,15.88 5.31,14.14 9.5,14C9.18,14.78 9,15.62 9,16.5C9,17.79 9.38,19 10,20H2Z" ); @include generateSvgClass( - "sgi-alarm", + "mdi-alarm", "M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,4M12.5,8H11V14L15.75,16.85L16.5,15.62L12.5,13.25V8M7.88,3.39L6.6,1.86L2,5.71L3.29,7.24L7.88,3.39M22,5.72L17.4,1.86L16.11,3.39L20.71,7.25L22,5.72Z" ); @include generateSvgClass( - "sgi-alarm-check", + "mdi-alarm-check", "M10.54,14.53L8.41,12.4L7.35,13.46L10.53,16.64L16.53,10.64L15.47,9.58L10.54,14.53M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,4M7.88,3.39L6.6,1.86L2,5.71L3.29,7.24L7.88,3.39M22,5.72L17.4,1.86L16.11,3.39L20.71,7.25L22,5.72Z" ); @include generateSvgClass( - "sgi-alarm-off", + "mdi-alarm-off", "M8,3.28L6.6,1.86L5.74,2.57L7.16,4M16.47,18.39C15.26,19.39 13.7,20 12,20A7,7 0 0,1 5,13C5,11.3 5.61,9.74 6.61,8.53M2.92,2.29L1.65,3.57L3,4.9L1.87,5.83L3.29,7.25L4.4,6.31L5.2,7.11C3.83,8.69 3,10.75 3,13A9,9 0 0,0 12,22C14.25,22 16.31,21.17 17.89,19.8L20.09,22L21.36,20.73L3.89,3.27L2.92,2.29M22,5.72L17.4,1.86L16.11,3.39L20.71,7.25L22,5.72M12,6A7,7 0 0,1 19,13C19,13.84 18.84,14.65 18.57,15.4L20.09,16.92C20.67,15.73 21,14.41 21,13A9,9 0 0,0 12,4C10.59,4 9.27,4.33 8.08,4.91L9.6,6.43C10.35,6.16 11.16,6 12,6Z" ); @include generateSvgClass( - "sgi-alert", + "mdi-alert", "M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" ); @include generateSvgClass( - "sgi-alert-box", + "mdi-alert-box", "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M13,13V7H11V13H13M13,17V15H11V17H13Z" ); @include generateSvgClass( - "sgi-alert-box-outline", + "mdi-alert-box-outline", "M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M11,15H13V17H11V15M11,7H13V13H11V7" ); @include generateSvgClass( - "sgi-alert-circle", + "mdi-alert-circle", "M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" ); @include generateSvgClass( - "sgi-alert-octagon", + "mdi-alert-octagon", "M13 13H11V7H13M11 15H13V17H11M15.73 3H8.27L3 8.27V15.73L8.27 21H15.73L21 15.73V8.27L15.73 3Z" ); @include generateSvgClass( - "sgi-alert-outline", + "mdi-alert-outline", "M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" ); @include generateSvgClass( - "sgi-alert-rhombus", + "mdi-alert-rhombus", "M12 2C11.5 2 11 2.19 10.59 2.59L2.59 10.59C1.8 11.37 1.8 12.63 2.59 13.41L10.59 21.41C11.37 22.2 12.63 22.2 13.41 21.41L21.41 13.41C22.2 12.63 22.2 11.37 21.41 10.59L13.41 2.59C13 2.19 12.5 2 12 2M11 7H13V13H11V7M11 15H13V17H11V15Z" ); @include generateSvgClass( - "sgi-alert-rhombus-outline", + "mdi-alert-rhombus-outline", "M12 2C11.5 2 11 2.19 10.59 2.59L2.59 10.59C1.8 11.37 1.8 12.63 2.59 13.41L10.59 21.41C11.37 22.2 12.63 22.2 13.41 21.41L21.41 13.41C22.2 12.63 22.2 11.37 21.41 10.59L13.41 2.59C13 2.19 12.5 2 12 2M12 4L20 12L12 20L4 12M11 7V13H13V7M11 15V17H13V15Z" ); @include generateSvgClass( - "sgi-arrow-collapse", + "mdi-arrow-collapse", "M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" ); @include generateSvgClass( - "sgi-arrow-down", + "mdi-arrow-down", "M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z" ); @include generateSvgClass( - "sgi-arrow-down-bold", + "mdi-arrow-down-bold", "M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z" ); @include generateSvgClass( - "sgi-arrow-down-bold-box", + "mdi-arrow-down-bold-box", "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M12,17L17,12H14V8H10V12H7L12,17Z" ); @include generateSvgClass( - "sgi-arrow-down-bold-box-outline", + "mdi-arrow-down-bold-box-outline", "M12,17L7,12H10V8H14V12H17L12,17M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M5,5V19H19V5H5Z" ); @include generateSvgClass( - "sgi-arrow-down-bold-outline", + "mdi-arrow-down-bold-outline", "M22,11L12,21L2,11H8V3H16V11H22M12,18L17,13H14V5H10V13H7L12,18Z" ); @include generateSvgClass( - "sgi-arrow-expand", + "mdi-arrow-expand", "M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" ); @include generateSvgClass( - "sgi-arrow-expand-horizontal", + "mdi-arrow-expand-horizontal", "M9,11H15V8L19,12L15,16V13H9V16L5,12L9,8V11M2,20V4H4V20H2M20,20V4H22V20H20Z" ); @include generateSvgClass( - "sgi-arrow-split-vertical", + "mdi-arrow-split-vertical", "M18,16V13H15V22H13V2H15V11H18V8L22,12L18,16M2,12L6,16V13H9V22H11V2H9V11H6V8L2,12Z" ); @include generateSvgClass( - "sgi-arrow-up", + "mdi-arrow-up", "M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z" ); @include generateSvgClass( - "sgi-brightness-4", + "mdi-brightness-4", "M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z" ); @include generateSvgClass( - "sgi-calendar", + "mdi-calendar", "M19,19H5V8H19M16,1V3H8V1H6V3H5C3.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,3H18V1M17,12H12V17H17V12Z" ); @include generateSvgClass( - "sgi-calendar-check", + "mdi-calendar-check", "M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M16.53,11.06L15.47,10L10.59,14.88L8.47,12.76L7.41,13.82L10.59,17L16.53,11.06Z" ); @include generateSvgClass( - "sgi-calendar-clock", + "mdi-calendar-clock", "M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z" ); @include generateSvgClass( - "sgi-calendar-edit", + "mdi-calendar-edit", "M19,3H18V1H16V3H8V1H6V3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H10V19H5V8H19V9H21V5A2,2 0 0,0 19,3M21.7,13.35L20.7,14.35L18.65,12.35L19.65,11.35C19.85,11.14 20.19,11.13 20.42,11.35L21.7,12.63C21.89,12.83 21.89,13.15 21.7,13.35M12,18.94L18.07,12.88L20.12,14.88L14.06,21H12V18.94Z" ); @include generateSvgClass( - "sgi-calendar-remove", + "mdi-calendar-remove", "M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M9.31,17L11.75,14.56L14.19,17L15.25,15.94L12.81,13.5L15.25,11.06L14.19,10L11.75,12.44L9.31,10L8.25,11.06L10.69,13.5L8.25,15.94L9.31,17Z" ); @include generateSvgClass( - "sgi-calendar-search", + "mdi-calendar-search", "M15.5,12C18,12 20,14 20,16.5C20,17.38 19.75,18.21 19.31,18.9L22.39,22L21,23.39L17.88,20.32C17.19,20.75 16.37,21 15.5,21C13,21 11,19 11,16.5C11,14 13,12 15.5,12M15.5,14A2.5,2.5 0 0,0 13,16.5A2.5,2.5 0 0,0 15.5,19A2.5,2.5 0 0,0 18,16.5A2.5,2.5 0 0,0 15.5,14M19,8H5V19H9.5C9.81,19.75 10.26,20.42 10.81,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V13.03C20.5,12.22 19.8,11.54 19,11V8Z" ); @include generateSvgClass( - "sgi-call-split", + "mdi-call-split", "M14,4L16.29,6.29L13.41,9.17L14.83,10.59L17.71,7.71L20,10V4M10,4H4V10L6.29,7.71L11,12.41V20H13V11.59L7.71,6.29" ); @include generateSvgClass( - "sgi-cancel", + "mdi-cancel", "M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z" ); @include generateSvgClass( - "sgi-cash-check", + "mdi-cash-check", "M3 6V18H13.32C13.1 17.33 13 16.66 13 16H7C7 14.9 6.11 14 5 14V10C6.11 10 7 9.11 7 8H17C17 9.11 17.9 10 19 10V10.06C19.67 10.06 20.34 10.18 21 10.4V6H3M12 9C10.3 9.03 9 10.3 9 12C9 13.7 10.3 14.94 12 15C12.38 15 12.77 14.92 13.14 14.77C13.41 13.67 13.86 12.63 14.97 11.61C14.85 10.28 13.59 8.97 12 9M21.63 12.27L17.76 16.17L16.41 14.8L15 16.22L17.75 19L23.03 13.68L21.63 12.27Z" ); @include generateSvgClass( - "sgi-cash-remove", + "mdi-cash-remove", "M15.46 18.12L16.88 19.54L19 17.41L21.12 19.54L22.54 18.12L20.41 16L22.54 13.88L21.12 12.46L19 14.59L16.88 12.46L15.46 13.88L17.59 16M14.97 11.62C14.86 10.28 13.58 8.97 12 9C10.3 9.04 9 10.3 9 12C9 13.7 10.3 14.94 12 15C12.39 15 12.77 14.92 13.14 14.77C13.41 13.67 13.86 12.63 14.97 11.62M13 16H7C7 14.9 6.1 14 5 14V10C6.1 10 7 9.1 7 8H17C17 9.1 17.9 10 19 10V10.05C19.67 10.06 20.34 10.18 21 10.4V6H3V18H13.32C13.1 17.33 13 16.66 13 16Z" ); @include generateSvgClass( - "sgi-certificate", + "mdi-certificate", "M4,3C2.89,3 2,3.89 2,5V15A2,2 0 0,0 4,17H12V22L15,19L18,22V17H20A2,2 0 0,0 22,15V8L22,6V5A2,2 0 0,0 20,3H16V3H4M12,5L15,7L18,5V8.5L21,10L18,11.5V15L15,13L12,15V11.5L9,10L12,8.5V5M4,5H9V7H4V5M4,9H7V11H4V9M4,13H9V15H4V13Z" ); @include generateSvgClass( - "sgi-certificate-outline", + "mdi-certificate-outline", "M13 21L15 20L17 21V14H13M17 9V7L15 8L13 7V9L11 10L13 11V13L15 12L17 13V11L19 10M20 3H4A2 2 0 0 0 2 5V15A2 2 0 0 0 4 17H11V15H4V5H20V15H19V17H20A2 2 0 0 0 22 15V5A2 2 0 0 0 20 3M11 8H5V6H11M9 11H5V9H9M11 14H5V12H11Z" ); @include generateSvgClass( - "sgi-change-record-type", + "mdi-change-record-type", "M20 37.5c0-.8-.7-1.5-1.5-1.5h-15c-.8 0-1.5.7-1.5 1.5v11c0 .8.7 1.5 1.5 1.5h15c.8 0 1.5-.7 1.5-1.5v-11zM8.1 22H3.2c-1 0-1.5.9-.9 1.4l8 8.3c.4.3 1 .3 1.4 0l8-8.3c.6-.6.1-1.4-.9-1.4h-4.7c0-5 4.9-10 9.9-10V6C15 6 8.1 13 8.1 22zM41.8 20.3c-.4-.3-1-.3-1.4 0l-8 8.3c-.6.6-.1 1.4.9 1.4h4.8c0 6-4.1 10-10.1 10v6c9 0 16.1-7 16.1-16H49c1 0 1.5-.9.9-1.4l-8.1-8.3zM50 3.5c0-.8-.7-1.5-1.5-1.5h-15c-.8 0-1.5.7-1.5 1.5v11c0 .8.7 1.5 1.5 1.5h15c.8 0 1.5-.7 1.5-1.5v-11z" ); @include generateSvgClass( - "sgi-check", + "mdi-check", "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" ); @include generateSvgClass( - "sgi-check-all", + "mdi-check-all", "M0.41,13.41L6,19L7.41,17.58L1.83,12M22.24,5.58L11.66,16.17L7.5,12L6.07,13.41L11.66,19L23.66,7M18,7L16.59,5.58L10.24,11.93L11.66,13.34L18,7Z" ); @include generateSvgClass( - "sgi-check-bold", + "mdi-check-bold", "M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" ); @include generateSvgClass( - "sgi-checkbox-blank-outline", + "mdi-checkbox-blank-outline", "M19,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,3M19,5V19H5V5H19Z" ); @include generateSvgClass( - "sgi-checkbox-marked-circle-outline", + "mdi-checkbox-marked-circle-outline", "M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2,4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z" ); @include generateSvgClass( - "sgi-check-box-outline", + "mdi-check-box-outline", "M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9" ); @include generateSvgClass( - "sgi-checkbox-marked", + "mdi-checkbox-marked", "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" ); @include generateSvgClass( - "sgi-check-circle", + "mdi-check-circle", "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" ); @include generateSvgClass( - "sgi-check-circle-outline", + "mdi-check-circle-outline", "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" ); @include generateSvgClass( - "sgi-check-outline", + "mdi-check-outline", "M19.78,2.2L24,6.42L8.44,22L0,13.55L4.22,9.33L8.44,13.55L19.78,2.2M19.78,5L8.44,16.36L4.22,12.19L2.81,13.55L8.44,19.17L21.19,6.42L19.78,5Z" ); @include generateSvgClass( - "sgi-check-underline", + "mdi-check-underline", "M21,5L9,17L3.5,11.5L4.91,10.09L9,14.17L19.59,3.59L21,5M3,21V19H21V21H3Z" ); @include generateSvgClass( - "sgi-chevron-down", + "mdi-chevron-down", "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" ); @include generateSvgClass( - "sgi-chevron-down-box", + "mdi-chevron-down-box", "M19,3H5A2,2 0 0,0 3,5V19C3,20.11 3.9,21 5,21H19C20.11,21 21,20.11 21,19V5A2,2 0 0,0 19,3M12,15.71L6,9.71L7.41,8.29L12,12.88L16.59,8.29L18,9.71L12,15.71Z" ); @include generateSvgClass( - "sgi-chevron-down-box-outline", + "mdi-chevron-down-box-outline", "M19,3H5A2,2 0 0,0 3,5V19C3,20.11 3.9,21 5,21H19C20.11,21 21,20.11 21,19V5A2,2 0 0,0 19,3M19,19H5V5H19V19M7.41,8.29L12,12.88L16.59,8.29L18,9.71L12,15.71L6,9.71L7.41,8.29Z" ); @include generateSvgClass( - "sgi-chevron-down-circle", + "mdi-chevron-down-circle", "M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M6,10L12,16L18,10L16.6,8.6L12,13.2L7.4,8.6L6,10Z" ); @include generateSvgClass( - "sgi-chevron-down-circle-outline", + "mdi-chevron-down-circle-outline", "M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M6,10L12,16L18,10L16.6,8.6L12,13.2L7.4,8.6L6,10Z" ); @include generateSvgClass( - "sgi-clipboard-check", + "mdi-clipboard-check", "M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z" ); @include generateSvgClass( - "sgi-clipboard-check-outline", + "mdi-clipboard-check-outline", "M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M7.5,13.5L9,12L11,14L15.5,9.5L17,11L11,17L7.5,13.5Z" ); @include generateSvgClass( - "sgi-clipboard-edit", + "mdi-clipboard-edit", "M21.04 12.13C21.18 12.13 21.31 12.19 21.42 12.3L22.7 13.58C22.92 13.79 22.92 14.14 22.7 14.35L21.7 15.35L19.65 13.3L20.65 12.3C20.76 12.19 20.9 12.13 21.04 12.13M19.07 13.88L21.12 15.93L15.06 22H13V19.94L19.07 13.88M19 3C20.1 3 21 3.9 21 5V9L11 19V21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H9.18C9.6 1.84 10.7 1 12 1C13.3 1 14.4 1.84 14.82 3H19M12 3C11.45 3 11 3.45 11 4C11 4.55 11.45 5 12 5C12.55 5 13 4.55 13 4C13 3.45 12.55 3 12 3Z" ); @include generateSvgClass( - "sgi-clipboard-edit-outline", + "mdi-clipboard-edit-outline", "M21.04 12.13C21.18 12.13 21.31 12.19 21.42 12.3L22.7 13.58C22.92 13.79 22.92 14.14 22.7 14.35L21.7 15.35L19.65 13.3L20.65 12.3C20.76 12.19 20.9 12.13 21.04 12.13M19.07 13.88L21.12 15.93L15.06 22H13V19.94L19.07 13.88M11 19L9 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H9.18C9.6 1.84 10.7 1 12 1C13.3 1 14.4 1.84 14.82 3H19C20.1 3 21 3.9 21 5V9L19 11V5H17V7H7V5H5V19H11M12 3C11.45 3 11 3.45 11 4C11 4.55 11.45 5 12 5C12.55 5 13 4.55 13 4C13 3.45 12.55 3 12 3Z" ); @include generateSvgClass( - "sgi-clipboard-multiple", + "mdi-clipboard-multiple", "M4 7H2V21C2 22.1 2.9 23 4 23H18V21H4M20 3H16.8C16.4 1.8 15.3 1 14 1C12.7 1 11.6 1.8 11.2 3H8C6.9 3 6 3.9 6 5V17C6 18.1 6.9 19 8 19H20C21.1 19 22 18.1 22 17V5C22 3.9 21.1 3 20 3M14 3C14.6 3 15 3.5 15 4C15 4.5 14.5 5 14 5C13.5 5 13 4.5 13 4C13 3.5 13.4 3 14 3Z" ); @include generateSvgClass( - "sgi-clipboard-multiple-outline", + "mdi-clipboard-multiple-outline", "M4 7V21H18V23H4C2.9 23 2 22.1 2 21V7H4M20 3C21.1 3 22 3.9 22 5V17C22 18.1 21.1 19 20 19H8C6.9 19 6 18.1 6 17V5C6 3.9 6.9 3 8 3H11.18C11.6 1.84 12.7 1 14 1C15.3 1 16.4 1.84 16.82 3H20M14 3C13.45 3 13 3.45 13 4C13 4.55 13.45 5 14 5C14.55 5 15 4.55 15 4C15 3.45 14.55 3 14 3M10 7V5H8V17H20V5H18V7H10Z" ); @include generateSvgClass( - "sgi-clipboard-outline", + "mdi-clipboard-outline", "M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7Z" ); @include generateSvgClass( - "sgi-close", + "mdi-close", "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" ); @include generateSvgClass( - "sgi-close-circle", + "mdi-close-circle", "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" ); @include generateSvgClass( - "sgi-close-circle-outline", + "mdi-close-circle-outline", "M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" ); @include generateSvgClass( - "sgi-close-thick", + "mdi-close-thick", "M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" ); @include generateSvgClass( - "sgi-coffee", + "mdi-coffee", "M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z" ); @include generateSvgClass( - "sgi-coffee-outline", + "mdi-coffee-outline", "M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" ); @include generateSvgClass( - "sgi-cog", + "mdi-cog", "M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" ); @include generateSvgClass( - "sgi-cog-outline", + "mdi-cog-outline", "M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" ); @include generateSvgClass( - "sgi-content-copy", + "mdi-content-copy", "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" ); @include generateSvgClass( - "sgi-currency-usd", + "mdi-currency-usd", "M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z" ); @include generateSvgClass( - "sgi-currency-usd-off", + "mdi-currency-usd-off", "M3,4.27L4.28,3L21,19.72L19.73,21L16.06,17.33C15.44,18 14.54,18.55 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15H9C9,16.08 10.37,17 12,17C13.13,17 14.14,16.56 14.65,15.92L11.68,12.95C9.58,12.42 7,11.75 7,9C7,8.77 7,8.55 7.07,8.34L3,4.27M10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C11.63,7 11.28,7.05 10.95,7.13L9.4,5.58L10.5,5.18Z" ); @include generateSvgClass( - "sgi-database-refresh", + "mdi-database-refresh", "M12 3C16.42 3 20 4.79 20 7C20 9.21 16.42 11 12 11C7.58 11 4 9.21 4 7C4 4.79 7.58 3 12 3M4 9C4 11.21 7.58 13 12 13C13.11 13 14.18 12.89 15.14 12.68C14.19 13.54 13.5 14.67 13.18 15.96L12 16C7.58 16 4 14.21 4 12V9M20 9V11L19.5 11L18.9 11.03C19.6 10.43 20 9.74 20 9M4 14C4 16.21 7.58 18 12 18L13 17.97C13.09 19.03 13.42 20 13.95 20.88L12 21C7.58 21 4 19.21 4 17V14M19 13.5C20.11 13.5 21.11 13.95 21.83 14.67L23 13.5V17.5H19L20.77 15.73C20.32 15.28 19.69 15 19 15C17.62 15 16.5 16.12 16.5 17.5C16.5 18.88 17.62 20 19 20C19.82 20 20.54 19.61 21 19H22.71C22.12 20.47 20.68 21.5 19 21.5C16.79 21.5 15 19.71 15 17.5C15 15.29 16.79 13.5 19 13.5Z" ); @include generateSvgClass( - "sgi-delete", + "mdi-delete", "M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" ); @include generateSvgClass( - "sgi-delete-outline", + "mdi-delete-outline", "M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19M8,9H16V19H8V9M15.5,4L14.5,3H9.5L8.5,4H5V6H19V4H15.5Z" ); @include generateSvgClass( - "sgi-dots-grid", + "mdi-dots-grid", "M12 16C13.1 16 14 16.9 14 18S13.1 20 12 20 10 19.1 10 18 10.9 16 12 16M12 10C13.1 10 14 10.9 14 12S13.1 14 12 14 10 13.1 10 12 10.9 10 12 10M12 4C13.1 4 14 4.9 14 6S13.1 8 12 8 10 7.1 10 6 10.9 4 12 4M6 16C7.1 16 8 16.9 8 18S7.1 20 6 20 4 19.1 4 18 4.9 16 6 16M6 10C7.1 10 8 10.9 8 12S7.1 14 6 14 4 13.1 4 12 4.9 10 6 10M6 4C7.1 4 8 4.9 8 6S7.1 8 6 8 4 7.1 4 6 4.9 4 6 4M18 16C19.1 16 20 16.9 20 18S19.1 20 18 20 16 19.1 16 18 16.9 16 18 16M18 10C19.1 10 20 10.9 20 12S19.1 14 18 14 16 13.1 16 12 16.9 10 18 10M18 4C19.1 4 20 4.9 20 6S19.1 8 18 8 16 7.1 16 6 16.9 4 18 4Z" ); @include generateSvgClass( - "sgi-dots-vertical", + "mdi-dots-vertical", "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z" ); @include generateSvgClass( - "sgi-download", + "mdi-download", "M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" ); @include generateSvgClass( - "sgi-drag", + "mdi-drag", "M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z" ); @include generateSvgClass( - "sgi-drag-vertical", + "mdi-drag-vertical", "M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z" ); @include generateSvgClass( - "sgi-eye-off-outline", + "mdi-eye-off-outline", "M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z" ); @include generateSvgClass( - "sgi-eye-outline", + "mdi-eye-outline", "M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z" ); @include generateSvgClass( - "sgi-file", + "mdi-file", "M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" ); @include generateSvgClass( - "sgi-file-alert", + "mdi-file-alert", "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2M9 19H7V17H9M9 15H7V9H9M13 9V3.5L18.5 9H13Z" ); @include generateSvgClass( - "sgi-file-alert-outline", + "mdi-file-alert-outline", "M10 18H8V16H10V18M10 14H8V8H10V14M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2M18 20H6V4H13V9H18V20Z" ); @include generateSvgClass( - "sgi-file-cad", + "mdi-file-cad", "M6 2C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2M13 3.5L18.5 9H13M9.88 9.25H11.12V10.19C11.81 10.18 12.38 10.75 12.38 11.44V13.5L12.26 13.63L13.15 15.17C13.47 14.67 13.63 14.09 13.62 13.5H14.88C14.88 14.54 14.5 15.55 13.83 16.35L15.5 19.25V20.5L14.42 19.88L12.87 17.19C12.17 17.65 11.34 17.89 10.5 17.89C9.66 17.89 8.84 17.65 8.13 17.19L6.58 19.88L5.5 20.5V19.25L8.74 13.63L8.62 13.5V11.44C8.62 10.75 9.19 10.18 9.88 10.19M10.5 11.44C9.81 11.44 9.46 12.28 9.95 12.77C10.44 13.26 11.28 12.92 11.28 12.22C11.28 11.79 10.93 11.44 10.5 11.44M9.66 14.54L8.76 16.11C9.81 16.82 11.19 16.82 12.24 16.11L11.34 14.54C10.87 15 10.13 15 9.66 14.54Z" ); @include generateSvgClass( - "sgi-file-check", + "mdi-file-check", "M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M11.2,18.46L15.95,13.71L14.78,12.3L11.2,15.88L9.61,14.3L8.45,15.46L11.2,18.46Z" ); @include generateSvgClass( - "sgi-file-check-outline", + "mdi-file-check-outline", "M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M11.2,18.46L8.45,15.46L9.61,14.3L11.2,15.88L14.78,12.3L15.95,13.71L11.2,18.46Z" ); @include generateSvgClass( - "sgi-file-document-outline", + "mdi-file-document-outline", "M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z" ); @include generateSvgClass( - "sgi-file-excel-outline", + "mdi-file-excel-outline", "M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M12.9 14.5L15.8 19H14L12 15.6L10 19H8.2L11.1 14.5L8.2 10H10L12 13.4L14 10H15.8L12.9 14.5Z" ); @include generateSvgClass( - "sgi-file-move", + "mdi-file-move", "M14,17H18V14L23,18.5L18,23V20H14V17M13,9H18.5L13,3.5V9M6,2H14L20,8V12.34C19.37,12.12 18.7,12 18,12A6,6 0 0,0 12,18C12,19.54 12.58,20.94 13.53,22H6C4.89,22 4,21.1 4,20V4A2,2 0 0,1 6,2Z" ); @include generateSvgClass( - "sgi-file-move-outline", + "mdi-file-move-outline", "M14 2H6C4.9 2 4 2.9 4 4V20C4 20.41 4.12 20.8 4.34 21.12C4.41 21.23 4.5 21.33 4.59 21.41C4.95 21.78 5.45 22 6 22H13.53C13 21.42 12.61 20.75 12.35 20H6V4H13V9H18V12C18.7 12 19.37 12.12 20 12.34V8L14 2M18 23L23 18.5L20 15.8L18 14V17H14V20H18V23Z" ); @include generateSvgClass( - "sgi-file-multiple", + "mdi-file-multiple", "M15,7H20.5L15,1.5V7M8,0H16L22,6V18A2,2 0 0,1 20,20H8C6.89,20 6,19.1 6,18V2A2,2 0 0,1 8,0M4,4V22H20V24H4A2,2 0 0,1 2,22V4H4Z" ); @include generateSvgClass( - "sgi-file-multiple-outline", + "mdi-file-multiple-outline", "M16 0H8C6.9 0 6 .9 6 2V18C6 19.1 6.9 20 8 20H20C21.1 20 22 19.1 22 18V6L16 0M20 18H8V2H15V7H20V18M4 4V22H20V24H4C2.9 24 2 23.1 2 22V4H4Z" ); @include generateSvgClass( - "sgi-file-music-outline", + "mdi-file-music-outline", "M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M13,10V12H11V17A2,2 0 0,1 9,19A2,2 0 0,1 7,17A2,2 0 0,1 9,15C9.4,15 9.7,15.1 10,15.3V10H13Z" ); @include generateSvgClass( - "sgi-file-outline", + "mdi-file-outline", "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" ); @include generateSvgClass( - "sgi-file-pdf-outline", + "mdi-file-pdf-outline", "M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M10.92,12.31C10.68,11.54 10.15,9.08 11.55,9.04C12.95,9 12.03,12.16 12.03,12.16C12.42,13.65 14.05,14.72 14.05,14.72C14.55,14.57 17.4,14.24 17,15.72C16.57,17.2 13.5,15.81 13.5,15.81C11.55,15.95 10.09,16.47 10.09,16.47C8.96,18.58 7.64,19.5 7.1,18.61C6.43,17.5 9.23,16.07 9.23,16.07C10.68,13.72 10.9,12.35 10.92,12.31M11.57,13.15C11.17,14.45 10.37,15.84 10.37,15.84C11.22,15.5 13.08,15.11 13.08,15.11C11.94,14.11 11.59,13.16 11.57,13.15M14.71,15.32C14.71,15.32 16.46,15.97 16.5,15.71C16.57,15.44 15.17,15.2 14.71,15.32M9.05,16.81C8.28,17.11 7.54,18.39 7.72,18.39C7.9,18.4 8.63,17.79 9.05,16.81M11.57,11.26C11.57,11.21 12,9.58 11.57,9.53C11.27,9.5 11.56,11.22 11.57,11.26Z" ); @include generateSvgClass( - "sgi-file-question", + "mdi-file-question", "M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M13,3.5L18.5,9H13V3.5M12,11A3,3 0 0,1 15,14C15,15.88 12.75,16.06 12.75,17.75H11.25C11.25,15.31 13.5,15.5 13.5,14A1.5,1.5 0 0,0 12,12.5A1.5,1.5 0 0,0 10.5,14H9A3,3 0 0,1 12,11M11.25,18.5H12.75V20H11.25V18.5Z" ); @include generateSvgClass( - "sgi-file-question-outline", + "mdi-file-question-outline", "M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M15 13C15 14.89 12.75 15.07 12.75 16.76H11.25C11.25 14.32 13.5 14.5 13.5 13C13.5 12.18 12.83 11.5 12 11.5S10.5 12.18 10.5 13H9C9 11.35 10.34 10 12 10S15 11.35 15 13M12.75 17.5V19H11.25V17.5H12.75Z" ); @include generateSvgClass( - "sgi-file-search-outline", + "mdi-file-search-outline", "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H13C12.59,21.75 12.2,21.44 11.86,21.1C11.53,20.77 11.25,20.4 11,20H6V4H13V9H18V10.18C18.71,10.34 19.39,10.61 20,11V8L14,2M20.31,18.9C21.64,16.79 21,14 18.91,12.68C16.8,11.35 14,12 12.69,14.08C11.35,16.19 12,18.97 14.09,20.3C15.55,21.23 17.41,21.23 18.88,20.32L22,23.39L23.39,22L20.31,18.9M16.5,19A2.5,2.5 0 0,1 14,16.5A2.5,2.5 0 0,1 16.5,14A2.5,2.5 0 0,1 19,16.5A2.5,2.5 0 0,1 16.5,19Z" ); @include generateSvgClass( - "sgi-file-send", + "mdi-file-send", "M14,2H6C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M12.54,19.37V17.37H8.54V15.38H12.54V13.38L15.54,16.38L12.54,19.37M13,9V3.5L18.5,9H13Z" ); @include generateSvgClass( - "sgi-file-send-outline", + "mdi-file-send-outline", "M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M12.54 18.5V16.5H8.54V14.5H12.54V12.5L15.54 15.5L12.54 18.5Z" ); @include generateSvgClass( - "sgi-file-tree", + "mdi-file-tree", "M3,3H9V7H3V3M15,10H21V14H15V10M15,17H21V21H15V17M13,13H7V18H13V20H7L5,20V9H7V11H13V13Z" ); @include generateSvgClass( - "sgi-file-tree-outline", + "mdi-file-tree-outline", "M12 13H7V18H12V20H5V10H7V11H12V13M8 4V6H4V4H8M10 2H2V8H10V2M20 11V13H16V11H20M22 9H14V15H22V9M20 18V20H16V18H20M22 16H14V22H22V16Z" ); @include generateSvgClass( - "sgi-file-upload", + "mdi-file-upload", "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M13.5,16V19H10.5V16H8L12,12L16,16H13.5M13,9V3.5L18.5,9H13Z" ); @include generateSvgClass( - "sgi-file-upload-outline", + "mdi-file-upload-outline", "M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M12,12L16,16H13.5V19H10.5V16H8L12,12Z" ); @include generateSvgClass( - "sgi-filter", + "mdi-filter", "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z" ); @include generateSvgClass( - "sgi-filter-minus-outline", + "mdi-filter-minus-outline", "M15 17H23V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z" ); @include generateSvgClass( - "sgi-filter-off-outline", + "mdi-filter-off-outline", "M2.39 1.73L1.11 3L9 10.89V15.87C8.96 16.16 9.06 16.47 9.29 16.7L13.3 20.71C13.69 21.1 14.32 21.1 14.71 20.71C14.94 20.5 15.04 20.18 15 19.88V16.89L20.84 22.73L22.11 21.46L15 14.35V14.34L13 12.35L11 10.34L4.15 3.5L2.39 1.73M6.21 3L8.2 5H16.96L13.11 9.91L15 11.8V10.75L19.79 4.62C20.13 4.19 20.05 3.56 19.62 3.22C19.43 3.08 19.22 3 19 3H6.21M11 12.89L13 14.89V17.58L11 15.58V12.89Z" ); @include generateSvgClass( - "sgi-filter-outline", + "mdi-filter-outline", "M15,19.88C15.04,20.18 14.94,20.5 14.71,20.71C14.32,21.1 13.69,21.1 13.3,20.71L9.29,16.7C9.06,16.47 8.96,16.16 9,15.87V10.75L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L15,10.75V19.88M7.04,5L11,10.06V15.58L13,17.58V10.05L16.96,5H7.04Z" ); @include generateSvgClass( - "sgi-filter-plus-outline", + "mdi-filter-plus-outline", "M15 17H18V14H20V17H23V19H20V22H18V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z" ); @include generateSvgClass( - "sgi-filter-remove-outline", + "mdi-filter-remove-outline", "M14.73,20.83L17.58,18L14.73,15.17L16.15,13.76L19,16.57L21.8,13.76L23.22,15.17L20.41,18L23.22,20.83L21.8,22.24L19,19.4L16.15,22.24L14.73,20.83M13,19.88C13.04,20.18 12.94,20.5 12.71,20.71C12.32,21.1 11.69,21.1 11.3,20.71L7.29,16.7C7.06,16.47 6.96,16.16 7,15.87V10.75L2.21,4.62C1.87,4.19 1.95,3.56 2.38,3.22C2.57,3.08 2.78,3 3,3V3H17V3C17.22,3 17.43,3.08 17.62,3.22C18.05,3.56 18.13,4.19 17.79,4.62L13,10.75V19.88M5.04,5L9,10.06V15.58L11,17.58V10.05L14.96,5H5.04Z" ); @include generateSvgClass( - "sgi-fire", + "mdi-fire", "M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z" ); @include generateSvgClass( - "sgi-flip-vertical", + "mdi-flip-vertical", "M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z" ); @include generateSvgClass( - "sgi-folder", + "mdi-folder", "M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z" ); @include generateSvgClass( - "sgi-folder-open", + "mdi-folder-open", "M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" ); @include generateSvgClass( - "sgi-forum", + "mdi-forum", "M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z" ); @include generateSvgClass( - "sgi-forum-outline", + "mdi-forum-outline", "M15,4V11H5.17L4,12.17V4H15M16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12V3A1,1 0 0,0 16,2M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z" ); @include generateSvgClass( - "sgi-github", + "mdi-github", "M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" ); @include generateSvgClass( - "sgi-help", + "mdi-help", "M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z" ); @include generateSvgClass( - "sgi-help-circle", + "mdi-help-circle", "M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" ); @include generateSvgClass( - "sgi-help-circle-outline", + "mdi-help-circle-outline", "M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" ); @include generateSvgClass( - "sgi-history", + "mdi-history", "M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" ); @include generateSvgClass( - "sgi-information", + "mdi-information", "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" ); @include generateSvgClass( - "sgi-information-outline", + "mdi-information-outline", "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" ); @include generateSvgClass( - "sgi-lightbulb", + "mdi-lightbulb", "M12,2A7,7 0 0,0 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H15A1,1 0 0,0 16,17V14.74C17.81,13.47 19,11.38 19,9A7,7 0 0,0 12,2M9,21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9V21Z" ); @include generateSvgClass( - "sgi-lightbulb-off", + "mdi-lightbulb-off", "M12,2C9.76,2 7.78,3.05 6.5,4.68L16.31,14.5C17.94,13.21 19,11.24 19,9A7,7 0 0,0 12,2M3.28,4L2,5.27L5.04,8.3C5,8.53 5,8.76 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H14.73L18.73,22L20,20.72L3.28,4M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z" ); @include generateSvgClass( - "sgi-lightbulb-off-outline", + "mdi-lightbulb-off-outline", "M12,2C9.76,2 7.78,3.05 6.5,4.68L7.93,6.11C8.84,4.84 10.32,4 12,4A5,5 0 0,1 17,9C17,10.68 16.16,12.16 14.89,13.06L16.31,14.5C17.94,13.21 19,11.24 19,9A7,7 0 0,0 12,2M3.28,4L2,5.27L5.04,8.3C5,8.53 5,8.76 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H14.73L18.73,22L20,20.72L3.28,4M7.23,10.5L12.73,16H10V13.58C8.68,13 7.66,11.88 7.23,10.5M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z" ); @include generateSvgClass( - "sgi-lightbulb-on", + "mdi-lightbulb-on", "M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z" ); @include generateSvgClass( - "sgi-lightbulb-on-outline", + "mdi-lightbulb-on-outline", "M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z" ); @include generateSvgClass( - "sgi-lightbulb-outline", + "mdi-lightbulb-outline", "M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z" ); @include generateSvgClass( - "sgi-link", + "mdi-link", "M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z" ); @include generateSvgClass( - "sgi-link-variant", + "mdi-link-variant", "M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" ); @include generateSvgClass( - "sgi-load", + "mdi-load", "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" ); @include generateSvgClass( - "sgi-magnify", + "mdi-magnify", "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" ); @include generateSvgClass( - "sgi-map-marker-radius", + "mdi-map-marker-radius", "M12,2C15.31,2 18,4.66 18,7.95C18,12.41 12,19 12,19C12,19 6,12.41 6,7.95C6,4.66 8.69,2 12,2M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M20,19C20,21.21 16.42,23 12,23C7.58,23 4,21.21 4,19C4,17.71 5.22,16.56 7.11,15.83L7.75,16.74C6.67,17.19 6,17.81 6,18.5C6,19.88 8.69,21 12,21C15.31,21 18,19.88 18,18.5C18,17.81 17.33,17.19 16.25,16.74L16.89,15.83C18.78,16.56 20,17.71 20,19Z" ); @include generateSvgClass( - "sgi-map-marker-radius-outline", + "mdi-map-marker-radius-outline", "M12 4C14.2 4 16 5.8 16 8C16 10.1 13.9 13.5 12 15.9C10.1 13.4 8 10.1 8 8C8 5.8 9.8 4 12 4M12 2C8.7 2 6 4.7 6 8C6 12.5 12 19 12 19S18 12.4 18 8C18 4.7 15.3 2 12 2M12 6C10.9 6 10 6.9 10 8S10.9 10 12 10 14 9.1 14 8 13.1 6 12 6M20 19C20 21.2 16.4 23 12 23S4 21.2 4 19C4 17.7 5.2 16.6 7.1 15.8L7.7 16.7C6.7 17.2 6 17.8 6 18.5C6 19.9 8.7 21 12 21S18 19.9 18 18.5C18 17.8 17.3 17.2 16.2 16.7L16.8 15.8C18.8 16.6 20 17.7 20 19Z" ); @include generateSvgClass( - "sgi-menu", + "mdi-menu", "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" ); @include generateSvgClass( - "sgi-message-text", + "mdi-message-text", "M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M6,9H18V11H6M14,14H6V12H14M18,8H6V6H18" ); @include generateSvgClass( - "sgi-message-text-outline", + "mdi-message-text-outline", "M20,2A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H6L2,22V4C2,2.89 2.9,2 4,2H20M4,4V17.17L5.17,16H20V4H4M6,7H18V9H6V7M6,11H15V13H6V11Z" ); @include generateSvgClass( - "sgi-microsoft-excel", + "mdi-microsoft-excel", "M21.17 3.25Q21.5 3.25 21.76 3.5 22 3.74 22 4.08V19.92Q22 20.26 21.76 20.5 21.5 20.75 21.17 20.75H7.83Q7.5 20.75 7.24 20.5 7 20.26 7 19.92V17H2.83Q2.5 17 2.24 16.76 2 16.5 2 16.17V7.83Q2 7.5 2.24 7.24 2.5 7 2.83 7H7V4.08Q7 3.74 7.24 3.5 7.5 3.25 7.83 3.25M7 13.06L8.18 15.28H9.97L8 12.06L9.93 8.89H8.22L7.13 10.9L7.09 10.96L7.06 11.03Q6.8 10.5 6.5 9.96 6.25 9.43 5.97 8.89H4.16L6.05 12.08L4 15.28H5.78M13.88 19.5V17H8.25V19.5M13.88 15.75V12.63H12V15.75M13.88 11.38V8.25H12V11.38M13.88 7V4.5H8.25V7M20.75 19.5V17H15.13V19.5M20.75 15.75V12.63H15.13V15.75M20.75 11.38V8.25H15.13V11.38M20.75 7V4.5H15.13V7Z" ); @include generateSvgClass( - "sgi-minus", + "mdi-minus", "M19,13H5V11H19V13Z" ); @include generateSvgClass( - "sgi-minus-circle", + "mdi-minus-circle", "M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" ); @include generateSvgClass( - "sgi-minus-circle-outline", + "mdi-minus-circle-outline", "M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7" ); @include generateSvgClass( - "sgi-order-bool-ascending-variant", + "mdi-order-bool-ascending-variant", "M4 13C2.89 13 2 13.89 2 15V19C2 20.11 2.89 21 4 21H8C9.11 21 10 20.11 10 19V15C10 13.89 9.11 13 8 13M8.2 14.5L9.26 15.55L5.27 19.5L2.74 16.95L3.81 15.9L5.28 17.39M4 3C2.89 3 2 3.89 2 5V9C2 10.11 2.89 11 4 11H8C9.11 11 10 10.11 10 9V5C10 3.89 9.11 3 8 3M4 5H8V9H4M12 5H22V7H12M12 19V17H22V19M12 11H22V13H12Z" ); @include generateSvgClass( - "sgi-page-first", + "mdi-page-first", "M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z" ); @include generateSvgClass( - "sgi-page-last", + "mdi-page-last", "M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z" ); @include generateSvgClass( - "sgi-paperclip", + "mdi-paperclip", "M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z" ); @include generateSvgClass( - "sgi-pencil", + "mdi-pencil", "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" ); @include generateSvgClass( - "sgi-pencil-outline", + "mdi-pencil-outline", "M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z" ); @include generateSvgClass( - "sgi-pencil-box-multiple", + "mdi-pencil-box-multiple", "M20.22 2H7.78C6.8 2 6 2.8 6 3.78V16.22C6 17.2 6.8 18 7.78 18H20.22C21.2 18 22 17.21 22 16.22V3.78C22 2.8 21.2 2 20.22 2M11.06 15H9V12.94L15.06 6.88L17.12 8.94L11.06 15M18.7 7.35L17.7 8.35L15.65 6.3L16.65 5.3C16.86 5.08 17.21 5.08 17.42 5.3L18.7 6.58C18.92 6.79 18.92 7.14 18.7 7.35M4 6H2V20C2 21.11 2.9 22 4 22H18V20H4V6Z" ); @include generateSvgClass( - "sgi-pencil-box-multiple-outline", + "mdi-pencil-box-multiple-outline", "M4 6H2V20C2 21.11 2.9 22 4 22H18V20H4V6M18.7 7.35L17.7 8.35L15.65 6.3L16.65 5.3C16.86 5.08 17.21 5.08 17.42 5.3L18.7 6.58C18.92 6.79 18.92 7.14 18.7 7.35M9 12.94L15.06 6.88L17.12 8.94L11.06 15H9V12.94M20 4L20 4L20 16L8 16L8 4H20M20 2H8C6.9 2 6 2.9 6 4V16C6 17.1 6.9 18 8 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2Z" ); @include generateSvgClass( - "sgi-percent", + "mdi-percent", "M18.5,3.5L3.5,18.5L5.5,20.5L20.5,5.5M7,4A3,3 0 0,0 4,7A3,3 0 0,0 7,10A3,3 0 0,0 10,7A3,3 0 0,0 7,4M17,14A3,3 0 0,0 14,17A3,3 0 0,0 17,20A3,3 0 0,0 20,17A3,3 0 0,0 17,14Z" ); @include generateSvgClass( - "sgi-percent-outline", + "mdi-percent-outline", "M18.5 3.5L20.5 5.5L5.5 20.5L3.5 18.5L18.5 3.5M7 4C8.66 4 10 5.34 10 7C10 8.66 8.66 10 7 10C5.34 10 4 8.66 4 7C4 5.34 5.34 4 7 4M17 14C18.66 14 20 15.34 20 17C20 18.66 18.66 20 17 20C15.34 20 14 18.66 14 17C14 15.34 15.34 14 17 14M7 6C6.45 6 6 6.45 6 7C6 7.55 6.45 8 7 8C7.55 8 8 7.55 8 7C8 6.45 7.55 6 7 6M17 16C16.45 16 16 16.45 16 17C16 17.55 16.45 18 17 18C17.55 18 18 17.55 18 17C18 16.45 17.55 16 17 16Z" ); @include generateSvgClass( - "sgi-pin-off-outline", + "mdi-pin-off-outline", "M8,6.2V4H7V2H17V4H16V12L18,14V16H17.8L14,12.2V4H10V8.2L8,6.2M20,20.7L18.7,22L12.8,16.1V22H11.2V16H6V14L8,12V11.3L2,5.3L3.3,4L20,20.7M8.8,14H10.6L9.7,13.1L8.8,14Z" ); @include generateSvgClass( - "sgi-pin-outline", + "mdi-pin-outline", "M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z" ); @include generateSvgClass( - "sgi-playlist-plus", + "mdi-playlist-plus", "M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z" ); @include generateSvgClass( - "sgi-play-circle-outline", + "mdi-play-circle-outline", "M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" ); @include generateSvgClass( - "sgi-playlist-remove", + "mdi-playlist-remove", "M2,6V8H14V6H2M2,10V12H11V10H2M14.17,10.76L12.76,12.17L15.59,15L12.76,17.83L14.17,19.24L17,16.41L19.83,19.24L21.24,17.83L18.41,15L21.24,12.17L19.83,10.76L17,13.59L14.17,10.76M2,14V16H11V14H2Z" ); @include generateSvgClass( - "sgi-plus-circle", + "mdi-plus-circle", "M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" ); @include generateSvgClass( - "sgi-plus-circle-outline", + "mdi-plus-circle-outline", "M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" ); @include generateSvgClass( - "sgi-plus", + "mdi-plus", "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" ); @include generateSvgClass( - "sgi-progress-download", + "mdi-progress-download", "M13,2.03C17.73,2.5 21.5,6.25 21.95,11C22.5,16.5 18.5,21.38 13,21.93V19.93C16.64,19.5 19.5,16.61 19.96,12.97C20.5,8.58 17.39,4.59 13,4.05V2.05L13,2.03M11,2.06V4.06C9.57,4.26 8.22,4.84 7.1,5.74L5.67,4.26C7.19,3 9.05,2.25 11,2.06M4.26,5.67L5.69,7.1C4.8,8.23 4.24,9.58 4.05,11H2.05C2.25,9.04 3,7.19 4.26,5.67M2.06,13H4.06C4.24,14.42 4.81,15.77 5.69,16.9L4.27,18.33C3.03,16.81 2.26,14.96 2.06,13M7.1,18.37C8.23,19.25 9.58,19.82 11,20V22C9.04,21.79 7.18,21 5.67,19.74L7.1,18.37M12,16.5L7.5,12H11V8H13V12H16.5L12,16.5Z" ); @include generateSvgClass( - "sgi-redo", + "mdi-redo", "M18.4,10.6C16.55,9 14.15,8 11.5,8C6.85,8 2.92,11.03 1.54,15.22L3.9,16C4.95,12.81 7.95,10.5 11.5,10.5C13.45,10.5 15.23,11.22 16.62,12.38L13,16H22V7L18.4,10.6Z" ); @include generateSvgClass( - "sgi-refresh", + "mdi-refresh", "M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" ); @include generateSvgClass( - "sgi-shape-square-plus", + "mdi-shape-square-plus", "M19,5H22V7H19V10H17V7H14V5H17V2H19V5M17,19V13H19V21H3V5H11V7H5V19H17Z" ); @include generateSvgClass( - "sgi-snowflake", + "mdi-snowflake", "M20.79,13.95L18.46,14.57L16.46,13.44V10.56L18.46,9.43L20.79,10.05L21.31,8.12L19.54,7.65L20,5.88L18.07,5.36L17.45,7.69L15.45,8.82L13,7.38V5.12L14.71,3.41L13.29,2L12,3.29L10.71,2L9.29,3.41L11,5.12V7.38L8.5,8.82L6.5,7.69L5.92,5.36L4,5.88L4.47,7.65L2.7,8.12L3.22,10.05L5.55,9.43L7.55,10.56V13.45L5.55,14.58L3.22,13.96L2.7,15.89L4.47,16.36L4,18.12L5.93,18.64L6.55,16.31L8.55,15.18L11,16.62V18.88L9.29,20.59L10.71,22L12,20.71L13.29,22L14.7,20.59L13,18.88V16.62L15.5,15.17L17.5,16.3L18.12,18.63L20,18.12L19.53,16.35L21.3,15.88L20.79,13.95M9.5,10.56L12,9.11L14.5,10.56V13.44L12,14.89L9.5,13.44V10.56Z" ); @include generateSvgClass( - "sgi-sort-ascending", + "mdi-sort-ascending", "M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" ); @include generateSvgClass( - "sgi-sort-descending", + "mdi-sort-descending", "M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" ); @include generateSvgClass( - "sgi-sort-variant-off", + "mdi-sort-variant-off", "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z" ); @include generateSvgClass( - "sgi-sort-variant-remove", + "mdi-sort-variant-remove", "M3 13H15V11H3M3 6V8H21V6M3 18H9V16H3V18M22.54 16.88L20.41 19L22.54 21.12L21.12 22.54L19 20.41L16.88 22.54L15.47 21.12L17.59 19L15.47 16.88L16.88 15.47L19 17.59L21.12 15.46L22.54 16.88" ); @include generateSvgClass( - "sgi-square-edit-outline", + "mdi-square-edit-outline", "M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19H5V5H12V3H5M17.78,4C17.61,4 17.43,4.07 17.3,4.2L16.08,5.41L18.58,7.91L19.8,6.7C20.06,6.44 20.06,6 19.8,5.75L18.25,4.2C18.12,4.07 17.95,4 17.78,4M15.37,6.12L8,13.5V16H10.5L17.87,8.62L15.37,6.12Z" ); @include generateSvgClass( - "sgi-star", + "mdi-star", "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" ); @include generateSvgClass( - "sgi-star-outline", + "mdi-star-outline", "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" ); @include generateSvgClass( - "sgi-stop-circle-outline", + "mdi-stop-circle-outline", "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4M9,9V15H15V9" ); @include generateSvgClass( - "sgi-subdirectory-arrow-right", + "mdi-subdirectory-arrow-right", "M19,15L13,21L11.58,19.58L15.17,16H4V4H6V14H15.17L11.58,10.42L13,9L19,15Z" ); @include generateSvgClass( - "sgi-swap-horizontal", + "mdi-swap-horizontal", "M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" ); @include generateSvgClass( - "sgi-swap-vertical", + "mdi-swap-vertical", "M9,3L5,7H8V14H10V7H13M16,17V10H14V17H11L15,21L19,17H16Z" ); @include generateSvgClass( - "sgi-sync", + "mdi-sync", "M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z" ); @include generateSvgClass( - "sgi-sync-circle", + "mdi-sync-circle", "M2 12A10 10 0 1 0 12 2A10 10 0 0 0 2 12M15.6 13.72A4 4 0 0 0 16 12A4 4 0 0 0 12 8V10L8.88 7L12 4V6A6 6 0 0 1 18 12A5.9 5.9 0 0 1 17.07 15.19M6 12A5.9 5.9 0 0 1 6.93 8.81L8.4 10.28A4 4 0 0 0 8 12A4 4 0 0 0 12 16V14L15 17L12 20V18A6 6 0 0 1 6 12Z" ); @include generateSvgClass( - "sgi-table-edit", + "mdi-table-edit", "M21.7,13.35L20.7,14.35L18.65,12.3L19.65,11.3C19.86,11.08 20.21,11.08 20.42,11.3L21.7,12.58C21.92,12.79 21.92,13.14 21.7,13.35M12,18.94L18.07,12.88L20.12,14.93L14.06,21H12V18.94M4,2H18A2,2 0 0,1 20,4V8.17L16.17,12H12V16.17L10.17,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,6V10H10V6H4M12,6V10H18V6H12M4,12V16H10V12H4Z" ); @include generateSvgClass( - "sgi-table-refresh", + "mdi-table-refresh", "M18 14.5C19.11 14.5 20.11 14.95 20.83 15.67L22 14.5V18.5H18L19.77 16.73C19.32 16.28 18.69 16 18 16C16.62 16 15.5 17.12 15.5 18.5C15.5 19.88 16.62 21 18 21C18.82 21 19.55 20.61 20 20H21.71C21.12 21.47 19.68 22.5 18 22.5C15.79 22.5 14 20.71 14 18.5C14 16.29 15.79 14.5 18 14.5M4 3H18C19.11 3 20 3.9 20 5V12.17C19.5 12.06 19 12 18.5 12C17.23 12 16.04 12.37 15.04 13H12V17H12.18C12.06 17.5 12 18 12 18.5L12 19H4C2.9 19 2 18.11 2 17V5C2 3.9 2.9 3 4 3M4 7V11H10V7H4M12 7V11H18V7H12M4 13V17H10V13H4Z" ); @include generateSvgClass( - "sgi-text-box-remove", + "mdi-text-box-remove", "M14.46,15.88L15.88,14.46L18,16.59L20.12,14.46L21.54,15.88L19.41,18L21.54,20.12L20.12,21.54L18,19.41L15.88,21.54L14.46,20.12L16.59,18L14.46,15.88M12,17V15H7V17H12M17,11H7V13H14.69C13.07,14.07 12,15.91 12,18C12,19.09 12.29,20.12 12.8,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H19A2,2 0 0,1 21,5V12.8C20.12,12.29 19.09,12 18,12L17,12.08V11M17,9V7H7V9H17Z" ); @include generateSvgClass( - "sgi-text-box-remove-outline", + "mdi-text-box-remove-outline", "M14.46,15.88L15.88,14.46L18,16.59L20.12,14.46L21.54,15.88L19.41,18L21.54,20.12L20.12,21.54L18,19.41L15.88,21.54L14.46,20.12L16.59,18L14.46,15.88M5,3H19C20.11,3 21,3.89 21,5V12.8C20.39,12.45 19.72,12.2 19,12.08V5H5V19H12.08C12.2,19.72 12.45,20.39 12.8,21H5C3.89,21 3,20.11 3,19V5C3,3.89 3.89,3 5,3M7,7H17V9H7V7M7,11H17V12.08C16.15,12.22 15.37,12.54 14.68,13H7V11M7,15H12V17H7V15Z" ); @include generateSvgClass( - "sgi-text-box-search-outline", + "mdi-text-box-search-outline", "M15.5,12C18,12 20,14 20,16.5C20,17.38 19.75,18.21 19.31,18.9L22.39,22L21,23.39L17.88,20.32C17.19,20.75 16.37,21 15.5,21C13,21 11,19 11,16.5C11,14 13,12 15.5,12M15.5,14A2.5,2.5 0 0,0 13,16.5A2.5,2.5 0 0,0 15.5,19A2.5,2.5 0 0,0 18,16.5A2.5,2.5 0 0,0 15.5,14M5,3H19C20.11,3 21,3.89 21,5V13.03C20.5,12.23 19.81,11.54 19,11V5H5V19H9.5C9.81,19.75 10.26,20.42 10.81,21H5C3.89,21 3,20.11 3,19V5C3,3.89 3.89,3 5,3M7,7H17V9H7V7M7,11H12.03C11.23,11.5 10.54,12.19 10,13H7V11M7,15H9.17C9.06,15.5 9,16 9,16.5V17H7V15Z" ); @include generateSvgClass( - "sgi-theme-light-dark", + "mdi-theme-light-dark", "M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z" ); @include generateSvgClass( - "sgi-toggle-switch", + "mdi-toggle-switch", "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z" ); @include generateSvgClass( - "sgi-toggle-switch-off-outline", + "mdi-toggle-switch-off-outline", "M7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z" ); @include generateSvgClass( - "sgi-trash-can", + "mdi-trash-can", "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z" ); @include generateSvgClass( - "sgi-trash-can-outline", + "mdi-trash-can-outline", "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" ); @include generateSvgClass( - "sgi-truck", + "mdi-truck", "M18,18.5A1.5,1.5 0 0,1 16.5,17A1.5,1.5 0 0,1 18,15.5A1.5,1.5 0 0,1 19.5,17A1.5,1.5 0 0,1 18,18.5M19.5,9.5L21.46,12H17V9.5M6,18.5A1.5,1.5 0 0,1 4.5,17A1.5,1.5 0 0,1 6,15.5A1.5,1.5 0 0,1 7.5,17A1.5,1.5 0 0,1 6,18.5M20,8H17V4H3C1.89,4 1,4.89 1,6V17H3A3,3 0 0,0 6,20A3,3 0 0,0 9,17H15A3,3 0 0,0 18,20A3,3 0 0,0 21,17H23V12L20,8Z" ); @include generateSvgClass( - "sgi-truck-delivery-outline", + "mdi-truck-delivery-outline", "M18 18.5C18.83 18.5 19.5 17.83 19.5 17C19.5 16.17 18.83 15.5 18 15.5C17.17 15.5 16.5 16.17 16.5 17C16.5 17.83 17.17 18.5 18 18.5M19.5 9.5H17V12H21.46L19.5 9.5M6 18.5C6.83 18.5 7.5 17.83 7.5 17C7.5 16.17 6.83 15.5 6 15.5C5.17 15.5 4.5 16.17 4.5 17C4.5 17.83 5.17 18.5 6 18.5M20 8L23 12V17H21C21 18.66 19.66 20 18 20C16.34 20 15 18.66 15 17H9C9 18.66 7.66 20 6 20C4.34 20 3 18.66 3 17H1V6C1 4.89 1.89 4 3 4H17V8H20M3 6V15H3.76C4.31 14.39 5.11 14 6 14C6.89 14 7.69 14.39 8.24 15H15V6H3M10 7L13.5 10.5L10 14V11.5H5V9.5H10V7Z" ); @include generateSvgClass( - "sgi-tune", + "mdi-tune", "M3,17V19H9V17H3M3,5V7H13V5H3M13,21V19H21V17H13V15H11V21H13M7,9V11H3V13H7V15H9V9H7M21,13V11H11V13H21M15,9H17V7H21V5H17V3H15V9Z" ); @include generateSvgClass( - "sgi-tune-variant", + "mdi-tune-variant", "M8 13C6.14 13 4.59 14.28 4.14 16H2V18H4.14C4.59 19.72 6.14 21 8 21S11.41 19.72 11.86 18H22V16H11.86C11.41 14.28 9.86 13 8 13M8 19C6.9 19 6 18.1 6 17C6 15.9 6.9 15 8 15S10 15.9 10 17C10 18.1 9.1 19 8 19M19.86 6C19.41 4.28 17.86 3 16 3S12.59 4.28 12.14 6H2V8H12.14C12.59 9.72 14.14 11 16 11S19.41 9.72 19.86 8H22V6H19.86M16 9C14.9 9 14 8.1 14 7C14 5.9 14.9 5 16 5S18 5.9 18 7C18 8.1 17.1 9 16 9Z" ); @include generateSvgClass( - "sgi-undo", + "mdi-undo", "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z" ); @include generateSvgClass( - "sgi-upload", + "mdi-upload", "M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" ); @include generateSvgClass( - "sgi-vanish", + "mdi-vanish", "M16,13V11H21V13H16M14.83,7.76L17.66,4.93L19.07,6.34L16.24,9.17L14.83,7.76M11,16H13V21H11V16M11,3H13V8H11V3M4.93,17.66L7.76,14.83L9.17,16.24L6.34,19.07L4.93,17.66M4.93,6.34L6.34,4.93L9.17,7.76L7.76,9.17L4.93,6.34M8,13H3V11H8V13M19.07,17.66L17.66,19.07L14.83,16.24L16.24,14.83L19.07,17.66Z" ); @include generateSvgClass( - "sgi-wrench", + "mdi-wrench", "M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z" ); @include generateSvgClass( - "sgi-wrench-outline", + "mdi-wrench-outline", "M22.61,19L13.53,9.91C14.46,7.57 14,4.81 12.09,2.91C9.79,0.61 6.21,0.4 3.66,2.26L7.5,6.11L6.08,7.5L2.25,3.69C0.39,6.23 0.6,9.82 2.9,12.11C4.76,13.97 7.47,14.46 9.79,13.59L18.9,22.7C19.29,23.09 19.92,23.09 20.31,22.7L22.61,20.4C23,20 23,19.39 22.61,19M19.61,20.59L10.15,11.13C9.54,11.58 8.86,11.85 8.15,11.95C6.79,12.15 5.36,11.74 4.32,10.7C3.37,9.76 2.93,8.5 3,7.26L6.09,10.35L10.33,6.11L7.24,3C8.5,2.95 9.73,3.39 10.68,4.33C11.76,5.41 12.17,6.9 11.92,8.29C11.8,9 11.5,9.66 11.04,10.25L20.5,19.7L19.61,20.59Z" ); -.sgi { +.mdi { display: inline-block; align-items: center; background-color: currentColor; @@ -1036,7 +1036,7 @@ $slick-icon-font-size: $slick-icon-width; width: 1em; height: 1em; - &.sgi-state-disabled { + &.mdi-state-disabled { opacity: 0.35; } } \ No newline at end of file diff --git a/packages/composite-editor-component/src/slick-composite-editor.component.spec.ts b/packages/composite-editor-component/src/slick-composite-editor.component.spec.ts index 71315f23b..573b1b0b9 100644 --- a/packages/composite-editor-component/src/slick-composite-editor.component.spec.ts +++ b/packages/composite-editor-component/src/slick-composite-editor.component.spec.ts @@ -336,7 +336,7 @@ describe('CompositeEditorService', () => { }); it('should make sure Slick-Composite-Editor is being created and rendered with 1 column layout & also expect column name html to be rendered as well', () => { - columnsMock[2].name = ' Field 3'; // add tooltip + columnsMock[2].name = ' Field 3'; // add tooltip const mockProduct = { id: 222, address: { zip: 123456 }, productName: 'Product ABC', price: 12.55 }; jest.spyOn(gridStub, 'getDataItem').mockReturnValue(mockProduct); @@ -361,7 +361,7 @@ describe('CompositeEditorService', () => { expect(compositeContainerElm).toBeTruthy(); expect(compositeHeaderElm).toBeTruthy(); expect(productNameLabelElm.textContent).toBe('Product'); // regular, without column group - expect(field3LabelElm.innerHTML).toBe('Group Name - Field 3'); // with column group + expect(field3LabelElm.innerHTML).toBe('Group Name - Field 3'); // with column group expect(compositeTitleElm).toBeTruthy(); expect(compositeTitleElm.textContent).toBe('Details'); expect(compositeBodyElm).toBeTruthy(); @@ -1089,7 +1089,7 @@ describe('CompositeEditorService', () => { jest.spyOn(dataViewStub, 'getItems').mockReturnValue([mockProduct1]); const mockModalOptions = { - headerTitle: 'Details', modalType: 'create', showResetButtonOnEachEditor: true, resetEditorButtonCssClass: 'sgi sgi-refresh' + headerTitle: 'Details', modalType: 'create', showResetButtonOnEachEditor: true, resetEditorButtonCssClass: 'mdi mdi-refresh' } as CompositeEditorOpenDetailOption; component = new SlickCompositeEditorComponent(); component.init(gridStub, container); diff --git a/packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts b/packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts index bec96e248..67d05d14e 100644 --- a/packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts +++ b/packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts @@ -398,9 +398,9 @@ describe('SlickCustomTooltip plugin', () => { const icon1Elm = document.createElement('span'); const icon2Elm = document.createElement('span'); cellNode.className = 'slick-cell l2 r2'; - icon1Elm.className = 'sgi sgi-check'; + icon1Elm.className = 'mdi mdi-check'; icon1Elm.title = 'Click here when successful'; - icon2Elm.className = 'sgi sgi-cancel'; + icon2Elm.className = 'mdi mdi-cancel'; icon2Elm.title = 'Click here to cancel the action'; cellNode.appendChild(icon1Elm); cellNode.appendChild(icon2Elm); @@ -434,9 +434,9 @@ describe('SlickCustomTooltip plugin', () => { const icon1Elm = document.createElement('span'); const icon2Elm = document.createElement('span'); cellNode.className = 'slick-cell l2 r2'; - icon1Elm.className = 'sgi sgi-check'; + icon1Elm.className = 'mdi mdi-check'; icon1Elm.title = 'Click here when successful'; - icon2Elm.className = 'sgi sgi-cancel'; + icon2Elm.className = 'mdi mdi-cancel'; icon2Elm.title = 'Click here to cancel the action'; cellNode.appendChild(icon1Elm); cellNode.appendChild(icon2Elm); @@ -470,9 +470,9 @@ describe('SlickCustomTooltip plugin', () => { const icon1Elm = document.createElement('span'); const icon2Elm = document.createElement('span'); cellNode.className = 'slick-cell l2 r2'; - icon1Elm.className = 'sgi sgi-check'; + icon1Elm.className = 'mdi mdi-check'; icon1Elm.title = 'Click here when successful'; - icon2Elm.className = 'sgi sgi-cancel'; + icon2Elm.className = 'mdi mdi-cancel'; icon2Elm.title = 'Click here to cancel the action'; icon2Elm.style.display = 'none'; cellNode.appendChild(icon1Elm); diff --git a/packages/empty-warning-component/src/slick-empty-warning.spec.ts b/packages/empty-warning-component/src/slick-empty-warning.spec.ts index e6b5205d6..25a820786 100644 --- a/packages/empty-warning-component/src/slick-empty-warning.spec.ts +++ b/packages/empty-warning-component/src/slick-empty-warning.spec.ts @@ -342,7 +342,7 @@ describe('Slick-Empty-Warning Component', () => { }); it('should expect the Slick-Empty-Warning to change some options and display a different message when provided as an option', () => { - const mockOptions = { message: ' No Record found.', className: 'custom-class', marginTop: 22, marginLeft: 11 }; + const mockOptions = { message: ' No Record found.', className: 'custom-class', marginTop: 22, marginLeft: 11 }; component = new SlickEmptyWarningComponent(); component.init(gridStub, container); component.showEmptyDataMessage(true, mockOptions); @@ -354,12 +354,12 @@ describe('Slick-Empty-Warning Component', () => { expect(componentElm).toBeTruthy(); expect(componentElm.style.display).toBe('block'); expect(componentElm.classList.contains('custom-class')).toBeTruthy(); - expect(componentElm.innerHTML).toBe(' No Record found.'); + expect(componentElm.innerHTML).toBe(' No Record found.'); }); it('should expect the Slick-Empty-Warning to change some options and display a different message is provided as a DocumentFragment', () => { const emptyWarningElm = new DocumentFragment(); - emptyWarningElm.appendChild(createDomElement('span', { className: 'sgi sgi-alert text-color-warning' })); + emptyWarningElm.appendChild(createDomElement('span', { className: 'mdi mdi-alert text-color-warning' })); emptyWarningElm.appendChild(document.createTextNode(' No Record found.')); const mockOptions = { message: emptyWarningElm, className: 'custom-class', marginTop: 22, marginLeft: 11 }; @@ -374,12 +374,12 @@ describe('Slick-Empty-Warning Component', () => { expect(componentElm).toBeTruthy(); expect(componentElm.style.display).toBe('block'); expect(componentElm.classList.contains('custom-class')).toBeTruthy(); - expect(componentElm.innerHTML).toBe(' No Record found.'); + expect(componentElm.innerHTML).toBe(' No Record found.'); }); it('should expect the Slick-Empty-Warning to change some options and display a different message is provided as an HTMLElement', () => { const emptyWarningElm = createDomElement('div', { className: 'container' }); - emptyWarningElm.appendChild(createDomElement('span', { className: 'sgi sgi-alert text-color-warning' })); + emptyWarningElm.appendChild(createDomElement('span', { className: 'mdi mdi-alert text-color-warning' })); emptyWarningElm.appendChild(document.createTextNode(' No Record found.')); const mockOptions = { message: emptyWarningElm, className: 'custom-class', marginTop: 22, marginLeft: 11 }; @@ -394,7 +394,7 @@ describe('Slick-Empty-Warning Component', () => { expect(componentElm).toBeTruthy(); expect(componentElm.style.display).toBe('block'); expect(componentElm.classList.contains('custom-class')).toBeTruthy(); - expect(componentElm.innerHTML).toBe('
No Record found.
'); + expect(componentElm.innerHTML).toBe('
No Record found.
'); }); it('should expect the Slick-Empty-Warning message to be translated to French when providing a Translater Service and "messageKey" property', () => { diff --git a/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts b/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts index d1a61793f..9251ccd71 100644 --- a/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts +++ b/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts @@ -3,7 +3,7 @@ import { EventNamingStyle } from '@slickgrid-universal/event-pub-sub'; // create empty warning message as Document Fragment to be CSP safe const emptyWarningElm = document.createElement('div'); -emptyWarningElm.appendChild(createDomElement('span', { className: 'sgi sgi-alert text-color-warning' })); +emptyWarningElm.appendChild(createDomElement('span', { className: 'mdi mdi-alert text-color-warning' })); emptyWarningElm.appendChild(document.createTextNode(' No data to display.')); /** Global Grid Options Defaults for Salesforce */ @@ -19,8 +19,8 @@ export const SalesforceGlobalGridOptions = { }, eventNamingStyle: EventNamingStyle.lowerCaseWithoutOnPrefix, compositeEditorOptions: { - resetEditorButtonCssClass: 'sgi sgi-refresh sgi-15px', - resetFormButtonIconCssClass: 'sgi sgi-refresh sgi-16px sgi-flip-h', + resetEditorButtonCssClass: 'mdi mdi-refresh mdi-15px', + resetFormButtonIconCssClass: 'mdi mdi-refresh mdi-16px mdi-flip-h', shouldPreviewMassChangeDataset: true, }, datasetIdPropertyName: 'Id', @@ -63,8 +63,8 @@ export const SalesforceGlobalGridOptions = { }, headerMenu: { hideFreezeColumnsCommand: false, - iconSortAscCommand: 'sgi sgi-arrow-up', - iconSortDescCommand: 'sgi sgi-arrow-down', + iconSortAscCommand: 'mdi mdi-arrow-up', + iconSortDescCommand: 'mdi mdi-arrow-down', }, preventDocumentFragmentUsage: true, sanitizer: (dirtyHtml: string) => typeof dirtyHtml === 'string' ? dirtyHtml.replace(/(\b)(on[a-z]+)(\s*)=|javascript:([^>]*)[^>]*|(<\s*)(\/*)script([<>]*).*(<\s*)(\/*)script(>*)|(<)(\/*)(script|script defer)(.*)(>|>">)/gi, '') : dirtyHtml, diff --git a/test/cypress/e2e/example03.cy.ts b/test/cypress/e2e/example03.cy.ts index b249d906c..5b79063cc 100644 --- a/test/cypress/e2e/example03.cy.ts +++ b/test/cypress/e2e/example03.cy.ts @@ -46,7 +46,7 @@ describe('Example 03 - Draggable Grouping', () => { }); it('should click on the group by Duration sort icon and expect data to become sorted as descending order with all rows being expanded', () => { - cy.get('.sgi-arrow-up:nth(0)').click(); + cy.get('.mdi-arrow-up:nth(0)').click(); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); }); @@ -59,7 +59,7 @@ describe('Example 03 - Draggable Grouping', () => { }); it('should click on the group by Duration sort icon and now expect data to become sorted as ascending order with all rows being expanded', () => { - cy.get('.sgi-arrow-down:nth(0)').click(); + cy.get('.mdi-arrow-down:nth(0)').click(); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); }); diff --git a/test/cypress/e2e/example07.cy.ts b/test/cypress/e2e/example07.cy.ts index 0f00363a0..30c4eddbf 100644 --- a/test/cypress/e2e/example07.cy.ts +++ b/test/cypress/e2e/example07.cy.ts @@ -407,11 +407,11 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => { it('should be able to toggle Sorting functionality (disable) and expect all header menu Sorting commands to be hidden and also not show Sort hint while hovering a column', () => { const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column']; - cy.get('[data-test="toggle-sorting-btn"] .sgi-toggle-switch').should('exist'); + cy.get('[data-test="toggle-sorting-btn"] .mdi-toggle-switch').should('exist'); cy.get('.slick-sort-indicator').should('have.length.greaterThan', 0); // sort icon hints cy.get('[data-test="toggle-sorting-btn"]').click(); // disable it cy.get('.slick-sort-indicator').should('have.length', 0); - cy.get('[data-test="toggle-sorting-btn"] .sgi-toggle-switch-off-outline').should('exist'); + cy.get('[data-test="toggle-sorting-btn"] .mdi-toggle-switch-off-outline').should('exist'); cy.get('.grid7') .find('.slick-header-column:nth(8)') @@ -457,10 +457,10 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => { it('should be able to toggle Sorting functionality (re-enable) and expect all Sorting header menu commands to be visible and also Sort hints to show up also', () => { const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column']; - cy.get('[data-test="toggle-sorting-btn"] .sgi-toggle-switch-off-outline').should('exist'); + cy.get('[data-test="toggle-sorting-btn"] .mdi-toggle-switch-off-outline').should('exist'); cy.get('.slick-sort-indicator').should('have.length', 0); // sort icon hints cy.get('[data-test="toggle-sorting-btn"]').click(); // enable it back - cy.get('[data-test="toggle-sorting-btn"] .sgi-toggle-switch').should('exist'); + cy.get('[data-test="toggle-sorting-btn"] .mdi-toggle-switch').should('exist'); cy.get('.slick-sort-indicator').should('have.length.greaterThan', 0); cy.get('.grid7') @@ -503,11 +503,11 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => { it('should be able to click disable Sorting functionality button and expect all Sorting commands to be hidden and also not show Sort hint while hovering a column', () => { const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column']; - cy.get('[data-test="toggle-sorting-btn"] .sgi-toggle-switch').should('exist'); + cy.get('[data-test="toggle-sorting-btn"] .mdi-toggle-switch').should('exist'); cy.get('.slick-sort-indicator').should('have.length.greaterThan', 0); // sort icon hints cy.get('[data-test="disable-sorting-btn"]').click().click(); // even clicking twice should have same result cy.get('.slick-sort-indicator').should('have.length', 0); - cy.get('[data-test="toggle-sorting-btn"] .sgi-toggle-switch-off-outline').should('exist'); + cy.get('[data-test="toggle-sorting-btn"] .mdi-toggle-switch-off-outline').should('exist'); cy.get('.grid7') .find('.slick-header-column:nth(5)') diff --git a/test/cypress/e2e/example11.cy.ts b/test/cypress/e2e/example11.cy.ts index d13cab48f..354036e3f 100644 --- a/test/cypress/e2e/example11.cy.ts +++ b/test/cypress/e2e/example11.cy.ts @@ -553,7 +553,7 @@ describe('Example 11 - Batch Editing', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1)`).contains('TASK 5', { matchCase: false }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`) - .find('.sgi-close') + .find('.mdi-close') .click(); cy.on('window:confirm', () => true); @@ -570,7 +570,7 @@ describe('Example 11 - Batch Editing', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 2', { matchCase: false }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`) - .find('.sgi-check-underline') + .find('.mdi-check-underline') .click(); cy.on('window:alert', (str) => { @@ -833,8 +833,8 @@ describe('Example 11 - Batch Editing', () => { it('should display 2 different tooltips when hovering icons from "Action" column', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).as('first-row-action-cell'); - cy.get('@first-row-action-cell').find('.action-btns .sgi-close').as('delete-row-btn'); - cy.get('@first-row-action-cell').find('.action-btns .sgi-check-underline').as('mark-completed-btn'); + cy.get('@first-row-action-cell').find('.action-btns .mdi-close').as('delete-row-btn'); + cy.get('@first-row-action-cell').find('.action-btns .mdi-check-underline').as('mark-completed-btn'); cy.get('@delete-row-btn') .trigger('mouseover'); diff --git a/test/cypress/e2e/example12.cy.ts b/test/cypress/e2e/example12.cy.ts index 81b9fda72..dbb1ae57c 100644 --- a/test/cypress/e2e/example12.cy.ts +++ b/test/cypress/e2e/example12.cy.ts @@ -34,14 +34,14 @@ describe('Example 12 - Composite Editor Modal', () => { it('should display 2 different tooltips when hovering icons on "Title" column', () => { cy.get('.slick-column-name').as('title-column'); cy.get('@title-column') - .find('.sgi-alert-outline') + .find('.mdi-alert-outline') .trigger('mouseover'); cy.get('.slick-custom-tooltip').should('be.visible'); cy.get('.slick-custom-tooltip .tooltip-body').contains('Task must always be followed by a number'); cy.get('@title-column') - .find('.sgi-information-outline') + .find('.mdi-information-outline') .trigger('mouseover'); cy.get('.slick-custom-tooltip').should('be.visible'); @@ -130,15 +130,15 @@ describe('Example 12 - Composite Editor Modal', () => { // change Completed cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).click(); cy.get('.editor-completed').check(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).click(); cy.get('.editor-completed').check(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).click(); cy.get('.editor-completed').check(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); }); it('should be able to change "Finish" values of row indexes 0-2', () => { @@ -287,7 +287,7 @@ describe('Example 12 - Composite Editor Modal', () => { expect(win.console.log).to.be.calledWithMatch('create item data context', { id: 501, title: 'Task 7777', completed: false, complexity: '', duration: 33, finish: '', percentComplete: 44, start: '', origin: { name: 'Austria', code: 'AT' }, - product: { id: 0, icon: 'sgi-arrow-collapse', itemName: 'Sleek Metal Computer', itemTypeName: 'I', listPrice: 2100.23 }, + product: { id: 0, icon: 'mdi-arrow-collapse', itemName: 'Sleek Metal Computer', itemTypeName: 'I', listPrice: 2100.23 }, }); }); }); @@ -297,7 +297,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '44'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).find('.editing-field').should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 0); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 0); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Sleek Metal Computer'); @@ -348,7 +348,7 @@ describe('Example 12 - Composite Editor Modal', () => { expect(win.console.log).to.be.calledWithMatch('create item data context', { id: 502, title: 'Task 8888', completed: true, complexity: '', duration: 22, percentComplete: 5, start: '', origin: { name: 'Antarctica', code: 'AQ' }, - product: { id: 1, icon: 'sgi-arrow-expand', itemName: 'Tasty Granite Table', itemTypeName: 'I', listPrice: 3200.12 }, + product: { id: 1, icon: 'mdi-arrow-expand', itemName: 'Tasty Granite Table', itemTypeName: 'I', listPrice: 3200.12 }, }); }); }); @@ -358,7 +358,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '22 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '5'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).find('.editing-field').should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table'); @@ -394,7 +394,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '17'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).find('.editing-field').should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('not.exist'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('not.exist'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table'); @@ -441,25 +441,25 @@ describe('Example 12 - Composite Editor Modal', () => { it('should have updated values in the entire grid', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '51'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', '51'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', '51'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`).should('contain', '51'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -558,22 +558,22 @@ describe('Example 12 - Composite Editor Modal', () => { it('should have updated all the changed values BUT only on the 2 selected rows', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', '77'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belize'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', '77'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(10)`).should('contain', 'Belize'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -639,7 +639,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).contains('TASK 8899', { matchCase: false }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -673,7 +673,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).contains('TASK 9999', { matchCase: false }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '44 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '17'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 0); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 0); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -682,7 +682,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', '8899'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); diff --git a/test/cypress/e2e/example13.cy.ts b/test/cypress/e2e/example13.cy.ts index 0f25b8c84..861796f3e 100644 --- a/test/cypress/e2e/example13.cy.ts +++ b/test/cypress/e2e/example13.cy.ts @@ -27,12 +27,12 @@ describe('Example 13 - Header Button Plugin', () => { cy.get('.grid13-1 .slick-header-columns') .children('.slick-header-column:nth(2)') - .find('.slick-header-button.sgi-lightbulb-outline.text-color-warning.faded') + .find('.slick-header-button.mdi-lightbulb-outline.text-color-warning.faded') .click(); cy.get('.grid13-1 .slick-header-columns') .children('.slick-header-column:nth(2)') - .find('.slick-header-button.sgi-lightbulb-outline.text-color-warning.faded') + .find('.slick-header-button.mdi-lightbulb-outline.text-color-warning.faded') .should('not.exist'); // shouldn't be faded anymore cy.window().then((win) => { @@ -83,13 +83,13 @@ describe('Example 13 - Header Button Plugin', () => { cy.get('.grid13-1 .slick-header-columns') .children('.slick-header-column:nth(9)') - .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.text-color-warning.faded') + .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.text-color-warning.faded') .should('exist') .click(); cy.get('.grid13-1 .slick-header-columns') .children('.slick-header-column:nth(9)') - .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.text-color-warning.faded') + .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.text-color-warning.faded') .should('exist'); // should still be faded after previous click cy.get('.grid13-1 .slick-row') @@ -206,7 +206,7 @@ describe('Example 13 - Header Button Plugin', () => { .should('have.css', 'visibility', 'hidden'); cy.get('.grid13-1 .slick-header-columns') - .find('.slick-header-button-hidden.sgi-help-circle-outline') + .find('.slick-header-button-hidden.mdi-help-circle-outline') .realHover() .wait(200) .should('have.css', 'visibility', 'visible'); @@ -227,12 +227,12 @@ describe('Example 13 - Header Button Plugin', () => { cy.get('.grid13-2 .slick-header-columns') .children('.slick-header-column:nth(2)') - .find('.slick-header-button.sgi-lightbulb-outline.text-color-warning.faded') + .find('.slick-header-button.mdi-lightbulb-outline.text-color-warning.faded') .click({ force: true }); cy.get('.grid13-2 .slick-header-columns') .children('.slick-header-column:nth(2)') - .find('.slick-header-button.sgi-lightbulb-outline.text-color-warning.faded') + .find('.slick-header-button.mdi-lightbulb-outline.text-color-warning.faded') .should('not.exist'); // shouldn't be faded anymore cy.window().then((win) => { @@ -283,13 +283,13 @@ describe('Example 13 - Header Button Plugin', () => { cy.get('.grid13-2 .slick-header-columns') .children('.slick-header-column:nth(9)') - .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.text-color-warning.faded') + .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.text-color-warning.faded') .should('exist') .click({ force: true }); cy.get('.grid13-2 .slick-header-columns') .children('.slick-header-column:nth(9)') - .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.text-color-warning.faded') + .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.text-color-warning.faded') .should('exist'); // should still be faded after previous click cy.get('.grid13-2 .slick-row') @@ -405,7 +405,7 @@ describe('Example 13 - Header Button Plugin', () => { .should('have.css', 'visibility', 'hidden'); cy.get('.grid13-2 .slick-header-columns') - .find('.slick-header-button-hidden.sgi-help-circle-outline') + .find('.slick-header-button-hidden.mdi-help-circle-outline') .realHover() .wait(200) .should('have.css', 'visibility', 'visible'); diff --git a/test/cypress/e2e/example16.cy.ts b/test/cypress/e2e/example16.cy.ts index fb08bcbba..0f1100874 100644 --- a/test/cypress/e2e/example16.cy.ts +++ b/test/cypress/e2e/example16.cy.ts @@ -88,7 +88,7 @@ describe('Example 16 - Regular & Custom Tooltips', () => { cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(1)').should('be.empty'); cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(0)').contains('Completion:'); - cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(1)').find('.sgi-check-circle-outline').should('exist'); + cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(1)').find('.mdi-check-circle-outline').should('exist'); cy.get('@start6-cell').trigger('mouseout'); }); @@ -134,7 +134,7 @@ describe('Example 16 - Regular & Custom Tooltips', () => { cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(1)').should('be.empty'); cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(0)').contains('Completion:'); - cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(1)').find('.sgi-check-circle-outline').should('exist'); + cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(1)').find('.mdi-check-circle-outline').should('exist'); cy.get('@duration2-cell').trigger('mouseout'); });