diff --git a/docs/TOC.md b/docs/TOC.md index ffbb77874..44b1695b1 100644 --- a/docs/TOC.md +++ b/docs/TOC.md @@ -76,3 +76,4 @@ * [Migration Guide to 2.x](migrations/migration-to-2.x.md) * [Migration Guide to 3.x](migrations/migration-to-3.x.md) * [Migration Guide to 4.x](migrations/migration-to-4.x.md) +* [Migration Guide to 5.x](migrations/migration-to-5.x.md) diff --git a/docs/column-functionalities/Cell-Menu.md b/docs/column-functionalities/Cell-Menu.md index 48983d58f..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: 'fa fa-question-circle', positionOrder: 62 }, + { command: 'help', title: 'HELP', iconCssClass: 'mdi mdi-help-circle', positionOrder: 62 }, // you can add sub-menus by adding nested `commandItems` { // we can also have multiple nested sub-menus @@ -74,8 +74,8 @@ this.columnDefinitions = [ cellMenu: { optionTitle: 'Change Effort Driven Flag', // optional, add title optionItems: [ - { option: true, title: 'True', iconCssClass: 'fa fa-check-square-o' }, - { option: false, title: 'False', iconCssClass: 'fa fa-square-o' }, + { option: true, title: 'True', iconCssClass: 'mdi mdi-check-box-outline' }, + { option: false, title: 'False', iconCssClass: 'mdi mdi-checkbox-blank-outline' }, { divider: true, command: '', positionOrder: 60 }, ], // subscribe to Context Menu onOptionSelected event (or use the "action" callback on each option) @@ -153,7 +153,7 @@ this.columnDefinitions = [ { id: 'action', field: 'action', name: 'Action', cellMenu: { menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20 }, } @@ -163,24 +163,22 @@ this.columnDefinitions = [ To give another example, with Options this time, we could say that we enable the `n/a` option only when the row is Completed. So we could do it this way ```ts -this.columnDefinitions = [ - { id: 'action', field: 'action', name: 'Action', - cellMenu: { - optionItems: [ - { - option: 0, title: 'n/a', textCssClass: 'italic', - // only enable this option when the task is Not Completed - itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; - return !dataContext.completed; - }, - { option: 1, iconCssClass: 'fa fa-star-o yellow', title: 'Low' }, - { option: 2, iconCssClass: 'fa fa-star-half-o orange', title: 'Medium' }, - { option: 3, iconCssClass: 'fa fa-star red', title: 'High' }, - ] - } +this.columnDefinitions = [{ + id: 'action', field: 'action', name: 'Action', + cellMenu: { + optionItems: [{ + option: 0, title: 'n/a', textCssClass: 'italic', + // only enable this option when the task is Not Completed + itemUsabilityOverride: (args) => { + const dataContext = args?.dataContext; + return !dataContext.completed; + }, + { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' }, + { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' }, + { option: 3, iconCssClass: 'mdi mdi-star red', title: 'High' }, + }] } -]; +}]; ``` ### How to add Translations? @@ -191,9 +189,9 @@ this.columnDefinitions = [ cellMenu: { optionTitleKey: 'COMMANDS', // optionally pass a title to show over the Options optionItems: [ - { option: 1, titleKey: 'LOW', iconCssClass: 'fa fa-star-o yellow' }, - { option: 2, titleKey: 'MEDIUM', iconCssClass: 'fa fa-star-half-o orange' }, - { option: 3, titleKey: 'HIGH', iconCssClass: 'fa fa-star red' }, + { option: 1, titleKey: 'LOW', iconCssClass: 'mdi mdi-star-outline yellow' }, + { option: 2, titleKey: 'MEDIUM', iconCssClass: 'mdi mdi-star orange' }, + { option: 3, titleKey: 'HIGH', iconCssClass: 'mdi mdi-star red' }, ] } } diff --git a/docs/column-functionalities/Formatters.md b/docs/column-functionalities/Formatters.md index 752267fb3..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: 'fa fa-fire', text: '', tooltip: 'burning fire' } : ''; + value ? { addClasses: 'mdi mdi-fire', text: '', tooltip: 'burning fire' } : ''; ``` ### Example of Custom Formatter with Native DOM Element diff --git a/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md b/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md index f669b165a..7af780e4a 100644 --- a/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md +++ b/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md @@ -276,11 +276,6 @@ export class GridBasicComponent { editorOptions: { showOnFocus: true, minLength: 1, - classes: { - // choose a custom style layout - // 'ui-autocomplete': 'autocomplete-custom-two-rows', - 'ui-autocomplete': 'autocomplete-custom-four-corners', - }, fetch: (searchText, updateCallback) => { yourAsyncApiCall(searchText) // typically you'll want to return no more than 10 results .then(result => updateCallback((results.length > 0) ? results : [{ label: 'No match found.', value: '' }]); }) 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 bd7fdd9a0..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 40872a9a5..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 64ca9c170..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: 'fa fa-question-circle', positionOrder: 62 }, + { command: 'help', title: 'HELP', iconCssClass: 'mdi mdi-help-circle', positionOrder: 62 }, // you can add sub-menus by adding nested `commandItems` { // we can also have multiple nested sub-menus @@ -68,14 +68,14 @@ this.gridOptions = { hideCloseButton: false, optionTitle: 'Change Effort Driven Flag', // optional, add title optionItems: [ - { option: true, title: 'True', iconCssClass: 'fa fa-check-square-o' }, - { option: false, title: 'False', iconCssClass: 'fa fa-square-o' }, + { option: true, title: 'True', iconCssClass: 'mdi mdi-check-box-outline' }, + { option: false, title: 'False', iconCssClass: 'mdi mdi-checkbox-blank-outline' }, { divider: true, command: '', positionOrder: 60 }, ], // subscribe to Context Menu onOptionSelected event (or use the "action" callback on each option) onOptionSelected: (e, args) => { // change Priority - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && dataContext.hasOwnProperty('priority')) { dataContext.priority = args.item.option; this.sgb.gridService.updateItem(dataContext); @@ -133,7 +133,7 @@ For example, say we want the Context Menu to only be available on the first 20 r ```ts contextMenu: { menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20 }, ``` @@ -141,18 +141,17 @@ contextMenu: { To give another example, with Options this time, we could say that we enable the `n/a` option only when the row is Completed. So we could do it this way ```ts contextMenu: { - optionItems: [ - { + optionItems: [{ option: 0, title: 'n/a', textCssClass: 'italic', // only enable this option when the task is Not Completed itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, - { option: 1, iconCssClass: 'fa fa-star-o yellow', title: 'Low' }, - { option: 2, iconCssClass: 'fa fa-star-half-o orange', title: 'Medium' }, - { option: 3, iconCssClass: 'fa fa-star red', title: 'High' }, - ] + { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' }, + { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' }, + { option: 3, iconCssClass: 'mdi mdi-star red', title: 'High' }, + }] } ``` @@ -161,12 +160,11 @@ It works exactly like the rest of the library when `enableTranslate` is set, all ```ts contextMenu: { optionTitleKey: 'COMMANDS', // optionally pass a title to show over the Options - optionItems: [ - { - { option: 1, titleKey: 'LOW', iconCssClass: 'fa fa-star-o yellow' }, - { option: 2, titleKey: 'MEDIUM', iconCssClass: 'fa fa-star-half-o orange' }, - { option: 3, titleKey: 'HIGH', iconCssClass: 'fa fa-star red' }, - ] + optionItems: [{ + { option: 1, titleKey: 'LOW', iconCssClass: 'mdi mdi-star-outline yellow' }, + { option: 2, titleKey: 'MEDIUM', iconCssClass: 'mdi mdi-star orange' }, + { option: 3, titleKey: 'HIGH', iconCssClass: 'mdi mdi-star red' }, + }] } ``` @@ -199,10 +197,10 @@ contextMenu: { hideExportTextDelimitedCommand: true, hideMenuOnScroll: true, hideOptionSection: false, - iconCopyCellValueCommand: 'fa fa-clone', - iconExportCsvCommand: 'fa fa-download', - iconExportExcelCommand: 'fa fa-file-excel-o text-success', - iconExportTextDelimitedCommand: 'fa fa-download', + iconCopyCellValueCommand: 'mdi mdi-content-copy', + iconExportCsvCommand: 'mdi mdi-download', + iconExportExcelCommand: 'mdi mdi-file-excel-outline text-success', + iconExportTextDelimitedCommand: 'mdi mdi-download', width: 200, }, ``` diff --git a/docs/grid-functionalities/Export-to-Excel.md b/docs/grid-functionalities/Export-to-Excel.md index eb8e09ae7..e6bbc0bdb 100644 --- a/docs/grid-functionalities/Export-to-Excel.md +++ b/docs/grid-functionalities/Export-to-Excel.md @@ -1,7 +1,6 @@ #### index - [Grid Options](#grid-options) - [Column Definition & Options](#column-definition-and-options) -- [Custom Column Width](#custom-column-width) - [Custom Cell Styling](#custom-cell-styling) - [Cell Value Parser](#cell-value-parser) - [Cell Format Auto-Detect Disable](#cell-format-auto-detect-disable) @@ -59,7 +58,7 @@ initializeGrid() { - So basically, if `exportWithFormatter` is set to True in the `excelExportOptions` of the Grid Options, but is set to False in the Column Definition, then the result will be False and will not evaluate it's Formatter. - `exportCustomFormatter` will let you choose a different Formatter when exporting - For example, you might have `formatter: Formatters.checkmark` but you want to see a boolean translated value, in this case you would define an extra property of `customFormatter: Formatters.translateBoolean`. -- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `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 @@ -74,7 +73,7 @@ Inside the column definition there are couple of flags you can set in `excelExpo - `sheetName` allows you to change the Excel Sheet Name (defaults to "Sheet1") - `groupingColumnHeaderTitle` The column header title (at A0 in Excel) of the Group by. If nothing is provided it will use "Group By" - `groupingAggregatorRowText` The default text to display in 1st column of the File Export, which will identify that the current row is a Grouping Aggregator -- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `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 @@ -118,21 +117,6 @@ initializeGrid() { What we can see from the example, is that it will use all Formatters (when exist) on this grid, except for the last column "Completed" since that column has explicitly defined `exportWithFormatter: false` -### Custom Column Width - -**NOTE** now deprecated, please use [Custom Cell Styling](#custom-cell-styling) instead - -You can define a custom Excel column width (the width Excel's own width which is not in pixel). You can define a custom width per column (in your column definitions) and/or for the entire grid (in your grid options). - -#### Per Column -You could set a custom width per column -```ts -this.columnDefinitions = [ - { id: 'firstName', name: 'FirstName', exportColumnWidth: 10, }, - // ... -]; -``` - #### For the entire Grid You could also set a custom width for the entire grid export via the `excelExportOptions` ```ts @@ -238,7 +222,7 @@ If you have lots of data, you might want to show a spinner telling the user that ##### View ```html - +
diff --git a/docs/grid-functionalities/Export-to-Text-File.md b/docs/grid-functionalities/Export-to-Text-File.md index 53c32373c..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 4c8b2d30e..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: 'fa fa-ellipsis-v', + iconCssClass: 'mdi mdi-dots-vertical', menuWidth: 17, resizeOnShowHeaderRow: true, commandItems: [ { - iconCssClass: 'fa fa-filter text-danger', + iconCssClass: 'mdi mdi-filter-remove-outline', title: 'Clear All Filters', disabled: false, command: 'clear-filter' }, { - iconCssClass: 'fa fa-random', + iconCssClass: 'mdi-flip-vertical', title: 'Toggle Filter Row', disabled: false, command: 'toggle-filter' @@ -110,12 +110,12 @@ You can change any of the default command icon(s) by changing the `icon[X-comman this.gridOptions = { enableGridMenu: true, gridMenu: { - iconClearAllFiltersCommand: 'fa fa-filter text-danger' - iconClearAllSortingCommand: 'fa fa-unsorted text-danger', - iconExportCsvCommand: 'fa fa-download', - iconExportTextDelimitedCommand: 'fa fa-download', - iconRefreshDatasetCommand: 'fa fa-refresh', - iconToggleFilterCommand: 'fa fa-random', + iconClearAllFiltersCommand: 'mdi mdi-filter-remove-outline' + iconClearAllSortingCommand: 'mdi mdi-sort-variant-off', + iconExportCsvCommand: 'mdi mdi-download', + iconExportTextDelimitedCommand: 'mdi mdi-download', + iconRefreshDatasetCommand: 'mdi mdi-sync', + iconToggleFilterCommand: 'mdi-flip-vertical', }, }; ``` diff --git a/docs/grid-functionalities/Tree-Data-Grid.md b/docs/grid-functionalities/Tree-Data-Grid.md index 4065e6489..34afee089 100644 --- a/docs/grid-functionalities/Tree-Data-Grid.md +++ b/docs/grid-functionalities/Tree-Data-Grid.md @@ -349,10 +349,10 @@ this.columnDefinitions = [ if (avgVal !== undefined && sumVal !== undefined) { // when found Avg & Sum, we'll display both - return isNaN(sumVal) ? '' : `sum: ${decimalFormatted(sumVal, 0, 2)} MB / avg: ${decimalFormatted(avgVal, 0, 2)} MB (${treeLevel === 0 ? 'total' : 'sub-total'})`; + return isNaN(sumVal) ? '' : `sum: ${decimalFormatted(sumVal, 0, 2)} MB / avg: ${decimalFormatted(avgVal, 0, 2)} MB (${treeLevel === 0 ? 'total' : 'sub-total'})`; } else if (sumVal !== undefined) { // or when only Sum is aggregated, then just show Sum - return isNaN(sumVal) ? '' : `sum: ${decimalFormatted(sumVal, 0, 2)} MB (${treeLevel === 0 ? 'total' : 'sub-total'})`; + return isNaN(sumVal) ? '' : `sum: ${decimalFormatted(sumVal, 0, 2)} MB (${treeLevel === 0 ? 'total' : 'sub-total'})`; } } // reaching this line means it's a regular dataContext without totals, so regular formatter output will be used diff --git a/docs/grid-functionalities/frozen-columns-rows.md b/docs/grid-functionalities/frozen-columns-rows.md index 77e1f2825..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/grouping-aggregators.md b/docs/grid-functionalities/grouping-aggregators.md index d28fd8c7d..60179aff6 100644 --- a/docs/grid-functionalities/grouping-aggregators.md +++ b/docs/grid-functionalities/grouping-aggregators.md @@ -179,21 +179,19 @@ To "Clear all Grouping", "Collapse all Groups" and "Expand all Groups", we can s ``` ### Styling (change icons) -The current icons are Font Awesome chevron (right/down), however if you wish to use +/- icons. You can simply update the SASS variables to use whichever icons (or even Font Family icon) you desire. The SASS variables you can change are +The current icons are chevron (right/down), however if you wish to use +/- icons. You can simply update the SASS variables to use whichever SVG icon paths. The SASS variables you can change are ```css -$icon-group-color: $primary-color; -$icon-group-expanded: "\f107"; -$icon-group-collapsed: "\f105"; -$icon-group-font-size: ($icon-font-size + 2px); -$icon-group-font-weight: bold; -$icon-group-margin-right: 2px; -$icon-group-height: 20px; -$icon-group-width: 14px; +$slick-icon-group-color: $primary-color; +$slick-icon-group-expanded-svg-path: "M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z"; +$slick-icon-group-collapsed-svg-path: "M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z"; +$slick-icon-group-font-size: 20px; +$slick-icon-group-font-weight: bold; +$slick-icon-group-margin-right: 2px; /* Grouping Totals Formatter */ -$group-totals-formatter-color: gray; -$group-totals-formatter-bgcolor: white; -$group-totals-formatter-font-size: 14px; +$slick-group-totals-formatter-color: gray; +$slick-group-totals-formatter-bgcolor: white; +$slick-group-totals-formatter-font-size: 14px; ``` For more info on SASS styling and variables, please read the [Wiki - SASS Styling](../styling/styling.md), \ No newline at end of file diff --git a/docs/grid-functionalities/header-menu-header-buttons.md b/docs/grid-functionalities/header-menu-header-buttons.md index 42b15c577..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: 'fa fa-times' - iconSortAscCommand: 'fa fa-sort-asc' - iconSortDescCommand: 'fa fa-sort-desc', + iconColumnHideCommand: 'mdi mdi-close' + iconSortAscCommand: 'mdi mdi-sort-ascending' + iconSortDescCommand: 'mdi mdi-sort-descending', }, }; ``` diff --git a/docs/migrations/migration-to-5.x.md b/docs/migrations/migration-to-5.x.md new file mode 100644 index 000000000..24f172227 --- /dev/null +++ b/docs/migrations/migration-to-5.x.md @@ -0,0 +1,107 @@ +## 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). + +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: + - barely supported (lots of opened PR but nothing merged for the past 2 years) + - not fully ESM ready (it's only partially ESM, for example it is detected as CJS in Angular-Slickgrid and requires to be added to `allowedCommonJsDependencies`) + - styling could be a bit more modern (the use of native select/input to change year/month/time is a bit outdated and rudimentary) + - date range selection is not very user friendly (UX) +- Vanilla-Calendar pros: + - ESM ready + - modern styling and also include Dark Mode theme + - date range becomes a lot more easy by displaying a picker with 2 months + - much smaller size (a decrease of 2.9% (17Kb) was observed, expect even more decrease with gzip) +- Vanilla-Calendar cons: + - settings are named differently and are not using flat config (complex object settings) + - for example Flatpickr `minDate: 'today'` is instead `range: { min: 'today' }` + - 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 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 + - Node 18 is now required + - migrate to [Vanilla-Calendar-Picker](https://github.com/ghiscoding/vanilla-calendar-picker) (visit [Vanilla-Calendar-Pro](https://vanilla-calendar.pro/) for all docs) + +> **Note** for the entire list of tasks & code changes applied in this release, you may want to take a look at the [Discussion - Roadmap to 5.0](https://github.com/ghiscoding/slickgrid-universal/discussions/1482) + +--- + +**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 + +#### `.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` + +```diff + +``` +or move the class to the parent container and have both the icon and the text inherit the color :) +```diff ++ +``` + +### Deprecated code removed/renamed + +##### SASS variables +A lot of SASS variables changed, we recommend you take a look at the [_variables.scss](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss) file to compare with yours SASS overrides and fix any SASS build issues. + +##### 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 used to compile it with SASS CLI + +```sh +Recommendation: math.div($m, $columns) +More info and automated migrator: https://sass-lang.com/d/slash-div +╷ +94 │ margin-right: $m / $columns * 100% +│ ^^^^^^^^^^^^^^^^^^ +``` + +##### jQueryUI CSS class leftovers +There were a few `.ui-state-default` and other jQueryUI CSS classes leftovers in the core lib, they were all removed in this release. If you were using any of them for styling purposes, you can simply rename them to `.slick-state-` + +```diff +- .ui-state-default, .ui-state-hover { ++ .slick-state-default, .slick-state-hover { +} +``` + +## Grid Functionalities +### Date Editor/Filter +We migrated from Flatpicker to Vanilla-Calendar and this require some changes since the option names are different. The changes are the same for both the Filter and the Editor. + +The biggest change that you will have to do is the min/max date setting when using the `'today'` shortcut as shown below: + +```diff +- import { type FlatpickrOption } from '@slickgrid-universal/common'; ++ import { type VanillaCalendarOption } from '@slickgrid-universal/common'; + +prepareGrid() { + this.columnDefinitions = [{ + id: 'finish', name: 'Finish', field: 'finish', + editor: { + model: Editors.date, +- editorOptions: { minDate: 'today' } as FlatpickrOption, ++ editorOptions: { range: { min: 'today' } } as VanillaCalendarOption, + } + }]; +} +``` + +> **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 f5e567c64..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: 'fa fa-moon-o', + iconToggleDarkModeCommand: 'mdi mdi-brightness-4', commandLabels: { toggleDarkModeCommand: 'Toggle Dark Mode', }, @@ -97,4 +97,4 @@ export class MyDemo { The Dark Mode Theme was created by setting a few CSS variables, in some cases you might need to tweak some of these variables. Take a look at the Slickgrid-Universal [CSS variables](https://github.com/ghiscoding/slickgrid-universal/blob/670946dcedd330a70d2e88127a0042474e7a5348/packages/common/src/styles/_variables.scss#L976-L985) to see which variables were reassigned. Also note that if you're using other Themes like Material or Salesforce, then there's also other variables that are set (see [Material variables](https://github.com/ghiscoding/slickgrid-universal/blob/670946dcedd330a70d2e88127a0042474e7a5348/packages/common/src/styles/_variables-theme-material.scss#L159-L189) or [Salesforce variables](https://github.com/ghiscoding/slickgrid-universal/blob/670946dcedd330a70d2e88127a0042474e7a5348/packages/common/src/styles/_variables-theme-salesforce.scss#L202-L219)) -> **Note** currently the icon color is set only once for **both** the Light & Dark Mode, and for that reason the color is set to a light gray. That will change in the future but that will require a breaking change (major version) and so for a temporary solution a lighter gray color is used. \ No newline at end of file +> **Note** to support both Light and Dark Mode in the same Theme, we use CSS variables **only**. This mean that we **do not** have any dedicated SASS variables for Dark Mode, if you want to override some colors for Dark Mode, you'll need to override the CSS variable for that to work. The best way to find associated variable is to use your browser's debugger tool. \ No newline at end of file diff --git a/docs/styling/styling.md b/docs/styling/styling.md index 4307f8233..c500c2090 100644 --- a/docs/styling/styling.md +++ b/docs/styling/styling.md @@ -3,22 +3,25 @@ - [Using CSS Variables (CSS hooks in LWC)](#using-css-variables-instead-of-sass) - [Using SVG with SASS](#using-custom-svgs-with-sass) - [How to change SVG color?](#how-to-change-svg-color) -- [List of included Material SVG Icons](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/material-svg-icons.scss) - - We only included the most popular icons, about 100 out of the 5000+ available [Material Design icons](https://materialdesignicons.com/) +- [List of included Material SVG Icons](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/slickgrid-icons.scss) + - We only included the most popular icons for a grid, about 200 out of the 5000+ available [Material Design icons](https://materialdesignicons.com/) - [Icon List & Utilities Demo](https://ghiscoding.github.io/slickgrid-universal/#/icons) - [SVG Colors CSS Classes](#svg-colors---css-classes) ### Description -Slickgrid-Universal was built with a Font set, mainly Font-Awesome 4, and if you use SASS it was easy enough to replace Font-Awesome to any other Font based set. The question is how do we use SVG instead of a Font? Most frameworks are switching to SVGs instead of Fonts (for smaller size and also efficiency). Slickgrid-Universal now has 2/3 Styling Themes that support SVGs which are Material Design & Salesforce Themes. These 2 new Themes use a subset of [Material Design Icons](https://materialdesignicons.com/) SVGs (even a portion of the Salesforce theme). There are no Font-Awesome 5, I wouldn't mind adding a new Theme for that and if you wish to contribute then please open a new issue. +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. -If you use SASS, you will find out that it's super easy to use either (Font) or (SVG), you simply have to replace the SASS necessary variables, more on that later. +> **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. ### Demo - Material Theme - [demo](https://ghiscoding.github.io/slickgrid-universal/#/example05) - Salesforce Theme - [demo](https://ghiscoding.github.io/slickgrid-universal/#/example06) +- Bootstrap Theme - visit [Angular-Slickgrid](https://github.com/ghiscoding/Angular-Slickgrid), [Aurelia-Slickgrid](https://github.com/ghiscoding/arelia-slickgrid) or [Slickgrid-React](https://github.com/ghiscoding/slickgrid-react) ### Using built-in Themes -The Material & Salesforce Themes are now using SVGs for the icons used by the grid. Each built-in Themes have CSS and SASS files associated with each theme. To take benefit of this, just import whichever CSS/SASS file associated with the Theme you wish to use. +The Material & Salesforce Themes are using SVGs internally for the icons used by the grid. Each built-in Themes have CSS and SASS files associated with each theme. To take benefit of this, just import whichever CSS/SASS file associated with the Theme you wish to use. ##### with CSS ```scss @@ -59,188 +62,156 @@ For example, if we take the following 3 SASS variables (`$slick-header-menu-disp } ``` -**NOTE:** you could use `:host` to only change current grid styling, **however** there are many DOM elements that are appended to the Document `body` (Grid Menu, Column Picker, Select Filter/Editor, Context Menu, ...) and the style **will not** be applied with `:host` and so in most cases you would want to use `:root` to make a global change which will also work with elements appended to the `body`. Also note that `:root` is not available in Salesforce LWC, so you won't be able to style everything in Salesforce. +> **Note:** you could use `:host` to only change current grid styling, **however** there are many DOM elements that are appended to the DOM `body` (Grid Menu, Column Picker, Select Filter/Editor, Context Menu, ...) and the styles **will not** be applied when simply using `:host` and so in most cases you would want to use `:root` (if possible) to make a global change which will also work with elements appended to the `body`. Also note that `:root` is not available in Salesforce LWC and so you unfortunately won't be able to style everything in Salesforce. ### Using Custom SVGs with SASS -You could use Custom SVGs and create your own Theme and/or a different set of SVG Icons, each of the icons used in Slickgrid-Universal has an associated SASS variables which allow you to override any one of them. All grid of the icons are loaded with the `content` property of the `:before` pseudo (for example, see this [line](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/slick-bootstrap.scss#L322) and the difference between Font and SVG is simple, if you want to use a Font then you use the Font unicode but if you want an SVG then you use a `url` with `svg+xml` as shown below. - -##### with Font -```scss -$slick-primary-color: blue; -$slick-icon-sort-color: $slick-primary-color -$slick-icon-sort-asc: "\f0d8"; -$slick-icon-sort-desc: "\f0d7"; -$slick-icon-sort-font-size: 13px; -$slick-icon-sort-width: 13px; - -// then on the last line, import the Theme that you wish to override -@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss'; -``` +You could use Custom SVGs and create your own Theme and/or a different set of SVG Icons, each of the icons used in Slickgrid-Universal has an associated SASS variables ending with the suffix `"icon-svg-path"` which allow you to override any of the SVG path. All grid of the icons are generated by following AntFu's [icons in pure CSS](https://antfu.me/posts/icons-in-pure-css) approach. ##### with SVG ```scss -// a simple utility that will encode a color with hash sign into a valid HTML URL (e.g. #red => %23red) -// you could also skip the use of this and simply manually change # symbol to %23 -@import '@slickgrid-universal/common/dist/styles/sass/sass-utilities'; - $slick-primary-color: blue; - -$slick-icon-sort-color: $slick-primary-color -$slick-icon-sort-asc: url('data:image/svg+xml,'); -$slick-icon-sort-desc: url('data:image/svg+xml,'); -$slick-icon-sort-font-size: 13px; -$slick-icon-sort-width: 13px; +$slick-icon-group-color: $slick-primary-color; +$slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"; +$slick-icon-group-expanded-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"; +$slick-icon-group-font-size: 13px; // then on the last line, import the Theme that you wish to override -@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss'; +@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss'; ``` -### How to change SVG color? -#### The following works for both CSS and SASS -So there's a known caveat with using embedded SVG (which is what this lib does), you can only add color once with the `fill` property and for that I added SASS variables for each icon (for example `$slick-icon-sort-color` for the Sort icon color, or `$slick-icon-color` for all icons) but once you do that it will apply that same color across the document (want it or not). +> **Note** since the SVG are generated by a SASS function, you can easily override an SVG path in SASS but that is not the case with CSS variable. We still have a way to override an SVG via CSS variable but it requires to override the entire SVG content (not just its path) as can be seen below (also notice that the CSS variable is named without the `"-path"` suffix and also note that the URL must be encoded) -##### for CSS and SASS -After lot of research, I found a way to hack it via this SO answer [change any SVGs color via CSS `filter`](https://stackoverflow.com/a/53336754/1212166), for example if we wish to apply a red color on the `mdi-close` icon (for the Draggable Grouping feat), we'll have to do this `filter` ```css -.slick-groupby-remove.mdi-close { - /* close icon - red */ - filter: invert(32%) sepia(96%) saturate(7466%) hue-rotate(356deg) brightness(97%) contrast(120%); +:root { + --slick-checkbox-icon-checked-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"/%3E%3C/svg%3E'); } ``` -You might be thinking, like I did, but how to get this long `filter` calculation??? -For that you can visit the following blog post and use its **[color filter converter](https://dev.to/jsm91/css-filter-generator-to-convert-from-black-to-target-hex-color-188h)** that was posted to answer this SO [question](https://stackoverflow.com/q/42966641/1212166) - -##### for SASS only -There is also a SASS Mixin to convert the color using only SASS as posted [here](https://stackoverflow.com/a/62880368/1212166) in the same SO question. That will be part of the lib soon enough and we'll be able to use it this way (much cleaner): +the SASS equivalent is a lot easier to override ```scss -.slick-groupby-remove.mdi-close { - /* close icon - red */ - @include recolor(#ff0000, 0.8); -} +$slick-checkbox-icon-checked-svg-path: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" ``` -Note that even though the code looks smaller and more human readable, in reality the code produced will still be a `filter` -`@include recolor(#ff0000, 0.8);` will in fact be converted to `filter: invert(32%) sepia(96%) saturate(7466%) hue-rotate(356deg) brightness(97%) contrast(120%);` +### How to change SVG color? +#### The following works for both CSS and SASS +The new version 5.x of this project is now creating SVG icons as pure CSS, this mean that you can colorize the icons the same way that you would change a text color. We also provide a few different color CSS classes which start with the prefixes `$color-` or `$text-color-` (e.g. `$color-primary`). ### SVG Colors - CSS Classes -To help with all of this, we added a few icon colors (basically took the same colors used by Bootstrap [here](https://getbootstrap.com/docs/4.5/utilities/colors/) using CSS `filter` and we also added a `light` and `dark` shades for of each colors (except `color-light`, `color-dark` since there's no need), they both use a 6% lighter/darker shades (you can override the shade with `$color-lighten-percentage` and the same for darken). These colors can be used with the `color-X` (for example `color-primary`), also note that the primary color will follow your `$slick-primary-color` that you might have override (it could also be different in each styling theme, shown below is the Salesforce theme colors). If you find that the colors are not exactly the colors you're looking for, we've also took some colors taken from [UiKit](https://getuikit.com/) and tagged them as `color-alt-X`. - -**NOTE:** You can use these colors on Icon and/or Text **but** remember that we're using CSS `filter` here which is very different compare to using regular CSS `color` or `background-color`. +Since SVG can now be colorize via the `color` the same as any other text, there isn't much to do. However a small subset of default colors is provided that can be used with the SVG icons or any text (basically took the same colors used by Bootstrap [here](https://getbootstrap.com/docs/4.5/utilities/colors/)). We also added a `light` and `dark` shades for of each colors (except `color-light`, `color-dark` since there's no need), they both use a 6% lighter/darker shades (you can override the shade with `$color-lighten-percentage` and the same for darken). These colors can be used with the `color-X` (for example `color-primary`), also note that the primary color will follow your `$slick-primary-color` that you might have already overriden (it could also be different in each styling theme, shown below is the Salesforce theme colors). If you find that the colors are not exactly the colors you're looking for, we've also took some colors taken from [UiKit](https://getuikit.com/) and tagged them as `color-alt-X`. -**NOTE 2:** The `colors.scss` is **only** included in the Material and Salesforce Themes since those are the only 2 themes currently using SVGs. If you wish to use these colors then simply add the necessary css/scss file. +**NOTE 1:** The `colors.scss` is **only** included in the Material and Salesforce Themes since those are the only 2 themes currently using SVGs. If you wish to use these colors then simply add the necessary css/scss file. -![image](https://user-images.githubusercontent.com/643976/90913834-cce92b80-e3aa-11ea-8720-3be5b171288b.png) +![image](https://github.com/ghiscoding/slickgrid-universal/assets/643976/986f16af-4e2b-4961-b2b5-32afc780b078) ```scss // SASS colors -$color-primary: $slick-primary-color; -$color-secondary: #6c757d; -$color-success: #28a745; -$color-danger: #dc3545; -$color-warning: #ffc107; -$color-info: #17a2b8; -$color-light: #f8f9fa; -$color-dark: #343a40; -$color-body: #212529; -$color-muted: #6c757d; -$color-white: #ffffff; -$color-alt-default: #1e87f0; -$color-alt-warning: #faa05a; -$color-alt-danger: #f0506e; -$color-alt-success: #32d296; -$color-se-primary: #3dcd58; -$color-se-link: #42b4e6; -$color-se-link-dark: #337ab7; -$color-se-danger: #b10043; -$color-se-secondary: #9fa0a4; -$color-se-warning: #e47f00; -$color-se-warning-light: #ffd100; +$text-color-primary: $slick-primary-color; +$text-color-secondary: #6c757d; +$text-color-success: #28a745; +$text-color-danger: #dc3545; +$text-color-warning: #ffc107; +$text-color-info: #17a2b8; +$text-color-light: #f8f9fa; +$text-color-dark: #343a40; +$text-color-body: #212529; +$text-color-muted: #6c757d; +$text-color-white: #ffffff; +$text-color-alt-default: #1e87f0; +$text-color-alt-warning: #faa05a; +$text-color-alt-danger: #f0506e; +$text-color-alt-success: #32d296; +$text-color-se-primary: #3dcd58; +$text-color-se-link: #42b4e6; +$text-color-se-link-dark: #337ab7; +$text-color-se-danger: #b10043; +$text-color-se-secondary: #9fa0a4; +$text-color-se-warning: #e47f00; +$text-color-se-warning-light: #ffd100; // lighter/darker shades -$color-lighten-percentage: 6%; -$color-darken-percentage: 6%; +$text-color-lighten-percentage: 6%; +$text-color-darken-percentage: 6%; ``` ##### HTML Color Test ```html
- color-primary - - color-primary-light - - color-primary-dark + text-color-primary - + text-color-primary-light - + text-color-primary-dark
- color-secondary - - color-secondary-light - - color-secondary-dark + text-color-secondary - + text-color-secondary-light - + text-color-secondary-dark
- color-success - - color-success-light - - color-success-dark + text-color-success - + text-color-success-light - + text-color-success-dark
- color-danger - - color-danger-light - - color-danger-dark + text-color-danger - + text-color-danger-light - + text-color-danger-dark
- color-warning - - color-warning-light - - color-warning-dark + text-color-warning - + text-color-warning-light - + text-color-warning-dark
- color-info - - color-info-light - - color-info-dark + text-color-info - + text-color-info-light - + text-color-info-dark
- color-body - - color-body-light - - color-body-dark + text-color-body - + text-color-body-light - + text-color-body-dark
- color-muted - - color-muted-light - - color-muted-dark + text-color-muted - + text-color-muted-light - + text-color-muted-dark
- color-dark + text-color-dark
- color-light + text-color-light
- color-white + text-color-white
- color-alt-default - - color-alt-default-light - - color-alt-default-dark + text-color-alt-default - + text-color-alt-default-light - + text-color-alt-default-dark
- color-alt-warning - - color-alt-warning-light - - color-alt-warning-dark + text-color-alt-warning - + text-color-alt-warning-light - + text-color-alt-warning-dark
- color-alt-success - - color-alt-success-light - - color-alt-success-dark + text-color-alt-success - + text-color-alt-success-light - + text-color-alt-success-dark
- color-alt-danger - - color-alt-danger-light - - color-alt-danger-dark + text-color-alt-danger - + text-color-alt-danger-light - + text-color-alt-danger-dark
-
color-se-primary
+
text-color-se-primary
- color-se-link - - color-se-link-dark + text-color-se-link - + text-color-se-link-dark
-
color-se-secondary
-
color-se-danger
+
text-color-se-secondary
+
text-color-se-danger
- color-se-warning - - 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 c45aa91a9..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 - Material Design 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 efb9b4d2c..00704f2fe 100644 --- a/examples/vite-demo-vanilla-bundle/src/bulma.scss +++ b/examples/vite-demo-vanilla-bundle/src/bulma.scss @@ -3,10 +3,17 @@ [data-theme=light], .theme-light { --bulma-body-color: black; --bulma-body-background-color: white !important; + .button { + // --bulma-scheme-main-l: 99%; + border-color: #acacac; + } } [data-theme=dark], .theme-dark { --bulma-body-color: white; --bulma-body-background-color: #33393e !important; + .button { + border-color: #585858; + } } html, body { @@ -18,6 +25,7 @@ html, body { --bulma-body-background-color: transparent; --bulma-body-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif; --bulma-control-height: 30px; + --bulma-radius-small: 6px; .title { --bulma-title-weight: 600; @@ -32,4 +40,9 @@ html, body { .navbar-item, .navbar-link { color: white; } + .icon.mdi, + .icon .mdi { + height: 1em; + width: 1em; + } } \ No newline at end of file diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example01.html b/examples/vite-demo-vanilla-bundle/src/examples/example01.html index 1d6d069d7..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

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example02.html b/examples/vite-demo-vanilla-bundle/src/examples/example02.html index 591cff688..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

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example03.html b/examples/vite-demo-vanilla-bundle/src/examples/example03.html index 18a44f9eb..569227142 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example03.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example03.html @@ -1,12 +1,18 @@

Example 03 - Draggable Grouping (with Salesforce Theme) + + +
see - code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example03.ts b/examples/vite-demo-vanilla-bundle/src/examples/example03.ts index 3cf21f749..182a60e2b 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example03.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example03.ts @@ -35,6 +35,7 @@ interface ReportItem { export default class Example03 { private _bindingEventService: BindingEventService; + private _darkMode = false; columnDefinitions: Column[]; gridOptions: GridOption; dataset: any[]; @@ -68,6 +69,8 @@ export default class Example03 { dispose() { this.sgb?.dispose(); this._bindingEventService.unbindAll(); + document.querySelector('.demo-container')?.classList.remove('dark-mode'); + document.body.setAttribute('data-theme', 'light'); } initializeGrid() { @@ -84,7 +87,7 @@ export default class Example03 { filterable: true, grouping: { getter: 'title', - formatter: (g) => `Title: ${g.value} (${g.count} items)`, + formatter: (g) => `Title: ${g.value} (${g.count} items)`, aggregators: [new Aggregators.Sum('cost')], aggregateCollapsed: false, collapsed: false @@ -104,7 +107,7 @@ export default class Example03 { groupTotalsFormatter: GroupTotalFormatters.sumTotals, grouping: { getter: 'duration', - formatter: (g) => `Duration: ${g.value} (${g.count} items)`, + formatter: (g) => `Duration: ${g.value} (${g.count} items)`, comparer: (a, b) => { return this.durationOrderByCount ? (a.count - b.count) : SortComparers.numeric(a.value, b.value, SortDirectionNumber.asc); }, @@ -125,7 +128,7 @@ export default class Example03 { type: FieldType.number, grouping: { getter: 'cost', - formatter: (g) => `Cost: ${g.value} (${g.count} items)`, + formatter: (g) => `Cost: ${g.value} (${g.count} items)`, aggregators: [ new Aggregators.Sum('cost') ], @@ -146,7 +149,7 @@ export default class Example03 { groupTotalsFormatter: GroupTotalFormatters.avgTotalsPercentage, grouping: { getter: 'percentComplete', - formatter: (g) => `% Complete: ${g.value} (${g.count} items)`, + formatter: (g) => `% Complete: ${g.value} (${g.count} items)`, aggregators: [ new Aggregators.Sum('cost') ], @@ -164,7 +167,7 @@ export default class Example03 { editor: { model: Editors.date }, grouping: { getter: 'start', - formatter: (g) => `Start: ${g.value} (${g.count} items)`, + formatter: (g) => `Start: ${g.value} (${g.count} items)`, aggregators: [ new Aggregators.Sum('cost') ], @@ -181,7 +184,7 @@ export default class Example03 { filterable: true, filter: { model: Filters.dateRange }, grouping: { getter: 'finish', - formatter: (g) => `Finish: ${g.value} (${g.count} items)`, + formatter: (g) => `Finish: ${g.value} (${g.count} items)`, aggregators: [ new Aggregators.Sum('cost') ], @@ -203,7 +206,7 @@ export default class Example03 { formatter: Formatters.checkmarkMaterial, grouping: { getter: 'effortDriven', - formatter: (g) => `Effort-Driven: ${g.value ? 'True' : 'False'} (${g.count} items)`, + formatter: (g) => `Effort-Driven: ${g.value ? 'True' : 'False'} (${g.count} items)`, aggregators: [ new Aggregators.Sum('duration'), new Aggregators.Sum('cost') @@ -215,7 +218,7 @@ export default class Example03 { id: 'action', name: 'Action', field: 'action', width: 100, maxWidth: 100, excludeFromExport: true, formatter: () => { - return `
Action ▼
`; + return `
Action ▼
`; }, cellMenu: { hideCloseButton: false, @@ -309,8 +312,7 @@ export default class Example03 { draggableGrouping: { dropPlaceHolderText: 'Drop a column header here to group by the column', // hideGroupSortIcons: true, - // groupIconCssClass: 'fa fa-outdent', - deleteIconCssClass: 'mdi mdi-close color-danger', + deleteIconCssClass: 'mdi mdi-close text-color-danger', sortAscIconCssClass: 'mdi mdi-arrow-up', sortDescIconCssClass: 'mdi mdi-arrow-down', onGroupChanged: (_e, args) => this.onGroupChanged(args), @@ -443,6 +445,18 @@ export default class Example03 { this.sgb?.slickGrid?.setPreHeaderPanelVisibility(true); } + toggleDarkMode() { + this._darkMode = !this._darkMode; + if (this._darkMode) { + document.body.setAttribute('data-theme', 'dark'); + document.querySelector('.demo-container')?.classList.add('dark-mode'); + } else { + document.body.setAttribute('data-theme', 'light'); + document.querySelector('.demo-container')?.classList.remove('dark-mode'); + } + this.sgb.slickGrid?.setOptions({ darkMode: this._darkMode }); + } + toggleDraggableGroupingRow() { this.clearGroupsAndSelects(); this.sgb?.slickGrid?.setPreHeaderPanelVisibility(!this.sgb?.slickGrid?.getOptions().showPreHeaderPanel); diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example04.html b/examples/vite-demo-vanilla-bundle/src/examples/example04.html index 0b99703de..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

@@ -18,14 +18,14 @@
- - diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example04.ts b/examples/vite-demo-vanilla-bundle/src/examples/example04.ts index dd2552b6d..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', @@ -424,16 +424,16 @@ export default class Example04 { } }, optionItems: [ - { option: 0, iconCssClass: 'mdi mdi-checkbox-blank-outline color-secondary', title: 'Not Started (0%)' }, + { 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 color-success', title: 'Completed (100%)' }, + { 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: 'mdi mdi-checkbox-blank-outline color-secondary', title: 'Not Started (0%)' }, + { 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 color-success', title: 'Completed (100%)' }, + { option: 100, iconCssClass: 'mdi mdi-checkbox-marked text-color-success', title: 'Completed (100%)' }, ] } ], diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example05.html b/examples/vite-demo-vanilla-bundle/src/examples/example05.html index 95acc78c9..23106916e 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example05.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example05.html @@ -7,7 +7,7 @@

- code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example05.scss b/examples/vite-demo-vanilla-bundle/src/examples/example05.scss index 4e3c31f91..d60049ada 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example05.scss +++ b/examples/vite-demo-vanilla-bundle/src/examples/example05.scss @@ -1 +1,9 @@ // @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss'; + +.grid5 { + .slick-cell { + display: inline-flex; + align-items: center; + gap: 4px; + } +} \ No newline at end of file diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example05.ts b/examples/vite-demo-vanilla-bundle/src/examples/example05.ts index 99a7ded30..b98dfdf64 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example05.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example05.ts @@ -77,7 +77,7 @@ export default class Example05 { showSpinner() { if (this.isLargeDataset) { - this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-24px color-alt-success'; + this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-24px text-color-alt-success'; } } @@ -252,7 +252,7 @@ export default class Example05 { titleFormatter: (_row, _cell, value, _def, dataContext) => { let titleResult = ''; if (dataContext.treeLevel > 0) { - titleResult = ``; + titleResult = ``; } titleResult += `${value}`; if (dataContext.parentId) { diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example06.html b/examples/vite-demo-vanilla-bundle/src/examples/example06.html index 8823bf2f8..8f07e657b 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example06.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example06.html @@ -6,7 +6,7 @@

Example 06 - Tree Data with Aggregators - code + code

@@ -63,7 +63,7 @@

- +

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example06.scss b/examples/vite-demo-vanilla-bundle/src/examples/example06.scss index 9f2aba6f9..2bd1ce618 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example06.scss +++ b/examples/vite-demo-vanilla-bundle/src/examples/example06.scss @@ -1,7 +1,12 @@ // @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss'; -@import '@slickgrid-universal/common/dist/styles/sass/sass-utilities.scss'; .grid6 { + .slick-cell { + display: inline-flex; + align-items: center; + gap: 4px; + } + .avg-total { color: #ac76ff; } @@ -16,25 +21,26 @@ } .mdi-file-pdf-outline { - /** 1. use `filter` color */ - // filter: invert(62%) sepia(93%) saturate(5654%) hue-rotate(325deg) brightness(100%) contrast(90%); - - /** 2. or use the SASS @mixin that will produce the `filter` color */ - @include recolor(#f14668, 0.9); + color: #f14668; + opacity: 0.9; } .mdi-folder, .mdi-folder-open { - @include recolor(#ffa500, 0.9); + color: #ffa500; + opacity: 0.9; } .mdi-file-music-outline { - @include recolor(#3298dc, 0.9); + color: #3298dc; + opacity: 0.9; } .mdi-file-excel-outline { - @include recolor(#1E9F75, 0.9); + color: #1E9F75; + opacity: 0.9; } .mdi-file-document-outline, .mdi-file-question-outline { - @include recolor(#686868, 0.9); + color: #686868; + opacity: 0.9; } } .display-inline-block { diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example06.ts b/examples/vite-demo-vanilla-bundle/src/examples/example06.ts index b77ef9cf6..a346a680a 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example06.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example06.ts @@ -41,12 +41,12 @@ export default class Example06 { this.datasetHierarchical = this.mockDataset(); const gridContainerElm = document.querySelector('.grid6') as HTMLDivElement; this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, undefined, this.datasetHierarchical); - document.body.classList.add('material-theme'); + document.body.classList.add('salesforce-theme'); } dispose() { this.sgb?.dispose(); - document.body.classList.remove('material-theme'); + document.body.classList.remove('salesforce-theme'); } initializeGrid() { @@ -97,10 +97,10 @@ export default class Example06 { if (avgVal !== undefined && sumVal !== undefined) { // when found Avg & Sum, we'll display both - return isNaN(sumVal) ? '' : `sum: ${decimalFormatted(sumVal, 0, 2)} MB / avg: ${decimalFormatted(avgVal, 0, 2)} MB (${treeLevel === 0 ? 'total' : 'sub-total'})`; + return isNaN(sumVal) ? '' : `sum: ${decimalFormatted(sumVal, 0, 2)} MB / avg: ${decimalFormatted(avgVal, 0, 2)} MB (${treeLevel === 0 ? 'total' : 'sub-total'})`; } else if (sumVal !== undefined) { // or when only Sum is aggregated, then just show Sum - return isNaN(sumVal) ? '' : `sum: ${decimalFormatted(sumVal, 0, 2)} MB (${treeLevel === 0 ? 'total' : 'sub-total'})`; + return isNaN(sumVal) ? '' : `sum: ${decimalFormatted(sumVal, 0, 2)} MB (${treeLevel === 0 ? 'total' : 'sub-total'})`; } } // reaching this line means it's a regular dataContext without totals, so regular formatter output will be used @@ -132,7 +132,7 @@ export default class Example06 { enableFiltering: true, enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected multiColumnSort: false, // multi-column sorting is not supported with Tree Data, so you need to disable it - rowHeight: 40, + rowHeight: 35, treeDataOptions: { columnId: 'file', childrenPropName: 'files', diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.html b/examples/vite-demo-vanilla-bundle/src/examples/example07.html index bb0f27338..a38bdb013 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example07.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example07.html @@ -10,7 +10,7 @@

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 31370f755..b5342c067 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts @@ -78,7 +78,7 @@ export default class Example07 { { id: 'action', name: 'Action', field: 'action', minWidth: 60, maxWidth: 60, excludeFromExport: true, excludeFromHeaderMenu: true, - formatter: () => `
`, + formatter: () => `
`, cellMenu: { hideCloseButton: false, subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', @@ -86,7 +86,7 @@ export default class Example07 { commandItems: [ { command: 'command1', titleKey: 'DELETE_ROW', - iconCssClass: 'mdi mdi-close color-danger', 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); @@ -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)), }, @@ -403,7 +403,7 @@ export default class Example07 {
-
@@ -439,7 +439,7 @@ export default class Example07 { document.querySelector('#modal-allFilter-table')!.innerHTML = innerHtml + `
${columnFilter.name}
-
+
`; grid?.filterService.drawFilterTemplate(columnFilter, `#${filterElm}`); } diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example08.html b/examples/vite-demo-vanilla-bundle/src/examples/example08.html index 5f6ad2c48..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,7 +50,7 @@

Grid 1 (with Header Grouping & Colspan) + +
see - code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example10.ts b/examples/vite-demo-vanilla-bundle/src/examples/example10.ts index 46f52dcf7..2760e2401 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example10.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example10.ts @@ -26,6 +26,7 @@ const FAKE_SERVER_DELAY = 250; export default class Example10 { private _bindingEventService: BindingEventService; + private _darkMode = false; columnDefinitions: Column[]; gridOptions: GridOption; dataset = []; @@ -68,6 +69,8 @@ export default class Example10 { this._bindingEventService.unbindAll(); // this.saveCurrentGridState(); document.body.classList.remove('material-theme'); + document.body.setAttribute('data-theme', 'light'); + document.querySelector('.demo-container')?.classList.remove('dark-mode'); } initializeGrid() { @@ -356,6 +359,23 @@ export default class Example10 { this.selectedLanguageFile = `${this.selectedLanguage}.json`; } + toggleDarkMode() { + this._darkMode = !this._darkMode; + this.toggleBodyBackground(); + this.sgb.gridOptions = { ...this.sgb.gridOptions, darkMode: this._darkMode }; + this.sgb.slickGrid?.setOptions({ darkMode: this._darkMode }); + } + + toggleBodyBackground() { + if (this._darkMode) { + document.body.setAttribute('data-theme', 'dark'); + document.querySelector('.demo-container')?.classList.add('dark-mode'); + } else { + document.body.setAttribute('data-theme', 'light'); + document.querySelector('.demo-container')?.classList.remove('dark-mode'); + } + } + private resetOptions(options: Partial) { const graphqlService = this.gridOptions.backendServiceApi!.service as GraphqlService; this.sgb?.paginationService!.setCursorBased(options.useCursor!); diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11.html b/examples/vite-demo-vanilla-bundle/src/examples/example11.html index 386cd1ccc..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

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts index 0545cbc14..40af7bf03 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts @@ -270,7 +270,7 @@ 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; diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.html b/examples/vite-demo-vanilla-bundle/src/examples/example12.html index 3d20a7525..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 76de21bce..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', @@ -386,7 +386,7 @@ export default class Example12 { 'divider', { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-close color-danger', cssClass: 'red', textCssClass: 'text-italic color-danger-light', + 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; @@ -972,7 +972,7 @@ export default class Example12 { modalTitle = 'Clone - {{title}}'; break; case 'edit': - modalTitle = 'Editing - {{title}} (id: {{id}})'; // 'Editing - {{title}} ({{product.itemName}})' + modalTitle = 'Editing - {{title}} (id: {{id}})'; // 'Editing - {{title}} ({{product.itemName}})' break; case 'mass-update': modalTitle = 'Mass Update All Records'; diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example13.html b/examples/vite-demo-vanilla-bundle/src/examples/example13.html index 37807dd8b..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 649bd2e42..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 === 'mdi mdi-lightbulb-on 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 = 'mdi mdi-lightbulb-outline 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 = 'mdi mdi-lightbulb-on 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: 'mdi mdi-lightbulb-outline color-warning faded', + cssClass: 'mdi mdi-lightbulb-outline text-color-warning faded', command: 'toggle-highlight', tooltip: 'Highlight negative numbers.', itemVisibilityOverride: (args) => { diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.html b/examples/vite-demo-vanilla-bundle/src/examples/example14.html index b2a2ffcba..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

@@ -59,7 +59,7 @@

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 7c5291cb6..f8fadce2b 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts @@ -93,7 +93,7 @@ export default class Example14 { isGridEditable = true; classDefaultResizeButton = 'button is-small'; classNewResizeButton = 'button is-small is-selected is-primary'; - editQueue: Array<{ item: any; columns: Column[]; editCommand: EditCommand }> = []; + editQueue: Array<{ item: any; columns: Column[]; editCommand: EditCommand; }> = []; editedItems = {}; sgb: SlickVanillaGridBundle; gridContainerElm: HTMLDivElement; @@ -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', @@ -341,7 +341,7 @@ export default class Example14 { 'divider', { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-close color-danger', cssClass: 'red', textCssClass: 'text-italic 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; @@ -507,7 +507,7 @@ export default class Example14 { } showSpinner() { - this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-24px color-alt-success'; + this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-24px text-color-alt-success'; } loadData(count: number) { diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example15.html b/examples/vite-demo-vanilla-bundle/src/examples/example15.html index 0cb16b155..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

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example15.ts b/examples/vite-demo-vanilla-bundle/src/examples/example15.ts index d553fb150..75ac5c3f5 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example15.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example15.ts @@ -279,7 +279,7 @@ export default class Example15 { if (param.includes('$filter=')) { const filterBy = param.substring('$filter='.length).replace('%20', ' '); if (filterBy.includes('contains')) { - const filterMatch = filterBy.match(/contains\(([a-zA-Z\/]+),\s?'(.*?)'/); + const filterMatch = filterBy.match(/contains\(([a-zA-Z/]+),\s?'(.*?)'/); const fieldName = filterMatch[1].trim(); columnFilters[fieldName] = { type: 'substring', term: filterMatch[2].trim() }; } @@ -324,7 +324,7 @@ export default class Example15 { ? 'DESC' : ''; - let data = Data as unknown as { name: string; gender: string; company: string; id: string, category: { id: string; name: string } }[]; + let data = Data as unknown as { name: string; gender: string; company: string; id: string, category: { id: string; name: string; }; }[]; switch (sort) { case 'ASC': data = data.sort((a, b) => a.name.localeCompare(b.name)); @@ -424,7 +424,7 @@ export default class Example15 { // display random address and zip code to simulate company address const randomStreet = dataContext.id % 3 ? 'Belleville' : 'Hollywood'; - return `
${tooltipTitle}
+ return `
${tooltipTitle}
Address:
${dataContext.__params.doorNumber.toFixed(0)} ${randomStreet} blvd
Zip:
${dataContext.__params.zip.toFixed(0)}
`; } diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.html b/examples/vite-demo-vanilla-bundle/src/examples/example16.html index c0368efd2..25f2e5f16 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example16.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example16.html @@ -12,7 +12,7 @@

- code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.scss b/examples/vite-demo-vanilla-bundle/src/examples/example16.scss index 5a9cdcdff..f6c88923d 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example16.scss +++ b/examples/vite-demo-vanilla-bundle/src/examples/example16.scss @@ -27,35 +27,53 @@ // it's preferable to use CSS Variables (or SASS) but if you want to change colors of your tooltip for 1 column in particular you can do it this way // e.g. change css of 5th column 4 (zero index: l4) -.l4 { - --slick-tooltip-color: #fff; +.grid16-tooltip { + &.l4 { + --slick-tooltip-color: #fff; + } + &.l4 .header-tooltip-title, + &.l4 .headerrow-tooltip-title { + color: #ffffff; + } + &.l4 { + color: #ffffff; + background-color: #696969; + border: 2px solid #545454; + } + &.l4.arrow-down::after, + &.l4.arrow-up::after { + border-width: 10px; // arrow size + } + &.l4.arrow-down::after { + border-top-color: #464646; // arrow down color + } + &.l4.arrow-up::after { + top: -20px; // arrow size * 2 + border-bottom-color: #464646; // arrow up color + } + &.l4.arrow-left-align::after { + margin-left: 15px; + } + &.l4.arrow-right-align::after { + margin-left: calc(100% - 20px - 15px); // 20px is (arrow size * 2), 15px is your extra side margin + } + &.l6.arrow-left-align::after { + margin-left: 4px; + } } -.l4 .header-tooltip-title, -.l4 .headerrow-tooltip-title { - color: #ffffff; -} -.l4.slick-custom-tooltip { - color: #ffffff; - background-color: #696969; - border: 2px solid #545454; -} -.l4.slick-custom-tooltip.arrow-down::after, -.l4.slick-custom-tooltip.arrow-up::after { - border-width: 10px; // arrow size -} -.l4.slick-custom-tooltip.arrow-down::after { - border-top-color: #464646; // arrow down color -} -.l4.slick-custom-tooltip.arrow-up::after { - top: -20px; // arrow size * 2 - border-bottom-color: #464646; // arrow up color -} -.l4.slick-custom-tooltip.arrow-left-align::after { - margin-left: 15px; -} -.l4.slick-custom-tooltip.arrow-right-align::after { - margin-left: calc(100% - 20px - 15px); // 20px is (arrow size * 2), 15px is your extra side margin -} -.l6.slick-custom-tooltip.arrow-left-align::after { - margin-left: 4px; + +[data-theme=dark] .grid16-tooltip { + --slick-tooltip-color: #dadada; + --slick-tooltip-border: 1px solid #5a5a5a; + --slick-tooltip-background-color: #414141; + --slick-tooltip-arrow-color: #707070; + + &.l4 { + --slick-tooltip-color: #dadada; + --slick-tooltip-background-color: #a7a7a7; + --slick-tooltip-border: 2px solid #999999; + } + .text-color-primary { + color: #83c5ff; + } } \ No newline at end of file diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.ts b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts index 5ac4fa6cc..4f6e37153 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example16.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts @@ -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 @@ -354,6 +354,7 @@ export default class Example16 { // Custom Tooltip options can be defined in a Column or Grid Options or a mixed of both (first options found wins) externalResources: [new SlickCustomTooltip(), new ExcelExportService(), new TextExportService()], customTooltip: { + className: 'grid16-tooltip', formatter: this.tooltipFormatter.bind(this), headerFormatter: this.headerFormatter, headerRowFormatter: this.headerRowFormatter, @@ -481,7 +482,7 @@ export default class Example16 { // use a 2nd Formatter to get the percent completion // any properties provided from the `asyncPost` will end up in the `__params` property (unless a different prop name is provided via `asyncParamsPropName`) const completionBar = Formatters.percentCompleteBarWithText(row, cell, dataContext.percentComplete, column, dataContext, grid) as HTMLElement; - const out = `
${tooltipTitle}
+ const out = `
${tooltipTitle}
Completion:
${completionBar.outerHTML || ''}
Lifespan:
${dataContext.__params.lifespan.toFixed(2)}
Ratio:
${dataContext.__params.ratio.toFixed(2)}
@@ -504,7 +505,7 @@ export default class Example16 { iconCount = 5; } for (let i = 0; i < iconCount; i++) { - const iconColor = iconCount === 5 ? 'color-success' : iconCount >= 3 ? 'color-alt-warning' : 'color-se-secondary-light'; + const iconColor = iconCount === 5 ? 'text-color-success' : iconCount >= 3 ? 'text-color-alt-warning' : 'text-color-se-secondary-light'; 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 620ea47e5..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/example17.ts b/examples/vite-demo-vanilla-bundle/src/examples/example17.ts index 289178712..e8d3b7060 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example17.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example17.ts @@ -46,7 +46,7 @@ export default class Example17 { /* Define grid Options and Columns */ defineGrids() { this.columnDefinitions1 = [ - { id: 'sel', name: '#', field: 'id', cssClass: 'cell-unselectable', resizable: false, selectable: false, focusable: false, width: 40 }, + { id: 'sel', name: '#', field: 'id', cssClass: 'cell-unselectable', resizable: false, selectable: false, focusable: false, width: 40, excludeFromHeaderMenu: true }, { id: 'title', name: 'Title', field: 'title', cssClass: 'cell-title', sortable: true, width: 90, filterable: true }, { id: 'duration', name: 'Duration', field: 'duration', width: 90, sortable: true, filterable: true, groupTotalsFormatter: GroupTotalFormatters.sumTotals }, { id: '%', name: '% Complete', field: 'percentComplete', width: 90, sortable: true, filterable: true, formatter: Formatters.percentCompleteBar }, diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example18.html b/examples/vite-demo-vanilla-bundle/src/examples/example18.html index 57a1cb1c4..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

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example18.ts b/examples/vite-demo-vanilla-bundle/src/examples/example18.ts index 977d54303..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 = `mdi mdi-arrow-${direction} 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'); @@ -176,7 +176,7 @@ export default class Example18 { }, draggableGrouping: { dropPlaceHolderText: 'Drop a column header here to group by any of these available columns: Currency, Market or Type', - deleteIconCssClass: 'mdi mdi-close color-danger', + deleteIconCssClass: 'mdi mdi-close text-color-danger', sortAscIconCssClass: 'mdi mdi-arrow-up', sortDescIconCssClass: 'mdi mdi-arrow-down', }, diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example19.html b/examples/vite-demo-vanilla-bundle/src/examples/example19.html index 759f9ac72..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

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example20.html b/examples/vite-demo-vanilla-bundle/src/examples/example20.html index da0149a3c..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 c0f5b5ce0..6f82bbfa2 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example21.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example21.html @@ -1,29 +1,41 @@

Example 21 - Row Detail View (with Salesforce Theme) + + + +
see - code + code

-    - + + + + + +
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example21.scss b/examples/vite-demo-vanilla-bundle/src/examples/example21.scss index 04ca7d0ae..5939146c1 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example21.scss +++ b/examples/vite-demo-vanilla-bundle/src/examples/example21.scss @@ -1,94 +1,104 @@ -.detail { - padding: 5px -} -.preload { - font-size: 18px; -} -.detail { - display: flex; - align-items: center; - max-width: 450px; - // border-bottom: 1px solid #e8e8e8; +.grid21 { + .slick-cell { + display: inline-flex; + align-items: center; + gap: 4px; + } + .preload { + font-size: 18px; + } + .detail { + display: flex; + align-items: center; + max-width: 450px; + padding: 5px; + border-bottom: 1px solid #e8e8e8; - label { - font-weight: 600; - font-size: 16px; - margin-right: 10px; - flex-grow: 1; + label { + font-weight: 600; + font-size: 16px; + margin-right: 10px; + flex-grow: 1; + } + span { + font-size: 15px; + } } - span { - font-size: 15px; + + input.filter { + border: 1px solid #dadada; + border-radius: 2px; + } + input.filter::placeholder { + opacity: 0.4; + } + .dynamic-cell-detail { + // background-color: #f8f8f8; + } + .dynamic-cell-detail > :first-child { + vertical-align: middle; + line-height: 13px; + padding: 10px; + margin-left: 20px; + } + .slick-headerrow-column { + background: #f1f1f1; + text-overflow: clip; + box-sizing: border-box; } -} -input.filter { - border: 1px solid #dadada; - border-radius: 2px; -} -input.filter::placeholder { - opacity: 0.4; -} -.dynamic-cell-detail { - box-shadow: inset 0 0 0 1px #b0c1d0; - background-color: #f8f8f8; -} -.dynamic-cell-detail > :first-child { - vertical-align: middle; - line-height: 13px; - padding: 10px; - margin-left: 20px; -} -.slick-headerrow-column { - background: #f1f1f1; - text-overflow: clip; - box-sizing: border-box; -} + .slick-headerrow-column input { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + -moz-box-sizing: border-box; + box-sizing: border-box; + } -.slick-headerrow-column input { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - -moz-box-sizing: border-box; - box-sizing: border-box; -} + /* Style the tab */ + .tab { + overflow: hidden; + border: 1px solid #ccc; + background-color: #f1f1f1; + } -/* Style the tab */ -.tab { - overflow: hidden; - border: 1px solid #ccc; - background-color: #f1f1f1; -} + /* Style the buttons inside the tab */ + .tab button { + background-color: inherit; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + font-size: 17px; + } -/* Style the buttons inside the tab */ -.tab button { - background-color: inherit; - float: left; - border: none; - outline: none; - cursor: pointer; - padding: 14px 16px; - transition: 0.3s; - font-size: 17px; -} + /* Change background color of buttons on hover */ + .tab button:hover { + background-color: #ddd; + } -/* Change background color of buttons on hover */ -.tab button:hover { - background-color: #ddd; -} + /* Create an active/current tablink class */ + .tab button.active { + background-color: #ccc; + } -/* Create an active/current tablink class */ -.tab button.active { - background-color: #ccc; + /* Style the tab content */ + .tabcontent { + display: none; + padding: 6px 12px; + border: 1px solid #ccc; + border-top: none; + } + .options-panel { + width: 375px; + } } -/* Style the tab content */ -.tabcontent { - display: none; - padding: 6px 12px; - border: 1px solid #ccc; - border-top: none; -} -.options-panel { - width: 375px; -} \ No newline at end of file +// .slick-dark-mode { +// .dynamic-cell-detail { +// background-color: #3c4349; +// } +// } \ No newline at end of file diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example21.ts b/examples/vite-demo-vanilla-bundle/src/examples/example21.ts index c50772d17..4a78a3b4f 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example21.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example21.ts @@ -24,12 +24,15 @@ interface ItemDetail extends Item { export default class Example21 { private _bindingEventService: BindingEventService; + private _darkMode = false; private _eventHandler: SlickEventHandler; + isGridEditable = false; detailViewRowCount = 7; gridOptions!: GridOption; columnDefinitions!: Column[]; dataset!: Item[]; sgb!: SlickVanillaGridBundle; + serverApiDelay = 400; status = ''; statusClass = ''; gridContainerElm: HTMLDivElement; @@ -61,9 +64,12 @@ export default class Example21 { } dispose() { + console.log('dispose'); this._eventHandler.unsubscribeAll(); this._bindingEventService.unbindAll(); this.sgb?.dispose(); + document.querySelector('.demo-container')?.classList.remove('dark-mode'); + document.body.setAttribute('data-theme', 'light'); } /* Define grid Options and Columns */ @@ -120,6 +126,25 @@ export default class Example21 { return true; } + toggleGridEditReadonly() { + // then change a single grid options to make the grid non-editable (readonly) + this.isGridEditable = !this.isGridEditable; + if (this.isGridEditable) { + this.rowDetail.collapseAll(); + this.rowDetail.addonOptions.useRowClick = false; + this.gridOptions.autoCommitEdit = !this.gridOptions.autoCommitEdit; + this.sgb.slickGrid?.setOptions({ + editable: true, + autoEdit: true, + enableCellNavigation: true, + }); + } else { + this.rowDetail.addonOptions.useRowClick = true; + this.sgb.gridOptions = { ...this.sgb.gridOptions, editable: this.isGridEditable }; + this.gridOptions = this.sgb.gridOptions; + } + } + closeAllRowDetail() { this.rowDetail.collapseAll(); } @@ -151,8 +176,8 @@ export default class Example21 { this._eventHandler.subscribe(this.rowDetail.onAsyncEndUpdate, (_e, args) => { console.log('finished updating the post async template', args); - this.handleDeleteRowOnClick(args.item.id); - this.handleAssigneeOnClick(args.item.id); + this.addDeleteRowOnClickListener(args.item.id); + this.addAssigneeOnClickListener(args.item.id); }); // the following subscribers can be useful to Save/Re-Render a View @@ -162,21 +187,21 @@ export default class Example21 { }); this._eventHandler.subscribe(this.rowDetail.onRowBackToViewportRange, (_e, args) => { - this.handleDeleteRowOnClick(args.item.id); - this.handleAssigneeOnClick(args.item.id); + this.addDeleteRowOnClickListener(args.item.id); + this.addAssigneeOnClickListener(args.item.id); }); } /** 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: 'mdi mdi-load mdi-spin-1s mdi-v-align-middle mdi-40px' })); + headerElm.appendChild(createDomElement('i', { className: 'mdi mdi-load mdi-spin-1s mdi-40px' })); headerElm.appendChild(document.createTextNode('Loading...')); return headerElm; } - /** Row Detail View, can be an HTML string or an HTML Element */ + /** Row Detail View, can be an HTML string or an HTML Element (we'll use HTML string for simplicity of the demo) */ loadView(itemDetail: ItemDetail) { return `
@@ -227,7 +252,7 @@ export default class Example21 { // resolve the data after delay specified resolve(itemDetail); - }, 1000); + }, this.serverApiDelay); }); } @@ -240,14 +265,14 @@ export default class Example21 { }, undefined, this); } - handleDeleteRowOnClick(itemId: string) { + addDeleteRowOnClickListener(itemId: string) { const deleteBtnElm = document.querySelector('#delete_row_' + itemId); if (deleteBtnElm) { this._bindingEventService.bind(deleteBtnElm, 'click', this.handleDeleteRow.bind(this, itemId), undefined, `event-detail-${itemId}`); } } - handleAssigneeOnClick(itemId: string) { + addAssigneeOnClickListener(itemId: string) { const assigneeBtnElm = document.querySelector('#who-is-assignee_' + itemId); if (assigneeBtnElm) { this._bindingEventService.bind(assigneeBtnElm, 'click', this.handleAssigneeClicked.bind(this, itemId), undefined, `event-detail-${itemId}`); @@ -309,4 +334,18 @@ export default class Example21 { randomNumber(min: number, max: number) { return Math.floor(Math.random() * (max - min + 1) + min); } + + toggleDarkMode() { + this._darkMode = !this._darkMode; + if (this._darkMode) { + document.body.setAttribute('data-theme', 'dark'); + document.querySelector('.demo-container')?.classList.add('dark-mode'); + } else { + document.body.setAttribute('data-theme', 'light'); + document.querySelector('.demo-container')?.classList.remove('dark-mode'); + } + // we must close all row details because the grid is invalidated and the events listeners will stop working because they are detached after re-rendering + this.closeAllRowDetail(); + this.sgb.slickGrid?.setOptions({ darkMode: this._darkMode }); + } } diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example22.html b/examples/vite-demo-vanilla-bundle/src/examples/example22.html index 2584aa267..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 2e9ababcf..8cc705e12 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example22.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example22.ts @@ -88,7 +88,7 @@ export default class Example22 { minWidth: 100, filterable: true, type: FieldType.number, - editor: { model: Editors.text, validator: (val) => (val > 100 ? { msg: 'Max 100% allowed', valid: false} : { msg: '', valid: true}) }, + editor: { model: Editors.text, validator: (val) => (val > 100 ? { msg: 'Max 100% allowed', valid: false } : { msg: '', valid: true }) }, }, { id: 'start', @@ -192,18 +192,18 @@ export default class Example22 { cancelButtonClassName: 'button-style padding-3px', cancelButtonTitle: 'Cancel row', cancelButtonTitleKey: 'RBE_BTN_CANCEL', - iconCancelButtonClassName: 'mdi mdi-undo 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: 'mdi mdi-check color-success', + iconUpdateButtonClassName: 'mdi mdi-check text-color-success', updateButtonPrompt: 'Save changes?', deleteButtonClassName: 'button-style padding-3px', deleteButtonTitle: 'Delete row', - iconDeleteButtonClassName: 'mdi mdi-trash-can 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 375a45e6d..02350566a 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/icons.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/icons.html @@ -1,12 +1,18 @@ -

Material Design Icons +

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

- Material Design Icons - Official Website (+5000 icons) + All icons came from Material Design Icons - Official Website (+5000 icons)

We only keep a small subset of the Material Design Icons, scroll to the bottom to see which ones are included in the @@ -16,35 +22,35 @@

Material Design Icons

Icon Utilities - +

-
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
+
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

Icon Sizes - (from 8px up to 50px) + (from 8px up to 50px)

-
mdi-8px
-
mdi-10px
-
mdi-15px
-
mdi-20px
-
mdi-25px
-
mdi-50px
+
mdi-8px
+
mdi-10px
+
mdi-15px
+
mdi-20px
+
mdi-25px
+
mdi-50px
@@ -54,7 +60,7 @@
text-bold
text-center
text-left
-
text-right
+
text-right
text-lowercase
text-uppercase @@ -69,7 +75,7 @@
Padding & Icons Styled as a Button - (padding from 0px up to 30px) + (padding from 0px up to 30px)

Note, you can use the same pattern with "margin-0px", "padding-0x" and "font-5px" @@ -102,250 +108,218 @@

-
- Icons Alignments - (padding from 0px up to 30px) -
-
-
- - mdi-v-align-bottom -
-
- - mdi-v-align-middle -
-
- mdi-v-align-sub -
-
- mdi-v-align-super -
-
- - mdi-v-align-text-bottom -
-
- - mdi-v-align-text-top -
-
- mdi-v-align-top -
-
-

- Icon Colors + Icon & Text Colors

-
- - color-primary +
+ + text-color-primary
-
- - color-primary-light +
+ + text-color-primary-light
-
- - color-primary-dark +
+ + text-color-primary-dark
-
- - color-secondary +
+ + text-color-secondary
-
- - color-secondary-light +
+ + text-color-secondary-light
-
- - color-secondary-dark +
+ + text-color-secondary-dark
-
- - color-success +
+ + text-color-success
-
- - color-success-light +
+ + text-color-success-light
-
- - color-success-dark +
+ + text-color-success-dark
-
- - color-danger +
+ + text-color-danger
-
- - color-danger-light +
+ + text-color-danger-light
-
- - color-danger-dark +
+ + text-color-danger-dark
-
- - color-warning +
+ + text-color-warning
-
- - color-warning-light +
+ + text-color-warning-light
-
- - color-warning-dark +
+ + text-color-warning-dark
-
- - color-info +
+ + text-color-info
-
- - color-info-light +
+ + text-color-info-light
-
- - color-info-dark +
+ + text-color-info-dark
-
- - color-muted +
+ + text-color-muted
-
- - color-muted-light +
+ + text-color-muted-light
-
- - color-muted-dark +
+ + text-color-muted-dark
-
- - color-alt-default +
+ + text-color-alt-default
-
- - color-alt-default-light +
+ + text-color-alt-default-light
-
- - color-alt-default-dark +
+ + text-color-alt-default-dark
-
- - color-alt-warning +
+ + text-color-alt-warning
-
- - color-alt-warning-light +
+ + text-color-alt-warning-light
-
- - color-alt-warning-dark +
+ + text-color-alt-warning-dark
-
- - color-alt-danger +
+ + text-color-alt-danger
-
- - color-alt-danger-light +
+ + text-color-alt-danger-light
-
- - color-alt-danger-dark +
+ + text-color-alt-danger-dark
-
- - color-alt-success +
+ + text-color-alt-success
-
- - color-alt-success-light +
+ + text-color-alt-success-light
-
- - color-alt-success-dark +
+ + text-color-alt-success-dark
-
- - color-se-primary +
+ + text-color-se-primary
-
- - color-se-link +
+ + text-color-se-link
-
- - color-se-link-dark +
+ + text-color-se-link-dark
-
- - color-se-danger +
+ + text-color-se-danger
-
- - color-se-secondary-light +
+ + text-color-se-secondary-light
-
- - color-se-secondary +
+ + text-color-se-secondary
-
- - color-se-warning +
+ + text-color-se-warning
-
- - color-se-warning-light +
+ + text-color-se-warning-light
-
- - color-sf-highlight +
+ + text-color-sf-highlight
-
- - color-sf-primary +
+ + text-color-sf-primary
-
- - color-sf-primary-dark +
+ + text-color-sf-primary-dark
-
- - color-dark +
+ + text-color-dark
-
- - color-body +
+ + text-color-body
-
- - color-disabled +
+ + text-color-disabled
-
- - color-disabled-dark +
+ + text-color-disabled-dark
-
- - color-light +
+ + text-color-light
-
- - color-white +
+ + text-color-white

Icons currently available in the lib - +

\ No newline at end of file diff --git a/examples/vite-demo-vanilla-bundle/src/examples/icons.scss b/examples/vite-demo-vanilla-bundle/src/examples/icons.scss index 5ca991db5..ee539d95e 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/icons.scss +++ b/examples/vite-demo-vanilla-bundle/src/examples/icons.scss @@ -17,4 +17,16 @@ } .bg-gray { background-color: #3F3E3E; +} +.icon-box { + display: flex; + align-items: center; +} +.button-style { + display: inline-flex; + align-items: center; + justify-content: center; +} +.mr-5px { + margin-right: 5px; } \ No newline at end of file diff --git a/examples/vite-demo-vanilla-bundle/src/examples/icons.ts b/examples/vite-demo-vanilla-bundle/src/examples/icons.ts index d4f617f75..a19cda238 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/icons.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/icons.ts @@ -1,6 +1,8 @@ import './icons.scss'; export default class Icons { + private _darkMode = false; + attached() { const iconContainerElm = document.querySelector(`.icons-container`) as HTMLDivElement; const iconCounter = document.querySelector(`.icon-counter`) as HTMLDivElement; @@ -10,14 +12,18 @@ export default class Icons { icons.forEach((icon) => { const iconDivElm = document.createElement('div'); - iconDivElm.className = 'slick-col-medium-2'; - iconDivElm.style.paddingBottom = '5px'; + iconDivElm.className = 'slick-col-medium-2 icon-box'; + iconDivElm.style.marginBottom = '5px'; const iconElm = document.createElement('span'); iconElm.className = icon.replace(/\./gi, ' '); - iconElm.classList.add('mdi-24px'); + if (icon.includes('mdi-change-record-type')) { + iconElm.classList.add('mdi-20px'); + } else { + iconElm.classList.add('mdi-24px'); + } iconElm.title = icon.replace('.mdi.', ''); - iconElm.style.marginRight = '2px'; + iconElm.style.marginRight = '5px'; iconDivElm.appendChild(iconElm); const iconNameElm = document.createElement('span'); @@ -28,6 +34,22 @@ export default class Icons { }); } + dispose() { + document.querySelector('.demo-container')?.classList.remove('dark-mode'); + document.body.setAttribute('data-theme', 'light'); + } + + toggleDarkMode() { + this._darkMode = !this._darkMode; + if (this._darkMode) { + document.body.setAttribute('data-theme', 'dark'); + document.querySelector('.demo-container')?.classList.add('dark-mode'); + } else { + document.body.setAttribute('data-theme', 'light'); + document.querySelector('.demo-container')?.classList.remove('dark-mode'); + } + } + getIcons() { return [ '.mdi.mdi-account', @@ -204,6 +226,7 @@ export default class Icons { '.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', diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss index d3f5f9879..ae3dd1ef1 100644 --- a/examples/vite-demo-vanilla-bundle/src/material-styles.scss +++ b/examples/vite-demo-vanilla-bundle/src/material-styles.scss @@ -3,8 +3,11 @@ // @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss'; :root { - body.material-theme { + body.material-theme, + body.material-theme .icon-checkbox-container { + $dark-primary-color: #66bb6a; $slick-primary-color: #009530; + --text-color-primary: #009530; --slick-primary-color: #009530; --slick-header-menu-display: inline-block; --slick-compound-filter-operator-select-border: 1px solid #00c840; @@ -39,24 +42,22 @@ --slick-header-font-size: 12px; --slick-filled-filter-font-weight: normal; --slick-icon-sort-color: var(--slick-primary-color); - --slick-icon-sort-asc: url('data:image/svg+xml,'); - --slick-icon-sort-desc: url('data:image/svg+xml,'); - --slick-icon-sort-font-size: 18px; - --slick-icon-sort-width: 18px; - --slick-icon-sort-position-right: 14px; - --slick-checkbox-selector-size: 22px; - --slick-checkbox-selector-icon-width: 22px; - --slick-checkbox-selector-checked-color: var(--slick-primary-color); - --slick-checkbox-selector-color: var(--slick-primary-color); - --slick-checkbox-selector-icon-border: none; - --slick-checkbox-selector-icon-bg-color: transparent; - --slick-checkbox-selector-icon-checked: url('data:image/svg+xml,'); - --slick-checkbox-selector-icon-unchecked: url('data:image/svg+xml,'); + --slick-column-picker-icon-color: #009530; + --slick-compound-filter-text-color: #009530; + --slick-checkbox-icon-color: var(--slick-primary-color); + --slick-checkbox-icon-border: none; + --slick-checkbox-icon-width: 22px; + --slick-checkbox-icon-bg-color: transparent; + --slick-checkbox-icon-container-bg-color: transparent; + --slick-checkbox-icon-unchecked-color-visibility: visible; + --slick-checkbox-icon-container-size: 1.2rem; + --slick-checkbox-icon-font-size: 28px; + --slick-checkbox-icon-container-size: 1.4rem; + --slick-checkbox-opacity-hover: 0.9; + --slick-checkbox-size: 22px; + --slick-checkbox-unchecked-opacity: 1; --slick-icon-group-color: var(--slick-primary-color); - --slick-icon-group-collapsed: url('data:image/svg+xml,'); - --slick-icon-group-expanded: url('data:image/svg+xml,'); - --slick-icon-group-width: 22px; - + --slick-pagination-icon-color: #009530; --slick-slider-filter-thumb-border: 2px solid rgba(0, 149, 48, .68); --slick-slider-filter-thumb-active-bg-color: #fff; --slick-slider-filter-thumb-active-color: rgba(#02bf3e, .88); @@ -74,16 +75,18 @@ --slick-multiselect-ok-button-text-color: #009530; --slick-multiselect-ok-button-text-hover-color: #00a736; --slick-multiselect-select-all-text-color: #007c28; - --slick-column-picker-checkbox-icon-checked: url('data:image/svg+xml,'); - --slick-column-picker-checkbox-icon-unchecked: var(--slick-column-picker-checkbox-icon-checked); - --slick-multiselect-icon-unchecked: url('data:image/svg+xml,'); --ms-checkbox-color: var(--slick-primary-color); --slick-multiselect-icon-color: var(--slick-primary-color); - --slick-multiselect-icon-radio-checked: url('data:image/svg+xml,'); - --slick-multiselect-icon-radio-unchecked: url('data:image/svg+xml,'); - .color-primary { - filter: url("data:image/svg+xml;utf8, #recolor"); + .icon-checkbox-container { + --slick-checkbox-icon-container-bg-color: transparent; + --slick-checkbox-unchecked-opacity: 0.9; + .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; + } + .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; + } } .slick-headerrow { @@ -118,12 +121,18 @@ .ms-dark-mode, .ms-drop.ms-dark-mode, .slick-dark-mode .ms-dark-mode, + .slick-dark-mode .icon-checkbox-container, + .ms-dark-mode .icon-checkbox-container, .slick-dark-mode { --slick-base-dark-menu-bg-color: #212121; - --slick-primary-color: #66bb6a; - --slick-button-primary-bg-color: var(--slick-primary-color); + --slick-primary-color: #66bb6a !important; + --slick-button-primary-bg-color:#66bb6a; --slick-cell-box-shadow: none; - --slick-column-picker-checkbox-color: #49a54e; + --slick-checkbox-icon-color: #66bb6a; + --slick-checkbox-icon-height: 22px; + --slick-checkbox-icon-bg-color: transparent; + --slick-checkbox-icon-border: none; + --slick-column-picker-icon-color: #66bb6a; --slick-compound-filter-text-color: #66bb6a; --slick-compound-filter-operator-select-border: 1px solid #66bb6a; --slick-header-filter-row-border-bottom: 1px solid #505050; @@ -134,17 +143,12 @@ --slick-pane-top-border-top: 1px solid #505050; --slick-filled-filter-color: #66bb6a; --slick-highlight-color: #49a54e; - --slick-pagination-icon-color: #49a54e; - --slick-checkbox-selector-checked-color: #66bb6a; + --slick-icon-sort-color: #66bb6a; + --slick-pagination-icon-color: #66bb6a; --slick-row-mouse-hover-box-shadow: none; --slick-row-mouse-hover-color: #505050; --slick-row-selected-color: #474747; - --slick-checkbox-selector-opacity: 1; - --slick-checkbox-selector-icon-height: 22px; - --slick-checkbox-selector-icon-bg-color: transparent; - --slick-checkbox-selector-icon-border: none; - --slick-multiselect-icon-radio-color: var(--slick-primary-color); - --ms-checkbox-color: var(--slick-primary-color); + --ms-checkbox-color: #66bb6a; --ms-checkbox-hover-color: #{lighten(#49a54e, 13%)}; --ms-ok-button-text-color: #66bb6a; --ms-ok-button-text-hover-color: #{lighten(#66bb6a, 5%)}; diff --git a/examples/vite-demo-vanilla-bundle/src/styles.scss b/examples/vite-demo-vanilla-bundle/src/styles.scss index cff379557..e2ff12b72 100644 --- a/examples/vite-demo-vanilla-bundle/src/styles.scss +++ b/examples/vite-demo-vanilla-bundle/src/styles.scss @@ -34,9 +34,9 @@ body { } .demo-container.dark-mode { background-color: #33393e; - color: #dddddd; + color: #e6e6e6; h3 { - color: #dddddd; + color: #e4e4e4; } .subtitle { color: #cbcbcb; @@ -85,8 +85,15 @@ input.is-narrow { width: 35px; margin-top: -1px; } +.d-inline-flex { + display: inline-flex; +} +.columns:not(:last-child) { + margin-bottom: calc(1.5rem - 0.9rem); +} + .text-green { - color: green; + color: #009e00; } .text-violet { color: #659bff; @@ -96,10 +103,4 @@ input.is-narrow { } .text-red { color: red; -} -.d-inline-flex { - display: inline-flex; -} -.columns:not(:last-child) { - margin-bottom: calc(1.5rem - 0.9rem); } \ No newline at end of file diff --git a/packages/common/src/core/slickGrid.ts b/packages/common/src/core/slickGrid.ts index 111f67634..51e991da4 100644 --- a/packages/common/src/core/slickGrid.ts +++ b/packages/common/src/core/slickGrid.ts @@ -645,7 +645,7 @@ export class SlickGrid = Column, O e this._container.style.overflow = 'hidden'; this._container.style.outline = String(0); this._container.classList.add(this.uid); - this._container.classList.add('ui-widget'); + this._container.classList.add('slick-widget'); this._container.setAttribute('role', 'grid'); const containerStyles = window.getComputedStyle(this._container); @@ -664,12 +664,12 @@ export class SlickGrid = Column, O e this._paneBottomR = createDomElement('div', { className: 'slick-pane slick-pane-bottom slick-pane-right', tabIndex: 0 }, this._container); if (this._options.createPreHeaderPanel) { - this._preHeaderPanelScroller = createDomElement('div', { className: 'slick-preheader-panel ui-state-default slick-state-default', style: { overflow: 'hidden', position: 'relative' } }, this._paneHeaderL); + this._preHeaderPanelScroller = createDomElement('div', { className: 'slick-preheader-panel slick-state-default', style: { overflow: 'hidden', position: 'relative' } }, this._paneHeaderL); this._preHeaderPanelScroller.appendChild(document.createElement('div')); this._preHeaderPanel = createDomElement('div', null, this._preHeaderPanelScroller); this._preHeaderPanelSpacer = createDomElement('div', { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } }, this._preHeaderPanelScroller); - this._preHeaderPanelScrollerR = createDomElement('div', { className: 'slick-preheader-panel ui-state-default slick-state-default', style: { overflow: 'hidden', position: 'relative' } }, this._paneHeaderR); + this._preHeaderPanelScrollerR = createDomElement('div', { className: 'slick-preheader-panel slick-state-default', style: { overflow: 'hidden', position: 'relative' } }, this._paneHeaderR); this._preHeaderPanelR = createDomElement('div', null, this._preHeaderPanelScrollerR); this._preHeaderPanelSpacerR = createDomElement('div', { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } }, this._preHeaderPanelScrollerR); @@ -680,8 +680,8 @@ export class SlickGrid = Column, O e } // Append the header scroller containers - this._headerScrollerL = createDomElement('div', { className: 'slick-header ui-state-default slick-state-default slick-header-left' }, this._paneHeaderL); - this._headerScrollerR = createDomElement('div', { className: 'slick-header ui-state-default slick-state-default slick-header-right' }, this._paneHeaderR); + this._headerScrollerL = createDomElement('div', { className: 'slick-header slick-state-default slick-header-left' }, this._paneHeaderL); + this._headerScrollerR = createDomElement('div', { className: 'slick-header slick-state-default slick-header-right' }, this._paneHeaderR); // Cache the header scroller containers this._headerScroller.push(this._headerScrollerL); @@ -694,8 +694,8 @@ export class SlickGrid = Column, O e // Cache the header columns this._headers = [this._headerL, this._headerR]; - this._headerRowScrollerL = createDomElement('div', { className: 'slick-headerrow ui-state-default slick-state-default' }, this._paneTopL); - this._headerRowScrollerR = createDomElement('div', { className: 'slick-headerrow ui-state-default slick-state-default' }, this._paneTopR); + this._headerRowScrollerL = createDomElement('div', { className: 'slick-headerrow slick-state-default' }, this._paneTopL); + this._headerRowScrollerR = createDomElement('div', { className: 'slick-headerrow slick-state-default' }, this._paneTopR); this._headerRowScroller = [this._headerRowScrollerL, this._headerRowScrollerR]; @@ -708,8 +708,8 @@ export class SlickGrid = Column, O e this._headerRows = [this._headerRowL, this._headerRowR]; // Append the top panel scroller - this._topPanelScrollerL = createDomElement('div', { className: 'slick-top-panel-scroller ui-state-default slick-state-default' }, this._paneTopL); - this._topPanelScrollerR = createDomElement('div', { className: 'slick-top-panel-scroller ui-state-default slick-state-default' }, this._paneTopR); + this._topPanelScrollerL = createDomElement('div', { className: 'slick-top-panel-scroller slick-state-default' }, this._paneTopL); + this._topPanelScrollerR = createDomElement('div', { className: 'slick-top-panel-scroller slick-state-default' }, this._paneTopR); this._topPanelScrollers = [this._topPanelScrollerL, this._topPanelScrollerR]; @@ -782,8 +782,8 @@ export class SlickGrid = Column, O e // footer Row if (this._options.createFooterRow) { - this._footerRowScrollerR = createDomElement('div', { className: 'slick-footerrow ui-state-default slick-state-default' }, this._paneTopR); - this._footerRowScrollerL = createDomElement('div', { className: 'slick-footerrow ui-state-default slick-state-default' }, this._paneTopL); + this._footerRowScrollerR = createDomElement('div', { className: 'slick-footerrow slick-state-default' }, this._paneTopR); + this._footerRowScrollerL = createDomElement('div', { className: 'slick-footerrow slick-state-default' }, this._paneTopL); this._footerRowScroller = [this._footerRowScrollerL, this._footerRowScrollerR]; @@ -1349,7 +1349,7 @@ export class SlickGrid = Column, O e * @param {string | HTMLElement | DocumentFragment} [title] New column name. * @param {String} [toolTip] New column tooltip. */ - updateColumnHeader(columnId: number | string, title?: string | HTMLElement | DocumentFragment, toolTip?: string) { + updateColumnHeader(columnId: number | string, title?: string | HTMLElement | DocumentFragment, toolTip?: string): HTMLElement | void { if (this.initialized) { const idx = this.getColumnIndex(columnId); if (!isDefined(idx)) { @@ -1383,6 +1383,8 @@ export class SlickGrid = Column, O e grid: this }); } + + return header; } } @@ -1502,7 +1504,7 @@ export class SlickGrid = Column, O e continue; } - const footerRowCell = createDomElement('div', { className: `ui-state-default slick-state-default slick-footerrow-column l${i} r${i}` }, this.hasFrozenColumns() && (i > this._options.frozenColumn!) ? this._footerRowR : this._footerRowL); + const footerRowCell = createDomElement('div', { className: `slick-state-default slick-footerrow-column l${i} r${i}` }, this.hasFrozenColumns() && (i > this._options.frozenColumn!) ? this._footerRowR : this._footerRowL); const className = this.hasFrozenColumns() && i <= this._options.frozenColumn! ? 'frozen' : null; if (className) { footerRowCell.classList.add(className); @@ -1520,11 +1522,11 @@ export class SlickGrid = Column, O e } protected handleHeaderMouseHoverOn(e: Event | SlickEventData) { - (e as any)?.target.classList.add('ui-state-hover', 'slick-state-hover'); + (e as any)?.target.classList.add('slick-state-hover'); } protected handleHeaderMouseHoverOff(e: Event | SlickEventData) { - (e as any)?.target.classList.remove('ui-state-hover', 'slick-state-hover'); + (e as any)?.target.classList.remove('slick-state-hover'); } protected createColumnHeaders() { @@ -1606,7 +1608,7 @@ export class SlickGrid = Column, O e const headerTarget = this.hasFrozenColumns() ? ((i <= this._options.frozenColumn!) ? this._headerL : this._headerR) : this._headerL; const headerRowTarget = this.hasFrozenColumns() ? ((i <= this._options.frozenColumn!) ? this._headerRowL : this._headerRowR) : this._headerRowL; - const header = createDomElement('div', { id: `${this.uid + m.id}`, dataset: { id: String(m.id) }, role: 'columnheader', className: 'ui-state-default slick-state-default slick-header-column' }, headerTarget); + const header = createDomElement('div', { id: `${this.uid + m.id}`, dataset: { id: String(m.id) }, role: 'columnheader', className: 'slick-state-default slick-header-column' }, headerTarget); if (m.toolTip) { header.title = m.toolTip; } @@ -1662,7 +1664,7 @@ export class SlickGrid = Column, O e }); if (this._options.showHeaderRow) { - const headerRowCell = createDomElement('div', { className: `ui-state-default slick-state-default slick-headerrow-column l${i} r${i}` }, headerRowTarget); + const headerRowCell = createDomElement('div', { className: `slick-state-default slick-headerrow-column l${i} r${i}` }, headerRowTarget); const frozenClasses = this.hasFrozenColumns() && i <= this._options.frozenColumn! ? 'frozen' : null; if (frozenClasses) { headerRowCell.classList.add(frozenClasses); @@ -1683,7 +1685,7 @@ export class SlickGrid = Column, O e } if (this._options.createFooterRow && this._options.showFooterRow) { const footerRowTarget = this.hasFrozenColumns() ? ((i <= this._options.frozenColumn!) ? this._footerRow[0] : this._footerRow[1]) : this._footerRow[0]; - const footerRowCell = createDomElement('div', { className: `ui-state-default slick-state-default slick-footerrow-column l${i} r${i}` }, footerRowTarget); + const footerRowCell = createDomElement('div', { className: `slick-state-default slick-footerrow-column l${i} r${i}` }, footerRowTarget); Utils.storage.put(footerRowCell, 'column', m); this.triggerEvent(this.onFooterRowCellRendered, { @@ -2329,7 +2331,7 @@ export class SlickGrid = Column, O e this.headerColumnWidthDiff = this.headerColumnHeightDiff = 0; this.cellWidthDiff = this.cellHeightDiff = 0; - let el = createDomElement('div', { className: 'ui-state-default slick-state-default slick-header-column', style: { visibility: 'hidden' }, textContent: '-' }, header); + let el = createDomElement('div', { className: 'slick-state-default slick-header-column', style: { visibility: 'hidden' }, textContent: '-' }, header); let style = getComputedStyle(el); if (style.boxSizing !== 'border-box') { h.forEach((val) => this.headerColumnWidthDiff += Utils.toFloat(style[val as any])); @@ -3308,7 +3310,7 @@ export class SlickGrid = Column, O e const frozenRowOffset = this.getFrozenRowOffset(row); - const rowDiv = createDomElement('div', { className: `ui-widget-content ${rowCss}`, role: 'row', style: { top: `${this.getRowTop(row) - frozenRowOffset}px` } }); + const rowDiv = createDomElement('div', { className: `slick-widget-content ${rowCss}`, role: 'row', style: { top: `${this.getRowTop(row) - frozenRowOffset}px` } }); let rowDivR: HTMLElement | undefined; divArrayL.push(rowDiv); diff --git a/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts b/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts index efb7d67ec..041bf1d96 100644 --- a/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts +++ b/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts @@ -745,7 +745,7 @@ describe('AutocompleterEditor', () => { editor = new AutocompleterEditor(editorArguments); const clearSpy = jest.spyOn(editor, 'clear'); - const clearBtnElm = divContainer.querySelector('.btn.icon-clear') as HTMLButtonElement; + const clearBtnElm = divContainer.querySelector('.btn.btn-clear') as HTMLButtonElement; clearBtnElm.dispatchEvent(new Event('click')); expect(clearSpy).toHaveBeenCalled(); diff --git a/packages/common/src/editors/__tests__/dateEditor.spec.ts b/packages/common/src/editors/__tests__/dateEditor.spec.ts index 033fb2b51..17b28a549 100644 --- a/packages/common/src/editors/__tests__/dateEditor.spec.ts +++ b/packages/common/src/editors/__tests__/dateEditor.spec.ts @@ -249,7 +249,7 @@ describe('DateEditor', () => { editor = new DateEditor(editorArguments); editor.loadValue(mockItemData); editor.focus(); - const clearBtnElm = divContainer.querySelector('.btn.icon-clear') as HTMLInputElement; + const clearBtnElm = divContainer.querySelector('.btn.btn-clear') as HTMLInputElement; const editorInputElm = divContainer.querySelector('.flatpickr input') as HTMLInputElement; clearBtnElm.click(); editorInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true })); @@ -267,7 +267,7 @@ describe('DateEditor', () => { editor = new DateEditor(editorArguments); editor.loadValue(mockItemData); editor.focus(); - const clearBtnElm = divContainer.querySelector('.btn.icon-clear') as HTMLInputElement; + const clearBtnElm = divContainer.querySelector('.btn.btn-clear') as HTMLInputElement; const editorInputElm = divContainer.querySelector('.flatpickr input') as HTMLInputElement; clearBtnElm.click(); diff --git a/packages/common/src/editors/__tests__/selectEditor.spec.ts b/packages/common/src/editors/__tests__/selectEditor.spec.ts index 5e622622d..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 4497cbe69..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/editors/autocompleterEditor.ts b/packages/common/src/editors/autocompleterEditor.ts index 69b73fed8..68d08e96e 100644 --- a/packages/common/src/editors/autocompleterEditor.ts +++ b/packages/common/src/editors/autocompleterEditor.ts @@ -530,7 +530,8 @@ export class AutocompleterEditor implements Ed this._editorInputGroupElm = createDomElement('div', { className: 'autocomplete-container input-group' }); const closeButtonGroupElm = createDomElement('span', { className: 'input-group-btn input-group-append', dataset: { clear: '' } }); - this._clearButtonElm = createDomElement('button', { type: 'button', className: 'btn btn-default icon-clear' }); + this._clearButtonElm = createDomElement('button', { type: 'button', className: 'btn btn-default btn-clear' }); + this._clearButtonElm.appendChild(createDomElement('i', { className: 'icon-clear' })); this._inputElm = createDomElement( 'input', { diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts index 0d52581c8..6e9b9bbc6 100644 --- a/packages/common/src/editors/dateEditor.ts +++ b/packages/common/src/editors/dateEditor.ts @@ -145,7 +145,8 @@ export class DateEditor implements Editor { this._editorInputGroupElm = createDomElement('div', { className: 'flatpickr input-group' }); const closeButtonGroupElm = createDomElement('span', { className: 'input-group-btn input-group-append', dataset: { clear: '' } }); - this._clearButtonElm = createDomElement('button', { type: 'button', className: 'btn btn-default icon-clear' }); + this._clearButtonElm = createDomElement('button', { type: 'button', className: 'btn btn-default btn-clear' }); + this._clearButtonElm.appendChild(createDomElement('i', { className: 'icon-clear' })); this._inputElm = createDomElement( 'input', { diff --git a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts index 2e2a90d58..26013358c 100644 --- a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts @@ -96,7 +96,7 @@ const commandItemsMock = [ { command: 'command3', title: 'Command 3', positionOrder: 70, }, { command: 'command4', title: 'Command 4', positionOrder: 71, }, { - command: 'more-sub-commands', title: 'More Sub Commands', subMenuTitle: 'Sub Command Title 2', subMenuTitleCssClass: 'color-warning', commandItems: [ + command: 'more-sub-commands', title: 'More Sub Commands', subMenuTitle: 'Sub Command Title 2', subMenuTitleCssClass: 'text-color-warning', commandItems: [ { command: 'command5', title: 'Command 5', positionOrder: 72, }, ] } @@ -655,7 +655,7 @@ describe('CellMenu Plugin', () => { expect(commandList2Elm.querySelectorAll('.slick-menu-item').length).toBe(3); expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); - expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); + expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); @@ -706,7 +706,7 @@ describe('CellMenu Plugin', () => { expect(commandList2Elm.querySelectorAll('.slick-menu-item').length).toBe(3); expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); - expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); + expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); diff --git a/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts b/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts index 6cf0e7e54..df2d02b38 100644 --- a/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts @@ -295,13 +295,13 @@ describe('SlickCheckboxSelectColumn Plugin', () => { plugin.init(gridStub); gridStub.onHeaderRowCellRendered.notify({ column: { id: '_checkbox_selector', field: '_checkbox_selector' }, node: nodeElm, grid: gridStub }); plugin.setOptions({ hideInColumnTitleRow: true, hideInFilterHeaderRow: false, hideSelectAllCheckbox: false, }); - let filterSelectAll = plugin.headerRowNode!.querySelector(`#filter-checkbox-selectall-container`) as HTMLSpanElement; + let filterSelectAll = plugin.headerRowNode!.querySelector('#filter-checkbox-selectall-container') as HTMLSpanElement; expect(plugin).toBeTruthy(); expect(updateColHeaderSpy).toHaveBeenCalledWith('_checkbox_selector', '', ''); expect(filterSelectAll.style.display).toEqual('flex'); - filterSelectAll = plugin.headerRowNode!.querySelector(`#filter-checkbox-selectall-container`) as HTMLSpanElement; + filterSelectAll = plugin.headerRowNode!.querySelector('#filter-checkbox-selectall-container') as HTMLSpanElement; plugin.hideSelectAllFromColumnHeaderFilterRow(); expect(filterSelectAll.style.display).toEqual('none'); }); @@ -424,10 +424,11 @@ describe('SlickCheckboxSelectColumn Plugin', () => { resizable: false, sortable: false, width: 30, + maxWidth: 30, 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', () => { @@ -439,7 +440,7 @@ describe('SlickCheckboxSelectColumn Plugin', () => { plugin.init(gridStub); gridStub.onHeaderRowCellRendered.notify({ column: { id: '_checkbox_selector', field: '_checkbox_selector' }, node: nodeElm, grid: gridStub }); - const checkboxContainerElm = nodeElm.querySelector('span#filter-checkbox-selectall-container') as HTMLDivElement; + const checkboxContainerElm = nodeElm.querySelector('div.icon-checkbox-container') as HTMLDivElement; const inputCheckboxElm = checkboxContainerElm.querySelector('input[type=checkbox]') as HTMLDivElement; inputCheckboxElm.dispatchEvent(new Event('click', { bubbles: true, cancelable: true })); @@ -464,6 +465,7 @@ describe('SlickCheckboxSelectColumn Plugin', () => { sortable: false, toolTip: 'Select/Deselect All', width: 30, + maxWidth: 30, }; plugin.create(mockColumns, { checkboxSelector: { columnId: 'chk-id' } }); @@ -475,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(``); }); @@ -501,8 +503,9 @@ describe('SlickCheckboxSelectColumn Plugin', () => { sortable: false, toolTip: 'Select/Deselect All', 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', () => { @@ -527,6 +530,7 @@ describe('SlickCheckboxSelectColumn Plugin', () => { sortable: false, toolTip: '', width: 30, + maxWidth: 30, }); }); diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts index d8b711a98..40d09adf4 100644 --- a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts @@ -26,7 +26,7 @@ const commandItemsMock = [ { command: 'command3', title: 'Command 3', positionOrder: 70, }, { command: 'command4', title: 'Command 4', positionOrder: 71, }, { - command: 'more-sub-commands', title: 'More Sub Commands', subMenuTitle: 'Sub Command Title 2', subMenuTitleCssClass: 'color-warning', commandItems: [ + command: 'more-sub-commands', title: 'More Sub Commands', subMenuTitle: 'Sub Command Title 2', subMenuTitleCssClass: 'text-color-warning', commandItems: [ { command: 'command5', title: 'Command 5', positionOrder: 72, }, ] } @@ -703,7 +703,7 @@ describe('ContextMenu Plugin', () => { expect(commandList2Elm.querySelectorAll('.slick-menu-item').length).toBe(3); expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); - expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); + expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); 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('fa-clone')).toBeTruthy(); + expect(commandIconElm1.classList.contains('mdi-content-copy')).toBeTruthy(); expect(commandLabelElm1.textContent).toBe('Copy'); commandItemElm1.dispatchEvent(new CustomEvent('click')); diff --git a/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts b/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts index 3e8273fbd..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: 'mdi mdi-close color-danger', + deleteIconCssClass: 'mdi mdi-close text-color-danger', }, showHeaderRow: false, showTopPanel: false, @@ -329,7 +329,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: 'mdi mdi-close 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); @@ -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: 'mdi mdi-close 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); @@ -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: 'mdi mdi-close 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); @@ -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: 'mdi mdi-close 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']); diff --git a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts index e7e41d699..fb7b6e843 100644 --- a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts @@ -381,7 +381,7 @@ describe('GridMenuControl', () => { const repositionSpy = jest.spyOn(control, 'repositionMenu'); control.init(); - const spanEvent = new MouseEvent('click', { bubbles: true, cancelable: true, composed: false }) + const spanEvent = new MouseEvent('click', { bubbles: true, cancelable: true, composed: false }); const spanBtnElm = document.createElement('span'); const buttonElm = document.createElement('button'); spanBtnElm.textContent = 'Grid Menu'; @@ -400,7 +400,7 @@ describe('GridMenuControl', () => { const repositionSpy = jest.spyOn(control, 'repositionMenu'); control.init(); - const spanEvent = new MouseEvent('click', { bubbles: true, cancelable: true, composed: false }) + const spanEvent = new MouseEvent('click', { bubbles: true, cancelable: true, composed: false }); const spanBtnElm = document.createElement('span'); const buttonElm = document.createElement('button'); spanBtnElm.textContent = 'Grid Menu'; @@ -433,7 +433,7 @@ describe('GridMenuControl', () => { expect(control.getAllColumns()).toEqual(columnsMock); expect(control.getVisibleColumns()).toEqual(columnsMock); expect(inputForcefitElm.checked).toBeTruthy(); - expect(inputForcefitElm.dataset.option).toBe('autoresize') + expect(inputForcefitElm.dataset.option).toBe('autoresize'); expect(labelSyncElm.textContent).toBe('Force fit columns'); }); @@ -913,7 +913,7 @@ describe('GridMenuControl', () => { { command: 'command3', title: 'Command 3', positionOrder: 70, }, { command: 'command4', title: 'Command 4', positionOrder: 71, }, { - command: 'more-sub-commands', title: 'More Sub Commands', subMenuTitle: 'Sub Command Title 2', subMenuTitleCssClass: 'color-warning', commandItems: [ + command: 'more-sub-commands', title: 'More Sub Commands', subMenuTitle: 'Sub Command Title 2', subMenuTitleCssClass: 'text-color-warning', commandItems: [ { command: 'command5', title: 'Command 5', positionOrder: 72, }, ] } @@ -963,7 +963,7 @@ describe('GridMenuControl', () => { expect(commandList2Elm.querySelectorAll('.slick-menu-item').length).toBe(3); expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); - expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); + expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); @@ -1019,7 +1019,7 @@ describe('GridMenuControl', () => { expect(commandList2Elm.querySelectorAll('.slick-menu-item').length).toBe(3); expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); - expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); + expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); @@ -1053,7 +1053,7 @@ describe('GridMenuControl', () => { const gridMenu2Elm = document.body.querySelector('.slick-grid-menu.slick-menu-level-1') as HTMLDivElement; Object.defineProperty(gridMenu2Elm, 'clientHeight', { writable: true, configurable: true, value: 320 }); - const divEvent = new MouseEvent('click', { bubbles: true, cancelable: true, composed: false }) + const divEvent = new MouseEvent('click', { bubbles: true, cancelable: true, composed: false }); const subMenuElm = document.createElement('div'); const menuItem = document.createElement('div'); menuItem.className = 'slick-menu-item'; @@ -1094,7 +1094,7 @@ describe('GridMenuControl', () => { control.columns = columnsMock; control.init(); expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ - { iconCssClass: 'fa fa-times', 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: 'fa fa-filter text-danger', titleKey: 'CLEAR_ALL_FILTERS', title: 'Supprimer tous les filtres', disabled: false, command: 'clear-filter', positionOrder: 50 }, - { iconCssClass: 'fa fa-random', titleKey: 'TOGGLE_FILTER_ROW', title: 'Basculer la ligne des filtres', disabled: false, command: 'toggle-filter', positionOrder: 53 }, - { iconCssClass: 'fa fa-refresh', 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: 'fa fa-filter text-danger', 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: 'fa fa-random', 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: 'fa fa-random', 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: 'fa fa-refresh', 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: 'fa fa-random', 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: 'fa fa-unsorted text-danger', 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: 'fa fa-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: 'fa fa-file-excel-o 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: 'fa fa-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 9dc5ae00f..a50e5a1a4 100644 --- a/packages/common/src/extensions/__tests__/slickHeaderButtons.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHeaderButtons.spec.ts @@ -98,7 +98,7 @@ describe('HeaderButton Plugin', () => { plugin.init(); plugin.addonOptions = { buttonCssClass: 'some-class' - } + }; expect(plugin.addonOptions).toEqual({ buttonCssClass: 'some-class', diff --git a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts index e42fa336a..6b2a33c80 100644 --- a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts @@ -605,7 +605,7 @@ describe('HeaderMenu Plugin', () => { { command: 'command3', title: 'Command 3', positionOrder: 70, }, { command: 'command4', title: 'Command 4', positionOrder: 71, }, { - command: 'more-sub-commands', title: 'More Sub Commands', subMenuTitle: 'Sub Command Title 2', subMenuTitleCssClass: 'color-warning', commandItems: [ + command: 'more-sub-commands', title: 'More Sub Commands', subMenuTitle: 'Sub Command Title 2', subMenuTitleCssClass: 'text-color-warning', commandItems: [ { command: 'command5', title: 'Command 5', positionOrder: 72, }, ] } @@ -661,7 +661,7 @@ describe('HeaderMenu Plugin', () => { expect(commandList2Elm.querySelectorAll('.slick-menu-item').length).toBe(3); expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); - expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); + expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); expect(commandChevronElm.className).toBe('sub-item-chevron'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); @@ -717,7 +717,7 @@ describe('HeaderMenu Plugin', () => { expect(commandList2Elm.querySelectorAll('.slick-menu-item').length).toBe(3); expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); - expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); + expect(subMenuTitleElm.className).toBe('slick-menu-title text-color-warning'); expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); @@ -751,7 +751,7 @@ describe('HeaderMenu Plugin', () => { const subCommands1Elm = commandList1Elm.querySelector('[data-command="sub-commands"]') as HTMLDivElement; Object.defineProperty(headerMenu1Elm, 'clientHeight', { writable: true, configurable: true, value: 77 }); Object.defineProperty(headerMenu1Elm, 'clientWidth', { writable: true, configurable: true, value: 225 }); - const divEvent1 = new MouseEvent('click', { bubbles: true, cancelable: true, composed: false }) + const divEvent1 = new MouseEvent('click', { bubbles: true, cancelable: true, composed: false }); Object.defineProperty(divEvent1, 'target', { writable: true, configurable: true, value: headerButtonElm }); subCommands1Elm!.dispatchEvent(new Event('click')); @@ -759,7 +759,7 @@ describe('HeaderMenu Plugin', () => { const headerMenu2Elm = document.body.querySelector('.slick-header-menu.slick-menu-level-1') as HTMLDivElement; Object.defineProperty(headerMenu2Elm, 'clientHeight', { writable: true, configurable: true, value: 320 }); - const divEvent = new MouseEvent('click', { bubbles: true, cancelable: true, composed: false }) + const divEvent = new MouseEvent('click', { bubbles: true, cancelable: true, composed: false }); const subMenuElm = document.createElement('div'); const menuItem = document.createElement('div'); menuItem.className = 'slick-menu-item'; @@ -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: 'fa fa-thumb-tack', 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: 'fa fa-filter', 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('fa-filter')).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: 'fa fa-arrows-h', 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: 'fa fa-times', 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('fa-arrows-h')).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: 'fa fa-thumb-tack', 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: 'fa fa-times', 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('fa-times')).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: 'fa fa-filter', 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('fa-filter')).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: 'fa fa-sort-asc', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, - { iconCssClass: 'fa fa-sort-desc', 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: 'fa fa-unsorted', 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('fa-unsorted')).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: 'fa fa-sort-asc', title: 'Trier par ordre croissant', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, - { iconCssClass: 'fa fa-sort-desc', 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: 'fa fa-unsorted', 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: 'fa fa-thumb-tack', 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('fa-thumb-tack')).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: 'fa fa-thumb-tack', 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: 'fa fa-thumb-tack', 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: 'fa fa-thumb-tack', 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: 'fa fa-sort-asc', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, - { iconCssClass: 'fa fa-sort-desc', 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: 'fa fa-unsorted', 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: 'fa fa-sort-asc', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, - { iconCssClass: 'fa fa-sort-desc', 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: 'fa fa-unsorted', 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/__tests__/slickRowMoveManager.spec.ts b/packages/common/src/extensions/__tests__/slickRowMoveManager.spec.ts index 93d89312f..a3ac4abc2 100644 --- a/packages/common/src/extensions/__tests__/slickRowMoveManager.spec.ts +++ b/packages/common/src/extensions/__tests__/slickRowMoveManager.spec.ts @@ -230,7 +230,7 @@ describe('SlickRowMoveManager Plugin', () => { const output = plugin.getColumnDefinition().formatter!(0, 0, null, { id: '_move', field: '' } as Column, { firstName: 'John', lastName: 'Doe', age: 33 }, gridStub); expect(plugin).toBeTruthy(); - expect(output).toEqual({ addClasses: 'cell-reorder dnd slick-row-move-column', html: iconElm }); + expect(output).toEqual({ addClasses: 'cell-reorder dnd', html: iconElm }); }); it('should process the "checkboxSelectionFormatter" and expect necessary Formatter to return regular formatter when usabilityOverride is not a function', () => { @@ -242,7 +242,7 @@ describe('SlickRowMoveManager Plugin', () => { const output = plugin.getColumnDefinition().formatter!(0, 0, null, { id: '_move', field: '' } as Column, { firstName: 'John', lastName: 'Doe', age: 33 }, gridStub); expect(plugin).toBeTruthy(); - expect(output).toEqual({ addClasses: 'cell-reorder dnd slick-row-move-column', html: iconElm }); + expect(output).toEqual({ addClasses: 'cell-reorder dnd', html: iconElm }); }); it('should create the plugin and trigger "dragInit" event and expect "stopImmediatePropagation" to be called', () => { diff --git a/packages/common/src/extensions/extensionCommonUtils.ts b/packages/common/src/extensions/extensionCommonUtils.ts index c6911d83a..a31158d28 100644 --- a/packages/common/src/extensions/extensionCommonUtils.ts +++ b/packages/common/src/extensions/extensionCommonUtils.ts @@ -5,6 +5,9 @@ import type { Column, ColumnPickerOption, DOMEvent, GridMenuOption } from '../in import { SlickColumnPicker } from './slickColumnPicker'; import { SlickGridMenu } from './slickGridMenu'; +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) { const context: any = this; @@ -37,28 +40,28 @@ export function addColumnTitleElementWhenDefined(this: SlickColumnPicker | Slick export function handleColumnPickerItemClick(this: SlickColumnPicker | SlickGridMenu, event: DOMEvent) { 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('.mdi'); + const isChecked = !!(event.target.checked); + event.target.ariaChecked = String(isChecked); + togglePickerCheckbox(iconElm, isChecked); if (event.target.dataset.option === 'autoresize') { // when calling setOptions, it will resize with ALL Columns (even the hidden ones) // we can avoid this problem by keeping a reference to the visibleColumns before setOptions and then setColumns after const previousVisibleColumns = context.getVisibleColumns(); - event.target.ariaChecked = String(event.target.checked); - const isChecked = event.target.checked; context.grid.setOptions({ forceFitColumns: isChecked }); context.grid.setColumns(previousVisibleColumns); return; } if (event.target.dataset.option === 'syncresize') { - event.target.ariaChecked = String(event.target.checked); - context.grid.setOptions({ syncColumnCellResize: !!(event.target.checked) }); + context.grid.setOptions({ syncColumnCellResize: isChecked }); return; } if (event.target.type === 'checkbox') { context._areVisibleColumnDifferent = true; - event.target.ariaChecked = String(event.target.checked); - const isChecked = event.target.checked; const columnId = event.target.dataset.columnid || ''; const visibleColumns: Column[] = []; context._columnCheckboxes.forEach((columnCheckbox: HTMLInputElement, idx: number) => { @@ -69,6 +72,7 @@ export function handleColumnPickerItemClick(this: SlickColumnPicker | SlickGridM if (!visibleColumns.length) { event.target.checked = true; + togglePickerCheckbox(iconElm, true); return; } @@ -114,6 +118,32 @@ export function handleColumnPickerItemClick(this: SlickColumnPicker | SlickGridM } } +function togglePickerCheckbox(iconElm: HTMLDivElement | null, checked = false) { + if (iconElm) { + iconElm.className = `mdi ${checked ? PICKER_CHECK_ICON : PICKER_UNCHECK_ICON}`; + } +} + +function generatePickerCheckbox(columnLiElm: HTMLLIElement, inputId: string, inputData: any, checked = false) { + 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: `mdi ${checked ? PICKER_CHECK_ICON : PICKER_UNCHECK_ICON}` }); + const labelSpanElm = createDomElement('span', { className: 'checkbox-label' }); + divElm.appendChild(inputElm); + divElm.appendChild(colInputDivElm); + labelElm.appendChild(divElm); + labelElm.appendChild(labelSpanElm); + columnLiElm.appendChild(labelElm); + + if (checked) { + inputElm.ariaChecked = 'true'; + inputElm.checked = true; + } + + return { inputElm, labelElm, labelSpanElm }; +} + export function populateColumnPicker(this: SlickColumnPicker | SlickGridMenu, addonOptions: ColumnPickerOption | GridMenuOption) { const context: any = this; const menuPrefix = context instanceof SlickGridMenu ? 'gridmenu-' : ''; @@ -125,24 +155,15 @@ export function populateColumnPicker(this: SlickColumnPicker | SlickGridMenu, ad columnLiElm.className = 'hidden'; } - const colInputElm = createDomElement('input', { - type: 'checkbox', id: `${context._gridUid}-${menuPrefix}colpicker-${columnId}`, - dataset: { columnid: `${columnId}` } - }); - const colIndex = context.grid.getColumnIndex(columnId); - if (colIndex >= 0) { - colInputElm.ariaChecked = 'true'; - colInputElm.checked = true; - } - columnLiElm.appendChild(colInputElm); - context._columnCheckboxes.push(colInputElm); + const inputId = `${context._gridUid}-${menuPrefix}colpicker-${columnId}`; + const isChecked = context.grid.getColumnIndex(columnId) >= 0; + const { inputElm, labelElm, labelSpanElm } = generatePickerCheckbox(columnLiElm, inputId, { columnid: `${columnId}` }, isChecked); + context._columnCheckboxes.push(inputElm); const headerColumnValueExtractorFn = typeof addonOptions?.headerColumnValueExtractor === 'function' ? addonOptions.headerColumnValueExtractor : context._defaults.headerColumnValueExtractor; const columnLabel = headerColumnValueExtractorFn!(column, context.gridOptions); - const labelElm = document.createElement('label'); - labelElm.htmlFor = `${context._gridUid}-${menuPrefix}colpicker-${columnId}`; - this.grid.applyHtmlCode(labelElm, columnLabel); + this.grid.applyHtmlCode(labelSpanElm, columnLabel); columnLiElm.appendChild(labelElm); context._listElm.appendChild(columnLiElm); } @@ -153,39 +174,17 @@ export function populateColumnPicker(this: SlickColumnPicker | SlickGridMenu, ad if (!(addonOptions?.hideForceFitButton)) { const fitLiElm = document.createElement('li'); - fitLiElm.appendChild( - createDomElement('input', { - type: 'checkbox', id: `${context._gridUid}-${menuPrefix}colpicker-forcefit`, - ariaChecked: String(context.gridOptions.forceFitColumns), - checked: context.gridOptions.forceFitColumns, - dataset: { option: 'autoresize' } - }) - ); - fitLiElm.appendChild( - createDomElement('label', { - htmlFor: `${context._gridUid}-${menuPrefix}colpicker-forcefit`, - textContent: addonOptions?.forceFitTitle ?? '', - }) - ); + const inputId = `${context._gridUid}-${menuPrefix}colpicker-forcefit`; + const { labelSpanElm } = generatePickerCheckbox(fitLiElm, inputId, { option: 'autoresize' }, context.gridOptions.forceFitColumns); + labelSpanElm.textContent = addonOptions?.forceFitTitle ?? ''; context._listElm.appendChild(fitLiElm); } if (!(addonOptions?.hideSyncResizeButton)) { const syncLiElm = document.createElement('li'); - syncLiElm.appendChild( - createDomElement('input', { - type: 'checkbox', id: `${context._gridUid}-${menuPrefix}colpicker-syncresize`, - ariaChecked: String(context.gridOptions.syncColumnCellResize), - checked: context.gridOptions.syncColumnCellResize, - dataset: { option: 'syncresize' } - }) - ); - syncLiElm.appendChild( - createDomElement('label', { - htmlFor: `${context._gridUid}-${menuPrefix}colpicker-syncresize`, - textContent: addonOptions?.syncResizeTitle ?? '' - }) - ); + const inputId = `${context._gridUid}-${menuPrefix}colpicker-syncresize`; + const { labelSpanElm } = generatePickerCheckbox(syncLiElm, inputId, { option: 'syncresize' }, context.gridOptions.forceFitColumns); + labelSpanElm.textContent = addonOptions?.syncResizeTitle ?? ''; context._listElm.appendChild(syncLiElm); } } diff --git a/packages/common/src/extensions/slickCheckboxSelectColumn.ts b/packages/common/src/extensions/slickCheckboxSelectColumn.ts index f3543dacf..fc3cd1dcf 100644 --- a/packages/common/src/extensions/slickCheckboxSelectColumn.ts +++ b/packages/common/src/extensions/slickCheckboxSelectColumn.ts @@ -9,6 +9,9 @@ import type { SelectionModel } from '../enums/index'; export interface RowLookup { [row: number]: boolean; } +const CHECK_ICON = 'mdi-icon-check'; +const UNCHECK_ICON = 'mdi-icon-uncheck'; + export class SlickCheckboxSelectColumn { pluginName: 'CheckboxSelectColumn' = 'CheckboxSelectColumn' as const; protected _defaults = { @@ -219,12 +222,16 @@ export class SlickCheckboxSelectColumn { */ createCheckboxElement(inputId: string, checked = false) { const fragmentElm = new DocumentFragment(); - fragmentElm.appendChild( + const labelElm = createDomElement('label', { className: 'checkbox-selector-label', htmlFor: inputId }); + const divElm = createDomElement('div', { className: 'icon-checkbox-container' }); + divElm.appendChild( createDomElement('input', { id: inputId, type: 'checkbox', checked, ariaChecked: String(checked) }) ); - fragmentElm.appendChild( - createDomElement('label', { htmlFor: inputId }) + divElm.appendChild( + createDomElement('div', { className: `mdi ${checked ? CHECK_ICON : UNCHECK_ICON}` }) ); + labelElm.appendChild(divElm); + fragmentElm.appendChild(labelElm); return fragmentElm; } @@ -250,6 +257,7 @@ export class SlickCheckboxSelectColumn { reorderable: this._addonOptions.reorderable, sortable: false, width: this._addonOptions.width || 30, + maxWidth: this._addonOptions.width || 30, formatter: this.checkboxSelectionFormatter.bind(this), } as Column; } @@ -287,7 +295,7 @@ export class SlickCheckboxSelectColumn { // user can optionally execute a callback defined in its grid options prior to toggling the row const previousSelectedRows = this._grid.getSelectedRows(); - if (this._addonOptions.onRowToggleStart) { + if (typeof this._addonOptions.onRowToggleStart === 'function') { this._addonOptions.onRowToggleStart(event, { row, previousSelectedRows }); } @@ -320,18 +328,22 @@ export class SlickCheckboxSelectColumn { if (args.column.field === (this._addonOptions.field || '_checkbox_selector')) { emptyElement(args.node); - // - const spanElm = createDomElement('span', { id: 'filter-checkbox-selectall-container', ariaChecked: 'false' }); - spanElm.appendChild( - createDomElement('input', { type: 'checkbox', id: `header-filter-selector${this._selectAll_UID}` }) + const inputId = `header-filter-selector${this._selectAll_UID}`; + const labelElm = createDomElement('label', { id: 'filter-checkbox-selectall-container', htmlFor: inputId }); + const divElm = createDomElement('div', { className: 'icon-checkbox-container' }); + divElm.appendChild( + createDomElement('input', { id: inputId, type: 'checkbox', ariaChecked: 'false' }) ); - spanElm.appendChild( - createDomElement('label', { htmlFor: `header-filter-selector${this._selectAll_UID}` }) + divElm.appendChild( + createDomElement('div', { className: 'mdi mdi-icon-uncheck' }) ); - args.node.appendChild(spanElm); + + labelElm.appendChild(divElm); + args.node.appendChild(labelElm); this._headerRowNode = args.node; + this._headerRowNode.classList.add('checkbox-header'); - this._bindEventService.bind(spanElm, 'click', ((e: DOMMouseOrTouchEvent) => this.handleHeaderClick(e, args)) as EventListener); + this._bindEventService.bind(labelElm, 'click', ((e: DOMMouseOrTouchEvent) => this.handleHeaderClick(e, args)) as EventListener); } }); } @@ -392,10 +404,14 @@ 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 .mdi'); if (selectAllElm) { selectAllElm.ariaChecked = String(this._isSelectAllChecked); selectAllElm.checked = this._isSelectAllChecked; } + if (selectAllIconElm) { + selectAllIconElm.className = `mdi ${this._isSelectAllChecked ? CHECK_ICON : UNCHECK_ICON}`; + } } } @@ -562,10 +578,11 @@ export class SlickCheckboxSelectColumn { } protected renderSelectAllCheckbox(isSelectAllChecked: boolean) { - this._grid.updateColumnHeader( + const colHeaderElm = this._grid.updateColumnHeader( this._addonOptions.columnId || '', this.createCheckboxElement(`header-selector${this._selectAll_UID}`, !!isSelectAllChecked), this._addonOptions.toolTip ); + colHeaderElm?.classList.add('header-checkbox-selectall'); } } \ No newline at end of file diff --git a/packages/common/src/extensions/slickContextMenu.ts b/packages/common/src/extensions/slickContextMenu.ts index 2049d997f..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 || 'fa fa-clone', + 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 || 'fa fa-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 || 'fa fa-file-excel-o 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 || 'fa fa-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 || 'fa fa-times', + 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 || 'fa fa-compress', + 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 || 'fa fa-expand', + iconCssClass: contextMenu.iconExpandAllGroupsCommand || 'mdi mdi-arrow-expand', titleKey: `${translationPrefix}EXPAND_ALL_GROUPS`, disabled: false, command: commandName, diff --git a/packages/common/src/extensions/slickDraggableGrouping.ts b/packages/common/src/extensions/slickDraggableGrouping.ts index 7b6568fa8..1782910ad 100644 --- a/packages/common/src/extensions/slickDraggableGrouping.ts +++ b/packages/common/src/extensions/slickDraggableGrouping.ts @@ -320,7 +320,7 @@ export class SlickDraggableGrouping { draggablePlaceholderElm.style.display = 'none'; } if (groupTogglerElm) { - groupTogglerElm.style.display = 'inline-block'; + groupTogglerElm.style.display = 'inline-flex'; } } @@ -488,7 +488,7 @@ export class SlickDraggableGrouping { // show the "Toggle All" when feature is enabled if (this._groupToggler && this.columnsGroupBy.length > 0) { - this._groupToggler.style.display = 'inline-block'; + this._groupToggler.style.display = 'inline-flex'; } } } diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts index 9dbd8d55c..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 || 'fa fa-times', + 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 || 'fa fa-filter text-danger', + 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 || 'fa fa-random', + 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 || 'fa fa-refresh', + 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 || 'fa fa-random', + 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 || 'fa fa-random', + 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 || 'fa fa-unsorted text-danger', + 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 || 'fa fa-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 || 'fa fa-file-excel-o 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 || 'fa fa-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: 'fa fa-bars', + 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 3a5b5ec81..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 || 'fa fa-thumb-tack', + 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 || 'fa fa-arrows-h', + 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 || 'fa fa-sort-asc', + 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 || 'fa fa-sort-desc', + 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 || 'fa fa-unsorted', + 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 || 'fa fa-filter', + 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 || 'fa fa-times', + 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 29d9afbd9..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 || 'mdi mdi-table-edit 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 || 'mdi mdi-close 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 || 'mdi mdi-check-bold 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 || 'mdi mdi-cancel color-danger', + options.rowBasedEditOptions?.actionButtons?.iconCancelButtonClassName || 'mdi mdi-cancel text-color-danger', }) ); diff --git a/packages/common/src/extensions/slickRowMoveManager.ts b/packages/common/src/extensions/slickRowMoveManager.ts index e989d252e..7bdd91c17 100644 --- a/packages/common/src/extensions/slickRowMoveManager.ts +++ b/packages/common/src/extensions/slickRowMoveManager.ts @@ -320,7 +320,7 @@ export class SlickRowMoveManager { return ''; } else { return { - addClasses: `cell-reorder dnd ${this._addonOptions.cssClass || ''}`, + addClasses: `cell-reorder dnd`, html: createDomElement('div', { className: this._addonOptions.cssClass || '' }), }; } diff --git a/packages/common/src/filters/__tests__/selectFilter.spec.ts b/packages/common/src/filters/__tests__/selectFilter.spec.ts index a33286d3d..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 c3e4b1f93..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 92c483b93..e1a896ebb 100644 --- a/packages/common/src/formatters/__tests__/checkmarkMaterialFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/checkmarkMaterialFormatter.spec.ts @@ -22,7 +22,7 @@ describe('the Checkmark Formatter with Material Design Icon', () => { expect(result2).toBe(''); }); - it('should return the Font Awesome Checkmark icon when the string "True" (case insensitive) is provided', () => { + it('should return the Material Checkmark icon when the string "True" (case insensitive) is provided', () => { 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); @@ -30,13 +30,13 @@ describe('the Checkmark Formatter with Material Design Icon', () => { expect((result2 as HTMLElement).outerHTML).toBe(''); }); - it('should return the Font Awesome Checkmark icon when input is True', () => { + 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(''); }); - it('should return the Font Awesome Checkmark icon when input is a string even if it start with 0', () => { + 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(''); @@ -48,13 +48,13 @@ describe('the Checkmark Formatter with Material Design Icon', () => { expect(result).toBe(''); }); - it('should return the Font Awesome Checkmark icon when input is a number greater than 0', () => { + 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(''); }); - it('should return the Font Awesome Checkmark icon when input is a number as a text greater than 0', () => { + 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(''); @@ -87,7 +87,7 @@ describe('the Checkmark Formatter with Material Design Icon', () => { expect(result2).toBe(''); }); - it('should return the Font Awesome Checkmark icon when input is the "null" or "undefined"', () => { + it('should return the Material Checkmark icon when input is the "null" or "undefined"', () => { const value1 = 'null'; const value2 = 'undefined'; const result1 = checkmarkMaterialFormatter(0, 0, value1, {} as Column, {}, {} as any); diff --git a/packages/common/src/formatters/__tests__/iconBooleanFormatter.spec.ts b/packages/common/src/formatters/__tests__/iconBooleanFormatter.spec.ts index 2fe208421..44b638a1e 100644 --- a/packages/common/src/formatters/__tests__/iconBooleanFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/iconBooleanFormatter.spec.ts @@ -9,75 +9,75 @@ describe('the Checkmark Formatter', () => { it('should return an empty string when no value is passed', () => { const value = null; - const cssClass = 'fa fa-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 = 'fa fa-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 = 'fa fa-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(''); expect(result2).toBe(''); }); - it('should return the Font Awesome Checkmark icon when the string "True" (case insensitive) is provided', () => { + it('should return the Checkmark icon when the string "True" (case insensitive) is provided', () => { const value = 'True'; - const cssClass = 'fa fa-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 Font Awesome Checkmark icon when input is True', () => { + it('should return the Checkmark icon when input is True', () => { const value = true; - const cssClass = 'fa fa-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 Font Awesome Checkmark icon when input is a string even if it start with 0', () => { + it('should return the Checkmark icon when input is a string even if it start with 0', () => { const value = '005A00ABC'; - const cssClass = 'fa fa-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 = 'fa fa-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 Font Awesome Checkmark icon when input is a number greater than 0', () => { + it('should return the Checkmark icon when input is a number greater than 0', () => { const value = 0.000001; - const cssClass = 'fa fa-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 Font Awesome Checkmark icon when input is a number as a text greater than 0', () => { + it('should return the Checkmark icon when input is a number as a text greater than 0', () => { const value = '0.000001'; - const cssClass = 'fa fa-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 = 'fa fa-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 = 'fa fa-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,20 +97,20 @@ 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 = 'fa fa-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(''); expect(result2).toBe(''); }); - it('should return the Font Awesome Checkmark icon when input is the "null" or "undefined"', () => { + it('should return the Checkmark icon when input is the "null" or "undefined"', () => { const value1 = 'null'; const value2 = 'undefined'; - const cssClass = 'fa fa-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 3fc6760ec..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 = 'fa fa-search'; + 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 = 'fa fa-search'; + 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 = 'fa fa-search'; + 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: "fa fa-search" }}`'); + 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/checkmarkFormatter.ts b/packages/common/src/formatters/checkmarkFormatter.ts index ebb66da43..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: 'fa fa-check checkmark-icon', ariaHidden: 'true' }) : ''; + return isChecked ? createDomElement('i', { className: 'mdi mdi-check checkmark-icon', ariaHidden: 'true' }) : ''; }; diff --git a/packages/common/src/formatters/iconBooleanFormatter.ts b/packages/common/src/formatters/iconBooleanFormatter.ts index 447aab3be..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: "fa fa-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 b0a3fba37..3d9c9386a 100644 --- a/packages/common/src/formatters/iconFormatter.ts +++ b/packages/common/src/formatters/iconFormatter.ts @@ -1,17 +1,17 @@ import { createDomElement } from '@slickgrid-universal/utils'; -import { type Formatter } from './../interfaces/index'; +import { type Formatter } from './../interfaces/index'; /** Display whichever icon you want (library agnostic, it could be Font-Awesome or any other) */ 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: "fa fa-search" }}`'); + 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: "fa fa-search" }}`'); + 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 d149d7f72..17c065093 100644 --- a/packages/common/src/global-grid-options.ts +++ b/packages/common/src/global-grid-options.ts @@ -69,13 +69,13 @@ export const GlobalGridOptions: Partial = { hideExportTextDelimitedCommand: true, hideMenuOnScroll: true, hideOptionSection: false, - iconCollapseAllGroupsCommand: 'fa fa-compress mdi mdi-arrow-collapse', - iconExpandAllGroupsCommand: 'fa fa-expand mdi mdi-arrow-expand', - iconClearGroupingCommand: 'fa fa-times mdi mdi-close', - iconCopyCellValueCommand: 'fa fa-clone mdi mdi-content-copy', - iconExportCsvCommand: 'fa fa-download mdi mdi-download', - iconExportExcelCommand: 'fa fa-file-excel-o mdi mdi-file-excel-outline', - iconExportTextDelimitedCommand: 'fa fa-download mdi mdi-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: 'mdi mdi-chevron-down mdi-rotate-270', }, @@ -198,17 +198,17 @@ export const GlobalGridOptions: Partial = { hideToggleFilterCommand: false, hideToggleDarkModeCommand: true, hideTogglePreHeaderCommand: false, - iconCssClass: 'fa fa-bars mdi mdi-menu', - iconClearAllFiltersCommand: 'fa fa-filter mdi mdi-filter-remove-outline', - iconClearAllSortingCommand: 'fa fa-unsorted mdi mdi-swap-vertical', - iconClearFrozenColumnsCommand: 'fa fa-times mdi mdi-pin-off-outline', - iconExportCsvCommand: 'fa fa-download mdi mdi-download', - iconExportExcelCommand: 'fa fa-file-excel-o mdi mdi-file-excel-outline', - iconExportTextDelimitedCommand: 'fa fa-download mdi mdi-download', - iconRefreshDatasetCommand: 'fa fa-refresh mdi mdi-sync', - iconToggleDarkModeCommand: 'fa fa-moon-o mdi mdi-brightness-4', - iconToggleFilterCommand: 'fa fa-random mdi mdi-flip-vertical', - iconTogglePreHeaderCommand: 'fa fa-random mdi mdi-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, @@ -219,13 +219,13 @@ export const GlobalGridOptions: Partial = { autoAlign: true, autoAlignOffset: 4, minWidth: 140, - iconClearFilterCommand: 'fa fa-filter mdi mdi mdi-filter-remove-outline', - iconClearSortCommand: 'fa fa-unsorted mdi mdi-swap-vertical', - iconFreezeColumns: 'fa fa-thumb-tack mdi mdi-pin-outline', - iconSortAscCommand: 'fa fa-sort-amount-asc mdi mdi-flip-v mdi-sort-ascending', - iconSortDescCommand: 'fa fa-sort-amount-desc mdi mdi-flip-v mdi-sort-descending', - iconColumnHideCommand: 'fa fa-times mdi mdi-close', - iconColumnResizeByContentCommand: 'fa fa-arrows-h mdi mdi-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, diff --git a/packages/common/src/services/__tests__/filter.service.spec.ts b/packages/common/src/services/__tests__/filter.service.spec.ts index 716306924..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: 'fa fa-filter mdi mdi-filter-remove-outline', + iconCssClass: 'mdi mdi-filter-remove-outline', positionOrder: 50, title: 'Clear all Filters' }, { command: 'toggle-filter', disabled: false, hidden: true, - iconCssClass: 'fa fa-random mdi mdi-flip-vertical', + iconCssClass: 'mdi mdi-flip-vertical', positionOrder: 52, title: 'Toggle Filter Row' }] diff --git a/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts b/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts index 21ade981c..d688ff068 100644 --- a/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts +++ b/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts @@ -76,7 +76,7 @@ const template =
-
+
All your colums div here
diff --git a/packages/common/src/services/__tests__/sort.service.spec.ts b/packages/common/src/services/__tests__/sort.service.spec.ts index cb6b98d85..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: 'fa fa-unsorted mdi mdi-swap-vertical', + iconCssClass: 'mdi mdi-sort-variant-off', positionOrder: 51, title: 'Clear all Sorting' }] @@ -139,7 +139,7 @@ describe('SortService', () => { const backendSortSpy = jest.spyOn(service, 'onBackendSortChanged'); const setSortSpy = jest.spyOn(gridStub, 'setSortColumns'); - const mockMouseEvent = new Event('mouseup'); + const mockMouseEvent = new SlickEventData(new Event('mouseup')); service.bindBackendOnSort(gridStub); service.clearSortByColumnId(mockMouseEvent, 'firstName'); @@ -155,7 +155,7 @@ describe('SortService', () => { const emitSortChangedSpy = jest.spyOn(service, 'emitSortChanged'); const setSortSpy = jest.spyOn(gridStub, 'setSortColumns'); - const mockMouseEvent = new Event('mouseup'); + const mockMouseEvent = new SlickEventData(new Event('mouseup')); service.bindLocalOnSort(gridStub); service.clearSortByColumnId(mockMouseEvent, 'firstName'); @@ -175,7 +175,7 @@ describe('SortService', () => { const emitSortChangedSpy = jest.spyOn(service, 'emitSortChanged'); const setSortSpy = jest.spyOn(gridStub, 'setSortColumns'); - const mockMouseEvent = new Event('mouseup'); + const mockMouseEvent = new SlickEventData(new Event('mouseup')); service.bindLocalOnSort(gridStub); service.clearSortByColumnId(mockMouseEvent, 'lastName'); @@ -195,7 +195,7 @@ describe('SortService', () => { const gridSortSpy = jest.spyOn(gridStub.onSort, 'notify'); gridStub.getData = () => null as any; // fake a custom dataview by removing the dataView in shared - const mockMouseEvent = new Event('mouseup'); + const mockMouseEvent = new SlickEventData(new Event('mouseup')); service.bindLocalOnSort(gridStub); service.clearSortByColumnId(mockMouseEvent, 'firstName'); @@ -213,7 +213,7 @@ describe('SortService', () => { const sortDefaultSpy = jest.spyOn(service, 'sortLocalGridByDefaultSortFieldId'); const setSortSpy = jest.spyOn(gridStub, 'setSortColumns'); - const mockMouseEvent = new Event('mouseup'); + const mockMouseEvent = new SlickEventData(new Event('mouseup')); service.bindLocalOnSort(gridStub); service.clearSortByColumnId(mockMouseEvent, 'firstName'); @@ -238,7 +238,7 @@ describe('SortService', () => { const sortDefaultSpy = jest.spyOn(service, 'sortLocalGridByDefaultSortFieldId'); const setSortSpy = jest.spyOn(gridStub, 'setSortColumns'); - const mockMouseEvent = new Event('mouseup'); + const mockMouseEvent = new SlickEventData(new Event('mouseup')); service.bindLocalOnSort(gridStub); service.clearSortByColumnId(mockMouseEvent, 'firstName'); diff --git a/packages/common/src/services/groupingAndColspan.service.ts b/packages/common/src/services/groupingAndColspan.service.ts index 64ea6f0be..37bcdf50d 100644 --- a/packages/common/src/services/groupingAndColspan.service.ts +++ b/packages/common/src/services/groupingAndColspan.service.ts @@ -145,7 +145,7 @@ export class GroupingAndColspanService { } else { widthTotal = colDef.width || 0; headerElm = createDomElement('div', { - className: `ui-state-default slick-header-column ${isFrozenGrid ? 'frozen' : ''}`, + className: `slick-state-default slick-header-column ${isFrozenGrid ? 'frozen' : ''}`, style: { width: `${widthTotal - headerColumnWidthDiff}px` } }); diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index 97aa452e4..4bbcff957 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -2,17 +2,15 @@ /** * This is a bare version of "slickgrid-theme-material.scss", - * Few files were removed and aren't included in this styling theme (while they are in original theme) - * - (colors, extra-styling, material-svg-icons, material-svg-utilities, slick-without-bootstrap-min-styling) + * A few files were removed and aren't included in this styling theme (while they are in original theme) + * - (colors, extra-styling, slickgrid-icons, slickgrid-icons-svg-utils, slick-without-bootstrap-min-styling) */ $slick-primary-color: #009530 !default; $slick-highlight-color: #48c774 !default; $slick-font-family: Roboto, "Helvetica Neue", sans-serif !default; $slick-font-size-base-value: 14 !default; -$slick-icon-color: #3f3e3e !default; -$slick-icon-font-family: "Material Design Icons" !default; -$slick-icon-font-size: 18px !default; +$slick-icon-color: inherit !default; $slick-icon-width: 18px !default; $slick-group-totals-formatter-color: #666666 !default; $slick-cell-border-top: none !default; @@ -43,28 +41,14 @@ $slick-container-border-bottom: 1px solid #ccc !defa $slick-container-border-left: 1px solid #ccc !default; $slick-container-border-right: 1px solid #ccc !default; $slick-icon-sort-color: $slick-primary-color !default; -$slick-icon-sort-asc: url('data:image/svg+xml,') !default; -$slick-icon-sort-desc: url('data:image/svg+xml,') !default; -$slick-icon-sort-font-size: $slick-icon-width !default; -$slick-icon-sort-position-right: 14px !default; -$slick-icon-sort-width: $slick-icon-width !default; -$slick-checkbox-selector-size: 22px !default; -$slick-checkbox-selector-color: $slick-primary-color !default; -$slick-checkbox-selector-icon-width: $slick-checkbox-selector-size !default; -$slick-checkbox-selector-icon-checked: url('data:image/svg+xml,') !default; -$slick-checkbox-selector-icon-unchecked: url('data:image/svg+xml,') !default; -$slick-checkbox-selector-opacity: 1 !default; -$slick-checkbox-selector-opacity-hover: 0.9 !default; -$slick-column-picker-checkbox-color: $slick-primary-color !default; -$slick-column-picker-checkbox-size: $slick-icon-width !default; -$slick-column-picker-checkbox-font-weight: normal !default; -$slick-column-picker-checkbox-icon-checked: url('data:image/svg+xml,') !default; -$slick-column-picker-checkbox-icon-unchecked: $slick-column-picker-checkbox-icon-checked !default; -$slick-column-picker-checkbox-width: $slick-icon-width !default; +$slick-checkbox-icon-color: $slick-primary-color !default; +$slick-checkbox-icon-container-bg-color: transparent !default; +$slick-checkbox-icon-checked-svg-path: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" !default; +$slick-checkbox-icon-unchecked-svg-path: "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" !default; +$slick-checkbox-opacity-hover: 0.9 !default; +$slick-checkbox-unchecked-opacity: 1 !default; $slick-column-picker-close-btn-font-size: 23px !default; $slick-column-picker-item-font-size: 14px !default; -$slick-column-picker-checkbox-icon-line-height: 16px !default; -$slick-column-picker-checkbox-icon-vertical-align: middle !default; $slick-column-picker-item-height: 26px !default; $slick-column-picker-item-line-height: 16px !default; $slick-column-picker-title-font-size: 17px !default; @@ -74,24 +58,13 @@ $slick-menu-icon-line-height: 18px !default; $slick-menu-icon-min-width: 18px !default; $slick-menu-icon-width: 18px !default; $slick-menu-title-font-size: 17px !default; -$slick-icon-group-width: 22px !default; $slick-icon-group-color: $slick-primary-color !default; -$slick-icon-group-collapsed: url('data:image/svg+xml,') !default; -$slick-icon-group-expanded: url('data:image/svg+xml,') !default; -$slick-icon-group-font-weight: normal !default; -$slick-icon-group-height: auto !default; -$slick-icon-group-vertical-align: bottom !default; $slick-draggable-group-drop-border-top: 0px !default; $slick-draggable-group-drop-border-left: 0px !default; $slick-draggable-group-drop-border-right: 0px !default; $slick-draggable-group-drop-width: 100% !default; $slick-draggable-group-drop-radius: 0 !default; $slick-draggable-group-delete-vertical-align: middle !default; -$slick-draggable-group-toggle-all-icon-height: $slick-icon-font-size !default; -$slick-draggable-group-toggle-all-icon-width: $slick-icon-font-size !default; -$slick-draggable-group-toggle-all-icon-vertical-align: text-bottom !default; -$slick-draggable-group-toggle-collapsed-icon: $slick-icon-group-collapsed !default; -$slick-draggable-group-toggle-expanded-icon: $slick-icon-group-expanded !default; $slick-draggable-group-title-height: 24px !default; $slick-draggable-group-title-line-height: 24px !default; $slick-draggable-group-title-vertical-align: top !default; @@ -99,49 +72,19 @@ $slick-header-button-hidden-margin-right: -6px !default; $slick-header-button-height: 18px !default; $slick-header-button-width: 18px !default; $slick-header-button-margin: -4px 0 100px 0 !default; -$slick-header-menu-button-height: 25px !default; -$slick-header-menu-button-icon-font-size: 24px !default; -$slick-header-menu-button-icon-width: 24px !default; $slick-header-menu-button-icon-color: $slick-icon-color !default; -$slick-header-menu-button-icon: url('data:image/svg+xml,') !default; -$slick-header-menu-button-margin-right: 8px !default; $slick-header-menu-display: inline-block !default; -$slick-autocomplete-loading-icon-color: $slick-icon-color !default; -$slick-autocomplete-loading-icon: url('data:image/svg+xml,') !default; -$slick-autocomplete-loading-icon-width: 22px !default; -$slick-autocomplete-loading-icon-margin: 2px 0 0 -26px !default; -$slick-autocomplete-loading-icon-line-height: 0px !default; -$slick-autocomplete-loading-icon-vertical-align: sub !default; $slick-compound-filter-operator-select-border: 1px solid #{lighten($slick-primary-color, 10%)} !default; $slick-compound-filter-text-color: darken($slick-primary-color, 20%) !default; $slick-preheader-border-right: 1px solid #e2e2e2 !default; $slick-row-move-plugin-cursor: grab !default; $slick-row-move-plugin-icon-color: $slick-icon-color !default; -$slick-row-move-plugin-icon-vertical-align: -webkit-baseline-middle !default; -$slick-row-move-plugin-icon: url('data:image/svg+xml,') !default; $slick-editor-input-height: 100% !default; $slick-editor-input-group-clear-btn-icon-color: $slick-icon-color !default; -$slick-editor-input-group-clear-btn-icon: url('data:image/svg+xml,') !default; $slick-editor-input-group-clear-btn-icon-padding: 1px 6px !default; -$slick-editor-input-group-clear-btn-icon-size: calc(#{$slick-icon-font-size} + 2px) !default; -$slick-editor-input-group-clear-btn-icon-width: 14px !default; $slick-row-mouse-hover-color: #ebfaef !default; $slick-row-selected-color: #d4f6d7 !default; -$slick-detail-view-icon-collapse-color: $slick-primary-color !default; -$slick-detail-view-icon-expand-color: $slick-primary-color !default; -$slick-detail-view-icon-collapse: url('data:image/svg+xml,') !default; -$slick-detail-view-icon-expand: url('data:image/svg+xml,') !default; $slick-pagination-icon-color: $slick-primary-color !default; -$slick-pagination-icon-height: $slick-icon-width !default; -$slick-pagination-icon-seek-first: url('data:image/svg+xml,') !default; -$slick-pagination-icon-seek-end: url('data:image/svg+xml,') !default; -$slick-pagination-icon-seek-next: url('data:image/svg+xml,') !default; -$slick-pagination-icon-seek-prev: url('data:image/svg+xml, ') !default; -$slick-pagination-icon-seek-first-width: $slick-icon-width !default; -$slick-pagination-icon-seek-prev-width: $slick-icon-width !default; -$slick-pagination-icon-seek-next-width: $slick-icon-width !default; -$slick-pagination-icon-seek-end-width: $slick-icon-width !default; -$slick-pagination-button-padding: 6px 9px !default; $slick-pagination-button-border-radius: 2px !default; $slick-pagination-page-input-border-radius: 3px !default; @@ -150,12 +93,12 @@ $slick-pagination-page-input-border-radius: 3px !default; .ms-dark-mode, .ms-drop.ms-dark-mode, .slick-dark-mode .ms-dark-mode, +.slick-dark-mode .icon-checkbox-container, .slick-dark-mode { + --slick-primary-color: #66bb6a !important; --slick-base-dark-menu-bg-color: #212121; - --slick-primary-color: #66bb6a; - --slick-button-primary-bg-color: var(--slick-primary-color); + --slick-button-primary-bg-color: #66bb6a; --slick-cell-box-shadow: none; - --slick-column-picker-checkbox-color: #49a54e; --slick-compound-filter-text-color: #66bb6a; --slick-compound-filter-operator-select-border: 1px solid #66bb6a; --slick-header-filter-row-border-bottom: 1px solid #505050; @@ -167,16 +110,17 @@ $slick-pagination-page-input-border-radius: 3px !default; --slick-filled-filter-color: #66bb6a; --slick-highlight-color: #49a54e; --slick-pagination-icon-color: #49a54e; - --slick-checkbox-selector-opacity: 1; - --slick-checkbox-selector-checked-color: #66bb6a; + --slick-checkbox-icon-color: #4dae52; --slick-row-mouse-hover-box-shadow: none; --slick-row-mouse-hover-color: #575757; --slick-row-selected-color: #4b4b4b; - --slick-checkbox-selector-icon-height: 22px; - --slick-checkbox-selector-icon-bg-color: transparent; - --slick-checkbox-selector-icon-border: none; - --slick-multiselect-icon-radio-color: var(--slick-primary-color); - --ms-checkbox-color: var(--slick-primary-color); + --slick-checkbox-icon-color: #59c55f; + --slick-checkbox-icon-height: 22px; + --slick-checkbox-icon-bg-color: transparent; + --slick-checkbox-icon-border: none; + --slick-icon-sort-color: #66bb6a; + --slick-multiselect-icon-radio-color: #66bb6a; + --ms-checkbox-color: #66bb6a; --ms-checkbox-hover-color: #{lighten(#49a54e, 13%)}; --ms-ok-button-text-color: #66bb6a; --ms-ok-button-text-hover-color: #{lighten(#66bb6a, 5%)}; diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index 6cb033377..53e45a533 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -3,8 +3,8 @@ /** * This is a bare version of "slickgrid-theme-salesforce.scss", - * Few files were removed and aren't included in this styling theme (while they are in original theme) - * - (colors, extra-styling, material-svg-icons, material-svg-utilities, slick-without-bootstrap-min-styling) + * A few files were removed and aren't included in this styling theme (while they are in original theme) + * - (colors, extra-styling, slickgrid-icons, slickgrid-icons-svg-utils, slick-without-bootstrap-min-styling) */ $slick-primary-color: #006DCC !default; @@ -13,7 +13,7 @@ $slick-highlight-color: #0070D2 !default; $slick-button-primary-bg-color: $slick-primary-color-dark !default; $slick-button-primary-color: $slick-primary-color-dark !default; $slick-bare-color: #b5b5b5 !default; -$slick-icon-color: #777777 !default; +$slick-icon-color: inherit !default; $slick-font-family: var(--lwc-fontFamily,'Salesforce Sans', 'SalesforceSans-Regular', Arial, sans-serif) !default; $slick-cell-active-box-shadow: inset 0 0 0 1px #{$slick-highlight-color} !default; $slick-cell-border-top: none !default; @@ -21,9 +21,7 @@ $slick-cell-border-bottom: none !default; $slick-cell-box-shadow: 0px 1px 0px #dddbda, 0px -1px 0px #dddbda !default; $slick-cell-font-weight: 400 !default; $slick-cell-odd-background-color: #f3f2f2 !default; -$slick-cell-text-color: #080707 !default; -$slick-font-size-base-value: 13 !default; -$slick-icon-font-size: 18px !default; +$slick-cell-text-color: #333 !default; $slick-icon-width: 18px !default; $slick-frozen-border-bottom: 1px solid #{$slick-highlight-color} !default; $slick-frozen-border-right: 1px solid #{$slick-highlight-color} !default; @@ -50,36 +48,17 @@ $slick-container-border-bottom: 1px solid #ccc !de $slick-container-border-left: 0px solid #ccc !default; $slick-container-border-right: 0px solid #ccc !default; $slick-icon-sort-color: $slick-highlight-color !default; -$slick-icon-sort-asc: url('data:image/svg+xml,') !default; -$slick-icon-sort-desc: url('data:image/svg+xml,') !default; -$slick-icon-sort-font-size: 13px !default; -$slick-icon-sort-width: 13px !default; -$slick-icon-sort-position-right: 12px !default; -$slick-checkbox-selector-checked-color: $slick-highlight-color !default; -$slick-checkbox-selector-unchecked-color: $slick-bare-color !default; -$slick-checkbox-selector-size: 12px !default; -$slick-checkbox-selector-icon-font-weight: normal !default; -$slick-checkbox-selector-icon-height: calc(#{$slick-checkbox-selector-size} + 4px) !default; -$slick-checkbox-selector-icon-width: calc(#{$slick-checkbox-selector-size} + 4px) !default; -$slick-checkbox-selector-icon-margin: 2px 0 0 0 !default; -$slick-checkbox-selector-icon-border: 1px solid #d6d4d4 !default; -$slick-checkbox-selector-icon-border-radius: 0.125rem !default; -$slick-checkbox-selector-icon-bg-color: white !default; -$slick-checkbox-selector-color: $slick-highlight-color !default; -$slick-checkbox-selector-icon-checked: url('data:image/svg+xml,') !default; -$slick-checkbox-selector-icon-unchecked: url('data:image/svg+xml,') !default; -$slick-checkbox-selector-opacity: 1 !default; -$slick-checkbox-selector-opacity-hover: 0.9 !default; -$slick-column-picker-checkbox-color: $slick-primary-color !default; -$slick-column-picker-checkbox-size: $slick-icon-width !default; -$slick-column-picker-checkbox-font-weight: normal !default; -$slick-column-picker-checkbox-icon-checked: url('data:image/svg+xml,') !default; -$slick-column-picker-checkbox-icon-unchecked: $slick-column-picker-checkbox-icon-checked !default; -$slick-column-picker-checkbox-width: 13px !default; +$slick-checkbox-icon-color: $slick-highlight-color !default; +$slick-checkbox-icon-border: 1px solid #d6d4d4 !default; +$slick-checkbox-icon-border-radius: 0.125rem !default; +$slick-checkbox-icon-container-bg-color: white !default; +$slick-checkbox-icon-container-size: 1.05rem !default; +$slick-checkbox-icon-unchecked-svg-path: "" !default; +$slick-checkbox-icon-unchecked-color-visibility: hidden !default; +$slick-checkbox-opacity-hover: 0.9 !default; +$slick-checkbox-unchecked-opacity: 1 !default; $slick-column-picker-close-btn-font-size: 23px !default; $slick-column-picker-item-font-size: 14px !default; -$slick-column-picker-checkbox-icon-line-height: 16px !default; -$slick-column-picker-checkbox-icon-vertical-align: middle !default; $slick-column-picker-item-height: 26px !default; $slick-column-picker-item-line-height: 16px !default; $slick-column-picker-title-font-size: 17px !default; @@ -87,15 +66,8 @@ $slick-menu-item-font-size: 14px !default; $slick-menu-item-height: 26px !default; $slick-menu-icon-line-height: 18px !default; $slick-menu-icon-min-width: 18px !default; -$slick-menu-icon-width: 18px !default; $slick-menu-title-font-size: 17px !default; $slick-icon-group-color: $slick-primary-color !default; -$slick-icon-group-collapsed: url('data:image/svg+xml,') !default; -$slick-icon-group-expanded: url('data:image/svg+xml,') !default; -$slick-icon-group-font-weight: normal !default; -$slick-icon-group-height: auto !default; -$slick-icon-group-vertical-align: bottom !default; -$slick-icon-group-width: 15px !default; $slick-filled-filter-color: $slick-primary-color-dark !default; $slick-filled-filter-border: 1px solid #{$slick-primary-color} !default; $slick-filled-filter-box-shadow: inset 0 0 0 1px #{lighten($slick-primary-color, 30%)} !default; @@ -104,11 +76,6 @@ $slick-draggable-group-drop-border-top: 0px !default; $slick-draggable-group-drop-width: 100% !default; $slick-draggable-group-drop-radius: 0px !default; $slick-draggable-group-delete-vertical-align: middle !default; -$slick-draggable-group-toggle-all-icon-height: $slick-icon-font-size !default; -$slick-draggable-group-toggle-all-icon-width: $slick-icon-font-size !default; -$slick-draggable-group-toggle-all-icon-vertical-align: text-bottom !default; -$slick-draggable-group-toggle-collapsed-icon: $slick-icon-group-collapsed !default; -$slick-draggable-group-toggle-expanded-icon: $slick-icon-group-expanded !default; $slick-draggable-group-title-height: 24px !default; $slick-draggable-group-title-line-height: 24px !default; $slick-draggable-group-title-vertical-align: top !default; @@ -116,17 +83,7 @@ $slick-header-button-hidden-margin-right: -6px !default; $slick-header-button-height: 18px !default; $slick-header-button-width: 18px !default; $slick-header-button-margin: -4px 0 100px 0 !default; -$slick-header-menu-button-height: 25px !default; -$slick-header-menu-button-icon-font-size: 26px !default; -$slick-header-menu-button-icon-color: #706e6b !default; -$slick-header-menu-button-icon: url('data:image/svg+xml,') !default; -$slick-header-menu-button-margin-right: 8px !default; -$slick-autocomplete-loading-icon-color: $slick-icon-color !default; -$slick-autocomplete-loading-icon: url('data:image/svg+xml,') !default; -$slick-autocomplete-loading-icon-width: 22px !default; -$slick-autocomplete-loading-icon-margin: 2px 0 0 -26px !default; -$slick-autocomplete-loading-icon-line-height: 0px !default; -$slick-autocomplete-loading-icon-vertical-align: sub !default; +$slick-header-menu-button-icon-color: inherit !default; $slick-compound-filter-operator-select-border: 1px solid #6cb6ff !default; $slick-compound-filter-text-color: $slick-primary-color-dark !default; $slick-multiselect-icon-checked-color: $slick-highlight-color !default; @@ -139,15 +96,9 @@ $slick-preheader-font-size: 14px !default; $slick-preheader-height: 21px !default; $slick-row-move-plugin-icon-color: $slick-icon-color !default; $slick-row-move-plugin-cursor: grab !default; -$slick-row-move-plugin-icon-width: 18px !default; -$slick-row-move-plugin-icon-vertical-align: -webkit-baseline-middle !default; -$slick-row-move-plugin-icon: url('data:image/svg+xml,') !default; $slick-editor-input-height: 100% !default; $slick-editor-input-group-clear-btn-icon-color: $slick-icon-color !default; -$slick-editor-input-group-clear-btn-icon: url('data:image/svg+xml,') !default; $slick-editor-input-group-clear-btn-icon-padding: 1px 6px !default; -$slick-editor-input-group-clear-btn-icon-size: calc(#{$slick-icon-font-size} + 2px) !default; -$slick-editor-input-group-clear-btn-icon-width: 14px !default; $slick-editor-focus-box-shadow: 0 0 3px $slick-primary-color !default; $slick-editor-modal-container-radius: var(--lwc-borderRadiusMedium, 0.25rem) !default; $slick-editor-modal-close-btn-outside-color: #ffffff !default; @@ -168,21 +119,7 @@ $slick-row-selected-color: #ECEBEA !default; $slick-row-highlight-background-color: lighten($slick-highlight-color, 50%) !default; $slick-row-mouse-hover-color: #f3f2f2 !default; $slick-row-mouse-hover-box-shadow: 0 0 0 2px #dddbda !default; -$slick-detail-view-icon-collapse-color: $slick-primary-color !default; -$slick-detail-view-icon-expand-color: $slick-primary-color !default; -$slick-detail-view-icon-collapse: url('data:image/svg+xml,') !default; -$slick-detail-view-icon-expand: url('data:image/svg+xml,') !default; $slick-pagination-icon-color: $slick-primary-color !default; -$slick-pagination-icon-height: $slick-icon-width !default; -$slick-pagination-icon-seek-first: url('data:image/svg+xml,') !default; -$slick-pagination-icon-seek-end: url('data:image/svg+xml,') !default; -$slick-pagination-icon-seek-next: url('data:image/svg+xml,') !default; -$slick-pagination-icon-seek-prev: url('data:image/svg+xml, ') !default; -$slick-pagination-icon-seek-first-width: $slick-icon-width !default; -$slick-pagination-icon-seek-prev-width: $slick-icon-width !default; -$slick-pagination-icon-seek-next-width: $slick-icon-width !default; -$slick-pagination-icon-seek-end-width: $slick-icon-width !default; -$slick-pagination-button-padding: 6px 9px !default; $slick-pagination-button-border-radius: 2px !default; $slick-pagination-page-input-border-radius: 3px !default; @@ -191,19 +128,25 @@ $slick-pagination-page-input-border-radius: 3px !default; .ms-dark-mode, .ms-drop.ms-dark-mode, .slick-dark-mode .ms-dark-mode, +.slick-dark-mode .icon-checkbox-container, .slick-dark-mode { - --ms-checkbox-color: #3a9ef5; - --ms-ok-button-text-color: #3a9ef5; - --slick-button-primary-bg-color: #0057ac; - --slick-multiselect-icon-checked-color: #3a9ef5; + --slick-primary-color: #66b8ff !important; + --ms-checkbox-color: #66b8ff; + --ms-ok-button-text-color: #66b8ff; + --slick-button-primary-bg-color: #0064c9; + --slick-multiselect-icon-checked-color: #66b8ff; --slick-base-dark-menu-bg-color: #212121; + --slick-cell-active-box-shadow: inset 0 0 0 1px #3ca4ff; --slick-cell-box-shadow: 0px 1px 0px #303030, 0px -1px 0px #303030; - --slick-column-picker-checkbox-color: #3a9ef5; + --slick-checkbox-icon-container-bg-color: #2d2d2d; + --slick-highlight-color: #3ca4ff; + --slick-column-picker-icon-color: #66b8ff; + --slick-checkbox-icon-color: #66b8ff; + --slick-checkbox-icon-border: 1px solid #5e5e5e; --slick-compound-filter-text-color: #66b8ff; --slick-filled-filter-color: #66b8ff; - --slick-header-filter-row-border-bottom: 2px solid #0389ff; - --slick-highlight-color: #0389ff; - --slick-pagination-icon-color: #1190ff; + --slick-icon-sort-color: #66b8ff; + --slick-header-filter-row-border-bottom: 2px solid #0389ff; + --slick-pagination-icon-color: #66b8ff; --slick-row-mouse-hover-box-shadow: 0 0 0 2px #3a3a3a; - --slick-checkbox-selector-icon-border: 1px solid #888888; } diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 430c74d64..ea46468fe 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -72,7 +72,7 @@ $slick-cell-active-border: none !default; $slick-cell-active-box-shadow: inset 0 0 0 1px #aaaaaa !default; $slick-cell-active-z-index: 6 !default; $slick-cell-box-shadow: none !default; -$slick-cell-text-color: #000000 !default; +$slick-cell-text-color: #333 !default; $slick-cell-font-family: $slick-font-family !default; $slick-cell-font-weight: normal !default; $slick-cell-border-top: 1px solid #{$slick-border-color} !default; @@ -122,7 +122,7 @@ $slick-header-column-height: calc(17px * #{$slick $slick-header-column-background-active: darken($slick-grid-header-background, 5%) !default; $slick-header-column-background-hover: darken($slick-grid-header-background, 2%) !default; $slick-header-column-sortable-background-hover: #e0e0e0 !default; -$slick-header-column-name-margin-right: 5px !default; +$slick-header-column-name-margin-right: 0 !default; $slick-header-column-border-top: 0 none !default; // header, column titles, that is without the Filters $slick-header-column-border-right: 0 none !default; $slick-header-column-border-bottom: 0 none !default; @@ -166,36 +166,31 @@ $slick-frozen-filter-row-border-right: $slick-frozen-border $slick-frozen-overflow-right: scroll !default; // typically we would like to always have the scroll displayed when using hamburger menu (top right) /* icon font is using Font-Awesome by default but could be changed to any other icon package like Glyphicons, ... */ -$slick-icon-color: #4a4a4a !default; -$slick-icon-font-family: "FontAwesome" !default; // or Glyphicons Halflings */ -$slick-icon-font-size: 14px !default; +$slick-icon-color: inherit !default; +$slick-icon-font-size: 18px !default; $slick-icon-group-color: $slick-primary-color !default; -$slick-icon-group-expanded: "\f107" !default; -$slick-icon-group-collapsed: "\f105" !default; -$slick-icon-group-font-size: calc(#{$slick-icon-font-size} + 4px) !default; -$slick-icon-group-font-weight: bold !default; +$slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" !default; +$slick-icon-group-expanded-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" !default; +$slick-icon-group-font-size: calc(#{$slick-icon-font-size} + 6px) !default; $slick-icon-group-margin-right: 2px !default; -$slick-icon-group-height: 20px !default; -$slick-icon-group-vertical-align: middle !default; -$slick-icon-group-width: 14px !default; /* Kraaden AutoComplete */ -$slick-autocomplete-bg-color: #ffffff !default; -$slick-autocomplete-group-bg-color: #eeeeee !default; -$slick-autocomplete-border: 1px solid rgba(0, 0, 0, 0.15) !default; -$slick-autocomplete-hover-bg-color: darken($slick-row-mouse-hover-color, 3%) !default; -$slick-autocomplete-loading-input-bg-color: transparent !default; -$slick-autocomplete-loading-icon: "\f021" !default; -$slick-autocomplete-loading-icon-color: $slick-icon-color !default; -$slick-autocomplete-loading-icon-width: inherit !default; -$slick-autocomplete-loading-icon-margin: 0 0 0 -16px !default; -$slick-autocomplete-loading-icon-line-height: 0px !default; -$slick-autocomplete-loading-icon-vertical-align: inherit !default; -$slick-autocomplete-max-height: 25vh !default; -$slick-autocomplete-min-height: 75px !default; -$slick-autocomplete-min-width: 110px !default; -$slick-autocomplete-text-color: #333333 !default; -$slick-autocomplete-z-index: 9999 !default; +$slick-autocomplete-bg-color: #ffffff !default; +$slick-autocomplete-group-bg-color: #eeeeee !default; +$slick-autocomplete-border: 1px solid rgba(0, 0, 0, 0.15) !default; +$slick-autocomplete-hover-bg-color: darken($slick-row-mouse-hover-color, 3%) !default; +$slick-autocomplete-loading-input-bg-color: transparent !default; +$slick-autocomplete-loading-icon-color: #777777 !default; +$slick-autocomplete-loading-icon: url('data:image/svg+xml,') !default; +$slick-autocomplete-loading-icon-width: 22px !default; +$slick-autocomplete-loading-icon-margin: 0 0 0 -26px !default; +$slick-autocomplete-loading-icon-line-height: 0px !default; +$slick-autocomplete-loading-icon-vertical-align: sub !default; +$slick-autocomplete-max-height: 25vh !default; +$slick-autocomplete-min-height: 75px !default; +$slick-autocomplete-min-width: 110px !default; +$slick-autocomplete-text-color: #333333 !default; +$slick-autocomplete-z-index: 9999 !default; /** Kraaden AutoComplete with Custom Styling (2 rows) */ $slick-autocomplete-tpl2-font-size: 12px !default; @@ -248,13 +243,12 @@ $slick-autocomplete-tpl4-top-right-font-weight: bold !default; $slick-autocomplete-tpl4-top-right-max-width: 100px !default; /* Sorting */ -$slick-icon-sort-asc: "\f0d8" !default; -$slick-icon-sort-desc: "\f0d7" !default; +$slick-icon-sort-desc-icon-svg-path: "M16.707 13.293a.999.999 0 0 0-1.414 0L13 15.586V8a1 1 0 1 0-2 0v7.586l-2.293-2.293a.999.999 0 1 0-1.414 1.414L12 19.414l4.707-4.707a.999.999 0 0 0 0-1.414Z"; +$slick-icon-sort-asc-icon-svg-path: "M13 5.586l-4.707 4.707a.999.999 0 1 0 1.414 1.414L12 9.414V17a1 1 0 1 0 2 0V9.414l2.293 2.293a.997.997 0 0 0 1.414 0a.999.999 0 0 0 0-1.414Z"; $slick-icon-sort-color: $slick-primary-color !default; -$slick-icon-sort-font-size: $slick-icon-font-size !default; -$slick-icon-sort-width: $slick-icon-font-size !default; -$slick-icon-sort-position-right: 10px !default; -$slick-icon-sort-position-top: calc((15px * #{$slick-header-row-count}) - 15px) !default; +$slick-icon-sort-font-size: 23px !default; +$slick-icon-sort-position-right: 3px !default; +$slick-icon-sort-position-top: calc((15px * #{$slick-header-row-count}) - 9px) !default; $slick-sort-indicator-number-font-size: 10px !default; $slick-sort-indicator-number-width: 8px !default; $slick-sort-indicator-number-left: auto !default; @@ -270,15 +264,13 @@ $slick-group-totals-formatter-font-size: 14px !default; $slick-group-totals-text-background: white !default; $slick-group-totals-text-color: gray !default; -/** Detail View Plugin */ -$slick-detail-view-icon-collapse: "\f056" !default; -$slick-detail-view-icon-collapse-color: $slick-primary-color !default; -$slick-detail-view-icon-collapse-color-hover: darken($slick-detail-view-icon-collapse-color, 10%) !default; -$slick-detail-view-icon-expand: "\f055" !default; -$slick-detail-view-icon-expand-color: lighten($slick-primary-color, 25%) !default; -$slick-detail-view-icon-expand-color-hover: darken($slick-detail-view-icon-expand-color, 10%) !default; -$slick-detail-view-icon-size: calc(#{$slick-icon-font-size} + 2px) !default; -$slick-detail-view-icon-width: 18px !default; +/** Row Detail View Plugin */ +$slick-detail-view-icon-color: $slick-primary-color !default; +$slick-detail-view-icon-color-hover: darken($slick-detail-view-icon-color, 10%) !default; +$slick-detail-view-icon-opacity-hover: 1 !default; +$slick-detail-view-icon-collapse-svg-path: "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"; +$slick-detail-view-icon-expand-svg-path: "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"; +$slick-detail-view-icon-font-size: 18px !default; $slick-detail-view-container-bgcolor: #f7f7f7 !default; $slick-detail-view-container-border: 1px solid #c0c0c0 !default; $slick-detail-view-container-left: 0 !default; @@ -301,16 +293,6 @@ $slick-column-picker-background-color: #ffffff !default; $slick-column-picker-border: 1px solid #b8b8b8 !default; $slick-column-picker-border-radius: 2px !default; $slick-column-picker-box-shadow: none !default; -$slick-column-picker-checkbox-color: $slick-primary-color !default; -$slick-column-picker-checkbox-size: 13px !default; -$slick-column-picker-checkbox-font-weight: bold !default; -$slick-column-picker-checkbox-icon-unchecked: "\f00c" !default; -$slick-column-picker-checkbox-icon-checked: "\f00c" !default; -$slick-column-picker-checkbox-icon-line-height: calc(#{$slick-icon-font-size} + 2px) !default; -$slick-column-picker-checkbox-icon-vertical-align: baseline !default; -$slick-column-picker-checkbox-opacity: 0.15 !default; -$slick-column-picker-checkbox-opacity-hover: 0.35 !default; -$slick-column-picker-checkbox-width: 13px !default; $slick-column-picker-close-btn-bg-color: #ffffff !default; $slick-column-picker-close-btn-color: #909090 !default; $slick-column-picker-close-btn-color-hover: darken($slick-column-picker-close-btn-color, 25%) !default; @@ -326,6 +308,16 @@ $slick-column-picker-close-btn-opacity: 0.5 !default; $slick-column-picker-close-btn-opacity-hover: 1 !default; $slick-column-picker-close-btn-position-right: 5px !default; $slick-column-picker-close-btn-position-top: 0px !default; +$slick-column-picker-icon-color: $slick-primary-color !default; +$slick-column-picker-icon-border: none !default; +$slick-column-picker-icon-border-radius: none !default; +$slick-column-picker-icon-container-bg-color: transparent !default; +$slick-column-picker-icon-font-size: 14px !default; +$slick-column-picker-icon-container-line-height: 12px !default; +$slick-column-picker-icon-container-size: 1.2rem !default; +$slick-column-picker-icon-checked-svg-path: "M8.8 19.6L1.2 12c-.3-.3-.3-.8 0-1.1l1-1c.3-.3.8-.3 1 0L9 15.7c.1.2.5.2.6 0L20.9 4.4c.2-.3.7-.3 1 0l1 1c.3.3.3.7 0 1L9.8 19.6c-.2.3-.7.3-1 0z" !default; +$slick-column-picker-icon-unchecked-svg-path: $slick-column-picker-icon-checked-svg-path !default; +$slick-column-picker-icon-unchecked-color-visibility: visible !default; // make this "hidden" when uncheck icon is not provided (e.g. Salesforce Theme) $slick-column-picker-min-width: 150px !default; $slick-column-picker-padding: 6px !default; $slick-column-picker-list-width-firefox: calc(100% + 12px) !default; @@ -343,8 +335,11 @@ $slick-column-picker-item-hover-border: 1px solid #d5d5d5 !d $slick-column-picker-item-hover-color: #fafafa !default; $slick-column-picker-label-margin: 4px !default; $slick-column-picker-label-font-weight: normal !default; +$slick-column-picker-label-text-padding-left: 4px !default; $slick-column-picker-link-background-color: #ffffff !default; $slick-column-picker-list-margin-bottom: 8px !default; +$slick-column-picker-opacity-hover: 0.45 !default; +$slick-column-picker-unchecked-opacity: 0.25 !default; $slick-column-picker-title-border-bottom: 1px solid #d6d6d6 !default; $slick-column-picker-title-font-size: calc(#{$slick-column-picker-item-font-size} + 2px) !default; $slick-column-picker-title-font-weight: normal !default; @@ -401,7 +396,6 @@ $slick-menu-icon-line-height: calc(#{$slick-menu-i $slick-menu-item-width-when-button: calc(100% - #{$slick-menu-close-btn-width}) !default; $slick-menu-icon-margin-right: 4px !default; $slick-menu-icon-min-width: 16px !default; -$slick-menu-icon-width: 16px !default; $slick-menu-line-height: 24px !default; $slick-menu-min-width: 140px !default; $slick-menu-option-list-margin-bottom: 6px !default; @@ -427,41 +421,34 @@ $slick-header-button-margin: 1px 0 100px 0 !defau $slick-header-button-height: 15px !default; $slick-header-button-width: 15px !default; $slick-header-button-hidden-margin-right: -5px !default; -$slick-header-button-hidden-transition: 0.2s width !default; +$slick-header-button-hidden-transition: 0.2s visibility !default; $slick-header-button-vertical-align: top !default; /* Header Menu Plugin */ $slick-header-menu-border: 1px solid #BFBDBD !default; $slick-header-menu-button-border: $slick-header-menu-border !default; $slick-header-menu-button-border-width: 0px !default; -$slick-header-menu-button-height: 35px !default; -$slick-header-menu-button-icon: "\f13a" !default; +$slick-header-menu-button-icon-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" !default; $slick-header-menu-button-icon-color: $slick-icon-color !default; -$slick-header-menu-button-icon-font-size: 14px !default; -$slick-header-menu-button-icon-font-weight: normal !default; -$slick-header-menu-button-icon-width: 14px !default; +$slick-header-menu-button-icon-size: 22px !default; $slick-header-menu-button-padding: 0px !default; $slick-header-menu-button-margin-right: 3px !default; -$slick-header-menu-button-width: 14px !default; $slick-header-menu-display: none !default; /* can be none or inline-block */ /* Checkbox Selector / Row Selection */ -$slick-checkbox-selector-color: $slick-primary-color !default; -$slick-checkbox-selector-checked-color: $slick-checkbox-selector-color !default; -$slick-checkbox-selector-unchecked-color: $slick-checkbox-selector-color !default; -$slick-checkbox-selector-size: calc(#{$slick-icon-font-size} - 1px) !default; -$slick-checkbox-selector-icon: "\f00c" !default; -$slick-checkbox-selector-icon-bg-color: inherit !default; -$slick-checkbox-selector-icon-font-weight: bold !default; -$slick-checkbox-selector-icon-height: $slick-icon-font-size !default; -$slick-checkbox-selector-icon-margin: 0 !default; -$slick-checkbox-selector-icon-width: $slick-icon-font-size !default; -$slick-checkbox-selector-icon-checked: $slick-checkbox-selector-icon !default; -$slick-checkbox-selector-icon-unchecked: $slick-checkbox-selector-icon !default; -$slick-checkbox-selector-icon-border: none !default; -$slick-checkbox-selector-icon-border-radius: none !default; -$slick-checkbox-selector-opacity: 0.15 !default; -$slick-checkbox-selector-opacity-hover: 0.35 !default; +$slick-checkbox-icon-color: $slick-primary-color !default; +$slick-checkbox-icon-border: none !default; +$slick-checkbox-icon-border-radius: none !default; +$slick-checkbox-icon-container-bg-color: transparent !default; +$slick-checkbox-icon-font-size: 20px !default; +$slick-checkbox-icon-container-line-height: 12px !default; +$slick-checkbox-icon-container-size: 1.2rem !default; +$slick-checkbox-icon-checked-svg-path: "M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" !default; +$slick-checkbox-icon-unchecked-svg-path: $slick-checkbox-icon-checked-svg-path !default; +$slick-checkbox-icon-unchecked-color-visibility: visible !default; // make this "hidden" when uncheck icon is not provided (e.g. Salesforce Theme) +$slick-checkbox-label-text-padding-left: 8px !default; +$slick-checkbox-opacity-hover: 0.45 !default; +$slick-checkbox-unchecked-opacity: 0.25 !default; /* Editors */ $slick-editor-bg-color: transparent !default; @@ -471,11 +458,8 @@ $slick-editor-input-disabled-color: #ececec !default; $slick-editor-input-height: 24px !default; $slick-editor-focus-border-color: $slick-input-focus-border-color !default; $slick-editor-focus-box-shadow: $slick-input-focus-box-shadow !default; -$slick-editor-input-group-clear-btn-icon: "\f00d" !default; +$slick-editor-input-group-clear-btn-icon-svg-path: "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" !default; $slick-editor-input-group-clear-btn-icon-padding: 6px !default; -$slick-editor-input-group-clear-btn-icon-size: inherit !default; -$slick-editor-input-group-clear-btn-icon-height: auto !default; -$slick-editor-input-group-clear-btn-icon-width: initial !default; $slick-date-editor-input-padding: 0 0 0 2px !default; $slick-date-editor-focus-border-color: $slick-input-focus-border-color !default; $slick-date-editor-focus-box-shadow: $slick-input-focus-box-shadow !default; @@ -667,8 +651,8 @@ $slick-draggable-group-column-border: 1px solid #d3d3d3 !d $slick-draggable-group-column-border-radius: 20px !default; $slick-draggable-group-column-padding: 0 10px !default; $slick-draggable-group-column-margin-right: 8px !default; -$slick-draggable-group-drop-border-hover: 1px dashed #ff9e9e !default; $slick-draggable-group-drop-border: 1px solid #e0e0e0 !default; +$slick-draggable-group-drop-border-hover: 1px dashed #ff9e9e !default; $slick-draggable-group-drop-border-top: $slick-draggable-group-drop-border !default; $slick-draggable-group-drop-border-bottom: $slick-draggable-group-drop-border !default; $slick-draggable-group-drop-border-right: $slick-draggable-group-drop-border !default; @@ -683,20 +667,14 @@ $slick-draggable-group-droppable-active-bgcolor: #fafafa !default; $slick-draggable-group-droppable-hover-bgcolor: #ffffff !default; $slick-draggable-group-placeholder-font-style: italic !default; $slick-draggable-group-placeholder-color: #616161 !default; -$slick-draggable-group-by-remove-icon: "\f00d" !default; -$slick-draggable-group-by-remove-icon-size: calc(#{$slick-icon-font-size} + 2px) !default; -$slick-draggable-group-sort-asc-icon: $slick-icon-sort-asc !default; -$slick-draggable-group-sort-asc-icon-size: calc(#{$slick-icon-font-size} + 2px) !default; -$slick-draggable-group-sort-desc-icon: $slick-icon-sort-desc !default; -$slick-draggable-group-sort-desc-icon-size: calc(#{$slick-icon-font-size} + 2px) !default; $slick-draggable-group-sort-icon-color: $slick-icon-color !default; -$slick-draggable-group-sort-icon-hover-color: darken($slick-icon-color, 5%) !default; +$slick-draggable-group-sort-icon-hover-color: $slick-icon-color !default; $slick-draggable-group-sort-icon-margin-left: 2px !default; $slick-draggable-group-sort-icon-padding-left: 5px !default; $slick-draggable-group-sort-icon-padding-right: 0px !default; $slick-draggable-group-sort-icon-font-size: 16px !default; $slick-draggable-group-sort-icon-vertical-align: baseline !default; -$slick-draggable-group-delete-color: pink !default; +$slick-draggable-group-delete-color: #ff3c5c !default; $slick-draggable-group-delete-hover-color: red !default; $slick-draggable-group-delete-margin-left: 2px !default; $slick-draggable-group-delete-padding-left: 5px !default; @@ -705,22 +683,19 @@ $slick-draggable-group-delete-font-size: 16px !default; $slick-draggable-group-delete-vertical-align: baseline !default; $slick-draggable-group-toggle-all-border: 1px solid #c7c7c7 !default; $slick-draggable-group-toggle-all-border-radius: 3px !default; -$slick-draggable-group-toggle-all-color: $slick-icon-group-color !default; -$slick-draggable-group-toggle-all-display: none !default; +$slick-draggable-group-toggle-all-icon-color: $slick-icon-group-color !default; $slick-draggable-group-toggle-all-margin-right: 15px !default; $slick-draggable-group-toggle-all-padding: 0 8px !default; $slick-draggable-group-toggle-all-position: relative !default; $slick-draggable-group-toggle-all-top: 0px !default; $slick-draggable-group-toggle-all-right: unset !default; -$slick-draggable-group-toggle-all-icon-vertical-align: middle !default; $slick-draggable-group-toggle-all-text-font-size: 15px !default; $slick-draggable-group-toggle-all-text-margin: 0 0 0 2px !default; -$slick-draggable-group-toggle-all-icon-height: inherit !default; -$slick-draggable-group-toggle-all-icon-width: $slick-icon-font-size !default; -$slick-draggable-group-toggle-collapsed-icon: "\f0fe" !default; -$slick-draggable-group-toggle-expanded-icon: "\f146" !default; -$slick-draggable-group-title-height: $slick-icon-group-height !default; -$slick-draggable-group-title-line-height: $slick-icon-group-height !default; +$slick-draggable-group-toggle-all-icon-font-size: 24px !default; +$slick-draggable-group-toggle-collapsed-icon-svg-path: $slick-icon-group-collapsed-svg-path !default; +$slick-draggable-group-toggle-expanded-icon-svg-path: $slick-icon-group-expanded-svg-path !default; +$slick-draggable-group-title-height: 20px !default; +$slick-draggable-group-title-line-height: 20px !default; $slick-draggable-group-title-vertical-align: none !default; $slick-draggable-group-column-icon-font-weight: normal !default; $slick-draggable-group-column-icon-color: #707070 !default; @@ -805,29 +780,6 @@ $slick-multiselect-select-all-padding: 6px 10px !default; $slick-multiselect-select-all-text-color: darken($slick-primary-color, 5%) !default; $slick-multiselect-select-all-text-hover-color: transparent !default; -// @deprecated, to be removed in next major -// (they are actually no longer associated to anything but removing them now would possibly break user's usage) -$slick-multiselect-icon-height: 20px !default; -$slick-multiselect-icon-margin: 0 !default; -$slick-multiselect-icon-width: 20px !default; -$slick-multiselect-icon-arrow-font-size: $slick-multiselect-icon-font-size !default; -$slick-multiselect-icon-border: none !default; -$slick-multiselect-icon-border-radius: none !default; -$slick-multiselect-icon-radio-border: $slick-multiselect-icon-border !default; -$slick-multiselect-icon-radio-border-radius: $slick-multiselect-icon-border-radius !default; -$slick-multiselect-icon-checked: "\f14a" !default; -$slick-multiselect-icon-radio-color: $slick-primary-color !default; -$slick-multiselect-icon-radio-checked: "\f192" !default; -$slick-multiselect-icon-radio-height: $slick-multiselect-icon-height !default; -$slick-multiselect-icon-radio-margin: $slick-multiselect-icon-margin !default; -$slick-multiselect-icon-radio-unchecked: "\f10c" !default; -$slick-multiselect-icon-radio-width: $slick-multiselect-icon-width !default; -$slick-multiselect-icon-unchecked: "\f096" !default; -$slick-multiselect-icon-unchecked-color: $slick-multiselect-icon-color !default; -$slick-multiselect-icon-vertical-align: middle !default; -$slick-multiselect-icon-search-margin-right: 8px !default; -$slick-multiselect-unchecked-opacity: 0.6 !default; - // override some multiple-select SASS variables with our variables $ms-drop-color: $slick-text-color; $ms-checkbox-color: $slick-multiselect-icon-checked-color; @@ -861,11 +813,12 @@ $ms-select-all-text-color: $slick-multiselect-s /* pagination variables */ $slick-pagination-border-color: #ddd !default; $slick-pagination-button-bg-color: #fff !default; -$slick-pagination-button-border-color: #acacac !default; +$slick-pagination-button-border-color: #b3b3b3 !default; +$slick-pagination-button-border-disabled-color: #dedede !default; $slick-pagination-button-border-radius: 4px !default; $slick-pagination-button-height: 32px !default; $slick-pagination-button-hover-color: #E6E6E6 !default; -$slick-pagination-button-padding: 6px 12px !default; +$slick-pagination-button-padding: 5px 8px !default; $slick-pagination-button-border: 1px solid #{$slick-pagination-button-border-color} !default; $slick-pagination-border-top: 0 none !default; $slick-pagination-border-right: 0 none !default; @@ -876,20 +829,13 @@ $slick-pagination-font-size: calc(#{$slick-font-s $slick-pagination-height: 40px !default; $slick-pagination-icon-color: $slick-primary-color !default; $slick-pagination-icon-font-size: calc(#{$slick-icon-font-size} - 1px) !default; -$slick-pagination-icon-line-height: calc(#{$slick-icon-font-size} + 4px) !default; -$slick-pagination-icon-height: initial !default; -$slick-pagination-icon-seek-first: "\f100" !default; -$slick-pagination-icon-seek-end: "\f101" !default; -$slick-pagination-icon-seek-next: "\f105" !default; -$slick-pagination-icon-seek-prev: "\f104" !default; -$slick-pagination-icon-seek-first-width: initial !default; -$slick-pagination-icon-seek-end-width: initial !default; -$slick-pagination-icon-seek-next-width: initial !default; -$slick-pagination-icon-seek-prev-width: initial !default; -$slick-pagination-icon-seek-disabled-color: #b8b8b8 !default; +$slick-pagination-icon-size: 20px !default; +$slick-pagination-icon-seek-first-svg-path: "M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z" !default; +$slick-pagination-icon-seek-end-svg-path: "M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z" !default; +$slick-pagination-icon-seek-next-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" !default; +$slick-pagination-icon-seek-prev-svg-path: "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" !default; +$slick-pagination-icon-seek-disabled-color: darkgray !default; $slick-pagination-icon-seek-disabled-bg-color: rgb(249, 249, 249) !default; -$slick-pagination-icon-seek-disabled-border-color: #dedede !default; -$slick-pagination-icon-seek-text-stroke: 0.4px !default; $slick-pagination-page-input-border-radius: 4px !default; $slick-pagination-page-input-bgcolor: #fafbed !default; $slick-pagination-page-input-height: 26px !default; @@ -904,10 +850,9 @@ $slick-pagination-page-select-font-size: calc(#{$slick-font-s $slick-pagination-text-color: #808080 !default; /* Row Move Manager Plugin */ -$slick-row-move-plugin-icon: "\f0c9" !default; -$slick-row-move-plugin-icon-vertical-align: bottom !default; -$slick-row-move-plugin-icon-width: $slick-icon-font-size !default; -$slick-row-move-plugin-size: $slick-icon-font-size !default; +$slick-row-move-plugin-icon-color: $slick-icon-color !default; +$slick-row-move-plugin-icon-font-size: calc(#{$slick-icon-font-size} + 2px) !default; +$slick-row-move-plugin-icon-svg-path: "M11,18 C11,19.1 10.1,20 9,20 C7.9,20 7,19.1 7,18 C7,16.9 7.9,16 9,16 C10.1,16 11,16.9 11,18 Z M9,10 C7.9,10 7,10.9 7,12 C7,13.1 7.9,14 9,14 C10.1,14 11,13.1 11,12 C11,10.9 10.1,10 9,10 Z M9,4 C7.9,4 7,4.9 7,6 C7,7.1 7.9,8 9,8 C10.1,8 11,7.1 11,6 C11,4.9 10.1,4 9,4 Z M15,8 C16.1,8 17,7.1 17,6 C17,4.9 16.1,4 15,4 C13.9,4 13,4.9 13,6 C13,7.1 13.9,8 15,8 Z M15,10 C13.9,10 13,10.9 13,12 C13,13.1 13.9,14 15,14 C16.1,14 17,13.1 17,12 C17,10.9 16.1,10 15,10 Z M15,16 C13.9,16 13,16.9 13,18 C13,19.1 13.9,20 15,20 C16.1,20 17,19.1 17,18 C17,16.9 16.1,16 15,16 Z" !default; $slick-row-move-plugin-cursor: move !default; $slick-row-move-plugin-guide-bg-color: blue !default; $slick-row-move-plugin-guide-height: 2px !default; @@ -993,14 +938,14 @@ $slick-empty-data-warning-z-index: 10 !default; .slick-dark-mode { // Bootstrap --bs-body-bg: #212529 // local common CSS vars for dark mode - --primary-color: #{lighten($primary-color, 15%)}; + --slick-primary-color: #{lighten($primary-color, 15%)}; --slick-base-dark-text-color: #cccccc; --slick-base-dark-menu-bg-color: #252525; --slick-base-dark-menu-border: 1px solid #505050; --slick-base-dark-menu-item-border: 1px solid #5a5a5a; --slick-base-dark-menu-item-hover-color: #363b40; --slick-base-dark-invalid-color: #ea868f; - --slick-highlight-color: var(--primary-color); + --slick-highlight-color: var(--slick-primary-color); --slick-text-color: #cccccc; --slick-autocomplete-bg-color: var(--slick-base-dark-menu-bg-color); @@ -1015,27 +960,29 @@ $slick-empty-data-warning-z-index: 10 !default; --slick-btn-default-bg-color: #383838; --slick-cell-even-background-color: #141618; --slick-cell-odd-background-color: #2c3034; - --slick-cell-text-color: #cdcdcd; + --slick-cell-text-color: #d4d4d4; --slick-cell-border-top: 1px solid #474747; --slick-column-picker-background-color: var(--slick-base-dark-menu-bg-color); --slick-column-picker-box-shadow: 0 0 1px #606060; --slick-column-picker-border: var(--slick-base-dark-menu-border); --slick-column-picker-close-btn-color: #bbbbbb; - --slick-column-picker-checkbox-opacity: 0.25; - --slick-column-picker-checkbox-opacity-hover: 0.45; --slick-column-picker-close-btn-bg-color: transparent; - --slick-column-picker-item-hover-color: var(--slick-base-dark-menu-bg-color); --slick-column-picker-hr-bg-color: #434343; --slick-column-picker-hr-divider-border: 1px solid #525252; - --slick-column-picker-item-hover-color: var(--slick-base-dark-menu-item-hover-color); + --slick-column-picker-icon-color: var(--slick-highlight-color); --slick-column-picker-item-hover-border: var(--slick-base-dark-menu-item-border); + --slick-column-picker-item-hover-color: var(--slick-base-dark-menu-item-hover-color); --slick-column-picker-title-border-bottom: 1px solid #525252; - --slick-checkbox-selector-opacity: 0.7; - --slick-checkbox-selector-opacity-hover: 0.85; - --slick-checkbox-selector-checked-color: var(--slick-highlight-color); - --slick-checkbox-selector-icon-bg-color: #444444; - --slick-checkbox-selector-icon-bg-color: transparent; - --slick-checkbox-selector-unchecked-color: #{lighten($primary-color, 10%)}; + --slick-checkbox-opacity-hover: 0.7; + --slick-checkbox-icon-bg-color: #444444; + --slick-checkbox-icon-bg-color: transparent; + --slick-checkbox-unchecked-color: #{lighten($primary-color, 10%)}; + --slick-checkbox-unchecked-opacity: 0.4; + --slick-detail-view-icon-color: var(--slick-primary-color); + --slick-detail-view-icon-color-hover: var(--slick-primary-color); + --slick-detail-view-icon-opacity-hover: 0.75; + --slick-detail-view-container-border: 1px solid #525252; + --slick-detail-view-container-bgcolor: #3c4349; --slick-btn-default-border-color: #565656; --slick-grid-menu-icon-btn-color: #bbbbbb; --slick-row-mouse-hover-color: #2c3034; @@ -1047,6 +994,7 @@ $slick-empty-data-warning-z-index: 10 !default; --slick-pane-top-border-top: 1px solid #606060; --slick-empty-data-warning-color: var(--slick-base-dark-text-color); --slick-grid-header-background: #2d2d2d; + --slick-icon-sort-color: var(--slick-primary-color); --slick-header-column-background-active: #535353; --slick-slider-filter-input-bgcolor: var(--slick-base-dark-menu-bg-color); --slick-menu-bg-color: var(--slick-base-dark-menu-bg-color); @@ -1054,15 +1002,16 @@ $slick-empty-data-warning-z-index: 10 !default; --slick-menu-box-shadow: 0 0 1px #606060; --slick-menu-close-btn-bg-color: transparent; --slick-menu-close-btn-color: #bbbbbb; - --slick-menu-color: #bbbbbb; + --slick-menu-color: #ededed; + --slick-menu-item-disabled-color: #686868; --slick-menu-divider-color: #606060; --slick-menu-item-hover-color: var(--slick-base-dark-menu-bg-color); --slick-menu-item-hover-color: var(--slick-base-dark-menu-item-hover-color); --slick-menu-item-hover-border: var(--slick-base-dark-menu-item-border); --slick-menu-title-border-bottom: 1px solid #525252; - --slick-menu-title-color: #bababa; + --slick-menu-title-color: #cecece; --slick-slider-filter-border: var(--slick-base-dark-menu-item-border); - --slick-slider-filter-thumb-color: #d0d0d0; + --slick-slider-filter-thumb-color: #d0d0d0; --slick-font-color: #d3d3d3; --slick-form-control-border: var(--slick-base-dark-menu-item-border); --slick-form-control-bg-color: var(--slick-base-dark-menu-bg-color); @@ -1079,6 +1028,19 @@ $slick-empty-data-warning-z-index: 10 !default; --slick-footer-right-text-color: #acacac; --slick-grid-header-unorderable-bg-color: #1c1c1c; --slick-slider-filter-runnable-track-bgcolor: #787878; + --slick-draggable-group-placeholder-color: #999; + --slick-draggable-group-drop-bgcolor: #2c3034; + --slick-draggable-group-drop-border: #3e3e3e; + --slick-draggable-group-drop-border-top: var(--slick-draggable-group-drop-border); + --slick-draggable-group-drop-border-bottom: var(--slick-draggable-group-drop-border); + --slick-draggable-group-drop-border-right: var(--slick-draggable-group-drop-border); + --slick-draggable-group-drop-border-left: var(--slick-draggable-group-drop-border); + --slick-draggable-group-toggle-all-border: 1px solid #626262; + --slick-draggable-group-toggle-all-icon-color: var(--slick-primary-color); + --slick-draggable-group-column-border: 1px solid #626262; + --slick-group-totals-formatter-bgcolor: #1f2225; + --slick-group-totals-formatter-color: #f3f3f3; + --slick-icon-group-color: var(--slick-primary-color); --slick-editing-field-bg-color: #333333; --slick-editing-field-border: 1px solid #7c7c7c; --slick-editor-input-disabled-color: #404040; @@ -1114,18 +1076,17 @@ $slick-empty-data-warning-z-index: 10 !default; --slick-large-editor-text-color: var(--slick-base-dark-text-color); --slick-header-menu-button-icon-color: var(--slick-menu-color); --slick-text-editor-background: var(--slick-base-dark-menu-bg-color); - --slick-pagination-button-border-color: #4b4b4b; --slick-pagination-button-border: 1px solid #696969; + --slick-pagination-button-border-color: #4b4b4b; + --slick-pagination-button-border-disabled-color: #565656; --slick-pagination-button-bg-color: #1e1e1e; --slick-pagination-button-hover-color: #2b2b2b; --slick-pagination-icon-seek-background-color: #434343; - --slick-pagination-icon-seek-disabled-color: #b8b8b8; --slick-pagination-icon-seek-disabled-bg-color: #434343; - --slick-pagination-icon-seek-disabled-border-color: #828282; - --slick-pagination-icon-seek-border-color: #828282; + --slick-pagination-icon-seek-disabled-color: gray; --slick-pagination-page-input-bgcolor: #2b2f34; --slick-pagination-page-select-bg-color: #1c1c1c; - --slick-pagination-text-color: #b4b4b4; + --slick-pagination-text-color: #cfcfcf; --slick-scrollbar-color: #828282 #424242; --slick-sorting-header-color: var(--slick-base-dark-text-color); --slick-row-selected-color: #474747; @@ -1148,4 +1109,20 @@ $slick-empty-data-warning-z-index: 10 !default; --ms-ok-button-bg-hover-color: #373c42; --ms-placeholder-color: #999; --ms-select-all-label-hover-border: var(--slick-base-dark-menu-item-border); + + .text-color-primary { + color: var(--slick-primary-color); + } +} + +.dark-mode { + --slick-button-border-color: #626262; + --slick-button-primary-color: #bababa; + --slick-button-style-bg-color: #252525; + .text-color-primary { + --text-color-primary: var(--slick-primary-color, #{lighten($primary-color, 15%)}); + } + .text-color-secondary { + --text-color-secondary: rgba(222, 226, 230, 0.75); + } } \ No newline at end of file diff --git a/packages/common/src/styles/colors-from-filters.scss b/packages/common/src/styles/colors-from-filters.scss deleted file mode 100644 index 319af5b91..000000000 --- a/packages/common/src/styles/colors-from-filters.scss +++ /dev/null @@ -1,87 +0,0 @@ -@import './sass-utilities'; - -/* icon/text colors */ -// we'll use the same color set as text-colors defined in Bootstrap 4 (ref: https://getbootstrap.com/docs/4.5/utilities/colors/) -// we also use CSS Filter to color on top of SVG icons, we use this codepen to calculate the Filter Color (https://codepen.io/sosuke/pen/Pjoqqp) -// since our icon are not pure black, we also need to prepend "brightness(0) saturate(100%)" to the filter -// NOTE: remember that we are using CSS "filter" and that is NOT the same as a using regular color/background-color, it behaves differently - -$color-primary: $slick-primary-color !default; -$color-secondary: #6c757d !default; -$color-success: #28a745 !default; -$color-danger: #dc3545 !default; -$color-warning: #ffc107 !default; -$color-info: #17a2b8 !default; -$color-light: #f8f9fa !default; -$color-dark: #343a40 !default; -$color-body: #212529 !default; -$color-muted: #6c757d !default; -$color-white: #ffffff !default; -$color-disabled: #DDDBDA !default; -$color-disabled-dark: #cccccc !default; -$color-alt-default: #1e87f0 !default; -$color-alt-warning: #faa05a !default; -$color-alt-danger: #f0506e !default; -$color-alt-success: #32d296 !default; -$color-se-primary: #3dcd58 !default; -$color-se-link: #42b4e6 !default; -$color-se-link-dark: #337ab7 !default; -$color-se-danger: #b10043 !default; -$color-se-secondary: #9fa0a4 !default; -$color-se-warning: #e47f00 !default; -$color-se-warning-light: #ffd100 !default; -$color-sf-highlight: #0070D2 !default; -$color-sf-primary: #006DCC !default; -$color-sf-primary-dark: #004487 !default; - -.color-primary { filter: brightness(0) saturate(100%) invert(31%) sepia(57%) saturate(6822%) hue-rotate(194deg) brightness(93%) contrast(102%); } -.color-secondary { filter: brightness(0) saturate(100%) invert(49%) sepia(14%) saturate(290%) hue-rotate(167deg) brightness(89%) contrast(89%); } -.color-success { filter: brightness(0) saturate(100%) invert(46%) sepia(96%) saturate(377%) hue-rotate(81deg) brightness(94%) contrast(91%); } -.color-danger { filter: brightness(0) saturate(100%) invert(35%) sepia(56%) saturate(4390%) hue-rotate(334deg) brightness(88%) contrast(95%); } -.color-warning { filter: brightness(0) saturate(100%) invert(68%) sepia(73%) saturate(596%) hue-rotate(354deg) brightness(105%) contrast(101%); } -.color-info { filter: brightness(0) saturate(100%) invert(51%) sepia(59%) saturate(588%) hue-rotate(140deg) brightness(92%) contrast(94%); } -.color-light { filter: brightness(0) saturate(100%) invert(91%) sepia(4%) saturate(576%) hue-rotate(200deg) brightness(109%) contrast(96%); } -.color-dark { filter: brightness(0) saturate(100%) invert(18%) sepia(6%) saturate(1291%) hue-rotate(169deg) brightness(89%) contrast(82%); } -.color-body { filter: brightness(0) saturate(100%) invert(12%) sepia(9%) saturate(824%) hue-rotate(169deg) brightness(94%) contrast(91%); } -.color-muted { filter: brightness(0) saturate(100%) invert(50%) sepia(2%) saturate(2378%) hue-rotate(168deg) brightness(89%) contrast(84%); } -.color-white { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(54deg) brightness(109%) contrast(101%); } -.color-disabled { filter: brightness(0) saturate(100%) invert(81%) sepia(2%) saturate(180%) hue-rotate(335deg) brightness(108%) contrast(96%); } -.color-disabled-dark { filter: brightness(0) saturate(100%) invert(91%) sepia(0%) saturate(0%) hue-rotate(185deg) brightness(95%) contrast(84%); } -.color-alt-default { filter: brightness(0) saturate(100%) invert(46%) sepia(70%) saturate(3992%) hue-rotate(193deg) brightness(99%) contrast(90%); } -.color-alt-warning { filter: brightness(0) saturate(100%) invert(59%) sepia(94%) saturate(289%) hue-rotate(341deg) brightness(98%) contrast(99%); } -.color-alt-danger { filter: brightness(0) saturate(100%) invert(37%) sepia(84%) saturate(805%) hue-rotate(308deg) brightness(99%) contrast(90%); } -.color-alt-success { filter: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(2532%) hue-rotate(99deg) brightness(87%) contrast(89%); } -.color-se-primary { filter: brightness(0) saturate(100%) invert(67%) sepia(14%) saturate(2047%) hue-rotate(79deg) brightness(97%) contrast(90%); } -.color-se-link { filter: brightness(0) saturate(100%) invert(71%) sepia(47%) saturate(2213%) hue-rotate(167deg) brightness(93%) contrast(94%); } -.color-se-link-dark { filter: brightness(0) saturate(100%) invert(42%) sepia(23%) saturate(1361%) hue-rotate(166deg) brightness(98%) contrast(93%); } -.color-se-danger { filter: brightness(0) saturate(100%) invert(14%) sepia(84%) saturate(3919%) hue-rotate(325deg) brightness(79%) contrast(112%); } -.color-se-secondary { filter: brightness(0) saturate(100%) invert(71%) sepia(5%) saturate(181%) hue-rotate(191deg) brightness(91%) contrast(86%); } -.color-se-warning { filter: brightness(0) saturate(100%) invert(76%) sepia(49%) saturate(7416%) hue-rotate(7deg) brightness(95%) contrast(101%); } -.color-se-warning-light { filter: brightness(0) saturate(100%) invert(85%) sepia(31%) saturate(3980%) hue-rotate(359deg) brightness(103%) contrast(106%); } -.color-sf-highlight { filter: brightness(0) saturate(100%) invert(23%) sepia(97%) saturate(3081%) hue-rotate(195deg) brightness(96%) contrast(101%); } -.color-sf-primary { filter: brightness(0) saturate(100%) invert(26%) sepia(75%) saturate(2018%) hue-rotate(191deg) brightness(99%) contrast(102%); } -.color-sf-primary-dark { filter: brightness(0) saturate(100%) invert(10%) sepia(97%) saturate(4590%) hue-rotate(200deg) brightness(90%) contrast(102%); } - -.color-primary-light { filter: brightness(0) saturate(100%) invert(33%) sepia(82%) saturate(3926%) hue-rotate(193deg) brightness(100%) contrast(101%); } -.color-primary-dark { filter: brightness(0) saturate(100%) invert(21%) sepia(67%) saturate(5693%) hue-rotate(196deg) brightness(85%) contrast(101%); } -.color-secondary-light { filter: brightness(0) saturate(100%) invert(56%) sepia(14%) saturate(260%) hue-rotate(169deg) brightness(90%) contrast(90%); } -.color-secondary-dark { filter: brightness(0) saturate(100%) invert(41%) sepia(5%) saturate(796%) hue-rotate(166deg) brightness(92%) contrast(90%); } -.color-success-light { filter: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(2988%) hue-rotate(80deg) brightness(84%) contrast(94%); } -.color-success-dark { filter: brightness(0) saturate(100%) invert(39%) sepia(90%) saturate(416%) hue-rotate(82deg) brightness(95%) contrast(88%); } -.color-danger-light { filter: brightness(0) saturate(100%) invert(56%) sepia(45%) saturate(5329%) hue-rotate(322deg) brightness(89%) contrast(96%); } -.color-danger-dark { filter: brightness(0) saturate(100%) invert(16%) sepia(80%) saturate(4275%) hue-rotate(345deg) brightness(90%) contrast(85%); } -.color-warning-light { filter: brightness(0) saturate(100%) invert(95%) sepia(47%) saturate(2254%) hue-rotate(329deg) brightness(99%) contrast(102%); } -.color-warning-dark { filter: brightness(0) saturate(100%) invert(60%) sepia(98%) saturate(1494%) hue-rotate(10deg) brightness(103%) contrast(101%); } -.color-info-light { filter: brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(916%) hue-rotate(142deg) brightness(88%) contrast(87%); } -.color-info-dark { filter: brightness(0) saturate(100%) invert(43%) sepia(87%) saturate(490%) hue-rotate(140deg) brightness(86%) contrast(85%); } -.color-muted-light { filter: brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(370%) hue-rotate(169deg) brightness(89%) contrast(85%); } -.color-muted-dark { filter: brightness(0) saturate(100%) invert(38%) sepia(18%) saturate(224%) hue-rotate(166deg) brightness(95%) contrast(88%); } -.color-alt-warning-light { filter: brightness(0) saturate(100%) invert(80%) sepia(36%) saturate(783%) hue-rotate(321deg) brightness(99%) contrast(99%); } -.color-alt-warning-dark { filter: brightness(0) saturate(100%) invert(70%) sepia(17%) saturate(3850%) hue-rotate(332deg) brightness(100%) contrast(96%); } -.color-alt-default-light { filter: brightness(0) saturate(100%) invert(71%) sepia(91%) saturate(4393%) hue-rotate(189deg) brightness(96%) contrast(97%); } -.color-alt-default-dark { filter: brightness(0) saturate(100%) invert(32%) sepia(56%) saturate(3175%) hue-rotate(196deg) brightness(94%) contrast(89%); } -.color-alt-danger-light { filter: brightness(0) saturate(100%) invert(62%) sepia(44%) saturate(3309%) hue-rotate(311deg) brightness(103%) contrast(111%); } -.color-alt-danger-dark { filter: brightness(0) saturate(100%) invert(32%) sepia(51%) saturate(3649%) hue-rotate(329deg) brightness(94%) contrast(97%); } -.color-alt-success-light { filter: brightness(0) saturate(100%) invert(77%) sepia(87%) saturate(336%) hue-rotate(90deg) brightness(90%) contrast(87%); } -.color-alt-success-dark { filter: brightness(0) saturate(100%) invert(53%) sepia(76%) saturate(371%) hue-rotate(106deg) brightness(97%) contrast(99%); } -.color-se-secondary-light { filter: brightness(0) saturate(100%) invert(77%) sepia(9%) saturate(72%) hue-rotate(187deg) brightness(94%) contrast(87%); } diff --git a/packages/common/src/styles/colors.scss b/packages/common/src/styles/colors.scss index e94b1b8b9..b69a8b284 100644 --- a/packages/common/src/styles/colors.scss +++ b/packages/common/src/styles/colors.scss @@ -6,87 +6,88 @@ // NOTE: remember that we are using CSS "filter" and that is NOT the same as a using regular color/background-color, it behaves differently -$color-lighten-percentage: 6% !default; -$color-darken-percentage: 6% !default; +$text-color-lighten-percentage: 6% !default; +$text-color-darken-percentage: 6% !default; -$color-primary: $slick-primary-color !default; -$color-secondary: #6c757d !default; -$color-success: #28a745 !default; -$color-danger: #dc3545 !default; -$color-warning: #ffc107 !default; -$color-info: #17a2b8 !default; -$color-light: #f8f9fa !default; -$color-dark: #343a40 !default; -$color-body: #212529 !default; -$color-muted: #6c757d !default; -$color-white: #ffffff !default; -$color-disabled: #DDDBDA !default; -$color-disabled-dark: #cccccc !default; -$color-alt-default: #1e87f0 !default; -$color-alt-warning: #faa05a !default; -$color-alt-danger: #f0506e !default; -$color-alt-success: #32d296 !default; -$color-se-primary: #3dcd58 !default; -$color-se-link: #42b4e6 !default; -$color-se-link-dark: #337ab7 !default; -$color-se-danger: #b10043 !default; -$color-se-secondary: #9fa0a4 !default; -$color-se-warning: #e47f00 !default; -$color-se-warning-light: #ffd100 !default; -$color-sf-highlight: #0070D2 !default; -$color-sf-primary: #006DCC !default; -$color-sf-primary-dark: #004487 !default; +$text-color-primary: $slick-primary-color !default; +$text-color-secondary: #6c757d !default; +$text-color-success: #28a745 !default; +$text-color-danger: #dc3545 !default; +$text-color-warning: #ffc107 !default; +$text-color-info: #17a2b8 !default; +$text-color-light: #f8f9fa !default; +$text-color-dark: #343a40 !default; +$text-color-body: #212529 !default; +$text-color-muted: #6c757d !default; +$text-color-white: #ffffff !default; +$text-color-disabled: #DDDBDA !default; +$text-color-disabled-dark: #cccccc !default; +$text-color-alt-default: #1e87f0 !default; +$text-color-alt-warning: #faa05a !default; +$text-color-alt-danger: #f0506e !default; +$text-color-alt-success: #32d296 !default; +$text-color-se-primary: #3dcd58 !default; +$text-color-se-link: #42b4e6 !default; +$text-color-se-link-dark: #337ab7 !default; +$text-color-se-danger: #b10043 !default; +$text-color-se-secondary: #9fa0a4 !default; +$text-color-se-warning: #e47f00 !default; +$text-color-se-warning-light: #ffd100 !default; +$text-color-sf-highlight: #0070D2 !default; +$text-color-sf-primary: #006DCC !default; +$text-color-sf-primary-dark: #004487 !default; -.color-primary { @include recolor($color-primary, 1); } -.color-secondary { @include recolor($color-secondary, 1); } -.color-success { @include recolor($color-success, 1); } -.color-danger { @include recolor($color-danger, 1); } -.color-warning { @include recolor($color-warning, 1); } -.color-info { @include recolor($color-info, 1); } -.color-light { @include recolor($color-light, 1); } -.color-dark { @include recolor($color-dark, 1); } -.color-body { @include recolor($color-body, 1); } -.color-muted { @include recolor($color-muted, 1); } -.color-white { @include recolor($color-white, 1); } -.color-disabled { @include recolor($color-disabled, 1); } -.color-disabled-dark { @include recolor($color-disabled-dark, 1); } -.color-alt-default { @include recolor($color-alt-default, 1); } -.color-alt-warning { @include recolor($color-alt-warning, 1); } -.color-alt-danger { @include recolor($color-alt-danger, 1); } -.color-alt-success { @include recolor($color-alt-success, 1); } -.color-se-primary { @include recolor($color-se-primary, 1); } -.color-se-link { @include recolor($color-se-link, 1); } -.color-se-link-dark { @include recolor($color-se-link-dark, 1); } -.color-se-danger { @include recolor($color-se-danger, 1); } -.color-se-secondary { @include recolor($color-se-secondary, 1); } -.color-se-warning { @include recolor($color-se-warning, 1); } -.color-se-warning-light { @include recolor($color-se-warning-light, 1); } -.color-sf-highlight { @include recolor($color-sf-highlight, 1); } -.color-sf-primary { @include recolor($color-sf-primary, 1); } -.color-sf-primary-dark { @include recolor($color-sf-primary-dark, 1); } +// new simple +.text-color-primary { color: var(--text-color-primary, $text-color-primary); } +.text-color-secondary { color: var(--text-color-secondary, $text-color-secondary); } +.text-color-success { color: var(--text-color-success, $text-color-success); } +.text-color-danger { color: var(--text-color-danger, $text-color-danger); } +.text-color-warning { color: var(--text-color-warning, $text-color-warning); } +.text-color-info { color: var(--text-color-info, $text-color-info); } +.text-color-light { color: var(--text-color-light, $text-color-light); } +.text-color-dark { color: var(--text-color-dark, $text-color-dark); } +.text-color-body { color: var(--text-color-body, $text-color-body); } +.text-color-muted { color: var(--text-color-muted, $text-color-muted); } +.text-color-white { color: var(--text-color-white, $text-color-white); } +.text-color-disabled { color: var(--text-color-disabled, $text-color-disabled); } +.text-color-disabled-dark { color: var(--text-color-disabled-dark, $text-color-disabled-dark); } +.text-color-alt-default { color: var(--text-color-alt-default, $text-color-alt-default); } +.text-color-alt-warning { color: var(--text-color-alt-warning, $text-color-alt-warning); } +.text-color-alt-danger { color: var(--text-color-alt-danger, $text-color-alt-danger); } +.text-color-alt-success { color: var(--text-color-alt-success, $text-color-alt-success); } +.text-color-se-primary { color: var(--text-color-se-primary, $text-color-se-primary); } +.text-color-se-link { color: var(--text-color-se-link, $text-color-se-link); } +.text-color-se-link-dark { color: var(--text-color-se-link-dark, $text-color-se-link-dark); } +.text-color-se-danger { color: var(--text-color-se-danger, $text-color-se-danger); } +.text-color-se-secondary { color: var(--text-color-se-secondary, $text-color-se-secondary); } +.text-color-se-warning { color: var(--text-color-se-warning, $text-color-se-warning); } +.text-color-se-warning-light { color: var(--text-color-se-warning-light, $text-color-se-warning-light); } +.text-color-sf-highlight { color: var(--text-color-sf-highlight, $text-color-sf-highlight); } +.text-color-sf-primary { color: var(--text-color-sf-primary, $text-color-sf-primary); } +.text-color-sf-primary-dark { color: var(--text-color-sf-primary-dark, $text-color-sf-primary-dark); } -.color-primary-light { @include recolor(lighten($color-primary, $color-lighten-percentage), 1); } -.color-primary-dark { @include recolor(darken($color-primary, $color-darken-percentage), 1); } -.color-secondary-light { @include recolor(lighten($color-secondary, $color-lighten-percentage), 1); } -.color-secondary-dark { @include recolor(darken($color-secondary, $color-darken-percentage), 1); } -.color-success-light { @include recolor(lighten($color-success, $color-lighten-percentage), 1); } -.color-success-dark { @include recolor(darken($color-success, $color-darken-percentage), 1); } -.color-danger-light { @include recolor(lighten($color-danger, $color-lighten-percentage), 1); } -.color-danger-dark { @include recolor(darken($color-danger, $color-darken-percentage), 1); } -.color-warning-light { @include recolor(lighten($color-warning, $color-lighten-percentage), 1); } -.color-warning-dark { @include recolor(darken($color-warning, $color-darken-percentage), 1); } -.color-info-light { @include recolor(lighten($color-info, $color-lighten-percentage), 1); } -.color-info-dark { @include recolor(darken($color-info, $color-darken-percentage), 1); } -.color-body-light { @include recolor(lighten($color-body, $color-lighten-percentage), 1); } -.color-body-dark { @include recolor(darken($color-body, $color-darken-percentage), 1); } -.color-muted-light { @include recolor(lighten($color-muted, $color-lighten-percentage), 1); } -.color-muted-dark { @include recolor(darken($color-muted, $color-darken-percentage), 1); } -.color-alt-warning-light { @include recolor(lighten($color-alt-warning, $color-lighten-percentage), 1); } -.color-alt-warning-dark { @include recolor(darken($color-alt-warning, $color-darken-percentage), 1); } -.color-alt-default-light { @include recolor(lighten($color-alt-default, $color-lighten-percentage), 1); } -.color-alt-default-dark { @include recolor(darken($color-alt-default, $color-darken-percentage), 1); } -.color-alt-danger-light { @include recolor(lighten($color-alt-danger, $color-lighten-percentage), 1); } -.color-alt-danger-dark { @include recolor(darken($color-alt-danger, $color-darken-percentage), 1); } -.color-alt-success-light { @include recolor(lighten($color-alt-success, $color-lighten-percentage), 1); } -.color-alt-success-dark { @include recolor(darken($color-alt-success, $color-darken-percentage), 1); } -.color-se-secondary-light { @include recolor(lighten($color-se-secondary, $color-lighten-percentage), 1); } +.text-color-primary-light { color: lighten($text-color-primary, $text-color-lighten-percentage); } +.text-color-primary-dark { color: darken($text-color-primary, $text-color-darken-percentage); } +.text-color-secondary-light { color: lighten($text-color-secondary, $text-color-lighten-percentage); } +.text-color-secondary-dark { color: darken($text-color-secondary, $text-color-darken-percentage); } +.text-color-success-light { color: lighten($text-color-success, $text-color-lighten-percentage); } +.text-color-success-dark { color: darken($text-color-success, $text-color-darken-percentage); } +.text-color-danger-light { color: lighten($text-color-danger, $text-color-lighten-percentage); } +.text-color-danger-dark { color: darken($text-color-danger, $text-color-darken-percentage); } +.text-color-warning-light { color: lighten($text-color-warning, $text-color-lighten-percentage); } +.text-color-warning-dark { color: darken($text-color-warning, $text-color-darken-percentage); } +.text-color-info-light { color: lighten($text-color-info, $text-color-lighten-percentage); } +.text-color-info-dark { color: darken($text-color-info, $text-color-darken-percentage); } +.text-color-body-light { color: lighten($text-color-body, $text-color-lighten-percentage); } +.text-color-body-dark { color: darken($text-color-body, $text-color-darken-percentage); } +.text-color-muted-light { color: lighten($text-color-muted, $text-color-lighten-percentage); } +.text-color-muted-dark { color: darken($text-color-muted, $text-color-darken-percentage); } +.text-color-alt-warning-light { color: lighten($text-color-alt-warning, $text-color-lighten-percentage); } +.text-color-alt-warning-dark { color: darken($text-color-alt-warning, $text-color-darken-percentage); } +.text-color-alt-default-light { color: lighten($text-color-alt-default, $text-color-lighten-percentage); } +.text-color-alt-default-dark { color: darken($text-color-alt-default, $text-color-darken-percentage); } +.text-color-alt-danger-light { color: lighten($text-color-alt-danger, $text-color-lighten-percentage); } +.text-color-alt-danger-dark { color: darken($text-color-alt-danger, $text-color-darken-percentage); } +.text-color-alt-success-light { color: lighten($text-color-alt-success, $text-color-lighten-percentage); } +.text-color-alt-success-dark { color: darken($text-color-alt-success, $text-color-darken-percentage); } +.text-color-se-secondary-light { color: lighten($text-color-se-secondary, $text-color-lighten-percentage); } \ No newline at end of file diff --git a/packages/common/src/styles/material-svg-utilities.scss b/packages/common/src/styles/material-svg-utilities.scss deleted file mode 100644 index 544755289..000000000 --- a/packages/common/src/styles/material-svg-utilities.scss +++ /dev/null @@ -1,82 +0,0 @@ -$slick-icon-width-min-size: 8; -$slick-icon-width-max-size: 50; - -@-webkit-keyframes md-spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} -@keyframes md-spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} -@mixin md-icon-rotate($degrees, $rotation) { - transform: rotate($degrees); -} - -.mdi { - &.mdi-v-align-bottom:before { - vertical-align: bottom; - } - &.mdi-v-align-middle:before { - vertical-align: middle; - } - &.mdi-v-align-sub:before { - vertical-align: sub; - } - &.mdi-v-align-super:before { - vertical-align: super; - } - &.mdi-v-align-text-bottom:before { - vertical-align: text-bottom; - } - &.mdi-v-align-text-top:before { - vertical-align: text-top; - } - &.mdi-v-align-top:before { - vertical-align: top; - } - - &.mdi-flip-h { - transform: scaleX(-1); - } - &.mdi-flip-v { - transform: scaleY(-1); - } - &.mdi-pulse { - animation: md-spin 1s infinite steps(8); - } - /* use mdi-spin or mdi-spin-1s to change the speed */ - &.mdi-spin { - align-items: center; - display: inline-flex; - justify-content: center; - animation: md-spin 2s infinite linear; - } - @for $i from 1 through 5 { - &.mdi-spin-#{$i}s { - align-items: center; - display: inline-flex; - justify-content: center; - animation: md-spin #{$i}s infinite linear; - } - } - &.mdi-rotate-45 { @include md-icon-rotate(45deg, 1); } - &.mdi-rotate-90 { @include md-icon-rotate(90deg, 1); } - &.mdi-rotate-135 { @include md-icon-rotate(135deg, 2); } - &.mdi-rotate-180 { @include md-icon-rotate(180deg, 2); } - &.mdi-rotate-220 { @include md-icon-rotate(220deg, 3); } - &.mdi-rotate-270 { @include md-icon-rotate(270deg, 3); } - &.mdi-rotate-315 { @include md-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 { - &.mdi-#{$i}px { - &:before { - height: #{$i}px; - width: #{$i}px; - } - } - } -} diff --git a/packages/common/src/styles/sass-utilities.scss b/packages/common/src/styles/sass-utilities.scss index 935f9f7a8..fdd75d194 100644 --- a/packages/common/src/styles/sass-utilities.scss +++ b/packages/common/src/styles/sass-utilities.scss @@ -1,48 +1,19 @@ -@use './private'; $svg-icon-vertical-align: bottom !default; -@function encodecolor($string) { - @if type-of($string) == 'color' { - $hex: str-slice(ie-hex-str($string), 4); - $string:unquote("#{$hex}"); - } - $string: '%23' + $string; - @return $string; -} - -@mixin recolor($color: #000, $opacity: 1) { - $r: private.private-div(red($color), 255); - $g: private.private-div(green($color), 255); - $b: private.private-div(blue($color), 255); - $a: $opacity; - - // grayscale fallback if SVG from data url is not supported - $lightness: lightness($color); - filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity); - - // color filter - $svg-filter-id: "recolor"; - filter: url('data:image/svg+xml;utf8,\ - \ - \ - \ - \ - \ - ##{$svg-filter-id}'); -} - -@mixin loadsvg($icon-class, $path-drawing, $fill, $height: 18px, $width: 18px, $display: inline-block, $viewBox: 24) { - #{$icon-class}:before { - height: $height; - width: $width; - display: $display; - vertical-align: $svg-icon-vertical-align; - // margin-top: -1px; // small patch to remove padding all around the SVG - content: url('data:image/svg+xml,'); +// credit goes to UnoCSS https://antfu.me/posts/icons-in-pure-css +@mixin generateSvgClass($cssVarName, $svgPath) { + .#{$cssVarName} { + @include generateSvgStyle(#{$cssVarName + '-icon-svg'}, $svgPath); // all icon will create css variable named "[icon name]-icon-svg" } } + +// create SVG as a url() and the url string must be html escaped, +// we will also use the name to create a CSS variable so that user could override any of the icon +// by providing the full url string without needing else since it was already created +@mixin generateSvgStyle($cssVarName, $svgPath) { + --#{$cssVarName}: 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="#{$svgPath}"/%3E%3C/svg%3E'); + -webkit-mask: var(--#{$cssVarName}) no-repeat; + mask: var(--#{$cssVarName}) no-repeat; + mask-size: 100% 100%; + -webkit-mask-size: 100% 100%; +} \ No newline at end of file diff --git a/packages/common/src/styles/slick-autocomplete.scss b/packages/common/src/styles/slick-autocomplete.scss index 635d45469..a9525d4e7 100644 --- a/packages/common/src/styles/slick-autocomplete.scss +++ b/packages/common/src/styles/slick-autocomplete.scss @@ -48,7 +48,6 @@ & + span:after { animation: md-spin 2s infinite linear; display: inline-block; - font-family: var(--slick-icon-font-family, $slick-icon-font-family); color: var(--slick-autocomplete-loading-icon-color, $slick-autocomplete-loading-icon-color); content: var(--slick-autocomplete-loading-icon, $slick-autocomplete-loading-icon); width: var(--slick-autocomplete-loading-icon-width, $slick-autocomplete-loading-icon-width); diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss index 68cd0b045..6fc6f93aa 100644 --- a/packages/common/src/styles/slick-bootstrap.scss +++ b/packages/common/src/styles/slick-bootstrap.scss @@ -141,10 +141,10 @@ background-color: var(--slick-row-based-edit-unsaved-cell-bgcolor, $slick-row-based-edit-unsaved-cell-bgcolor) !important; } - a, a:visited, .ui-widget-content a, .ui-widget-content a:visited { + a, a:visited, .slick-widget-content a, .slick-widget-content a:visited { color: var(--slick-link-color, $slick-link-color); } - a:hover, .ui-widget-content a:hover { + a:hover, .slick-widget-content a:hover { color: var(--slick-link-color-hover, $slick-link-color-hover); border-bottom: none; } @@ -174,31 +174,25 @@ line-height: var(--slick-draggable-group-title-line-height, $slick-draggable-group-title-line-height); vertical-align: var(--slick-draggable-group-title-vertical-align, $slick-draggable-group-title-vertical-align); } + .slick-group-toggle { cursor: pointer; display: inline-block; + width: 1em; + height: 1em; color: var(--slick-icon-group-color, $slick-icon-group-color); - font-weight: var(--slick-icon-group-font-weight, $slick-icon-group-font-weight); - width: var(--slick-icon-group-width, $slick-icon-group-width); - height: var(--slick-icon-group-height, $slick-icon-group-height); + font-size: var(--slick-icon-group-font-size, $slick-icon-group-font-size); margin-right: var(--slick-icon-group-margin-right, $slick-icon-group-margin-right); - &.expanded:before { - display: inline-block; - content: var(--slick-icon-group-expanded, $slick-icon-group-expanded); - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - font-size: var(--slick-icon-group-font-size, $slick-icon-group-font-size); - width: var(--slick-icon-group-width, $slick-icon-group-width); - vertical-align: var(--slick-icon-group-vertical-align, $slick-icon-group-vertical-align); + &.expanded { + @include generateSvgStyle('slick-icon-group-expanded-svg', $slick-icon-group-expanded-svg-path); } - - &.collapsed:before { - display: inline-block; - content: var(--slick-icon-group-collapsed, $slick-icon-group-collapsed); - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - font-size: var(--slick-icon-group-font-size, $slick-icon-group-font-size); - width: var(--slick-icon-group-width, $slick-icon-group-width); - vertical-align: var(--slick-icon-group-vertical-align, $slick-icon-group-vertical-align); + &.collapsed { + @include generateSvgStyle('slick-icon-group-collapsed-svg', $slick-icon-group-collapsed-svg-path); + } + &.expanded, + &.collapsed { + background-color: currentColor; } } } @@ -261,7 +255,7 @@ border-bottom: var(--slick-header-column-border-bottom, $slick-header-column-border-bottom); border-left: var(--slick-header-column-border-left, $slick-header-column-border-left); white-space: normal; - &.ui-state-default { + &.slick-state-default { @include resetSlickCell(); } .slick-column-name { @@ -284,7 +278,7 @@ } @include ResetColumns (); - &.ui-state-default { + &.slick-state-default { @include ResetColumns (); } @@ -296,29 +290,14 @@ color: var(--slick-hover-header-color, $slick-hover-header-color); } - /* when sorting is possible and there's not yet a sort applied on the column - we could display the sort ascending icon (with an opacity) as a hint */ - &.ui-sortable-handle.ui-state-hover:not(.slick-header-column-sorted) { - .slick-sort-indicator:before { - content: var(--slick-icon-sort-asc, $slick-icon-sort-asc); - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - font-size: var(--slick-icon-sort-font-size, $slick-icon-sort-font-size); - opacity: var(--slick-sort-indicator-hint-opacity, $slick-sort-indicator-hint-opacity); - display: inline-block; - width: var(--slick-icon-sort-width, $slick-icon-sort-width); - } - } - .slick-sort-indicator { - background: none; - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - font-size: var(--slick-icon-font-size, $slick-icon-font-size); - position: absolute; display: inline-block; - color: var(--slick-icon-sort-color, $slick-icon-sort-color); - width: 8px; - height: 5px; + height: 1em; + width: 1em; left: auto; + position: absolute; + color: var(--slick-icon-sort-color, $slick-icon-sort-color); + font-size: var(--slick-icon-sort-font-size, $slick-icon-sort-font-size); right: var(--slick-icon-sort-position-right, $slick-icon-sort-position-right); top: var(--slick-icon-sort-position-top, $slick-icon-sort-position-top); } @@ -333,21 +312,27 @@ right: var(--slick-sort-indicator-number-right, $slick-sort-indicator-number-right); top: var(--slick-sort-indicator-number-top, $slick-sort-indicator-number-top); } - .slick-sort-indicator-asc:before { - content: var(--slick-icon-sort-asc, $slick-icon-sort-asc); - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - font-size: var(--slick-icon-sort-font-size, $slick-icon-sort-font-size); - opacity: 1; - display: inline-block; - width: var(--slick-icon-sort-width, $slick-icon-sort-width); + + // when sorting is possible and there's not yet a sort applied on the column + // we could display the sort ascending icon (with an opacity) as a hint */ + &.slick-header-sortable.slick-state-hover:not(.slick-header-column-sorted) { + .slick-sort-indicator { + opacity: var(--slick-sort-indicator-hint-opacity, $slick-sort-indicator-hint-opacity); + @include generateSvgStyle('slick-icon-sort-asc-icon-svg', $slick-icon-sort-asc-icon-svg-path); + } + } + .slick-sort-indicator-asc { + @include generateSvgStyle('slick-icon-sort-asc-icon-svg', $slick-icon-sort-asc-icon-svg-path); } - .slick-sort-indicator-desc:before { - content: var(--slick-icon-sort-desc, $slick-icon-sort-desc); - display: inline-block; + .slick-sort-indicator-desc { + @include generateSvgStyle('slick-icon-sort-desc-icon-svg', $slick-icon-sort-desc-icon-svg-path); + } + .slick-sort-indicator-asc, + .slick-sort-indicator-desc { opacity: 1; - font-size: var(--slick-icon-sort-font-size, $slick-icon-sort-font-size); - width: var(--slick-icon-sort-width, $slick-icon-sort-width); + background-color: currentColor; } + .slick-resizable-handle { width: 7px; right: 0; @@ -372,7 +357,7 @@ } /** Header Grouping **/ - .slick-preheader-panel.ui-state-default { + .slick-preheader-panel.slick-state-default { border-bottom: var(--slick-preheader-border-bottom, $slick-preheader-border-bottom); .slick-header-columns { @@ -424,7 +409,7 @@ > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: 0; - &.ui-slider-horizontal { + &.slick-slider-horizontal { margin-left: 10px; } } diff --git a/packages/common/src/styles/slick-component.scss b/packages/common/src/styles/slick-component.scss index 424e47d3a..e4c2b496c 100644 --- a/packages/common/src/styles/slick-component.scss +++ b/packages/common/src/styles/slick-component.scss @@ -1,5 +1,6 @@ /* pagination/pagination variables */ @import './variables'; +@import './sass-utilities'; // ---------------------------------------------- // Slick Footer Component @@ -80,7 +81,7 @@ padding: 6px; } - .ui-icon-container { + .slick-icon-container { display: inline-block; border-color: var(--slick-pagination-border-color, $slick-pagination-border-color); } @@ -96,9 +97,11 @@ .slick-page-number { vertical-align: top; - margin-top: 6px; - display: inline-block; + display: inline-flex; + align-items: center; + gap: 4px; padding: 0 5px; + height: inherit; input { background-color: var(--slick-pagination-page-input-bgcolor, $slick-pagination-page-input-bgcolor); @@ -125,66 +128,65 @@ .page-item { cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid; + padding: var(--slick-pagination-button-padding, $slick-pagination-button-padding); + border-color: var(--slick-pagination-button-border-color, $slick-pagination-button-border-color); - a[class*="icon-seek-"] { - border-color: var(--slick-pagination-button-border-color, $slick-pagination-button-border-color); - color: var(--slick-pagination-icon-color, $slick-pagination-icon-color); - text-decoration: none; - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - line-height: var(--slick-pagination-icon-line-height, $slick-pagination-icon-line-height); - -webkit-text-stroke: var(--slick-pagination-icon-seek-text-stroke, $slick-pagination-icon-seek-text-stroke); - padding: var(--slick-pagination-button-padding, $slick-pagination-button-padding); - } - a[class*="icon-seek-"]:hover { + &:hover { background-color: var(--slick-pagination-button-hover-color, $slick-pagination-button-hover-color); } &:first-child { - a, span { - border-top-left-radius: var(--slick-pagination-button-border-radius, $slick-pagination-button-border-radius); - border-bottom-left-radius: var(--slick-pagination-button-border-radius, $slick-pagination-button-border-radius); - } + border-top-left-radius: var(--slick-pagination-button-border-radius, $slick-pagination-button-border-radius); + border-bottom-left-radius: var(--slick-pagination-button-border-radius, $slick-pagination-button-border-radius); } &:last-child { - a, span { - border-top-right-radius: var(--slick-pagination-button-border-radius, $slick-pagination-button-border-radius); - border-bottom-right-radius: var(--slick-pagination-button-border-radius, $slick-pagination-button-border-radius); - } + border-top-right-radius: var(--slick-pagination-button-border-radius, $slick-pagination-button-border-radius); + border-bottom-right-radius: var(--slick-pagination-button-border-radius, $slick-pagination-button-border-radius); } - .icon-seek-first:before { - content: var(--slick-pagination-icon-seek-first, $slick-pagination-icon-seek-first); - width: var(--slick-pagination-icon-seek-first-width, $slick-pagination-icon-seek-first-width); + // to make button borders overlap + &.seek-prev, &.seek-end { + margin-left: -1px; } - .icon-seek-prev:before { - content: var(--slick-pagination-icon-seek-prev, $slick-pagination-icon-seek-prev); - width: var(--slick-pagination-icon-seek-prev-width, $slick-pagination-icon-seek-prev-width); + + a.icon-seek-first, + a.icon-seek-prev, + a.icon-seek-next, + a.icon-seek-end { + background-color: currentColor; + height: var(--slick-pagination-icon-size, $slick-pagination-icon-size); + width: var(--slick-pagination-icon-size, $slick-pagination-icon-size); } - .icon-seek-next:before { - content: var(--slick-pagination-icon-seek-next, $slick-pagination-icon-seek-next); - width: var(--slick-pagination-icon-seek-next-width, $slick-pagination-icon-seek-next-width); + a.icon-seek-first { + @include generateSvgStyle('slick-pagination-icon-seek-first-svg', $slick-pagination-icon-seek-first-svg-path); } - .icon-seek-end:before { - content: var(--slick-pagination-icon-seek-end, $slick-pagination-icon-seek-end); - - width: var(--slick-pagination-icon-seek-end-width, $slick-pagination-icon-seek-end-width); + a.icon-seek-prev { + @include generateSvgStyle('slick-pagination-icon-seek-prev-svg', $slick-pagination-icon-seek-prev-svg-path); + margin-left: -1px; } - .icon-seek-first:before, - .icon-seek-prev:before, - .icon-seek-next:before, - .icon-seek-end:before { - display: block; - height: var(--slick-pagination-icon-height, $slick-pagination-icon-height); + a.icon-seek-next { + @include generateSvgStyle('slick-pagination-icon-seek-next-svg', $slick-pagination-icon-seek-next-svg-path); + } + a.icon-seek-end { + @include generateSvgStyle('slick-pagination-icon-seek-end-svg', $slick-pagination-icon-seek-end-svg-path); + margin-left: -1px; } - } - .page-item.disabled { - cursor: not-allowed; - font-weight: normal; a[class*="icon-seek-"] { - color: var(--slick-pagination-icon-seek-color, $slick-pagination-icon-seek-disabled-color); + color: var(--slick-pagination-icon-color, $slick-pagination-icon-color); + } + + &.disabled { + cursor: not-allowed; background-color: var(--slick-pagination-icon-seek-background-color, $slick-pagination-icon-seek-disabled-bg-color); - border-color: var(--slick-pagination-icon-seek-border-color, $slick-pagination-icon-seek-disabled-border-color); + border-color: var(--slick-pagination-button-border-disabled-color, $slick-pagination-button-border-disabled-color); + a[class*="icon-seek-"] { + color: var(--slick-pagination-icon-seek-disabled-color, $slick-pagination-icon-seek-disabled-color); + } } } } diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss index 6d1601dd8..ce309617e 100644 --- a/packages/common/src/styles/slick-editors.scss +++ b/packages/common/src/styles/slick-editors.scss @@ -1,5 +1,6 @@ @import './variables'; @import './slick.layout'; +@import './sass-utilities'; .slick-cell { input.dual-editor-text, @@ -66,9 +67,13 @@ .autocomplete-container.input-group, .flatpickr.input-group { + display: flex; + align-items: center; height: var(--slick-date-editor-height, $slick-date-editor-height); .input-group-btn { &.input-group-append { + height: 100%; + .btn { border-top-left-radius: 0px; border-bottom-left-radius: 0px; @@ -86,17 +91,14 @@ &:hover:not([disabled]) { background-color: var(--slick-input-group-btn-hover-bg-color, $slick-input-group-btn-hover-bg-color); // 1px solid #6c757d; } - &.icon-clear { + .icon-clear { display: flex; align-items: center; - } - &.icon-clear:before { - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - font-size: var(--slick-editor-input-group-clear-btn-icon-size, $slick-editor-input-group-clear-btn-icon-size); - content: var(--slick-editor-input-group-clear-btn-icon, $slick-editor-input-group-clear-btn-icon); - display: inline-block; - height: var(--slick-editor-input-group-clear-btn-icon-height, $slick-editor-input-group-clear-btn-icon-height); - width: var(--slick-editor-input-group-clear-btn-icon-width, $slick-editor-input-group-clear-btn-icon-width); + background-color: currentColor; + height: 1em; + width: 1em; + + @include generateSvgStyle('slick-editor-input-group-clear-btn-icon-svg', $slick-editor-input-group-clear-btn-icon-svg-path); } } } @@ -218,12 +220,16 @@ 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.mdi { + margin-right: 5px; + } } } .btn-editor-reset, .reset-form.btn, .footer-buttons .btn { + display: inline-flex; margin: var(--slick-editor-modal-footer-btn-margin, $slick-editor-modal-footer-btn-margin); height: var(--slick-editor-modal-footer-btn-height, $slick-editor-modal-footer-btn-height); border: var(--slick-editor-modal-footer-btn-border, $slick-editor-modal-footer-btn-border); @@ -463,8 +469,11 @@ .autocomplete-container.input-group, .flatpickr.input-group { + display: flex; + align-items: center; height: var(--slick-date-editor-height, $slick-date-editor-height); .input-group-btn { + height: 100%; min-width: 28px; .btn { min-width: 28px; diff --git a/packages/common/src/styles/slick-filters.scss b/packages/common/src/styles/slick-filters.scss index e020d9648..a27d38266 100644 --- a/packages/common/src/styles/slick-filters.scss +++ b/packages/common/src/styles/slick-filters.scss @@ -32,6 +32,8 @@ $slick-filled-filter-font-weight: 400 !default; box-shadow: var(--slick-filled-filter-box-shadow, $slick-filled-filter-box-shadow); border: var(--slick-filled-filter-border, $slick-filled-filter-border); span { + display: inline-flex; + align-items: center; font-weight: var(--slick-filled-filter-font-weight, $slick-filled-filter-font-weight); color: var(--slick-filled-filter-color, $slick-filled-filter-color); } diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss index 1b2ee7987..05a1d143f 100644 --- a/packages/common/src/styles/slick-grid.scss +++ b/packages/common/src/styles/slick-grid.scss @@ -113,17 +113,6 @@ border-bottom: var(--slick-group-border-bottom, $slick-group-border-bottom); } - .slick-group-toggle { - width: 9px; - height: 9px; - margin-right: 5px; - } - - .slick-group-toggle.expanded, - .slick-group-toggle.collapsed { - background: none; - } - .slick-group-totals { background: var(--slick-group-totals-text-background, $slick-group-totals-text-background); color: var(--slick-group-totals-text-color, $slick-group-totals-text-color); @@ -157,7 +146,7 @@ border-left: 0px; } - .slick-group-header-column.ui-state-default { + .slick-group-header-column.slick-state-default { position: relative; display: inline-block; box-sizing: content-box !important; /* this here only for Firefox! */ @@ -273,7 +262,7 @@ } } - .slick-header-column.ui-state-default { + .slick-header-column.slick-state-default { position: relative; display: inline-block; box-sizing: content-box !important; @@ -312,33 +301,7 @@ width: 100%; } - .slick-header-column-sorted { - font-style: italic; - } - - .slick-sort-indicator { - display: inline-block; - width: 8px; - height: 5px; - margin-left: 4px; - margin-top: 6px; - position: absolute; - left: 0; - } - - .slick-sort-indicator-desc:before { - content: "\f0d7"; - } - - .slick-sort-indicator-asc:before { - content: "\f0d8"; - } - - .slick-header-sortable .slick-column-name { - margin-left: 10px; - } - - .slick-header.ui-state-default { + .slick-header.slick-state-default { box-shadow: 0 1px 2px rgba(0,0,0,.1); } @@ -368,10 +331,6 @@ background: var(--slick-header-column-sortable-background-hover, $slick-header-column-sortable-background-hover); } - .slick-group-toggle { - display: inline-block; - } - .slick-cell { &.highlighted { background: lightskyblue; diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss index bced7dfd0..8a6392ca8 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -1,5 +1,6 @@ /* sass variables */ @import './variables'; +@import './sass-utilities'; @import 'multiple-select-vanilla/dist/styles/sass/multiple-select.scss'; // ---------------------------------------------- @@ -130,36 +131,60 @@ li.hidden { width: auto; } - /* replace checkboxes by Font-Awesome icons */ - input[type=checkbox] { - display:none; /* to hide the checkbox itself */ - margin-left: 4px; - margin-top: 3px; + label { + line-height: var(--slick-column-picker-icon-container-line-height, $slick-column-picker-icon-container-line-height); + display: inline-flex; + align-items: center; + justify-content: center; } - input[type=checkbox] + label:before { - cursor: pointer; - content: var(--slick-column-picker-checkbox-icon-unchecked, $slick-column-picker-checkbox-icon-unchecked); - color: var(--slick-column-picker-checkbox-color, $slick-column-picker-checkbox-color); - display: inline-block; - font-weight: var(--slick-column-picker-checkbox-font-weight, $slick-column-picker-checkbox-font-weight); - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - font-size: var(--slick-column-picker-checkbox-size, $slick-column-picker-checkbox-size); - line-height: var(--slick-column-picker-checkbox-icon-line-height, $slick-column-picker-checkbox-icon-line-height); - opacity: var(--slick-column-picker-checkbox-opacity, $slick-column-picker-checkbox-opacity); /* unchecked icon */ - margin-right: 4px; - vertical-align: var(--slick-column-picker-checkbox-icon-vertical-align, $slick-column-picker-checkbox-icon-vertical-align); - width: var(--slick-column-picker-checkbox-width, $slick-column-picker-checkbox-width); + &.disabled { + cursor: default; } - - input[type=checkbox] + label:hover:before { - opacity: var(--slick-column-picker-checkbox-opacity-hover, $slick-column-picker-checkbox-opacity-hover); + input[type=checkbox] { + // hide original input checkbox since we use an SVG on top of it + opacity: 0; + width: 0; + margin-left: 0; } - input[type=checkbox]:checked + label:before { - opacity: 1; /* checked icon */ - content: var(--slick-column-picker-checkbox-icon-checked, $slick-column-picker-checkbox-icon-checked); - width: var(--slick-column-picker-checkbox-width, $slick-column-picker-checkbox-width); + .icon-checkbox-container { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + background-color: var(--slick-column-picker-icon-container-bg-color, $slick-column-picker-icon-container-bg-color); + height: var(--slick-column-picker-icon-container-size, $slick-column-picker-icon-container-size); + width: var(--slick-column-picker-icon-container-size, $slick-column-picker-icon-container-size); + 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.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); + + &.mdi-icon-picker-check { + @include generateSvgStyle('slick-column-picker-icon-checked-svg', $slick-column-picker-icon-checked-svg-path); + } + &.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 { + opacity: var(--slick-column-picker-opacity-hover, $slick-column-picker-opacity-hover); + } + + // since we use the div container with a border, we don't actually need an icon for unchecked + // BUT since we want to keep the same size, we can simply hide the mask to keep the same size + visibility: var(--slick-column-picker-icon-unchecked-color-visibility, $slick-column-picker-icon-unchecked-color-visibility); + } + } + & + span.checkbox-label { + display: inline-flex; + align-items: center; + gap: 3px; + padding-left: var(--slick-column-picker-label-text-padding-left, $slick-column-picker-label-text-padding-left); + } } } @@ -333,7 +358,6 @@ li.hidden { margin-right: var(--slick-menu-icon-margin-right, $slick-menu-icon-margin-right); vertical-align: middle; min-width: var(--slick-menu-icon-min-width, $slick-menu-icon-min-width); - width: var(--slick-menu-icon-width, $slick-menu-icon-width); } .slick-menu-content { @@ -474,16 +498,17 @@ li.hidden { background-repeat: no-repeat; background-position: center center; cursor: pointer; + visibility: visible; } .slick-header-button-hidden { - width: 0; + visibility: hidden; margin-right: var(--slick-header-button-hidden-margin-right, $slick-header-button-hidden-margin-right); - transition: 0.2s width; + transition: var(--slick-header-button-hidden-transition, $slick-header-button-hidden-transition); } .slick-header-column:hover > .slick-header-button { - width: var(--slick-header-button-width, $slick-header-button-width); + visibility: visible; } // ---------------------------------------------- @@ -491,12 +516,9 @@ li.hidden { // ---------------------------------------------- .slick-header-menu-button { - background-position: center center; - background-repeat: no-repeat; + background-color: currentColor; cursor: pointer; - display: none; position: absolute; - height: var(--slick-header-menu-button-height, $slick-header-menu-button-height); border: var(--slick-header-menu-button-border, $slick-header-menu-button-border); border-width: var(--slick-header-menu-button-border-width, $slick-header-menu-button-border-width); padding: var(--slick-header-menu-button-padding, $slick-header-menu-button-padding); @@ -504,17 +526,12 @@ li.hidden { // The next few items are already defined in the slick-headermenu file and it should stay that way, *unless* you also replace the button image included there. bottom: 0; - right: var(--slick-header-menu-button-margin-right, $slick-header-menu-button-margin-right); top: 0; - width: var(--slick-header-menu-button-width, $slick-header-menu-button-width); -} -.slick-header-menu-button:before { - display: inline-block; - content: var(--slick-header-menu-button-icon, $slick-header-menu-button-icon); - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - font-size: var(--slick-header-menu-button-icon-font-size, $slick-header-menu-button-icon-font-size); - font-weight: var(--slick-header-menu-button-icon-font-weight, $slick-header-menu-button-icon-font-weight); - width: var(--slick-header-menu-button-icon-width, $slick-header-menu-button-icon-width); + right: var(--slick-header-menu-button-margin-right, $slick-header-menu-button-margin-right); + height: var(--slick-header-menu-button-icon-size, $slick-header-menu-button-icon-size); + width: var(--slick-header-menu-button-icon-size, $slick-header-menu-button-icon-size); + + @include generateSvgStyle('slick-header-menu-button-icon-svg', $slick-header-menu-button-icon-svg-path); } .slick-header-column { @@ -532,78 +549,91 @@ li.hidden { // ---------------------------------------------- // Row Move Manager Plugin // ---------------------------------------------- -.slick-cell.cell-reorder:before { - display: inline-block; - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - font-size: var(--slick-row-move-plugin-size, $slick-row-move-plugin-size); - content: var(--slick-row-move-plugin-icon, $slick-row-move-plugin-icon); - width: var(--slick-row-move-plugin-icon-width, $slick-row-move-plugin-icon-width); - vertical-align: var(--slick-row-move-plugin-icon-vertical-align, $slick-row-move-plugin-icon-vertical-align); -} .slick-cell.cell-reorder { - cursor: var(--slick-row-move-plugin-cursor, $slick-row-move-plugin-cursor); + text-align: center; + + .slick-row-move-column { + background-color: currentColor; + display: inline-block; + height: 1em; + width: 1em; + font-size: var(--slick-row-move-plugin-icon-font-size, $slick-row-move-plugin-icon-font-size); + color: var(--slick-row-move-plugin-icon-color, $slick-row-move-plugin-icon-color); + cursor: var(--slick-row-move-plugin-cursor, $slick-row-move-plugin-cursor); + @include generateSvgStyle('slick-row-move-plugin-icon-svg', $slick-row-move-plugin-icon-svg-path); + } } // ---------------------------------------------- // Checkbox Selector Plugin // ---------------------------------------------- -.slick-headerrow-column, + +.slick-headerrow-column.checkbox-header { + display: inline-flex; + justify-content: center; +} + .slick-column-name, +.slick-headerrow-column.checkbox-header, .slick-cell-checkboxsel { text-align: center; + + label { + line-height: var(--slick-checkbox-icon-container-line-height, $slick-checkbox-icon-container-line-height); + } #filter-checkbox-selectall-container { - display: flex; + display: inline-flex; align-items: center; justify-content: center; - height: 100%; - // line-height: 0; } - input[type=checkbox], - #filter-checkbox-selectall-container > input[type=checkbox] { - display:none; /* to hide the checkbox itself */ + &.disabled { + cursor: default; } - - input[type=checkbox], - #filter-checkbox-selectall-container > input[type=checkbox] + label { - margin: 0; + input[type=checkbox] { + // hide original input checkbox since we use an SVG on top of it + opacity: 0; + width: 0; + margin-left: 0; } - input[type=checkbox] + label:before, - #filter-checkbox-selectall-container > input[type=checkbox] + label:before { + .icon-checkbox-container { cursor: pointer; - content: var(--slick-checkbox-selector-icon-unchecked, $slick-checkbox-selector-icon-unchecked); - background-color: var(--slick-checkbox-selector-icon-bg-color, $slick-checkbox-selector-icon-bg-color); - color: var(--slick-checkbox-selector-unchecked-color, $slick-checkbox-selector-unchecked-color); - display: inline-block; - font-weight: var(--slick-checkbox-selector-icon-font-weight, $slick-checkbox-selector-icon-font-weight); - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - font-size: var(--slick-checkbox-selector-size, $slick-checkbox-selector-size); - opacity: var(--slick-checkbox-selector-opacity, $slick-checkbox-selector-opacity); /* unchecked icon */ - margin: var(--slick-checkbox-selector-icon-margin, $slick-checkbox-selector-icon-margin); - } + display: inline-flex; + align-items: center; + justify-content: center; + background-color: var(--slick-checkbox-icon-container-bg-color, $slick-checkbox-icon-container-bg-color); + height: var(--slick-checkbox-icon-container-size, $slick-checkbox-icon-container-size); + width: var(--slick-checkbox-icon-container-size, $slick-checkbox-icon-container-size); + border: var(--slick-checkbox-icon-border, $slick-checkbox-icon-border); + border-radius: var(--slick-checkbox-icon-border-radius, $slick-checkbox-icon-border-radius); + + 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); + + &.mdi-icon-check { + @include generateSvgStyle('slick-checkbox-icon-checked-svg', $slick-checkbox-icon-checked-svg-path); + } + &.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 { + opacity: var(--slick-checkbox-opacity-hover, $slick-checkbox-opacity-hover); + } - input[type=checkbox] + label:hover:before, - #filter-checkbox-selectall-container > input[type=checkbox] + label:hover:before { - opacity: var(--slick-checkbox-selector-opacity-hover, $slick-checkbox-selector-opacity-hover); + // since we use the div container with a border, we don't actually need an icon for unchecked + // BUT since we want to keep the same size, we can simply hide the mask to keep the same size + visibility: var(--slick-checkbox-icon-unchecked-color-visibility, $slick-checkbox-icon-unchecked-color-visibility); + } + } } +} - input[type=checkbox]:checked + label:before, - #filter-checkbox-selectall-container > input[type=checkbox]:checked + label:before { - content: var(--slick-checkbox-selector-icon-checked, $slick-checkbox-selector-icon-checked); - color: var(--slick-checkbox-selector-checked-color, $slick-checkbox-selector-checked-color); - opacity: 1; /* checked icon */ - - } - input[type=checkbox] + label:before, - input[type=checkbox]:checked + label:before, - #filter-checkbox-selectall-container > input[type=checkbox] + label:before, - #filter-checkbox-selectall-container > input[type=checkbox]:checked + label:before { - height: var(--slick-checkbox-selector-icon-height, $slick-checkbox-selector-icon-height); - width: var(--slick-checkbox-selector-icon-width, $slick-checkbox-selector-icon-width); - border: var(--slick-checkbox-selector-icon-border, $slick-checkbox-selector-icon-border); - border-radius: var(--slick-checkbox-selector-icon-border-radius, $slick-checkbox-selector-icon-border-radius); - } +.slick-header-column.header-checkbox-selectall .slick-column-name { + text-align: center; + margin-right: 0; } .slick-group { @@ -627,6 +657,9 @@ li.hidden { height: var(--slick-header-input-height, $slick-header-input-height); span { + display: inline-flex; + align-items: center; + gap: 4px; font-size: var(--slick-multiselect-input-filter-font-size, $slick-multiselect-input-filter-font-size); font-family: var(--slick-multiselect-input-filter-font-family, $slick-multiselect-input-filter-font-family); } @@ -887,30 +920,33 @@ input.flatpickr.form-control { } .slick-group-toggle-all { + display: inline-flex; + align-items: center; cursor: pointer; - border: var(--draggable-group-toggle-all-border, $slick-draggable-group-toggle-all-border); - border-radius: var(--draggable-group-toggle-all-border-radius, $slick-draggable-group-toggle-all-border-radius); - display: var(--slick-draggable-group-toggle-all-display, $slick-draggable-group-toggle-all-display); + border: var(--slick-draggable-group-toggle-all-border, $slick-draggable-group-toggle-all-border); + border-radius: var(--slick-draggable-group-toggle-all-border-radius, $slick-draggable-group-toggle-all-border-radius); margin-right: var(--slick-draggable-group-toggle-all-margin-right, $slick-draggable-group-toggle-all-margin-right); padding: var(--slick-draggable-group-toggle-all-padding, $slick-draggable-group-toggle-all-padding); position: var(--draggable-group-toggle-all-position, $slick-draggable-group-toggle-all-position); top: var(--slick-draggable-group-toggle-all-top, $slick-draggable-group-toggle-all-top); right: var(--slick-draggable-group-toggle-all-right, $slick-draggable-group-toggle-all-right); - .slick-group-toggle-all-icon.expanded:before { - content: var(--slick-draggable-group-toggle-expanded-icon, $slick-draggable-group-toggle-expanded-icon); - } - .slick-group-toggle-all-icon.collapsed:before { - content: var(--slick-draggable-group-toggle-collapsed-icon, $slick-draggable-group-toggle-collapsed-icon); - } - .slick-group-toggle-all-icon:before { + .slick-group-toggle-all-icon { + cursor: pointer; display: inline-block; - color: var(--slick-draggable-group-toggle-all-color, $slick-draggable-group-toggle-all-color); - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - vertical-align: var(--slick-draggable-group-toggle-all-icon-vertical-align, $slick-draggable-group-toggle-all-icon-vertical-align); - height: var(--slick-draggable-group-toggle-all-icon-height, $slick-draggable-group-toggle-all-icon-height); - width: var(--slick-draggable-group-toggle-all-icon-width, $slick-draggable-group-toggle-all-icon-width); + background-color: currentColor; + width: 1em; + height: 1em; + color: var(--slick-draggable-group-toggle-all-icon-color, $slick-draggable-group-toggle-all-icon-color); + font-size: var(--slick-draggable-group-toggle-all-icon-font-size, $slick-draggable-group-toggle-all-icon-font-size); + &.expanded { + @include generateSvgStyle('slick-draggable-group-toggle-expanded-icon-svg', $slick-draggable-group-toggle-expanded-icon-svg-path); + } + &.collapsed { + @include generateSvgStyle('slick-draggable-group-toggle-collapsed-icon-svg', $slick-draggable-group-toggle-collapsed-icon-svg-path); + } } + .slick-group-toggle-all-text { font-size: var(--slick-draggable-group-toggle-all-text-font-size, $slick-draggable-group-toggle-all-text-font-size); margin: var(--slick-draggable-group-toggle-all-text-margin, $slick-draggable-group-toggle-all-text-margin); @@ -956,24 +992,6 @@ input.flatpickr.form-control { color: var(--slick-draggable-group-delete-hover-color, $slick-draggable-group-delete-hover-color); } } - - .slick-groupby-remove-icon::before { - font-size: var(--slick-draggable-group-by-remove-icon-size, $slick-draggable-group-by-remove-icon-size); - content: var(--slick-draggable-group-by-remove-icon, $slick-draggable-group-by-remove-icon); - } - .slick-groupby-sort-asc-icon::before { - font-size: var(--slick-draggable-group-sort-asc-icon-size, $slick-draggable-group-sort-asc-icon-size); - content: var(--slick-draggable-group-sort-asc-icon, $slick-draggable-group-sort-asc-icon); - } - .slick-groupby-sort-desc-icon::before { - font-size: var(--slick-draggable-group-sort-desc-icon-size, $slick-draggable-group-sort-desc-icon-size); - content: var(--slick-draggable-group-sort-desc-icon, $slick-draggable-group-sort-desc-icon); - } - .slick-groupby-remove-icon::before, - .slick-groupby-sort-asc-icon::before, - .slick-groupby-sort-desc-icon::before { - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - } } .slick-dropzone-hover { background-color: var(--slick-draggable-group-droppable-hover-bgcolor, $slick-draggable-group-droppable-hover-bgcolor); @@ -1245,36 +1263,24 @@ input.flatpickr.form-control { display: inline-block; &.expand { - display: inline-block; - color: var(--slick-detail-view-icon-expand-color, $slick-detail-view-icon-expand-color); - - &:hover { - color: var(--slick-detail-view-icon-expand-color-hover, $slick-detail-view-icon-expand-color-hover); - } - &:before { - content: var(--slick-detail-view-icon-expand, $slick-detail-view-icon-expand); - } + @include generateSvgStyle('slick-detail-view-icon-expand-svg', $slick-detail-view-icon-expand-svg-path); } &.collapse { - display: inline-block; - color: var(--slick-detail-view-icon-collapse-color, $slick-detail-view-icon-collapse-color); - &:hover { - color: var(--slick-detail-view-icon-collapse-color-hover, $slick-detail-view-icon-collapse-color-hover); - } - &:before { - content: var(--slick-detail-view-icon-collapse, $slick-detail-view-icon-collapse); - } + @include generateSvgStyle('slick-detail-view-icon-collapse-svg', $slick-detail-view-icon-collapse-svg-path); } &.expand, &.collapse { cursor: pointer; - } - &.expand:before, - &.collapse:before { + background-color: currentColor; display: inline-block; - font-family: var(--slick-icon-font-family, $slick-icon-font-family); - font-size: var(--slick-detail-view-icon-size, $slick-detail-view-icon-size); - width: var(--slick-detail-view-icon-width, $slick-detail-view-icon-width); + height: 1em; + width: 1em; + color: var(--slick-detail-view-icon-color, $slick-detail-view-icon-color); + font-size: var(--slick-detail-view-icon-font-size, $slick-detail-view-icon-font-size); + &:hover { + color: var(--slick-detail-view-icon-color-hover, $slick-detail-view-icon-color-hover); + opacity: var(--slick-detail-view-icon-opacity-hover, $slick-detail-view-icon-opacity-hover); + } } } diff --git a/packages/common/src/styles/slick-without-bootstrap-min-styling.scss b/packages/common/src/styles/slick-without-bootstrap-min-styling.scss index 0b8b365e6..0c6058efd 100644 --- a/packages/common/src/styles/slick-without-bootstrap-min-styling.scss +++ b/packages/common/src/styles/slick-without-bootstrap-min-styling.scss @@ -18,7 +18,7 @@ } .btn-default { - color: var(--slick-button-primary-color, $slick-button-primary-color); + color: var(--slick-cell-text-color, $slick-cell-text-color); background-color: var(--slick-btn-default-bg-color, $slick-btn-default-bg-color); border-color: var(--slick-btn-default-border-color, $slick-btn-default-border-color); } diff --git a/packages/common/src/styles/slickgrid-icons-svg-utils.scss b/packages/common/src/styles/slickgrid-icons-svg-utils.scss new file mode 100644 index 000000000..bbdf5a0f5 --- /dev/null +++ b/packages/common/src/styles/slickgrid-icons-svg-utils.scss @@ -0,0 +1,59 @@ +$slick-icon-width-min-size: 8; +$slick-icon-width-max-size: 50; + +@-webkit-keyframes sg-spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} +@keyframes sg-spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} +@mixin sg-icon-rotate($degrees, $rotation) { + transform: rotate($degrees); +} + +.mdi { + &.mdi-flip-h { + transform: scaleX(-1); + } + &.mdi-flip-v { + transform: scaleY(-1); + } + &.mdi-pulse { + animation: sg-spin 1s infinite steps(8); + } + /* 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 { + &.mdi-spin-#{$i}s { + align-items: center; + display: inline-flex; + justify-content: center; + animation: sg-spin #{$i}s infinite linear; + } + } + &.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 { + &.mdi-#{$i}px { + font-size: #{$i}px; + height: #{$i}px; + width: #{$i}px; + } + } +} diff --git a/packages/common/src/styles/material-svg-icons.scss b/packages/common/src/styles/slickgrid-icons.scss similarity index 55% rename from packages/common/src/styles/material-svg-icons.scss rename to packages/common/src/styles/slickgrid-icons.scss index 320c31f81..be27ad263 100644 --- a/packages/common/src/styles/material-svg-icons.scss +++ b/packages/common/src/styles/slickgrid-icons.scss @@ -1,1043 +1,1042 @@ -$slick-icon-height: $slick-icon-width; +$slick-icon-font-size: $slick-icon-width; -/* Material Design Icons */ -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +/* SlickGrid Material icons (which all came from Material Design Icons) */ +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.mdi-alert", - "M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "mdi-alert", + "M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" ); -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.mdi-alert-octagon", - "M13 13H11V7H13M11 15H13V17H11M15.73 3H8.27L3 8.27V15.73L8.27 21H15.73L21 15.73V8.27L15.73 3Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "mdi-alert-octagon", + "M13 13H11V7H13M11 15H13V17H11M15.73 3H8.27L3 8.27V15.73L8.27 21H15.73L21 15.73V8.27L15.73 3Z" ); -@include loadsvg( - ".mdi.mdi-alert-outline", - "M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "mdi-alert-outline", + "M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" ); -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block +@include generateSvgClass( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); +@include generateSvgClass( + "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( + "mdi-arrow-down", + "M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z" +); + +@include generateSvgClass( + "mdi-arrow-down-bold", + "M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z" +); + +@include generateSvgClass( + "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( + "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( + "mdi-arrow-down-bold-outline", + "M22,11L12,21L2,11H8V3H16V11H22M12,18L17,13H14V5H10V13H7L12,18Z" +); + +@include generateSvgClass( + "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( + "mdi-arrow-expand-horizontal", + "M9,11H15V8L19,12L15,16V13H9V16L5,12L9,8V11M2,20V4H4V20H2M20,20V4H22V20H20Z" +); + +@include generateSvgClass( + "mdi-arrow-split-vertical", + "M18,16V13H15V22H13V2H15V11H18V8L22,12L18,16M2,12L6,16V13H9V22H11V2H9V11H6V8L2,12Z" +); + +@include generateSvgClass( + "mdi-arrow-up", + "M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z" +); + +@include generateSvgClass( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "mdi-check", + "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" +); + +@include generateSvgClass( + "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( + "mdi-check-bold", + "M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" +); + +@include generateSvgClass( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "mdi-check-underline", + "M21,5L9,17L3.5,11.5L4.91,10.09L9,14.17L19.59,3.59L21,5M3,21V19H21V21H3Z" +); -@include loadsvg( - ".mdi.mdi-arrow-down", - "M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); +@include generateSvgClass( + "mdi-chevron-down", + "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" +); + +@include generateSvgClass( + "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( + "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( + "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( + "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 loadsvg( - ".mdi.mdi-arrow-down-bold", - "M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); +@include generateSvgClass( + "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( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); +@include generateSvgClass( + "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( + "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( + "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( + "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( + "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( + "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 loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); +@include generateSvgClass( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "mdi-download", + "M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" +); + + @include generateSvgClass( + "mdi-drag", + "M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z" +); + + @include generateSvgClass( + "mdi-drag-vertical", + "M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z" +); + + @include generateSvgClass( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "mdi-file-tree", + "M3,3H9V7H3V3M15,10H21V14H15V10M15,17H21V21H15V17M13,13H7V18H13V20H7L5,20V9H7V11H13V13Z" +); + +@include generateSvgClass( + "mdi-file-tree-outline", + "M12 13H7V18H12V20H5V10H7V11H12V13M8 4V6H4V4H8M10 2H2V8H10V2M20 11V13H16V11H20M22 9H14V15H22V9M20 18V20H16V18H20M22 16H14V22H22V16Z" +); + +@include generateSvgClass( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "mdi-load", + "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" +); + +@include generateSvgClass( + "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( + "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( + "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( + "mdi-menu", + "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" +); + +@include generateSvgClass( + "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( + "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( + "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( + "mdi-minus", + "M19,13H5V11H19V13Z" +); + +@include generateSvgClass( + "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( + "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( + "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( + "mdi-page-first", + "M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z" +); + +@include generateSvgClass( + "mdi-page-last", + "M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z" +); + +@include generateSvgClass( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "mdi-pin-outline", + "M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z" +); + +@include generateSvgClass( + "mdi-playlist-plus", + "M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z" +); + +@include generateSvgClass( + "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( + "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( + "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( + "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( + "mdi-plus", + "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" +); + +@include generateSvgClass( + "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( + "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( + "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( + "mdi-shape-square-plus", + "M19,5H22V7H19V10H17V7H14V5H17V2H19V5M17,19V13H19V21H3V5H11V7H5V19H17Z" +); + +@include generateSvgClass( + "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( + "mdi-sort-ascending", + "M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" +); + +@include generateSvgClass( + "mdi-sort-descending", + "M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" +); + +@include generateSvgClass( + "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( + "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( + "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( + "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( + "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( + "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( + "mdi-subdirectory-arrow-right", + "M19,15L13,21L11.58,19.58L15.17,16H4V4H6V14H15.17L11.58,10.42L13,9L19,15Z" +); + +@include generateSvgClass( + "mdi-swap-horizontal", + "M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" +); + +@include generateSvgClass( + "mdi-swap-vertical", + "M9,3L5,7H8V14H10V7H13M16,17V10H14V17H11L15,21L19,17H16Z" +); + +@include generateSvgClass( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "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( + "mdi-trash-can", + "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z" +); + +@include generateSvgClass( + "mdi-trash-can-outline", + "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" +); + +@include generateSvgClass( + "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( + "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( + "mdi-tune", + "M3,17V19H9V17H3M3,5V7H13V5H3M13,21V19H21V17H13V15H11V21H13M7,9V11H3V13H7V15H9V9H7M21,13V11H11V13H21M15,9H17V7H21V5H17V3H15V9Z" +); + +@include generateSvgClass( + "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( + "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( + "mdi-upload", + "M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" +); + +@include generateSvgClass( + "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( + "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( + "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" +); -@include loadsvg( - ".mdi.mdi-arrow-down-bold-outline", - "M22,11L12,21L2,11H8V3H16V11H22M12,18L17,13H14V5H10V13H7L12,18Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-arrow-expand-horizontal", - "M9,11H15V8L19,12L15,16V13H9V16L5,12L9,8V11M2,20V4H4V20H2M20,20V4H22V20H20Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-arrow-split-vertical", - "M18,16V13H15V22H13V2H15V11H18V8L22,12L18,16M2,12L6,16V13H9V22H11V2H9V11H6V8L2,12Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-arrow-up", - "M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block, 52); - -@include loadsvg( - ".mdi.mdi-check", - "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-check-bold", - "M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-check-underline", - "M21,5L9,17L3.5,11.5L4.91,10.09L9,14.17L19.59,3.59L21,5M3,21V19H21V21H3Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-chevron-down", - "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-delete", - "M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-download", - "M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - - @include loadsvg( - ".mdi.mdi-drag", - "M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - - @include loadsvg( - ".mdi.mdi-drag-vertical", - "M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - - @include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - - @include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-file-tree", - "M3,3H9V7H3V3M15,10H21V14H15V10M15,17H21V21H15V17M13,13H7V18H13V20H7L5,20V9H7V11H13V13Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-file-tree-outline", - "M12 13H7V18H12V20H5V10H7V11H12V13M8 4V6H4V4H8M10 2H2V8H10V2M20 11V13H16V11H20M22 9H14V15H22V9M20 18V20H16V18H20M22 16H14V22H22V16Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-load", - "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-menu", - "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-minus", - "M19,13H5V11H19V13Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-page-first", - "M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-page-last", - "M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-pin-outline", - "M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-playlist-plus", - "M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-plus", - "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-shape-square-plus", - "M19,5H22V7H19V10H17V7H14V5H17V2H19V5M17,19V13H19V21H3V5H11V7H5V19H17Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-sort-ascending", - "M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-sort-descending", - "M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-subdirectory-arrow-right", - "M19,15L13,21L11.58,19.58L15.17,16H4V4H6V14H15.17L11.58,10.42L13,9L19,15Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-swap-horizontal", - "M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-swap-vertical", - "M9,3L5,7H8V14H10V7H13M16,17V10H14V17H11L15,21L19,17H16Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-trash-can", - "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-trash-can-outline", - "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-tune", - "M3,17V19H9V17H3M3,5V7H13V5H3M13,21V19H21V17H13V15H11V21H13M7,9V11H3V13H7V15H9V9H7M21,13V11H11V13H21M15,9H17V7H21V5H17V3H15V9Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.mdi-upload", - "M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); - -@include loadsvg( - ".mdi.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", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block); +.mdi { + display: inline-block; + align-items: center; + background-color: currentColor; + color: $slick-icon-color; + font-size: $slick-icon-font-size; + width: 1em; + height: 1em; + &.mdi-state-disabled { + opacity: 0.35; + } +} \ No newline at end of file diff --git a/packages/common/src/styles/slickgrid-theme-material.bare.scss b/packages/common/src/styles/slickgrid-theme-material.bare.scss index dd5aec365..8667390c1 100644 --- a/packages/common/src/styles/slickgrid-theme-material.bare.scss +++ b/packages/common/src/styles/slickgrid-theme-material.bare.scss @@ -5,8 +5,8 @@ */ // This is a bare version of "slickgrid-theme-material.scss", -// Few files were removed and aren't included in this styling theme (while they are in original theme) -// - (colors, extra-styling, material-svg-icons, material-svg-utilities, slick-without-bootstrap-min-styling) +// A few files were removed and aren't included in this styling theme (while they are in original theme) +// - (colors, extra-styling, slickgrid-icons, slickgrid-icons-svg-utils, slick-without-bootstrap-min-styling) /** SlickGrid Material Theme */ @import './flatpickr-dark'; diff --git a/packages/common/src/styles/slickgrid-theme-material.lite.scss b/packages/common/src/styles/slickgrid-theme-material.lite.scss index 478353695..3f3c28b9b 100644 --- a/packages/common/src/styles/slickgrid-theme-material.lite.scss +++ b/packages/common/src/styles/slickgrid-theme-material.lite.scss @@ -21,8 +21,8 @@ @import './slickgrid-examples'; @import './slick-bootstrap'; @import './slick-autocomplete'; -@import './material-svg-icons'; -@import './material-svg-utilities'; +@import './slickgrid-icons'; +@import './slickgrid-icons-svg-utils'; $link-color: var(--slick-primary-color, $slick-primary-color) !default; @import './colors.scss'; diff --git a/packages/common/src/styles/slickgrid-theme-material.scss b/packages/common/src/styles/slickgrid-theme-material.scss index 8163f06b7..5b218de6e 100644 --- a/packages/common/src/styles/slickgrid-theme-material.scss +++ b/packages/common/src/styles/slickgrid-theme-material.scss @@ -9,22 +9,21 @@ * (sames as `slickgrid-theme-material.lite.scss` but includes all external 3rd party lib styling that is Flatpickr & Multiple-Select) */ - @import './roboto-font'; - @import './flatpickr.min'; - @import './flatpickr-dark'; +@import './roboto-font'; +@import './flatpickr.min'; +@import './flatpickr-dark'; - @import './variables-theme-material'; - @import './slick-without-bootstrap-min-styling'; - @import './slick-grid'; - @import './slick-editors'; - @import './slick-plugins'; - @import './slick-component'; - @import './slickgrid-examples'; - @import './slick-bootstrap'; - @import './slick-autocomplete'; - @import './material-svg-icons'; - @import './material-svg-utilities'; +@import './variables-theme-material'; +@import './slick-without-bootstrap-min-styling'; +@import './slick-grid'; +@import './slick-editors'; +@import './slick-plugins'; +@import './slick-component'; +@import './slickgrid-examples'; +@import './slick-bootstrap'; +@import './slick-autocomplete'; +@import './slickgrid-icons-svg-utils'; - $link-color: var(--slick-primary-color, $slick-primary-color) !default; - @import './colors.scss'; - @import './extra-styling.scss'; +$link-color: var(--slick-primary-color, $slick-primary-color) !default; +@import './colors.scss'; +@import './extra-styling.scss'; diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.bare.scss b/packages/common/src/styles/slickgrid-theme-salesforce.bare.scss index e8b25f9b0..6041b8f59 100644 --- a/packages/common/src/styles/slickgrid-theme-salesforce.bare.scss +++ b/packages/common/src/styles/slickgrid-theme-salesforce.bare.scss @@ -5,8 +5,8 @@ */ // This is a bare version of "slickgrid-theme-salesforce.scss", -// Few files were removed and aren't included in this styling theme (while they are in original theme) -// - (colors, extra-styling, material-svg-icons, material-svg-utilities, slick-without-bootstrap-min-styling) +// A few files were removed and aren't included in this styling theme (while they are in original theme) +// - (colors, extra-styling, slickgrid-icons, slickgrid-icons-svg-utils, slick-without-bootstrap-min-styling) /** SlickGrid Salesforce Theme */ @import './flatpickr-dark'; diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss b/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss index f16efecb2..1c5f674d2 100644 --- a/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss +++ b/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss @@ -20,8 +20,8 @@ @import './slickgrid-examples'; @import './slick-bootstrap'; @import './slick-autocomplete'; -@import './material-svg-icons'; -@import './material-svg-utilities'; +@import './slickgrid-icons'; +@import './slickgrid-icons-svg-utils'; $link-color: var(--slick-primary-color, $slick-primary-color) !default; @import './colors.scss'; diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.scss b/packages/common/src/styles/slickgrid-theme-salesforce.scss index f65afd265..d9df971b2 100644 --- a/packages/common/src/styles/slickgrid-theme-salesforce.scss +++ b/packages/common/src/styles/slickgrid-theme-salesforce.scss @@ -23,14 +23,14 @@ @import './slick-bootstrap'; @import './slick-filters'; @import './slick-autocomplete'; -@import './material-svg-icons'; -@import './material-svg-utilities'; +@import './slickgrid-icons'; +@import './slickgrid-icons-svg-utils'; $slick-editing-field-bg-color: #fff !default; $slick-editing-field-border: 1px solid #dddbda !default; $slick-editable-field-bg-color: rgba(227, 240, 251, 0.569) !default; $slick-editable-field-hover-icon-color: #b0adab !default; -$slick-editable-field-hover-icon: url('data:image/svg+xml,') !default; +$slick-editable-field-hover-icon: url('data:image/svg+xml,') !default; $slick-editable-field-hover-icon-margin-right: 8px !default; $slick-editable-field-hover-icon-margin-top: 8px !default; $slick-editable-field-hover-icon-width: 14px !default; @@ -94,5 +94,4 @@ $slick-editor-grid-cell-border-width-modified: 1px 6px 1px 1px !default; $link-color: var(--slick-primary-color, $slick-primary-color) !default; @import './colors'; -@import './colors-from-filters'; @import './extra-styling'; diff --git a/packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts b/packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts index d1380c7c3..67d05d14e 100644 --- a/packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts +++ b/packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts @@ -86,6 +86,7 @@ describe('SlickCustomTooltip plugin', () => { plugin.setOptions(mockOptions); expect(plugin.addonOptions).toEqual(mockOptions); + expect(plugin.className).toEqual('slick-custom-tooltip some-class'); expect(plugin.getOptions()).toEqual(mockOptions); }); @@ -315,7 +316,7 @@ describe('SlickCustomTooltip plugin', () => { const tooltipElm = document.body.querySelector('.slick-custom-tooltip') as HTMLDivElement; expect(tooltipElm).toBeTruthy(); expect(tooltipElm).toEqual(plugin.tooltipElm); - expect(plugin.cellAddonOptions).toBeTruthy(); + expect(plugin.addonOptions).toBeTruthy(); expect(tooltipElm.style.maxWidth).toBe('85px'); expect(tooltipElm.textContent).toBe('some text content'); expect(tooltipElm.classList.contains('arrow-down')).toBeTruthy(); diff --git a/packages/custom-tooltip-plugin/src/slickCustomTooltip.ts b/packages/custom-tooltip-plugin/src/slickCustomTooltip.ts index 41cdede1b..49791f074 100644 --- a/packages/custom-tooltip-plugin/src/slickCustomTooltip.ts +++ b/packages/custom-tooltip-plugin/src/slickCustomTooltip.ts @@ -25,7 +25,7 @@ import { sanitizeTextByAvailableSanitizer, SlickEventHandler, } from '@slickgrid-universal/common'; -import { isPrimitiveOrHTML } from '@slickgrid-universal/utils'; +import { classNameToList, isPrimitiveOrHTML } from '@slickgrid-universal/utils'; type CellType = 'slick-cell' | 'slick-header-column' | 'slick-headerrow-column'; @@ -56,6 +56,10 @@ const SELECTOR_CLOSEST_TOOLTIP_ATTR = '[title], [data-slick-tooltip]'; * }, * }; */ + +// add a default CSS class name that is used and required by SlickGrid Theme +const DEFAULT_CLASS_NAME = 'slick-custom-tooltip'; + export class SlickCustomTooltip { name: 'CustomTooltip' = 'CustomTooltip' as const; @@ -74,7 +78,7 @@ export class SlickCustomTooltip { protected _hasMultipleTooltips = false; protected _defaultOptions = { bodyClassName: 'tooltip-body', - className: 'slick-custom-tooltip', + className: '', offsetArrow: 3, // same as `$slick-tooltip-arrow-side-margin` CSS/SASS variable offsetLeft: 0, offsetRight: 0, @@ -106,7 +110,13 @@ export class SlickCustomTooltip { return this._cellAddonOptions?.bodyClassName ?? 'tooltip-body'; } get className(): string { - return this._cellAddonOptions?.className ?? 'slick-custom-tooltip'; + // we'll always add our default class name for the CSS style to display as intended + // and then append any custom CSS class to default when provided + let className = DEFAULT_CLASS_NAME; + if (this._addonOptions?.className) { + className += ` ${this._addonOptions.className}`; + } + return className; } get dataView(): CustomDataView { return this._grid.getData() || {}; @@ -161,7 +171,8 @@ export class SlickCustomTooltip { hideTooltip() { this._cancellablePromise?.cancel(); this._observable$?.unsubscribe(); - const prevTooltip = document.body.querySelector(`.${this.className}${this.gridUidSelector}`); + const cssClasses = classNameToList(this.className).join('.'); + const prevTooltip = document.body.querySelector(`.${cssClasses}${this.gridUidSelector}`); prevTooltip?.remove(); } 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 244fb4675..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: 'fa fa-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: 'fa fa-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/pagination-component/src/slick-pagination.component.ts b/packages/pagination-component/src/slick-pagination.component.ts index 674ac3d1f..b5ecf500b 100644 --- a/packages/pagination-component/src/slick-pagination.component.ts +++ b/packages/pagination-component/src/slick-pagination.component.ts @@ -10,13 +10,20 @@ import type { TranslaterService, } from '@slickgrid-universal/common'; import { Constants, createDomElement, getTranslationPrefix } from '@slickgrid-universal/common'; -import { BindingHelper } from '@slickgrid-universal/binding'; +import { BindingEventService, BindingHelper } from '@slickgrid-universal/binding'; export class SlickPaginationComponent { protected _bindingHelper: BindingHelper; + protected _bindingEventService: BindingEventService; protected _paginationElement!: HTMLDivElement; protected _enableTranslate = false; protected _gridParentContainerElm?: HTMLElement; + protected _itemPerPageElm!: HTMLSelectElement; + protected _spanInfoFromToElm!: HTMLSpanElement; + protected _seekFirstElm!: HTMLLIElement; + protected _seekPrevElm!: HTMLLIElement; + protected _seekNextElm!: HTMLLIElement; + protected _seekEndElm!: HTMLLIElement; protected _subscriptions: Subscription[] = []; currentPagination: ServicePagination; firstButtonClasses = ''; @@ -32,6 +39,7 @@ export class SlickPaginationComponent { constructor(protected readonly paginationService: PaginationService, protected readonly pubSubService: PubSubService, protected readonly sharedService: SharedService, protected readonly translaterService?: TranslaterService) { this._bindingHelper = new BindingHelper(); + this._bindingEventService = new BindingEventService(); this._bindingHelper.querySelectorPrefix = `.${this.gridUid} `; this.currentPagination = this.paginationService.getFullPagination(); this._enableTranslate = this.gridOptions?.enableTranslate ?? false; @@ -56,9 +64,8 @@ export class SlickPaginationComponent { (this.currentPagination as any)[key] = (paginationChanges as any)[key]; } this.updatePageButtonsUsability(); - const pageFromToElm = document.querySelector(`.${this.gridUid} span.page-info-from-to`); - if (pageFromToElm?.style) { - pageFromToElm.style.display = (this.currentPagination.totalItems === 0) ? 'none' : ''; + if (this._spanInfoFromToElm?.style) { + this._spanInfoFromToElm.style.display = (this.currentPagination.totalItems === 0) ? 'none' : ''; } }), this.pubSubService.subscribe('onPaginationSetCursorBased', () => { @@ -127,6 +134,7 @@ export class SlickPaginationComponent { dispose() { // also dispose of all Subscriptions this.pubSubService.unsubscribeAll(this._subscriptions); + this._bindingEventService.unbindAll(); this._bindingHelper.dispose(); this._paginationElement.remove(); @@ -136,19 +144,32 @@ export class SlickPaginationComponent { this._gridParentContainerElm = gridParentContainerElm; const paginationElm = this.createPaginationContainer(); const divNavContainerElm = createDomElement('div', { className: 'slick-pagination-nav' }); - const leftNavigationElm = this.createPageNavigation('Page navigation', [ - { liClass: 'page-item seek-first', aClass: 'page-link icon-seek-first', ariaLabel: 'First Page' }, - { liClass: 'page-item seek-prev', aClass: 'page-link icon-seek-prev', ariaLabel: 'Previous Page' }, - ]); + + // left nav + const leftNavElm = createDomElement('nav', { ariaLabel: 'Page navigation' }); + const leftUlElm = createDomElement('ul', { className: 'pagination' }); + this._seekFirstElm = createDomElement('li', { className: 'page-item seek-first' }, leftUlElm); + this._seekFirstElm.appendChild(createDomElement('a', { className: 'page-link icon-seek-first', ariaLabel: 'First Page', role: 'button' })); + this._seekPrevElm = createDomElement('li', { className: 'page-item seek-prev' }, leftUlElm); + this._seekPrevElm.appendChild(createDomElement('a', { className: 'page-link icon-seek-prev', ariaLabel: 'Previous Page', role: 'button' })); + leftNavElm.appendChild(leftUlElm); + const pageNumberSectionElm = this.createPageNumberSection(); - const rightNavigationElm = this.createPageNavigation('Page navigation', [ - { liClass: 'page-item seek-next', aClass: 'page-link icon-seek-next', ariaLabel: 'Next Page' }, - { liClass: 'page-item seek-end', aClass: 'page-link icon-seek-end', ariaLabel: 'Last Page' }, - ]); + + // right nav + const rightNavElm = createDomElement('nav', { ariaLabel: 'Page navigation' }); + const rightUlElm = createDomElement('ul', { className: 'pagination' }); + this._seekNextElm = createDomElement('li', { className: 'page-item seek-next' }, rightUlElm); + this._seekNextElm.appendChild(createDomElement('a', { className: 'page-link icon-seek-next', ariaLabel: 'Next Page', role: 'button' })); + this._seekEndElm = createDomElement('li', { className: 'page-item seek-end' }, rightUlElm); + this._seekEndElm.appendChild(createDomElement('a', { className: 'page-link icon-seek-end', ariaLabel: 'Last Page', role: 'button' })); + rightNavElm.appendChild(rightUlElm); + + // append both navs to container paginationElm.appendChild(divNavContainerElm); - divNavContainerElm.appendChild(leftNavigationElm); + divNavContainerElm.appendChild(leftNavElm); divNavContainerElm.appendChild(pageNumberSectionElm); - divNavContainerElm.appendChild(rightNavigationElm); + divNavContainerElm.appendChild(rightNavElm); const paginationSettingsElm = this.createPaginationSettingsSection(); paginationElm.appendChild(divNavContainerElm); @@ -166,10 +187,9 @@ export class SlickPaginationComponent { /** Render and fill the Page Sizes