From b11937e40c7565366461aa60d6dbce4c6049bdd4 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 29 Feb 2024 16:48:25 -0500 Subject: [PATCH 01/25] feat(styling): use regular CSS for icons instead of :before pseudo - by using regular CSS, we can use regular font-size and even regular CSS color which was not possible with previous implementation, the technique is credited to UnoCSS project https://antfu.me/posts/icons-in-pure-css - this is just a draft since it needs more investigation and it might actually turn out to be a breaking change because at the moment we use CSS `content` with `:before` pseudo to previously add SVG icons but with the new approach this might not be needed and might also mean that the default Font-Awesome (font) may no longer work, need investigation. - It might be a breaking change too for the users who configured different icons via content SASS vars. Unless we keep them for users but we defined them as unset. --- docs/styling/styling.md | 2 +- .../src/examples/example12.html | 20 +- .../src/examples/example12.ts | 10 +- .../src/examples/icons.html | 386 +++--- .../src/examples/icons.scss | 12 + .../src/examples/icons.ts | 414 +++---- packages/common/src/styles/colors.scss | 56 + .../src/styles/material-svg-utilities.scss | 45 +- .../common/src/styles/sass-utilities.scss | 20 + .../common/src/styles/slickgrid-icons.scss | 1047 +++++++++++++++++ .../styles/slickgrid-theme-material.lite.scss | 1 + .../src/styles/slickgrid-theme-material.scss | 33 +- .../slickgrid-theme-salesforce.lite.scss | 1 + .../styles/slickgrid-theme-salesforce.scss | 1 + 14 files changed, 1587 insertions(+), 461 deletions(-) create mode 100644 packages/common/src/styles/slickgrid-icons.scss diff --git a/docs/styling/styling.md b/docs/styling/styling.md index 4307f8233..c9c858079 100644 --- a/docs/styling/styling.md +++ b/docs/styling/styling.md @@ -3,7 +3,7 @@ - [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) +- [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, about 100 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) diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.html b/examples/vite-demo-vanilla-bundle/src/examples/example12.html index b354c6f7d..f3335934f 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example12.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example12.html @@ -6,7 +6,7 @@

- code + code

@@ -15,25 +15,25 @@

@@ -49,35 +49,35 @@

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts index 7faf8f520..aa25779cf 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts @@ -149,7 +149,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 }, @@ -358,7 +358,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', @@ -366,21 +366,21 @@ export default class Example12 { { command: 'edit', title: 'Edit Row', - iconCssClass: 'mdi mdi-square-edit-outline', + iconCssClass: 'sgi sgi-square-edit-outline', positionOrder: 66, action: () => this.openCompositeModal('edit'), }, { command: 'clone', title: 'Clone Row', - iconCssClass: 'mdi mdi-content-copy', + iconCssClass: 'sgi sgi-content-copy', positionOrder: 66, action: () => this.openCompositeModal('clone'), }, 'divider', { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-close color-danger', cssClass: 'red', textCssClass: 'text-italic color-danger-light', + iconCssClass: 'sgi sgi-close color-danger', cssClass: 'red', textCssClass: 'text-italic color-danger-light', // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext?.completed; diff --git a/examples/vite-demo-vanilla-bundle/src/examples/icons.html b/examples/vite-demo-vanilla-bundle/src/examples/icons.html index 375a45e6d..a5cd697ba 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/icons.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/icons.html @@ -4,7 +4,7 @@

Material Design Icons - + Material Design Icons - Official Website (+5000 icons) @@ -19,19 +19,19 @@

-
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
+
sgi-spin
+
sgi-spin-1s
+
sgi-spin-2s
+
sgi-spin-3s
+
sgi-spin-4s
+
sgi-spin-5s
+
sgi-rotate-45
+
sgi-rotate-90
+
sgi-rotate-135
+
sgi-rotate-180
+
sgi-rotate-220
+
sgi-flip-h
+
sgi-flip-v

@@ -39,12 +39,12 @@

(from 8px up to 50px)

-
mdi-8px
-
mdi-10px
-
mdi-15px
-
mdi-20px
-
mdi-25px
-
mdi-50px
+
sgi-8px
+
sgi-10px
+
sgi-15px
+
sgi-20px
+
sgi-25px
+
sgi-50px
@@ -54,7 +54,7 @@
text-bold
text-center
text-left
-
text-right
+
text-right
text-lowercase
text-uppercase @@ -77,268 +77,236 @@
- + button-style padding-0px
- + button-style padding-1px
- + button-style padding-2px
- + button-style padding-5px
- + button-style padding-15px
- + button-style padding-18px
-
- 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

-
- - 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
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 7840302f9..0e0869315 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/icons.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/icons.ts @@ -10,18 +10,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'); - iconElm.title = icon.replace('.mdi.', ''); - iconElm.style.marginRight = '2px'; + iconElm.classList.add('sgi-24px'); + iconElm.title = icon.replace('.sgi.', ''); + iconElm.style.marginRight = '5px'; iconDivElm.appendChild(iconElm); const iconNameElm = document.createElement('span'); - iconNameElm.textContent = icon.replace('.mdi.', ''); + iconNameElm.textContent = icon.replace('.sgi.', ''); iconDivElm.appendChild(iconNameElm); iconContainerElm.appendChild(iconDivElm); @@ -30,207 +30,207 @@ export default class Icons { getIcons() { return [ - '.mdi.mdi-account', - '.mdi.mdi-account-box', - '.mdi.mdi-account-box-outline', - '.mdi.mdi-account-circle', - '.mdi.mdi-account-edit', - '.mdi.mdi-account-minus', - '.mdi.mdi-account-off', - '.mdi.mdi-account-plus', - '.mdi.mdi-account-search', - '.mdi.mdi-alarm', - '.mdi.mdi-alarm-check', - '.mdi.mdi-alarm-off', - '.mdi.mdi-alert', - '.mdi.mdi-alert-box', - '.mdi.mdi-alert-box-outline', - '.mdi.mdi-alert-circle', - '.mdi.mdi-alert-octagon', - '.mdi.mdi-alert-outline', - '.mdi.mdi-alert-rhombus', - '.mdi.mdi-alert-rhombus-outline', - '.mdi.mdi-arrow-collapse', - '.mdi.mdi-arrow-down', - '.mdi.mdi-arrow-down-bold', - '.mdi.mdi-arrow-down-bold-box', - '.mdi.mdi-arrow-down-bold-box-outline', - '.mdi.mdi-arrow-down-bold-outline', - '.mdi.mdi-arrow-expand', - '.mdi.mdi-arrow-expand-horizontal', - '.mdi.mdi-arrow-split-vertical', - '.mdi.mdi-calendar', - '.mdi.mdi-calendar-check', - '.mdi.mdi-calendar-clock', - '.mdi.mdi-calendar-edit', - '.mdi.mdi-calendar-remove', - '.mdi.mdi-calendar-search', - '.mdi.mdi-call-split', - '.mdi.mdi-cancel', - '.mdi.mdi-cash-check', - '.mdi.mdi-cash-remove', - '.mdi.mdi-certificate', - '.mdi.mdi-certificate-outline', - '.mdi.mdi-change-record-type', - '.mdi.mdi-check', - '.mdi.mdi-check-all', - '.mdi.mdi-check-bold', - '.mdi.mdi-checkbox-blank-outline', - '.mdi.mdi-checkbox-marked-circle-outline', - '.mdi.mdi-check-box-outline', - '.mdi.mdi-checkbox-marked', - '.mdi.mdi-check-circle', - '.mdi.mdi-check-circle-outline', - '.mdi.mdi-check-outline', - '.mdi.mdi-check-underline', - '.mdi.mdi-chevron-down', - '.mdi.mdi-chevron-down-box', - '.mdi.mdi-chevron-down-box-outline', - '.mdi.mdi-chevron-down-circle', - '.mdi.mdi-chevron-down-circle-outline', - '.mdi.mdi-clipboard-check', - '.mdi.mdi-clipboard-check-outline', - '.mdi.mdi-clipboard-edit', - '.mdi.mdi-clipboard-edit-outline', - '.mdi.mdi-clipboard-multiple', - '.mdi.mdi-clipboard-multiple-outline', - '.mdi.mdi-clipboard-outline', - '.mdi.mdi-close', - '.mdi.mdi-close-circle', - '.mdi.mdi-close-circle-outline', - '.mdi.mdi-close-thick', - '.mdi.mdi-coffee', - '.mdi.mdi-coffee-outline', - '.mdi.mdi-cog', - '.mdi.mdi-cog-outline', - '.mdi.mdi-content-copy', - '.mdi.mdi-currency-usd', - '.mdi.mdi-currency-usd-off', - '.mdi.mdi-database-refresh', - '.mdi.mdi-delete', - '.mdi.mdi-delete-outline', - '.mdi.mdi-dots-grid', - '.mdi.mdi-dots-vertical', - '.mdi.mdi-download', - '.mdi.mdi-drag', - '.mdi.mdi-drag-vertical', - '.mdi.mdi-eye-off-outline', - '.mdi.mdi-eye-outline', - '.mdi.mdi-file', - '.mdi.mdi-file-alert', - '.mdi.mdi-file-alert-outline', - '.mdi.mdi-file-cad', - '.mdi.mdi-file-check', - '.mdi.mdi-file-check-outline', - '.mdi.mdi-file-document-outline', - '.mdi.mdi-file-excel-outline', - '.mdi.mdi-file-move', - '.mdi.mdi-file-move-outline', - '.mdi.mdi-file-multiple', - '.mdi.mdi-file-multiple-outline', - '.mdi.mdi-file-music-outline', - '.mdi.mdi-file-outline', - '.mdi.mdi-file-pdf-outline', - '.mdi.mdi-file-question', - '.mdi.mdi-file-question-outline', - '.mdi.mdi-file-search-outline', - '.mdi.mdi-file-send', - '.mdi.mdi-file-send-outline', - '.mdi.mdi-file-tree', - '.mdi.mdi-file-tree-outline', - '.mdi.mdi-file-upload', - '.mdi.mdi-file-upload-outline', - '.mdi.mdi-filter', - '.mdi.mdi-filter-minus-outline', - '.mdi.mdi-filter-off-outline', - '.mdi.mdi-filter-outline', - '.mdi.mdi-filter-plus-outline', - '.mdi.mdi-filter-remove-outline', - '.mdi.mdi-fire', - '.mdi.mdi-flip-vertical', - '.mdi.mdi-folder', - '.mdi.mdi-folder-open', - '.mdi.mdi-forum', - '.mdi.mdi-forum-outline', - '.mdi.mdi-github', - '.mdi.mdi-help', - '.mdi.mdi-help-circle', - '.mdi.mdi-help-circle-outline', - '.mdi.mdi-history', - '.mdi.mdi-information', - '.mdi.mdi-information-outline', - '.mdi.mdi-lightbulb', - '.mdi.mdi-lightbulb-off', - '.mdi.mdi-lightbulb-off-outline', - '.mdi.mdi-lightbulb-on', - '.mdi.mdi-lightbulb-on-outline', - '.mdi.mdi-lightbulb-outline', - '.mdi.mdi-link', - '.mdi.mdi-link-variant', - '.mdi.mdi-load', - '.mdi.mdi-magnify', - '.mdi.mdi-map-marker-radius', - '.mdi.mdi-map-marker-radius-outline', - '.mdi.mdi-menu', - '.mdi.mdi-message-text', - '.mdi.mdi-message-text-outline', - '.mdi.mdi-microsoft-excel', - '.mdi.mdi-minus', - '.mdi.mdi-minus-circle', - '.mdi.mdi-minus-circle-outline', - '.mdi.mdi-order-bool-ascending-variant', - '.mdi.mdi-page-first', - '.mdi.mdi-page-last', - '.mdi.mdi-paperclip', - '.mdi.mdi-pencil', - '.mdi.mdi-pencil-outline', - '.mdi.mdi-pencil-box-multiple', - '.mdi.mdi-pencil-box-multiple-outline', - '.mdi.mdi-percent', - '.mdi.mdi-percent-outline', - '.mdi.mdi-pin-off-outline', - '.mdi.mdi-pin-outline', - '.mdi.mdi-play-circle-outline', - '.mdi.mdi-playlist-plus', - '.mdi.mdi-playlist-remove', - '.mdi.mdi-plus', - '.mdi.mdi-plus-circle', - '.mdi.mdi-plus-circle-outline', - '.mdi.mdi-progress-download', - '.mdi.mdi-redo', - '.mdi.mdi-refresh', - '.mdi.mdi-shape-square-plus', - '.mdi.mdi-snowflake', - '.mdi.mdi-sort-ascending', - '.mdi.mdi-sort-descending', - '.mdi.mdi-sort-variant-remove', - '.mdi.mdi-square-edit-outline', - '.mdi.mdi-star', - '.mdi.mdi-star-outline', - '.mdi.mdi-stop-circle-outline', - '.mdi.mdi-subdirectory-arrow-right', - '.mdi.mdi-swap-horizontal', - '.mdi.mdi-swap-vertical', - '.mdi.mdi-sync', - '.mdi.mdi-sync-circle', - '.mdi.mdi-table-edit', - '.mdi.mdi-table-refresh', - '.mdi.mdi-text-box-remove', - '.mdi.mdi-text-box-remove-outline', - '.mdi.mdi-text-box-search-outline', - '.mdi.mdi-toggle-switch', - '.mdi.mdi-toggle-switch-off-outline', - '.mdi.mdi-trash-can', - '.mdi.mdi-trash-can-outline', - '.mdi.mdi-truck', - '.mdi.mdi-truck-delivery-outline', - '.mdi.mdi-tune', - '.mdi.mdi-tune-variant', - '.mdi.mdi-undo', - '.mdi.mdi-upload', - '.mdi.mdi-vanish', - '.mdi.mdi-wrench', - '.mdi.mdi-wrench-outline', + '.sgi.sgi-account', + '.sgi.sgi-account-box', + '.sgi.sgi-account-box-outline', + '.sgi.sgi-account-circle', + '.sgi.sgi-account-edit', + '.sgi.sgi-account-minus', + '.sgi.sgi-account-off', + '.sgi.sgi-account-plus', + '.sgi.sgi-account-search', + '.sgi.sgi-alarm', + '.sgi.sgi-alarm-check', + '.sgi.sgi-alarm-off', + '.sgi.sgi-alert', + '.sgi.sgi-alert-box', + '.sgi.sgi-alert-box-outline', + '.sgi.sgi-alert-circle', + '.sgi.sgi-alert-octagon', + '.sgi.sgi-alert-outline', + '.sgi.sgi-alert-rhombus', + '.sgi.sgi-alert-rhombus-outline', + '.sgi.sgi-arrow-collapse', + '.sgi.sgi-arrow-down', + '.sgi.sgi-arrow-down-bold', + '.sgi.sgi-arrow-down-bold-box', + '.sgi.sgi-arrow-down-bold-box-outline', + '.sgi.sgi-arrow-down-bold-outline', + '.sgi.sgi-arrow-expand', + '.sgi.sgi-arrow-expand-horizontal', + '.sgi.sgi-arrow-split-vertical', + '.sgi.sgi-calendar', + '.sgi.sgi-calendar-check', + '.sgi.sgi-calendar-clock', + '.sgi.sgi-calendar-edit', + '.sgi.sgi-calendar-remove', + '.sgi.sgi-calendar-search', + '.sgi.sgi-call-split', + '.sgi.sgi-cancel', + '.sgi.sgi-cash-check', + '.sgi.sgi-cash-remove', + '.sgi.sgi-certificate', + '.sgi.sgi-certificate-outline', + '.sgi.sgi-change-record-type', + '.sgi.sgi-check', + '.sgi.sgi-check-all', + '.sgi.sgi-check-bold', + '.sgi.sgi-checkbox-blank-outline', + '.sgi.sgi-checkbox-marked-circle-outline', + '.sgi.sgi-check-box-outline', + '.sgi.sgi-checkbox-marked', + '.sgi.sgi-check-circle', + '.sgi.sgi-check-circle-outline', + '.sgi.sgi-check-outline', + '.sgi.sgi-check-underline', + '.sgi.sgi-chevron-down', + '.sgi.sgi-chevron-down-box', + '.sgi.sgi-chevron-down-box-outline', + '.sgi.sgi-chevron-down-circle', + '.sgi.sgi-chevron-down-circle-outline', + '.sgi.sgi-clipboard-check', + '.sgi.sgi-clipboard-check-outline', + '.sgi.sgi-clipboard-edit', + '.sgi.sgi-clipboard-edit-outline', + '.sgi.sgi-clipboard-multiple', + '.sgi.sgi-clipboard-multiple-outline', + '.sgi.sgi-clipboard-outline', + '.sgi.sgi-close', + '.sgi.sgi-close-circle', + '.sgi.sgi-close-circle-outline', + '.sgi.sgi-close-thick', + '.sgi.sgi-coffee', + '.sgi.sgi-coffee-outline', + '.sgi.sgi-cog', + '.sgi.sgi-cog-outline', + '.sgi.sgi-content-copy', + '.sgi.sgi-currency-usd', + '.sgi.sgi-currency-usd-off', + '.sgi.sgi-database-refresh', + '.sgi.sgi-delete', + '.sgi.sgi-delete-outline', + '.sgi.sgi-dots-grid', + '.sgi.sgi-dots-vertical', + '.sgi.sgi-download', + '.sgi.sgi-drag', + '.sgi.sgi-drag-vertical', + '.sgi.sgi-eye-off-outline', + '.sgi.sgi-eye-outline', + '.sgi.sgi-file', + '.sgi.sgi-file-alert', + '.sgi.sgi-file-alert-outline', + '.sgi.sgi-file-cad', + '.sgi.sgi-file-check', + '.sgi.sgi-file-check-outline', + '.sgi.sgi-file-document-outline', + '.sgi.sgi-file-excel-outline', + '.sgi.sgi-file-move', + '.sgi.sgi-file-move-outline', + '.sgi.sgi-file-multiple', + '.sgi.sgi-file-multiple-outline', + '.sgi.sgi-file-music-outline', + '.sgi.sgi-file-outline', + '.sgi.sgi-file-pdf-outline', + '.sgi.sgi-file-question', + '.sgi.sgi-file-question-outline', + '.sgi.sgi-file-search-outline', + '.sgi.sgi-file-send', + '.sgi.sgi-file-send-outline', + '.sgi.sgi-file-tree', + '.sgi.sgi-file-tree-outline', + '.sgi.sgi-file-upload', + '.sgi.sgi-file-upload-outline', + '.sgi.sgi-filter', + '.sgi.sgi-filter-minus-outline', + '.sgi.sgi-filter-off-outline', + '.sgi.sgi-filter-outline', + '.sgi.sgi-filter-plus-outline', + '.sgi.sgi-filter-remove-outline', + '.sgi.sgi-fire', + '.sgi.sgi-flip-vertical', + '.sgi.sgi-folder', + '.sgi.sgi-folder-open', + '.sgi.sgi-forum', + '.sgi.sgi-forum-outline', + '.sgi.sgi-github', + '.sgi.sgi-help', + '.sgi.sgi-help-circle', + '.sgi.sgi-help-circle-outline', + '.sgi.sgi-history', + '.sgi.sgi-information', + '.sgi.sgi-information-outline', + '.sgi.sgi-lightbulb', + '.sgi.sgi-lightbulb-off', + '.sgi.sgi-lightbulb-off-outline', + '.sgi.sgi-lightbulb-on', + '.sgi.sgi-lightbulb-on-outline', + '.sgi.sgi-lightbulb-outline', + '.sgi.sgi-link', + '.sgi.sgi-link-variant', + '.sgi.sgi-load', + '.sgi.sgi-magnify', + '.sgi.sgi-map-marker-radius', + '.sgi.sgi-map-marker-radius-outline', + '.sgi.sgi-menu', + '.sgi.sgi-message-text', + '.sgi.sgi-message-text-outline', + '.sgi.sgi-microsoft-excel', + '.sgi.sgi-minus', + '.sgi.sgi-minus-circle', + '.sgi.sgi-minus-circle-outline', + '.sgi.sgi-order-bool-ascending-variant', + '.sgi.sgi-page-first', + '.sgi.sgi-page-last', + '.sgi.sgi-paperclip', + '.sgi.sgi-pencil', + '.sgi.sgi-pencil-outline', + '.sgi.sgi-pencil-box-multiple', + '.sgi.sgi-pencil-box-multiple-outline', + '.sgi.sgi-percent', + '.sgi.sgi-percent-outline', + '.sgi.sgi-pin-off-outline', + '.sgi.sgi-pin-outline', + '.sgi.sgi-play-circle-outline', + '.sgi.sgi-playlist-plus', + '.sgi.sgi-playlist-remove', + '.sgi.sgi-plus', + '.sgi.sgi-plus-circle', + '.sgi.sgi-plus-circle-outline', + '.sgi.sgi-progress-download', + '.sgi.sgi-redo', + '.sgi.sgi-refresh', + '.sgi.sgi-shape-square-plus', + '.sgi.sgi-snowflake', + '.sgi.sgi-sort-ascending', + '.sgi.sgi-sort-descending', + '.sgi.sgi-sort-variant-remove', + '.sgi.sgi-square-edit-outline', + '.sgi.sgi-star', + '.sgi.sgi-star-outline', + '.sgi.sgi-stop-circle-outline', + '.sgi.sgi-subdirectory-arrow-right', + '.sgi.sgi-swap-horizontal', + '.sgi.sgi-swap-vertical', + '.sgi.sgi-sync', + '.sgi.sgi-sync-circle', + '.sgi.sgi-table-edit', + '.sgi.sgi-table-refresh', + '.sgi.sgi-text-box-remove', + '.sgi.sgi-text-box-remove-outline', + '.sgi.sgi-text-box-search-outline', + '.sgi.sgi-toggle-switch', + '.sgi.sgi-toggle-switch-off-outline', + '.sgi.sgi-trash-can', + '.sgi.sgi-trash-can-outline', + '.sgi.sgi-truck', + '.sgi.sgi-truck-delivery-outline', + '.sgi.sgi-tune', + '.sgi.sgi-tune-variant', + '.sgi.sgi-undo', + '.sgi.sgi-upload', + '.sgi.sgi-vanish', + '.sgi.sgi-wrench', + '.sgi.sgi-wrench-outline', ]; } } diff --git a/packages/common/src/styles/colors.scss b/packages/common/src/styles/colors.scss index e94b1b8b9..3c032c9c9 100644 --- a/packages/common/src/styles/colors.scss +++ b/packages/common/src/styles/colors.scss @@ -37,6 +37,7 @@ $color-sf-highlight: #0070D2 !default; $color-sf-primary: #006DCC !default; $color-sf-primary-dark: #004487 !default; +// @deprecated - colors using CSS filter .color-primary { @include recolor($color-primary, 1); } .color-secondary { @include recolor($color-secondary, 1); } .color-success { @include recolor($color-success, 1); } @@ -90,3 +91,58 @@ $color-sf-primary-dark: #004487 !default; .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); } + +// new simple +.text-color-primary { color: $color-primary; } +.text-color-secondary { color: $color-secondary; } +.text-color-success { color: $color-success; } +.text-color-danger { color: $color-danger; } +.text-color-warning { color: $color-warning; } +.text-color-info { color: $color-info; } +.text-color-light { color: $color-light; } +.text-color-dark { color: $color-dark; } +.text-color-body { color: $color-body; } +.text-color-muted { color: $color-muted; } +.text-color-white { color: $color-white; } +.text-color-disabled { color: $color-disabled; } +.text-color-disabled-dark { color: $color-disabled-dark; } +.text-color-alt-default { color: $color-alt-default; } +.text-color-alt-warning { color: $color-alt-warning; } +.text-color-alt-danger { color: $color-alt-danger; } +.text-color-alt-success { color: $color-alt-success; } +.text-color-se-primary { color: $color-se-primary; } +.text-color-se-link { color: $color-se-link; } +.text-color-se-link-dark { color: $color-se-link-dark; } +.text-color-se-danger { color: $color-se-danger; } +.text-color-se-secondary { color: $color-se-secondary; } +.text-color-se-warning { color: $color-se-warning; } +.text-color-se-warning-light { color: $color-se-warning-light; } +.text-color-sf-highlight { color: $color-sf-highlight; } +.text-color-sf-primary { color: $color-sf-primary; } +.text-color-sf-primary-dark { color: $color-sf-primary-dark; } + +.text-color-primary-light { color: lighten($color-primary, $color-lighten-percentage); } +.text-color-primary-dark { color: darken($color-primary, $color-darken-percentage); } +.text-color-secondary-light { color: lighten($color-secondary, $color-lighten-percentage); } +.text-color-secondary-dark { color: darken($color-secondary, $color-darken-percentage); } +.text-color-success-light { color: lighten($color-success, $color-lighten-percentage); } +.text-color-success-dark { color: darken($color-success, $color-darken-percentage); } +.text-color-danger-light { color: lighten($color-danger, $color-lighten-percentage); } +.text-color-danger-dark { color: darken($color-danger, $color-darken-percentage); } +.text-color-warning-light { color: lighten($color-warning, $color-lighten-percentage); } +.text-color-warning-dark { color: darken($color-warning, $color-darken-percentage); } +.text-color-info-light { color: lighten($color-info, $color-lighten-percentage); } +.text-color-info-dark { color: darken($color-info, $color-darken-percentage); } +.text-color-body-light { color: lighten($color-body, $color-lighten-percentage); } +.text-color-body-dark { color: darken($color-body, $color-darken-percentage); } +.text-color-muted-light { color: lighten($color-muted, $color-lighten-percentage); } +.text-color-muted-dark { color: darken($color-muted, $color-darken-percentage); } +.text-color-alt-warning-light { color: lighten($color-alt-warning, $color-lighten-percentage); } +.text-color-alt-warning-dark { color: darken($color-alt-warning, $color-darken-percentage); } +.text-color-alt-default-light { color: lighten($color-alt-default, $color-lighten-percentage); } +.text-color-alt-default-dark { color: darken($color-alt-default, $color-darken-percentage); } +.text-color-alt-danger-light { color: lighten($color-alt-danger, $color-lighten-percentage); } +.text-color-alt-danger-dark { color: darken($color-alt-danger, $color-darken-percentage); } +.text-color-alt-success-light { color: lighten($color-alt-success, $color-lighten-percentage); } +.text-color-alt-success-dark { color: darken($color-alt-success, $color-darken-percentage); } +.text-color-se-secondary-light { color: lighten($color-se-secondary, $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 index 544755289..d593778f7 100644 --- a/packages/common/src/styles/material-svg-utilities.scss +++ b/packages/common/src/styles/material-svg-utilities.scss @@ -13,7 +13,7 @@ $slick-icon-width-max-size: 50; transform: rotate($degrees); } -.mdi { +.mdi, .sgi { &.mdi-v-align-bottom:before { vertical-align: bottom; } @@ -36,17 +36,21 @@ $slick-icon-width-max-size: 50; vertical-align: top; } - &.mdi-flip-h { + &.mdi-flip-h, + &.sgi-flip-h { transform: scaleX(-1); } - &.mdi-flip-v { + &.mdi-flip-v, + &.sgi-flip-v { transform: scaleY(-1); } - &.mdi-pulse { + &.mdi-pulse, + &.sgi-pulse { animation: md-spin 1s infinite steps(8); } /* use mdi-spin or mdi-spin-1s to change the speed */ - &.mdi-spin { + &.mdi-spin, + &.sgi-spin { align-items: center; display: inline-flex; justify-content: center; @@ -59,15 +63,22 @@ $slick-icon-width-max-size: 50; justify-content: center; animation: md-spin #{$i}s infinite linear; } + &.sgi-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 { + &.mdi-rotate-45, &.sgi-rotate-45 { @include md-icon-rotate(45deg, 1); } + &.mdi-rotate-90, &.sgi-rotate-90 { @include md-icon-rotate(90deg, 1); } + &.mdi-rotate-135, &.sgi-rotate-135 { @include md-icon-rotate(135deg, 2); } + &.mdi-rotate-180, &.sgi-rotate-180 { @include md-icon-rotate(180deg, 2); } + &.mdi-rotate-220, &.sgi-rotate-220 { @include md-icon-rotate(220deg, 3); } + &.mdi-rotate-270, &.sgi-rotate-270 { @include md-icon-rotate(270deg, 3); } + &.mdi-rotate-315, &.sgi-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, + &.sgi-rotate-45, .sgi-rotate-90, .sgi-rotate-135, .sgi-rotate-180, .sgi-rotate-220 .sgi-rotate-270, .sgi-rotate-315 { filter: none; } @@ -79,4 +90,12 @@ $slick-icon-width-max-size: 50; } } } + + @for $i from $slick-icon-width-min-size through $slick-icon-width-max-size { + &.sgi-#{$i}px { + font-size: #{$i}px; + 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..dbdc3893d 100644 --- a/packages/common/src/styles/sass-utilities.scss +++ b/packages/common/src/styles/sass-utilities.scss @@ -46,3 +46,23 @@ $svg-icon-vertical-align: bottom !default; content: url('data:image/svg+xml,'); } } + +// credit goes to UnoCSS https://antfu.me/posts/icons-in-pure-css +@mixin createSvgClass($cssVarName, $svgPath, $color, $font-size: 24px, $viewBox: 24) { + .#{$cssVarName} { + @include createSvgStyle(#{$cssVarName + '-icon-svg'}, $svgPath, $color, $font-size, $viewBox); // 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 createSvgStyle($cssVarName, $svgPath, $color, $font-size, $viewBox) { + --#{$cssVarName}: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 #{$viewBox} #{$viewBox}" 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%; + color: $color; + font-size: $font-size; +} \ No newline at end of file diff --git a/packages/common/src/styles/slickgrid-icons.scss b/packages/common/src/styles/slickgrid-icons.scss new file mode 100644 index 000000000..4aaddd2a4 --- /dev/null +++ b/packages/common/src/styles/slickgrid-icons.scss @@ -0,0 +1,1047 @@ +$slick-icon-font-size: $slick-icon-width; + +/* Material Design Icons */ +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-alert", + "M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-alert-octagon", + "M13 13H11V7H13M11 15H13V17H11M15.73 3H8.27L3 8.27V15.73L8.27 21H15.73L21 15.73V8.27L15.73 3Z", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-alert-outline", + "M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size +); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-arrow-down", + "M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-arrow-down-bold", + "M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-arrow-down-bold-outline", + "M22,11L12,21L2,11H8V3H16V11H22M12,18L17,13H14V5H10V13H7L12,18Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-arrow-expand-horizontal", + "M9,11H15V8L19,12L15,16V13H9V16L5,12L9,8V11M2,20V4H4V20H2M20,20V4H22V20H20Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-arrow-split-vertical", + "M18,16V13H15V22H13V2H15V11H18V8L22,12L18,16M2,12L6,16V13H9V22H11V2H9V11H6V8L2,12Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-arrow-up", + "M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size, 52); + +@include createSvgClass( + "sgi-check", + "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-check-bold", + "M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-check-underline", + "M21,5L9,17L3.5,11.5L4.91,10.09L9,14.17L19.59,3.59L21,5M3,21V19H21V21H3Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-chevron-down", + "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-delete", + "M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-download", + "M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z", + $slick-icon-color, $slick-icon-font-size); + + @include createSvgClass( + "sgi-drag", + "M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z", + $slick-icon-color, $slick-icon-font-size); + + @include createSvgClass( + "sgi-drag-vertical", + "M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z", + $slick-icon-color, $slick-icon-font-size); + + @include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + + @include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-file-outline", + "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-file-tree", + "M3,3H9V7H3V3M15,10H21V14H15V10M15,17H21V21H15V17M13,13H7V18H13V20H7L5,20V9H7V11H13V13Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-file-tree-outline", + "M12 13H7V18H12V20H5V10H7V11H12V13M8 4V6H4V4H8M10 2H2V8H10V2M20 11V13H16V11H20M22 9H14V15H22V9M20 18V20H16V18H20M22 16H14V22H22V16Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-load", + "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-menu", + "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-minus", + "M19,13H5V11H19V13Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-page-first", + "M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-page-last", + "M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-pin-outline", + "M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-playlist-plus", + "M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-plus", + "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-shape-square-plus", + "M19,5H22V7H19V10H17V7H14V5H17V2H19V5M17,19V13H19V21H3V5H11V7H5V19H17Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-sort-ascending", + "M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-sort-descending", + "M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-subdirectory-arrow-right", + "M19,15L13,21L11.58,19.58L15.17,16H4V4H6V14H15.17L11.58,10.42L13,9L19,15Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-swap-horizontal", + "M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-swap-vertical", + "M9,3L5,7H8V14H10V7H13M16,17V10H14V17H11L15,21L19,17H16Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-trash-can", + "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-trash-can-outline", + "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-tune", + "M3,17V19H9V17H3M3,5V7H13V5H3M13,21V19H21V17H13V15H11V21H13M7,9V11H3V13H7V15H9V9H7M21,13V11H11V13H21M15,9H17V7H21V5H17V3H15V9Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-upload", + "M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + +@include createSvgClass( + "sgi-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", + $slick-icon-color, $slick-icon-font-size); + + +.sgi { + display: inline-block; + align-items: center; + background-color: currentColor; + color: $slick-icon-color; + font-size: 12px; + width: 1em; + height: 1em; + + &.sgi-state-disabled { + opacity: 0.35; + } +} \ No newline at end of file diff --git a/packages/common/src/styles/slickgrid-theme-material.lite.scss b/packages/common/src/styles/slickgrid-theme-material.lite.scss index 4d4023dfa..267750f05 100644 --- a/packages/common/src/styles/slickgrid-theme-material.lite.scss +++ b/packages/common/src/styles/slickgrid-theme-material.lite.scss @@ -21,6 +21,7 @@ @import './slick-bootstrap'; @import './slick-autocomplete'; @import './material-svg-icons'; +@import './slickgrid-icons'; @import './material-svg-utilities'; $link-color: var(--slick-primary-color, $slick-primary-color) !default; diff --git a/packages/common/src/styles/slickgrid-theme-material.scss b/packages/common/src/styles/slickgrid-theme-material.scss index ede5e3457..c93876386 100644 --- a/packages/common/src/styles/slickgrid-theme-material.scss +++ b/packages/common/src/styles/slickgrid-theme-material.scss @@ -9,21 +9,22 @@ * (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 './roboto-font'; +@import './flatpickr.min'; - @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 './material-svg-icons'; +@import './material-svg-icons'; +@import './material-svg-utilities'; - $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.lite.scss b/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss index a4daad607..6b1074e8f 100644 --- a/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss +++ b/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss @@ -20,6 +20,7 @@ @import './slick-bootstrap'; @import './slick-autocomplete'; @import './material-svg-icons'; +@import './slickgrid-icons'; @import './material-svg-utilities'; $link-color: var(--slick-primary-color, $slick-primary-color) !default; diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.scss b/packages/common/src/styles/slickgrid-theme-salesforce.scss index 66909ce85..3d893f49b 100644 --- a/packages/common/src/styles/slickgrid-theme-salesforce.scss +++ b/packages/common/src/styles/slickgrid-theme-salesforce.scss @@ -23,6 +23,7 @@ @import './slick-filters'; @import './slick-autocomplete'; @import './material-svg-icons'; +@import './slickgrid-icons'; @import './material-svg-utilities'; $slick-editable-field-bg-color: rgba(227, 240, 251, 0.569) !default; From 61a9cd33f41ce652e7151b0ee0e84f846f53e2f1 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 19 Apr 2024 19:54:34 -0400 Subject: [PATCH 02/25] chore: remove unused SASS variables --- packages/common/src/styles/_variables-theme-material.scss | 4 ---- packages/common/src/styles/_variables-theme-salesforce.scss | 4 ---- packages/common/src/styles/slick-component.scss | 1 + packages/common/src/styles/slick-editors.scss | 1 + packages/common/src/styles/slick-plugins.scss | 1 + 5 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index 75510e26f..864be7808 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -124,10 +124,6 @@ $slick-detail-view-icon-expand-color: $slick-primary-color $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-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-button-border-radius: 2px !default; $slick-pagination-page-input-border-radius: 3px !default; diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index 2df945113..11bc812b3 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -165,10 +165,6 @@ $slick-detail-view-icon-expand-color: $slick-primary-col $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-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-button-border-radius: 2px !default; $slick-pagination-page-input-border-radius: 3px !default; diff --git a/packages/common/src/styles/slick-component.scss b/packages/common/src/styles/slick-component.scss index b3f65519f..c404bcd64 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 diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss index 69e2e42ba..54d1ad2ee 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, diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss index 6295d67a0..ea3a7d3bb 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'; // ---------------------------------------------- From 01100f6085bb667218098bbf7a32e7727d39f4b8 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 22 Apr 2024 09:36:48 -0400 Subject: [PATCH 03/25] chore: fix failing unit tests --- .../__tests__/autocompleterEditor.spec.ts | 2 +- .../src/editors/__tests__/dateEditor.spec.ts | 4 ++-- .../__tests__/slickRowMoveManager.spec.ts | 4 ++-- .../__tests__/checkmarkMaterialFormatter.spec.ts | 16 ++++++++-------- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts b/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts index efb7d67ec..983d9e8af 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') 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..03b183bfc 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 .icon-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 .icon-clear') as HTMLInputElement; const editorInputElm = divContainer.querySelector('.flatpickr input') as HTMLInputElement; clearBtnElm.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/formatters/__tests__/checkmarkMaterialFormatter.spec.ts b/packages/common/src/formatters/__tests__/checkmarkMaterialFormatter.spec.ts index 92c483b93..e9fb06d9d 100644 --- a/packages/common/src/formatters/__tests__/checkmarkMaterialFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/checkmarkMaterialFormatter.spec.ts @@ -26,20 +26,20 @@ describe('the Checkmark Formatter with Material Design Icon', () => { const value = 'True'; const result1 = checkmarkMaterialFormatter(0, 0, value.toLowerCase(), {} as Column, {}, {} as any); const result2 = checkmarkMaterialFormatter(0, 0, value.toUpperCase(), {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - expect((result2 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result2 as HTMLElement).outerHTML).toBe(''); }); it('should return the Font Awesome Checkmark icon when input is True', () => { const value = true; const result = checkmarkMaterialFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result as HTMLElement).outerHTML).toBe(''); + expect((result as HTMLElement).outerHTML).toBe(''); }); it('should return the Font Awesome Checkmark icon when input is a string even if it start with 0', () => { const value = '005A00ABC'; const result1 = checkmarkMaterialFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); }); it('should return an empty string when the string "0" is provided', () => { @@ -51,13 +51,13 @@ describe('the Checkmark Formatter with Material Design Icon', () => { it('should return the Font Awesome Checkmark icon when input is a number greater than 0', () => { const value = 0.000001; const result1 = checkmarkMaterialFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); }); it('should return the Font Awesome Checkmark icon when input is a number as a text greater than 0', () => { const value = '0.000001'; const result1 = checkmarkMaterialFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); }); it('should return an empty string when input is a number lower or equal to 0', () => { @@ -92,7 +92,7 @@ describe('the Checkmark Formatter with Material Design Icon', () => { const value2 = 'undefined'; const result1 = checkmarkMaterialFormatter(0, 0, value1, {} as Column, {}, {} as any); const result2 = checkmarkMaterialFormatter(0, 0, value2, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - expect((result2 as HTMLElement).outerHTML).toBe(''); + expect((result1 as HTMLElement).outerHTML).toBe(''); + expect((result2 as HTMLElement).outerHTML).toBe(''); }); }); From b18bb2afa320d7c9b4a59fb041bbe7d6846a458c Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 22 Apr 2024 09:43:10 -0400 Subject: [PATCH 04/25] chore: fix failing Cypress tests --- .../__tests__/autocompleterEditor.spec.ts | 2 +- .../src/editors/__tests__/dateEditor.spec.ts | 4 +- .../common/src/editors/autocompleterEditor.ts | 2 +- packages/common/src/editors/dateEditor.ts | 2 +- test/cypress/e2e/example07.cy.ts | 12 ++--- test/cypress/e2e/example12.cy.ts | 46 +++++++++---------- 6 files changed, 34 insertions(+), 34 deletions(-) diff --git a/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts b/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts index 983d9e8af..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') 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 03b183bfc..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/autocompleterEditor.ts b/packages/common/src/editors/autocompleterEditor.ts index 97b9a5351..68d08e96e 100644 --- a/packages/common/src/editors/autocompleterEditor.ts +++ b/packages/common/src/editors/autocompleterEditor.ts @@ -530,7 +530,7 @@ 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' }); + 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 fd2a50772..6e9b9bbc6 100644 --- a/packages/common/src/editors/dateEditor.ts +++ b/packages/common/src/editors/dateEditor.ts @@ -145,7 +145,7 @@ 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' }); + 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/test/cypress/e2e/example07.cy.ts b/test/cypress/e2e/example07.cy.ts index 0a0e4d4b2..870aa3c2c 100644 --- a/test/cypress/e2e/example07.cy.ts +++ b/test/cypress/e2e/example07.cy.ts @@ -407,11 +407,11 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => { it('should be able to toggle Sorting functionality (disable) and expect all header menu Sorting commands to be hidden and also not show Sort hint while hovering a column', () => { const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column']; - cy.get('[data-test="toggle-sorting-btn"] .mdi-toggle-switch').should('exist'); + cy.get('[data-test="toggle-sorting-btn"] .sgi-toggle-switch').should('exist'); cy.get('.slick-sort-indicator').should('have.length.greaterThan', 0); // sort icon hints cy.get('[data-test="toggle-sorting-btn"]').click(); // disable it cy.get('.slick-sort-indicator').should('have.length', 0); - cy.get('[data-test="toggle-sorting-btn"] .mdi-toggle-switch-off-outline').should('exist'); + cy.get('[data-test="toggle-sorting-btn"] .sgi-toggle-switch-off-outline').should('exist'); cy.get('.grid7') .find('.slick-header-column:nth(8)') @@ -457,10 +457,10 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => { it('should be able to toggle Sorting functionality (re-enable) and expect all Sorting header menu commands to be visible and also Sort hints to show up also', () => { const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column']; - cy.get('[data-test="toggle-sorting-btn"] .mdi-toggle-switch-off-outline').should('exist'); + cy.get('[data-test="toggle-sorting-btn"] .sgi-toggle-switch-off-outline').should('exist'); cy.get('.slick-sort-indicator').should('have.length', 0); // sort icon hints cy.get('[data-test="toggle-sorting-btn"]').click(); // enable it back - cy.get('[data-test="toggle-sorting-btn"] .mdi-toggle-switch').should('exist'); + cy.get('[data-test="toggle-sorting-btn"] .sgi-toggle-switch').should('exist'); cy.get('.slick-sort-indicator').should('have.length.greaterThan', 0); cy.get('.grid7') @@ -503,11 +503,11 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => { it('should be able to click disable Sorting functionality button and expect all Sorting commands to be hidden and also not show Sort hint while hovering a column', () => { const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column']; - cy.get('[data-test="toggle-sorting-btn"] .mdi-toggle-switch').should('exist'); + cy.get('[data-test="toggle-sorting-btn"] .sgi-toggle-switch').should('exist'); cy.get('.slick-sort-indicator').should('have.length.greaterThan', 0); // sort icon hints cy.get('[data-test="disable-sorting-btn"]').click().click(); // even clicking twice should have same result cy.get('.slick-sort-indicator').should('have.length', 0); - cy.get('[data-test="toggle-sorting-btn"] .mdi-toggle-switch-off-outline').should('exist'); + cy.get('[data-test="toggle-sorting-btn"] .sgi-toggle-switch-off-outline').should('exist'); cy.get('.grid7') .find('.slick-header-column:nth(5)') diff --git a/test/cypress/e2e/example12.cy.ts b/test/cypress/e2e/example12.cy.ts index 7ddf5ba0b..81b9fda72 100644 --- a/test/cypress/e2e/example12.cy.ts +++ b/test/cypress/e2e/example12.cy.ts @@ -34,14 +34,14 @@ describe('Example 12 - Composite Editor Modal', () => { it('should display 2 different tooltips when hovering icons on "Title" column', () => { cy.get('.slick-column-name').as('title-column'); cy.get('@title-column') - .find('.mdi-alert-outline') + .find('.sgi-alert-outline') .trigger('mouseover'); cy.get('.slick-custom-tooltip').should('be.visible'); cy.get('.slick-custom-tooltip .tooltip-body').contains('Task must always be followed by a number'); cy.get('@title-column') - .find('.mdi-information-outline') + .find('.sgi-information-outline') .trigger('mouseover'); cy.get('.slick-custom-tooltip').should('be.visible'); @@ -130,15 +130,15 @@ describe('Example 12 - Composite Editor Modal', () => { // change Completed cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).click(); cy.get('.editor-completed').check(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).click(); cy.get('.editor-completed').check(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).click(); cy.get('.editor-completed').check(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); }); it('should be able to change "Finish" values of row indexes 0-2', () => { @@ -287,7 +287,7 @@ describe('Example 12 - Composite Editor Modal', () => { expect(win.console.log).to.be.calledWithMatch('create item data context', { id: 501, title: 'Task 7777', completed: false, complexity: '', duration: 33, finish: '', percentComplete: 44, start: '', origin: { name: 'Austria', code: 'AT' }, - product: { id: 0, icon: 'mdi-arrow-collapse', itemName: 'Sleek Metal Computer', itemTypeName: 'I', listPrice: 2100.23 }, + product: { id: 0, icon: 'sgi-arrow-collapse', itemName: 'Sleek Metal Computer', itemTypeName: 'I', listPrice: 2100.23 }, }); }); }); @@ -297,7 +297,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '44'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).find('.editing-field').should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 0); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 0); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Sleek Metal Computer'); @@ -348,7 +348,7 @@ describe('Example 12 - Composite Editor Modal', () => { expect(win.console.log).to.be.calledWithMatch('create item data context', { id: 502, title: 'Task 8888', completed: true, complexity: '', duration: 22, percentComplete: 5, start: '', origin: { name: 'Antarctica', code: 'AQ' }, - product: { id: 1, icon: 'mdi-arrow-expand', itemName: 'Tasty Granite Table', itemTypeName: 'I', listPrice: 3200.12 }, + product: { id: 1, icon: 'sgi-arrow-expand', itemName: 'Tasty Granite Table', itemTypeName: 'I', listPrice: 3200.12 }, }); }); }); @@ -358,7 +358,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '22 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '5'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).find('.editing-field').should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table'); @@ -394,7 +394,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '17'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).find('.editing-field').should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('not.exist'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('not.exist'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table'); @@ -441,25 +441,25 @@ describe('Example 12 - Composite Editor Modal', () => { it('should have updated values in the entire grid', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '51'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', '51'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', '51'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`).should('contain', '51'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -490,7 +490,7 @@ describe('Example 12 - Composite Editor Modal', () => { it('should be able to clear the "Country of Origin" autocomplete field in the modal form via the Clear button from the editor', () => { cy.get('.item-details-container.editor-origin .modified').should('have.length', 1); - cy.get('.item-details-container.editor-origin .autocomplete-container button.icon-clear').click(); + cy.get('.item-details-container.editor-origin .autocomplete-container button.btn-clear').click(); cy.get('.item-details-container.editor-origin .modified').should('have.length', 1); cy.get('.item-details-container.editor-origin .autocomplete').invoke('val').then(text => expect(text).to.eq('')); }); @@ -558,22 +558,22 @@ describe('Example 12 - Composite Editor Modal', () => { it('should have updated all the changed values BUT only on the 2 selected rows', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', '77'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belize'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', '77'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(10)`).should('contain', 'Belize'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -639,7 +639,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).contains('TASK 8899', { matchCase: false }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -673,7 +673,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).contains('TASK 9999', { matchCase: false }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '44 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '17'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 0); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 0); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -682,7 +682,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', '8899'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.sgi.sgi-check.checkmark-icon').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -692,7 +692,7 @@ describe('Example 12 - Composite Editor Modal', () => { // clear Country cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).click(); - cy.get('.autocomplete-container button.icon-clear').click(); + cy.get('.autocomplete-container button.btn-clear').click(); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', ''); }); From a5a9b8aa717b4da849c59dc803ca24145e84f655 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 22 Apr 2024 11:21:16 -0400 Subject: [PATCH 05/25] chore: rework pagination to use BindingEventService - found issues in pagination with new SVG icons and saw potential improvements to use BindingEventService instead of using too many querySelector, we can point directly to the HTML element and bind an event without querying anything --- .../src/slick-pagination.component.ts | 97 +++++++++++-------- 1 file changed, 54 insertions(+), 43 deletions(-) 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 `); + 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/extensionCommonUtils.ts b/packages/common/src/extensions/extensionCommonUtils.ts index c6911d83a..6bacf869b 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 = 'sgi-icon-picker-check'; +const PICKER_UNCHECK_ICON = 'sgi-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('.sgi'); + 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 = `sgi ${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: `sgi ${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..a901d3804 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 = 'sgi-icon-check'; +const UNCHECK_ICON = 'sgi-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: `sgi ${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: 'sgi sgi-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 .sgi'); if (selectAllElm) { selectAllElm.ariaChecked = String(this._isSelectAllChecked); selectAllElm.checked = this._isSelectAllChecked; } + if (selectAllIconElm) { + selectAllIconElm.className = `sgi ${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/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index 864be7808..0c5570274 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -48,23 +48,14 @@ $slick-icon-sort-desc: url('data:image/svg+ $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; @@ -100,7 +91,6 @@ $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-icon-color: $slick-icon-color !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; @@ -132,12 +122,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-base-dark-menu-bg-color: #212121; --slick-primary-color: #66bb6a; --slick-button-primary-bg-color: var(--slick-primary-color); --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; @@ -149,14 +139,14 @@ $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-checkbox-icon-color: #59c55f; + --slick-checkbox-icon-height: 22px; + --slick-checkbox-icon-bg-color: transparent; + --slick-checkbox-icon-border: none; --slick-multiselect-icon-radio-color: var(--slick-primary-color); --ms-checkbox-color: var(--slick-primary-color); --ms-checkbox-hover-color: #{lighten(#49a54e, 13%)}; diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index dc77f5811..1533ca92e 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -55,31 +55,17 @@ $slick-icon-sort-desc: url('data:image/sv $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; @@ -117,7 +103,6 @@ $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-icon-color: inherit !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; @@ -173,19 +158,23 @@ $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; + --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: #3a9ef5; + --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 8fda701cd..47a26108c 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -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; @@ -301,16 +301,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 +316,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 +343,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; @@ -442,22 +445,19 @@ $slick-header-menu-button-margin-right: 3px !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; @@ -856,7 +856,7 @@ $ms-select-all-text-color: $slick-multiselect-s $slick-pagination-border-color: #ddd !default; $slick-pagination-button-bg-color: #fff !default; $slick-pagination-button-border-color: #b3b3b3 !default; -$slick-pagination-button-border-disabled-color: #dedede !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; @@ -1008,21 +1008,18 @@ $slick-empty-data-warning-z-index: 10 !default; --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-btn-default-border-color: #565656; --slick-grid-menu-icon-btn-color: #bbbbbb; --slick-row-mouse-hover-color: #2c3034; @@ -1049,7 +1046,7 @@ $slick-empty-data-warning-z-index: 10 !default; --slick-menu-title-border-bottom: 1px solid #525252; --slick-menu-title-color: #bababa; --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); 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-plugins.scss b/packages/common/src/styles/slick-plugins.scss index ea3a7d3bb..28b189400 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -131,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.sgi { + opacity: 1; + font-size: var(--slick-column-picker-icon-font-size, $slick-column-picker-icon-font-size); + color: var(--slick-column-picker-icon-color, $slick-column-picker-icon-color); + + &.sgi-icon-picker-check { + @include generateSvgStyle('slick-column-picker-icon-checked-svg', $slick-column-picker-icon-checked-svg-path); + } + &.sgi-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); + } } } @@ -528,8 +552,7 @@ li.hidden { // Row Move Manager Plugin // ---------------------------------------------- .slick-cell.cell-reorder { - display: flex; - align-items: center; + text-align: center; .slick-row-move-column { background-color: currentColor; @@ -545,63 +568,73 @@ li.hidden { // ---------------------------------------------- // 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.sgi { + opacity: 1; + font-size: var(--slick-checkbox-icon-font-size, $slick-checkbox-icon-font-size); + color: var(--slick-checkbox-icon-color, $slick-checkbox-icon-color); + + &.sgi-icon-check { + @include generateSvgStyle('slick-checkbox-icon-checked-svg', $slick-checkbox-icon-checked-svg-path); + } + &.sgi-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 { @@ -625,6 +658,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); } diff --git a/test/cypress/e2e/example01.cy.ts b/test/cypress/e2e/example01.cy.ts index 26c4c7a15..8b59e1420 100644 --- a/test/cypress/e2e/example01.cy.ts +++ b/test/cypress/e2e/example01.cy.ts @@ -258,10 +258,10 @@ describe('Example 01 - Basic Grids', () => { cy.get(`.slick-grid-menu.${gridUid}`) .find('.slick-column-picker-list') .children('li') - .each(($child, index) => { + .each(($li, index) => { if (index <= 5) { - const $input = $child.children('input'); - const $label = $child.children('label'); + const $input = $li.find('input'); + const $label = $li.find('span.checkbox-label'); expect($input.prop('checked')).to.eq(true); expect($label.text()).to.eq(fullTitles[index]); } @@ -306,10 +306,10 @@ describe('Example 01 - Basic Grids', () => { cy.get(`.slick-grid-menu.${gridUid}`) .find('.slick-column-picker-list') .children('li') - .each(($child, index) => { + .each(($li, index) => { if (index <= 5) { - const $input = $child.children('input'); - const $label = $child.children('label'); + const $input = $li.find('input'); + const $label = $li.find('label'); expect($input.prop('checked')).to.eq(true); expect($label.text()).to.eq(fullTitles[index]); } @@ -345,10 +345,10 @@ describe('Example 01 - Basic Grids', () => { cy.get('.slick-column-picker-list') .children('li') - .each(($child, index) => { + .each(($li, index) => { if (index <= 5) { - const $input = $child.children('input'); - const $label = $child.children('label'); + const $input = $li.find('input'); + const $label = $li.find('label'); if ($label.text() === 'Title') { expect($input.prop('checked')).to.eq(false); } else { @@ -440,10 +440,10 @@ describe('Example 01 - Basic Grids', () => { cy.get(`.slick-grid-menu.${gridUid}`) .find('.slick-column-picker-list') .children('li') - .each(($child, index) => { + .each(($li, index) => { if (index <= 5) { - const $input = $child.children('input'); - const $label = $child.children('label'); + const $input = $li.find('input'); + const $label = $li.find('label'); expect($input.prop('checked')).to.eq(true); expect($label.text()).to.eq(fullTitles[index]); } @@ -476,10 +476,10 @@ describe('Example 01 - Basic Grids', () => { cy.get(`.slick-grid-menu.${gridUid}`) .find('.slick-column-picker-list') .children('li') - .each(($child, index) => { + .each(($li, index) => { if (index <= 5) { - const $input = $child.children('input'); - const $label = $child.children('label'); + const $input = $li.find('input'); + const $label = $li.find('label'); if ($label.text() === 'Title' || $label.text() === 'Start') { expect($input.prop('checked')).to.eq(false); } else { diff --git a/test/cypress/e2e/example07.cy.ts b/test/cypress/e2e/example07.cy.ts index 870aa3c2c..0f00363a0 100644 --- a/test/cypress/e2e/example07.cy.ts +++ b/test/cypress/e2e/example07.cy.ts @@ -101,9 +101,9 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => { it('should uncheck all rows', () => { // click twice to check then uncheck all - cy.get('.slick-column-name > input[type=checkbox]') + cy.get('.slick-column-name input[type=checkbox]') .click({ force: true }); - cy.get('.slick-column-name > input[type=checkbox]') + cy.get('.slick-column-name input[type=checkbox]') .click({ force: true }); }); @@ -217,10 +217,10 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => { cy.get(`.slick-grid-menu`) .find('.slick-column-picker-list') .children('li') - .each(($child, index) => { + .each(($li, index) => { if (index <= 5) { - const $input = $child.children('input'); - const $label = $child.children('label'); + const $input = $li.find('input'); + const $label = $li.find('label'); expect($input.prop('checked')).to.eq(true); expect($label.text()).to.eq(updatedTitles[index]); } @@ -858,10 +858,10 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => { cy.get(`.slick-grid-menu`) .find('.slick-column-picker-list') .children('li') - .each(($child, index) => { + .each(($li, index) => { if (index <= 5) { - const $input = $child.children('input'); - const $label = $child.children('label'); + const $input = $li.find('input'); + const $label = $li.find('label'); if ($label.text() === 'Fin') { expect($input.prop('checked')).to.eq(false); } else { From 5bc2ddbf4077c6d3d2f6090a654f87ad3d73f8a4 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 24 Apr 2024 15:12:24 -0400 Subject: [PATCH 08/25] chore: use pure SVG icons for Grouping and add dark mode to icons page --- docs/styling/styling.md | 29 +---------- .../vite-demo-vanilla-bundle/src/app.html | 2 +- .../src/examples/example03.html | 16 ++++-- .../src/examples/example03.ts | 49 ++++++++++++------- .../src/examples/example07.html | 2 +- .../src/examples/example10.html | 2 +- .../src/examples/example12.html | 2 +- .../src/examples/example16.html | 4 +- .../src/examples/example16.ts | 12 ++--- .../src/examples/icons.html | 14 ++++-- .../src/examples/icons.ts | 18 +++++++ .../src/material-styles.scss | 8 ++- .../vite-demo-vanilla-bundle/src/styles.scss | 22 ++++++--- .../src/extensions/slickDraggableGrouping.ts | 4 +- .../formatters/checkmarkMaterialFormatter.ts | 2 +- .../common/src/formatters/formatters.index.ts | 2 +- .../src/styles/_variables-theme-material.scss | 23 +++------ .../styles/_variables-theme-salesforce.scss | 12 +---- packages/common/src/styles/_variables.scss | 49 ++++++++++++------- .../common/src/styles/slick-bootstrap.scss | 27 ++++------ packages/common/src/styles/slick-grid.scss | 11 ----- packages/common/src/styles/slick-plugins.scss | 33 +++++++------ 22 files changed, 172 insertions(+), 171 deletions(-) diff --git a/docs/styling/styling.md b/docs/styling/styling.md index c9c858079..da6b56376 100644 --- a/docs/styling/styling.md +++ b/docs/styling/styling.md @@ -97,37 +97,12 @@ $slick-icon-sort-width: 13px; ### 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). - -##### 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%); -} -``` -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): -```scss -.slick-groupby-remove.mdi-close { - /* close icon - red */ - @include recolor(#ff0000, 0.8); -} -``` -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%);` +The new version 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`. - -**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) diff --git a/examples/vite-demo-vanilla-bundle/src/app.html b/examples/vite-demo-vanilla-bundle/src/app.html index 12717e448..584b20486 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

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example03.html b/examples/vite-demo-vanilla-bundle/src/examples/example03.html index 18a44f9eb..cbec08971 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

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

50k rows

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example03.ts b/examples/vite-demo-vanilla-bundle/src/examples/example03.ts index 3cf21f749..4c34bd782 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[]; @@ -60,7 +61,7 @@ export default class Example03 { this._bindingEventService.bind(gridContainerElm, 'oncellchange', this.handleOnCellChange.bind(this)); this._bindingEventService.bind(gridContainerElm, 'onvalidationerror', this.handleValidationError.bind(this)); this._bindingEventService.bind(gridContainerElm, 'onitemdeleted', this.handleItemDeleted.bind(this)); - this._bindingEventService.bind(gridContainerElm, 'onbeforeexporttoexcel', () => this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-22px'); + this._bindingEventService.bind(gridContainerElm, 'onbeforeexporttoexcel', () => this.loadingClass = 'sgi sgi-load sgi-spin-1s sgi-22px'); this._bindingEventService.bind(gridContainerElm, 'onafterexporttoexcel', () => this.loadingClass = ''); this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset); } @@ -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, @@ -246,7 +249,7 @@ export default class Example03 { { command: 'command1', title: 'Command 1', cssClass: 'orange', positionOrder: 61 }, { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold', + iconCssClass: 'sgi sgi-close', cssClass: 'red', textCssClass: 'bold', // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext.completed; @@ -260,15 +263,15 @@ export default class Example03 { { command: 'help', title: 'Help', - iconCssClass: 'mdi mdi-help-circle-outline', + iconCssClass: 'sgi sgi-help-circle-outline', positionOrder: 66, }, { command: 'something', title: 'Disabled Command', disabled: true, positionOrder: 67, } ], optionTitle: 'Change Effort-Driven Flag', optionItems: [ - { option: true, title: 'True', iconCssClass: 'mdi mdi-check-box-outline' }, - { option: false, title: 'False', iconCssClass: 'mdi mdi-checkbox-blank-outline' }, + { option: true, title: 'True', iconCssClass: 'sgi sgi-check-box-outline' }, + { option: false, title: 'False', iconCssClass: 'sgi sgi-checkbox-blank-outline' }, ] } }, @@ -310,12 +313,12 @@ export default class Example03 { dropPlaceHolderText: 'Drop a column header here to group by the column', // hideGroupSortIcons: true, // groupIconCssClass: 'fa fa-outdent', - deleteIconCssClass: 'mdi mdi-close color-danger', - sortAscIconCssClass: 'mdi mdi-arrow-up', - sortDescIconCssClass: 'mdi mdi-arrow-down', + deleteIconCssClass: 'sgi sgi-close color-danger', + sortAscIconCssClass: 'sgi sgi-arrow-up', + sortDescIconCssClass: 'sgi sgi-arrow-down', onGroupChanged: (_e, args) => this.onGroupChanged(args), onExtensionRegistered: (extension) => this.draggableGroupingPlugin = extension, - // groupIconCssClass: 'mdi mdi-drag-vertical', + // groupIconCssClass: 'sgi sgi-drag-vertical', }, enableCheckboxSelector: true, enableRowSelection: true, @@ -443,6 +446,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/example07.html b/examples/vite-demo-vanilla-bundle/src/examples/example07.html index e30bac751..c58e813a9 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/example10.html b/examples/vite-demo-vanilla-bundle/src/examples/example10.html index 4828259ef..ed7d1c819 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example10.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example10.html @@ -11,7 +11,7 @@

see - code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.html b/examples/vite-demo-vanilla-bundle/src/examples/example12.html index 4ccaedd29..e8b6df040 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example12.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example12.html @@ -12,7 +12,7 @@

- code + code

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.html b/examples/vite-demo-vanilla-bundle/src/examples/example16.html index c0368efd2..1e36f862c 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example16.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example16.html @@ -3,7 +3,7 @@

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

- code + code

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

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

@@ -16,7 +22,7 @@

SlickGrid Icons

Icon Utilities - +

sgi-spin
@@ -36,7 +42,7 @@

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

sgi-8px
@@ -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" @@ -313,7 +319,7 @@

Icons currently available in the lib - +

\ 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 6049f7965..dcd02a86f 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; @@ -32,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 [ '.sgi.sgi-account', diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss index 10d222ff2..f0c9e6fdc 100644 --- a/examples/vite-demo-vanilla-bundle/src/material-styles.scss +++ b/examples/vite-demo-vanilla-bundle/src/material-styles.scss @@ -59,9 +59,6 @@ --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; @@ -132,10 +129,11 @@ .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-button-primary-bg-color:#66bb6a; --slick-cell-box-shadow: none; --slick-checkbox-icon-color: #66bb6a; --slick-checkbox-icon-height: 22px; @@ -156,7 +154,7 @@ --slick-row-mouse-hover-box-shadow: none; --slick-row-mouse-hover-color: #505050; --slick-row-selected-color: #474747; - --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..37f801d0b 100644 --- a/examples/vite-demo-vanilla-bundle/src/styles.scss +++ b/examples/vite-demo-vanilla-bundle/src/styles.scss @@ -34,7 +34,7 @@ body { } .demo-container.dark-mode { background-color: #33393e; - color: #dddddd; + color: #e6e6e6; h3 { color: #dddddd; } @@ -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; @@ -97,9 +104,12 @@ input.is-narrow { .text-red { color: red; } -.d-inline-flex { - display: inline-flex; +.text-primary { + color: #006DCC; } -.columns:not(:last-child) { - margin-bottom: calc(1.5rem - 0.9rem); + +.dark-mode { + .text-primary { + color: #66b8ff; + } } \ No newline at end of file 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/formatters/checkmarkMaterialFormatter.ts b/packages/common/src/formatters/checkmarkMaterialFormatter.ts index 4081b2b9c..b1a0881fa 100644 --- a/packages/common/src/formatters/checkmarkMaterialFormatter.ts +++ b/packages/common/src/formatters/checkmarkMaterialFormatter.ts @@ -3,7 +3,7 @@ import { createDomElement, isNumber } from '@slickgrid-universal/utils'; import type { Formatter } from './../interfaces/index'; /** - * When value is filled, or if the value is a number and is bigger than 0, it will display a Material Design check icon (mdi-check). + * When value is filled, or if the value is a number and is bigger than 0, it will display a Material Design check icon (sgi-check). * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined) * Anything else than the condition specified will display the icon, so a text with "00123" will display the icon but "0" will not. * Also note that a string ("null", "undefined") will display the icon but (null, undefined) will not, so the typeof is also important diff --git a/packages/common/src/formatters/formatters.index.ts b/packages/common/src/formatters/formatters.index.ts index 94530933d..a60c210fe 100644 --- a/packages/common/src/formatters/formatters.index.ts +++ b/packages/common/src/formatters/formatters.index.ts @@ -51,7 +51,7 @@ export const Formatters = { checkmark: checkmarkFormatter, /** - * When value is filled, or if the value is a number and is bigger than 0, it will display a Material Design check icon (mdi-check). + * When value is filled, or if the value is a number and is bigger than 0, it will display a Material Design check icon (sgi-check). * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined) * Anything else than the condition specified will display the icon, so a text with "00123" will display the icon but "0" will not. * Also note that a string ("null", "undefined") will display the icon but (null, undefined) will not, so the typeof is also important diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index 0c5570274..b6ce214b0 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -65,24 +65,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; @@ -124,9 +113,9 @@ $slick-pagination-page-input-border-radius: 3px !default; .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-compound-filter-text-color: #66bb6a; --slick-compound-filter-operator-select-border: 1px solid #66bb6a; @@ -139,16 +128,16 @@ $slick-pagination-page-input-border-radius: 3px !default; --slick-filled-filter-color: #66bb6a; --slick-highlight-color: #49a54e; --slick-pagination-icon-color: #49a54e; - --slick-checkbox-icon-color: #4dae52; + --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-icon-color: #59c55f; + --slick-checkbox-icon-color: #59c55f; --slick-checkbox-icon-height: 22px; --slick-checkbox-icon-bg-color: transparent; --slick-checkbox-icon-border: none; - --slick-multiselect-icon-radio-color: var(--slick-primary-color); - --ms-checkbox-color: var(--slick-primary-color); + --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 1533ca92e..6f9d5224f 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -76,12 +76,6 @@ $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; @@ -90,11 +84,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; @@ -160,6 +149,7 @@ $slick-pagination-page-input-border-radius: 3px !default; .slick-dark-mode .ms-dark-mode, .slick-dark-mode .icon-checkbox-container, .slick-dark-mode { + --slick-primary-color: #66b8ff !important; --ms-checkbox-color: #66b8ff; --ms-ok-button-text-color: #66b8ff; --slick-button-primary-bg-color: #0064c9; diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 47a26108c..0c7096a91 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -170,14 +170,10 @@ $slick-icon-color: inherit !default; $slick-icon-font-family: "FontAwesome" !default; // or Glyphicons Halflings */ $slick-icon-font-size: 14px !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} + 8px) !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; @@ -661,8 +657,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; @@ -699,22 +695,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; @@ -980,14 +973,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); @@ -1063,6 +1056,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; @@ -1131,4 +1137,9 @@ $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); +} +.dark-mode { + --slick-button-border-color: #626262; + --slick-button-primary-color: #bababa; + --slick-button-style-bg-color: #252525; } \ No newline at end of file diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss index 68cd0b045..e6b3a8ba0 100644 --- a/packages/common/src/styles/slick-bootstrap.scss +++ b/packages/common/src/styles/slick-bootstrap.scss @@ -174,31 +174,22 @@ 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; + background-color: currentColor; 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); } } } diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss index 1b2ee7987..a1c8a0e19 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); diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss index 28b189400..5eb6458c2 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -921,30 +921,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); From ac75f1b6c87760177225a267b69ee5cce4ffa6b9 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 24 Apr 2024 15:23:01 -0400 Subject: [PATCH 09/25] chore: fix failing Cypress tests --- test/cypress/e2e/example03.cy.ts | 4 ++-- test/cypress/e2e/example16.cy.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/cypress/e2e/example03.cy.ts b/test/cypress/e2e/example03.cy.ts index 5b79063cc..b249d906c 100644 --- a/test/cypress/e2e/example03.cy.ts +++ b/test/cypress/e2e/example03.cy.ts @@ -46,7 +46,7 @@ describe('Example 03 - Draggable Grouping', () => { }); it('should click on the group by Duration sort icon and expect data to become sorted as descending order with all rows being expanded', () => { - cy.get('.mdi-arrow-up:nth(0)').click(); + cy.get('.sgi-arrow-up:nth(0)').click(); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); }); @@ -59,7 +59,7 @@ describe('Example 03 - Draggable Grouping', () => { }); it('should click on the group by Duration sort icon and now expect data to become sorted as ascending order with all rows being expanded', () => { - cy.get('.mdi-arrow-down:nth(0)').click(); + cy.get('.sgi-arrow-down:nth(0)').click(); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); }); diff --git a/test/cypress/e2e/example16.cy.ts b/test/cypress/e2e/example16.cy.ts index 0f1100874..fb08bcbba 100644 --- a/test/cypress/e2e/example16.cy.ts +++ b/test/cypress/e2e/example16.cy.ts @@ -88,7 +88,7 @@ describe('Example 16 - Regular & Custom Tooltips', () => { cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(1)').should('be.empty'); cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(0)').contains('Completion:'); - cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(1)').find('.mdi-check-circle-outline').should('exist'); + cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(1)').find('.sgi-check-circle-outline').should('exist'); cy.get('@start6-cell').trigger('mouseout'); }); @@ -134,7 +134,7 @@ describe('Example 16 - Regular & Custom Tooltips', () => { cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(1)').should('be.empty'); cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(0)').contains('Completion:'); - cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(1)').find('.mdi-check-circle-outline').should('exist'); + cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(1)').find('.sgi-check-circle-outline').should('exist'); cy.get('@duration2-cell').trigger('mouseout'); }); From 594e64916ce4ef245fce9721420e8718686155fd Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 24 Apr 2024 19:09:59 -0400 Subject: [PATCH 10/25] chore: use pure SVG icons for Sort icons & convert more .mdi to .sgi - also fix Sort icon hint that was broken (regression) since jQueryUI was removed --- docs/styling/styling.md | 35 ++--- .../src/examples/example05.html | 18 +-- .../src/examples/example05.scss | 8 + .../src/examples/example05.ts | 6 +- .../src/examples/example06.html | 16 +- .../src/examples/example06.scss | 44 +++--- .../src/examples/example06.ts | 20 +-- .../src/examples/example11.html | 14 +- .../src/examples/example11.ts | 140 +++++++++--------- .../src/examples/example13.html | 2 +- .../src/examples/example13.ts | 18 +-- .../src/material-styles.scss | 9 +- .../__tests__/slickHeaderButtons.spec.ts | 50 +++---- .../src/styles/_variables-theme-material.scss | 8 +- .../styles/_variables-theme-salesforce.scss | 6 +- packages/common/src/styles/_variables.scss | 20 +-- .../common/src/styles/slick-bootstrap.scss | 60 ++++---- packages/common/src/styles/slick-grid.scss | 30 ---- packages/common/src/styles/slick-plugins.scss | 27 +--- test/cypress/e2e/example06.cy.ts | 2 +- test/cypress/e2e/example11.cy.ts | 8 +- test/cypress/e2e/example13.cy.ts | 32 ++-- 22 files changed, 258 insertions(+), 315 deletions(-) diff --git a/docs/styling/styling.md b/docs/styling/styling.md index da6b56376..bec9623a4 100644 --- a/docs/styling/styling.md +++ b/docs/styling/styling.md @@ -62,37 +62,26 @@ 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. ### 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. +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 Font +##### with SVG ```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; +$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-bootstrap.scss'; ``` -##### 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; +> **Note** since the SVG are generated by a SASS function, you can only override an SVG path in SASS and not via CSS variable. There is still a way to override an SVG via CSS variable but it will require you to override the entire SVG and not just the SVG page as shown below (also notice that the CSS variable is named without the `"...-path"` suffix and the URL is encoded) -// then on the last line, import the Theme that you wish to override -@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss'; +```css +: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'); +} ``` ### How to change SVG color? @@ -100,7 +89,7 @@ $slick-icon-sort-width: 13px; The new version 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`. +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 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. diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example05.html b/examples/vite-demo-vanilla-bundle/src/examples/example05.html index 95acc78c9..5c71439f1 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example05.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example05.html @@ -1,13 +1,13 @@

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

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

- code + code

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

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

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts index 0545cbc14..3880fa114 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts @@ -270,15 +270,15 @@ export default class Example11 { { id: 'action', name: 'Action', field: 'action', minWidth: 70, width: 75, maxWidth: 75, excludeFromExport: true, - formatter: () => ` -  `, + formatter: () => ` +  `, onCellClick: (event: Event, args) => { const dataContext = args.dataContext; - if ((event.target as HTMLElement).classList.contains('mdi-close')) { + if ((event.target as HTMLElement).classList.contains('sgi-close')) { if (confirm(`Do you really want to delete row (${args.row + 1}) with "${dataContext.title}"`)) { this.slickerGridInstance?.gridService.deleteItemById(dataContext.id); } - } else if ((event.target as HTMLElement).classList.contains('mdi-check-underline')) { + } else if ((event.target as HTMLElement).classList.contains('sgi-check-underline')) { this.slickerGridInstance?.gridService.updateItem({ ...dataContext, completed: true }); alert(`The "${dataContext.title}" is now Completed`); } @@ -336,7 +336,7 @@ export default class Example11 { { command: 'modal', title: 'Mass Update', - iconCssClass: 'mdi mdi-table-edit', + iconCssClass: 'sgi sgi-table-edit', }, ], onCommand: (e, args) => this.executeCommand(e, args) @@ -350,7 +350,7 @@ export default class Example11 { { command: 'modal', title: 'Mass Update', - iconCssClass: 'mdi mdi-table-edit', + iconCssClass: 'sgi sgi-table-edit', positionOrder: 66, }, ], @@ -746,7 +746,7 @@ export default class Example11 { listPrice: 2100.23, itemTypeName: 'I', image: 'http://i.stack.imgur.com/pC1Tv.jpg', - icon: `mdi ${this.getRandomIcon(0)}`, + icon: `sgi ${this.getRandomIcon(0)}`, }, { id: 1, @@ -755,7 +755,7 @@ export default class Example11 { listPrice: 3200.12, itemTypeName: 'I', image: 'https://i.imgur.com/Fnm7j6h.jpg', - icon: `mdi ${this.getRandomIcon(1)}`, + icon: `sgi ${this.getRandomIcon(1)}`, }, { id: 2, @@ -764,7 +764,7 @@ export default class Example11 { listPrice: 15.00, itemTypeName: 'I', image: 'https://i.imgur.com/RaVJuLr.jpg', - icon: `mdi ${this.getRandomIcon(2)}`, + icon: `sgi ${this.getRandomIcon(2)}`, }, { id: 3, @@ -773,7 +773,7 @@ export default class Example11 { listPrice: 25.76, itemTypeName: 'I', image: 'http://i.stack.imgur.com/pC1Tv.jpg', - icon: `mdi ${this.getRandomIcon(3)}`, + icon: `sgi ${this.getRandomIcon(3)}`, }, { id: 4, @@ -782,7 +782,7 @@ export default class Example11 { listPrice: 13.35, itemTypeName: 'I', image: 'https://i.imgur.com/Fnm7j6h.jpg', - icon: `mdi ${this.getRandomIcon(4)}`, + icon: `sgi ${this.getRandomIcon(4)}`, }, { id: 5, @@ -791,7 +791,7 @@ export default class Example11 { listPrice: 23.33, itemTypeName: 'I', image: 'https://i.imgur.com/RaVJuLr.jpg', - icon: `mdi ${this.getRandomIcon(5)}`, + icon: `sgi ${this.getRandomIcon(5)}`, }, { id: 6, @@ -800,7 +800,7 @@ export default class Example11 { listPrice: 71.21, itemTypeName: 'I', image: 'http://i.stack.imgur.com/pC1Tv.jpg', - icon: `mdi ${this.getRandomIcon(6)}`, + icon: `sgi ${this.getRandomIcon(6)}`, }, { id: 7, @@ -809,7 +809,7 @@ export default class Example11 { listPrice: 2.43, itemTypeName: 'I', image: 'https://i.imgur.com/Fnm7j6h.jpg', - icon: `mdi ${this.getRandomIcon(7)}`, + icon: `sgi ${this.getRandomIcon(7)}`, }, { id: 8, @@ -818,7 +818,7 @@ export default class Example11 { listPrice: 31288.39, itemTypeName: 'I', image: 'https://i.imgur.com/RaVJuLr.jpg', - icon: `mdi ${this.getRandomIcon(8)}`, + icon: `sgi ${this.getRandomIcon(8)}`, }, ]; } @@ -826,57 +826,57 @@ export default class Example11 { /** List of icons that are supported in this lib Material Design Icons */ getRandomIcon(iconIndex?: number) { const icons = [ - 'mdi-arrow-collapse', - 'mdi-arrow-expand', - 'mdi-cancel', - 'mdi-check', - 'mdi-checkbox-blank-outline', - 'mdi-check-box-outline', - 'mdi-checkbox-marked', - 'mdi-close', - 'mdi-close-circle', - 'mdi-close-circle-outline', - 'mdi-close-thick', - 'mdi-content-copy', - 'mdi-database-refresh', - 'mdi-download', - 'mdi-file-document-outline', - 'mdi-file-excel-outline', - 'mdi-file-music-outline', - 'mdi-file-pdf-outline', - 'mdi-filter-remove-outline', - 'mdi-flip-vertical', - 'mdi-folder', - 'mdi-folder-open', - 'mdi-help-circle', - 'mdi-help-circle-outline', - 'mdi-history', - 'mdi-information', - 'mdi-information-outline', - 'mdi-link', - 'mdi-link-variant', - 'mdi-menu', - 'mdi-microsoft-excel', - 'mdi-minus', - 'mdi-page-first', - 'mdi-page-last', - 'mdi-paperclip', - 'mdi-pin-off-outline', - 'mdi-pin-outline', - 'mdi-playlist-plus', - 'mdi-playlist-remove', - 'mdi-plus', - 'mdi-redo', - 'mdi-refresh', - 'mdi-shape-square-plus', - 'mdi-sort-ascending', - 'mdi-sort-descending', - 'mdi-swap-horizontal', - 'mdi-swap-vertical', - 'mdi-sync', - 'mdi-table-edit', - 'mdi-table-refresh', - 'mdi-undo', + 'sgi-arrow-collapse', + 'sgi-arrow-expand', + 'sgi-cancel', + 'sgi-check', + 'sgi-checkbox-blank-outline', + 'sgi-check-box-outline', + 'sgi-checkbox-marked', + 'sgi-close', + 'sgi-close-circle', + 'sgi-close-circle-outline', + 'sgi-close-thick', + 'sgi-content-copy', + 'sgi-database-refresh', + 'sgi-download', + 'sgi-file-document-outline', + 'sgi-file-excel-outline', + 'sgi-file-music-outline', + 'sgi-file-pdf-outline', + 'sgi-filter-remove-outline', + 'sgi-flip-vertical', + 'sgi-folder', + 'sgi-folder-open', + 'sgi-help-circle', + 'sgi-help-circle-outline', + 'sgi-history', + 'sgi-information', + 'sgi-information-outline', + 'sgi-link', + 'sgi-link-variant', + 'sgi-menu', + 'sgi-microsoft-excel', + 'sgi-minus', + 'sgi-page-first', + 'sgi-page-last', + 'sgi-paperclip', + 'sgi-pin-off-outline', + 'sgi-pin-outline', + 'sgi-playlist-plus', + 'sgi-playlist-remove', + 'sgi-plus', + 'sgi-redo', + 'sgi-refresh', + 'sgi-shape-square-plus', + 'sgi-sort-ascending', + 'sgi-sort-descending', + 'sgi-swap-horizontal', + 'sgi-swap-vertical', + 'sgi-sync', + 'sgi-table-edit', + 'sgi-table-refresh', + 'sgi-undo', ]; const randomNumber = Math.floor((Math.random() * icons.length - 1)); return icons[iconIndex ?? randomNumber]; @@ -886,11 +886,11 @@ export default class Example11 { return `
- +
- + ${item.itemName}
@@ -904,11 +904,11 @@ export default class Example11 { return `
- +
- + ${item.itemName} ${formatNumber(item.listPrice, 2, 2, false, '$')} diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example13.html b/examples/vite-demo-vanilla-bundle/src/examples/example13.html index 37807dd8b..42aeaaafc 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..9a5702b90 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 === 'sgi sgi-lightbulb-on 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 = 'sgi sgi-lightbulb-outline 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 = 'sgi sgi-lightbulb-on 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: 'sgi sgi-lightbulb-outline color-warning faded', command: 'toggle-highlight', tooltip: 'Highlight negative numbers.', itemVisibilityOverride: (args) => { @@ -170,25 +170,25 @@ export default class Example13 { this[`columnDefinitions${gridNo}`][0].header = { buttons: [ { - cssClass: 'mdi mdi-message-text', + cssClass: 'sgi sgi-message-text', handler: () => { alert('Tag'); } }, { - cssClass: 'mdi mdi-forum-outline', + cssClass: 'sgi sgi-forum-outline', handler: () => { alert('Comment'); } }, { - cssClass: 'mdi mdi-information-outline', + cssClass: 'sgi sgi-information-outline', handler: () => { alert('Info'); } }, { - cssClass: 'mdi mdi-help-circle-outline', + cssClass: 'sgi sgi-help-circle-outline', handler: () => { alert('Help'); } @@ -206,7 +206,7 @@ export default class Example13 { this[`columnDefinitions${gridNo}`][1].header = { buttons: [ { - cssClass: 'mdi mdi-help-circle-outline', + cssClass: 'sgi sgi-help-circle-outline', showOnHover: true, tooltip: 'This button only appears on hover.', handler: () => { diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss index f0c9e6fdc..322fbe76e 100644 --- a/examples/vite-demo-vanilla-bundle/src/material-styles.scss +++ b/examples/vite-demo-vanilla-bundle/src/material-styles.scss @@ -5,6 +5,7 @@ :root { body.material-theme, body.material-theme .icon-checkbox-container { + $dark-primary-color: #66bb6a; $slick-primary-color: #009530; --slick-primary-color: #009530; --slick-header-menu-display: inline-block; @@ -40,11 +41,6 @@ --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-column-picker-icon-color: #009530; --slick-checkbox-icon-color: var(--slick-primary-color); --slick-checkbox-icon-border: none; @@ -132,7 +128,7 @@ .ms-dark-mode .icon-checkbox-container, .slick-dark-mode { --slick-base-dark-menu-bg-color: #212121; - --slick-primary-color: #66bb6a; + --slick-primary-color: #66bb6a !important; --slick-button-primary-bg-color:#66bb6a; --slick-cell-box-shadow: none; --slick-checkbox-icon-color: #66bb6a; @@ -150,6 +146,7 @@ --slick-pane-top-border-top: 1px solid #505050; --slick-filled-filter-color: #66bb6a; --slick-highlight-color: #49a54e; + --slick-icon-sort-color: #66bb6a; --slick-pagination-icon-color: #66bb6a; --slick-row-mouse-hover-box-shadow: none; --slick-row-mouse-hover-color: #505050; diff --git a/packages/common/src/extensions/__tests__/slickHeaderButtons.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderButtons.spec.ts index 9dc5ae00f..6f874e2b0 100644 --- a/packages/common/src/extensions/__tests__/slickHeaderButtons.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHeaderButtons.spec.ts @@ -35,11 +35,11 @@ const pubSubServiceStub = { const headerMock = { buttons: [ { - cssClass: 'mdi mdi-lightbulb-outline', + cssClass: 'sgi sgi-lightbulb-outline', command: 'show-positive-numbers', }, { - cssClass: 'mdi mdi-lightbulb-on', + cssClass: 'sgi sgi-lightbulb-on', command: 'show-negative-numbers', tooltip: 'Highlight negative numbers.', } @@ -98,7 +98,7 @@ describe('HeaderButton Plugin', () => { plugin.init(); plugin.addonOptions = { buttonCssClass: 'some-class' - } + }; expect(plugin.addonOptions).toEqual({ buttonCssClass: 'some-class', @@ -110,7 +110,7 @@ describe('HeaderButton Plugin', () => { jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub); columnsMock[0].header!.buttons![1] = undefined as any; columnsMock[0].header!.buttons![1] = { - cssClass: 'mdi mdi-lightbulb-on', + cssClass: 'sgi sgi-lightbulb-on', command: 'show-negative-numbers', tooltip: 'Highlight negative numbers.', }; @@ -129,7 +129,7 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (only 1x) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ``)); + ``)); gridStub.onBeforeHeaderCellDestroy.notify({ column: columnsMock[0], node: headerDiv, grid: gridStub }, eventData as any, gridStub); expect(headerDiv.innerHTML).toBe(''); @@ -148,7 +148,7 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (only 1x) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ``)); + ``)); }); it('should populate 2x Header Buttons when cell is being rendered and a 2nd button item visibility & usability callbacks returns true', () => { @@ -165,8 +165,8 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); }); it('should populate 2x Header Buttons and a 2nd button item usability callback returns false and expect button to be disabled', () => { @@ -183,8 +183,8 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); }); it('should populate 2x Header Buttons and a 2nd button is "disabled" and expect button to be disabled', () => { @@ -201,8 +201,8 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); }); it('should populate 2x Header Buttons and a 2nd button and property "showOnHover" is enabled and expect button to be hidden until we hover it', () => { @@ -219,8 +219,8 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); }); it('should populate 2x Header Buttons and a 2nd button and a "handler" callback to be executed when defined', () => { @@ -234,12 +234,12 @@ describe('HeaderButton Plugin', () => { const eventData = { ...new SlickEventData(), preventDefault: jest.fn() }; gridStub.onHeaderCellRendered.notify({ column: columnsMock[0], node: headerDiv, grid: gridStub }, eventData as any, gridStub); - headerDiv.querySelector('.slick-header-button.mdi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + headerDiv.querySelector('.slick-header-button.sgi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); expect(handlerMock).toHaveBeenCalled(); }); @@ -254,12 +254,12 @@ describe('HeaderButton Plugin', () => { const eventData = { ...new SlickEventData(), preventDefault: jest.fn() }; gridStub.onHeaderCellRendered.notify({ column: columnsMock[0], node: headerDiv, grid: gridStub }, eventData as any, gridStub); - headerDiv.querySelector('.slick-header-button.mdi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + headerDiv.querySelector('.slick-header-button.sgi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); expect(actionMock).toHaveBeenCalled(); }); @@ -275,12 +275,12 @@ describe('HeaderButton Plugin', () => { const eventData = { ...new SlickEventData(), preventDefault: jest.fn() }; gridStub.onHeaderCellRendered.notify({ column: columnsMock[0], node: headerDiv, grid: gridStub }, eventData as any, gridStub); - headerDiv.querySelector('.slick-header-button.mdi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + headerDiv.querySelector('.slick-header-button.sgi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); expect(onCommandMock).toHaveBeenCalled(); expect(updateColSpy).toHaveBeenCalledWith('field1'); }); @@ -301,8 +301,8 @@ describe('HeaderButton Plugin', () => { // add Header Buttons which are visible (2x buttons) expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - ` - `)); + ` + `)); }); }); }); diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index b6ce214b0..84cfe0cac 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -43,12 +43,7 @@ $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-icon-color: $slick-primary-color !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; @@ -136,6 +131,7 @@ $slick-pagination-page-input-border-radius: 3px !default; --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%)}; diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index 6f9d5224f..05a7e03a3 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -50,11 +50,6 @@ $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-icon-color: $slick-highlight-color !default; $slick-checkbox-icon-border: 1px solid #d6d4d4 !default; $slick-checkbox-icon-border-radius: 0.125rem !default; @@ -164,6 +159,7 @@ $slick-pagination-page-input-border-radius: 3px !default; --slick-checkbox-icon-border: 1px solid #5e5e5e; --slick-compound-filter-text-color: #66b8ff; --slick-filled-filter-color: #66b8ff; + --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; diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 0c7096a91..8ed12868d 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -244,13 +244,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; @@ -426,7 +425,7 @@ $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 */ @@ -673,12 +672,6 @@ $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: $slick-icon-color !default; $slick-draggable-group-sort-icon-margin-left: 2px !default; @@ -1024,6 +1017,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); diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss index e6b3a8ba0..523549665 100644 --- a/packages/common/src/styles/slick-bootstrap.scss +++ b/packages/common/src/styles/slick-bootstrap.scss @@ -177,7 +177,6 @@ .slick-group-toggle { cursor: pointer; - background-color: currentColor; display: inline-block; width: 1em; height: 1em; @@ -191,6 +190,10 @@ &.collapsed { @include generateSvgStyle('slick-icon-group-collapsed-svg', $slick-icon-group-collapsed-svg-path); } + &.expanded, + &.collapsed { + background-color: currentColor; + } } } } @@ -287,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); } @@ -324,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; diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss index a1c8a0e19..81ae72fa2 100644 --- a/packages/common/src/styles/slick-grid.scss +++ b/packages/common/src/styles/slick-grid.scss @@ -301,32 +301,6 @@ 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 { box-shadow: 0 1px 2px rgba(0,0,0,.1); } @@ -357,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 5eb6458c2..84944f6a0 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -499,16 +499,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; } // ---------------------------------------------- @@ -517,8 +518,6 @@ li.hidden { .slick-header-menu-button { background-color: currentColor; - background-position: center center; - background-repeat: no-repeat; cursor: pointer; position: absolute; border: var(--slick-header-menu-button-border, $slick-header-menu-button-border); @@ -993,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); diff --git a/test/cypress/e2e/example06.cy.ts b/test/cypress/e2e/example06.cy.ts index 3a67eaad2..471e36bc1 100644 --- a/test/cypress/e2e/example06.cy.ts +++ b/test/cypress/e2e/example06.cy.ts @@ -1,5 +1,5 @@ describe('Example 06 - Tree Data with Aggregators (from a Hierarchical Dataset)', () => { - const GRID_ROW_HEIGHT = 40; + const GRID_ROW_HEIGHT = 35; const titles = ['Files', 'Date Modified', 'Description', 'Size']; // const defaultSortAscList = ['bucket-list.txt', 'documents', 'misc', 'warranties.txt', 'pdf', 'internet-bill.pdf', 'map.pdf', 'map2.pdf', 'phone-bill.pdf', 'txt', 'todo.txt', 'unclassified.csv', 'unresolved.csv', 'xls', 'compilation.xls', 'music', 'mp3', 'other', 'pop', 'song.mp3', 'theme.mp3', 'rock', 'soft.mp3', 'something.txt']; // const defaultSortDescList = ['something.txt', 'music', 'mp3', 'rock', 'soft.mp3', 'other', 'pop', 'theme.mp3', 'song.mp3', 'documents', 'xls', 'compilation.xls', 'txt', 'todo.txt', 'unclassified.csv', 'unresolved.csv', 'pdf', 'phone-bill.pdf', 'map2.pdf', 'map.pdf', 'internet-bill.pdf', 'misc', 'todo.txt', 'bucket-list.txt']; diff --git a/test/cypress/e2e/example11.cy.ts b/test/cypress/e2e/example11.cy.ts index 83ce8f2e2..d0b518304 100644 --- a/test/cypress/e2e/example11.cy.ts +++ b/test/cypress/e2e/example11.cy.ts @@ -553,7 +553,7 @@ describe('Example 11 - Batch Editing', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1)`).contains('TASK 5', { matchCase: false }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`) - .find('.mdi-close') + .find('.sgi-close') .click(); cy.on('window:confirm', () => true); @@ -570,7 +570,7 @@ describe('Example 11 - Batch Editing', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 2', { matchCase: false }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`) - .find('.mdi-check-underline') + .find('.sgi-check-underline') .click(); cy.on('window:alert', (str) => { @@ -832,8 +832,8 @@ describe('Example 11 - Batch Editing', () => { it('should display 2 different tooltips when hovering icons from "Action" column', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).as('first-row-action-cell'); - cy.get('@first-row-action-cell').find('.action-btns .mdi-close').as('delete-row-btn'); - cy.get('@first-row-action-cell').find('.action-btns .mdi-check-underline').as('mark-completed-btn'); + cy.get('@first-row-action-cell').find('.action-btns .sgi-close').as('delete-row-btn'); + cy.get('@first-row-action-cell').find('.action-btns .sgi-check-underline').as('mark-completed-btn'); cy.get('@delete-row-btn') .trigger('mouseover'); diff --git a/test/cypress/e2e/example13.cy.ts b/test/cypress/e2e/example13.cy.ts index 1b05924be..620aeb4b2 100644 --- a/test/cypress/e2e/example13.cy.ts +++ b/test/cypress/e2e/example13.cy.ts @@ -27,12 +27,12 @@ describe('Example 13 - Header Button Plugin', () => { cy.get('.grid13-1 .slick-header-columns') .children('.slick-header-column:nth(2)') - .find('.slick-header-button.mdi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.sgi-lightbulb-outline.color-warning.faded') .click(); cy.get('.grid13-1 .slick-header-columns') .children('.slick-header-column:nth(2)') - .find('.slick-header-button.mdi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.sgi-lightbulb-outline.color-warning.faded') .should('not.exist'); // shouldn't be faded anymore cy.window().then((win) => { @@ -83,13 +83,13 @@ describe('Example 13 - Header Button Plugin', () => { cy.get('.grid13-1 .slick-header-columns') .children('.slick-header-column:nth(9)') - .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.color-warning.faded') .should('exist') .click(); cy.get('.grid13-1 .slick-header-columns') .children('.slick-header-column:nth(9)') - .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.color-warning.faded') .should('exist'); // should still be faded after previous click cy.get('.grid13-1 .slick-row') @@ -203,7 +203,13 @@ describe('Example 13 - Header Button Plugin', () => { .children('.slick-header-column:nth(1)') .find('.slick-header-button.slick-header-button-hidden') .should('be.hidden') - .should('have.css', 'width', '0px'); + .should('have.css', 'visibility', 'hidden'); + + cy.get('.grid13-1 .slick-header-columns') + .find('.slick-header-button-hidden.sgi-help-circle-outline') + .realHover() + .wait(200) + .should('have.css', 'visibility', 'visible'); }); }); @@ -221,12 +227,12 @@ describe('Example 13 - Header Button Plugin', () => { cy.get('.grid13-2 .slick-header-columns') .children('.slick-header-column:nth(2)') - .find('.slick-header-button.mdi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.sgi-lightbulb-outline.color-warning.faded') .click({ force: true }); cy.get('.grid13-2 .slick-header-columns') .children('.slick-header-column:nth(2)') - .find('.slick-header-button.mdi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.sgi-lightbulb-outline.color-warning.faded') .should('not.exist'); // shouldn't be faded anymore cy.window().then((win) => { @@ -277,13 +283,13 @@ describe('Example 13 - Header Button Plugin', () => { cy.get('.grid13-2 .slick-header-columns') .children('.slick-header-column:nth(9)') - .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.color-warning.faded') .should('exist') .click({ force: true }); cy.get('.grid13-2 .slick-header-columns') .children('.slick-header-column:nth(9)') - .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.color-warning.faded') .should('exist'); // should still be faded after previous click cy.get('.grid13-2 .slick-row') @@ -396,7 +402,13 @@ describe('Example 13 - Header Button Plugin', () => { .children('.slick-header-column:nth(1)') .find('.slick-header-button.slick-header-button-hidden') .should('be.hidden') - .should('have.css', 'width', '0px'); + .should('have.css', 'visibility', 'hidden'); + + cy.get('.grid13-2 .slick-header-columns') + .find('.slick-header-button-hidden.sgi-help-circle-outline') + .realHover() + .wait(200) + .should('have.css', 'visibility', 'visible'); }); it('should filter "Column C" with positive number only and not expect any more red values', () => { From 7cb8414f6e7b59227648996417d9f55ed297b244 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 25 Apr 2024 13:41:19 -0400 Subject: [PATCH 11/25] chore: use pure SVG icons for Row Detail and add Dark Mode to demo --- .../src/examples/example21.html | 20 +- .../src/examples/example21.scss | 176 +++++++++--------- .../src/examples/example21.ts | 57 +++++- .../src/styles/_variables-theme-material.scss | 4 - .../styles/_variables-theme-salesforce.scss | 4 - packages/common/src/styles/_variables.scss | 21 ++- packages/common/src/styles/slick-plugins.scss | 34 ++-- test/cypress/e2e/example21.cy.ts | 69 ++++++- 8 files changed, 242 insertions(+), 143 deletions(-) diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example21.html b/examples/vite-demo-vanilla-bundle/src/examples/example21.html index c0f5b5ce0..5bb52ec95 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..9511b03e1 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: 'sgi sgi-load sgi-spin-1s sgi-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/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index 84cfe0cac..eda8f7f0b 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -93,10 +93,6 @@ $slick-editor-input-group-clear-btn-icon-padding: 1px 6px !default; $slick-editor-input-group-clear-btn-icon-size: $slick-icon-font-size !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-button-border-radius: 2px !default; $slick-pagination-page-input-border-radius: 3px !default; diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index 05a7e03a3..2c687ecfe 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -129,10 +129,6 @@ $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-button-border-radius: 2px !default; $slick-pagination-page-input-border-radius: 3px !default; diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 8ed12868d..bcf3bc9e0 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -265,15 +265,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; @@ -1006,6 +1004,11 @@ $slick-empty-data-warning-z-index: 10 !default; --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; diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss index 84944f6a0..a2d6c9b8a 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -1263,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/test/cypress/e2e/example21.cy.ts b/test/cypress/e2e/example21.cy.ts index 02758467c..6d8df76e5 100644 --- a/test/cypress/e2e/example21.cy.ts +++ b/test/cypress/e2e/example21.cy.ts @@ -15,10 +15,14 @@ describe('Example 21 - Row Detail View', () => { .each(($child, index) => expect($child.text()).to.eq(fullTitles[index])); }); + it('should change server delay to 10ms for faster testing', () => { + cy.get('[data-test="server-delay"]').type('{backspace}'); + }); + it('should open the 1st Row Detail of the 2nd row and expect to find some details', () => { cy.get('.slick-cell.detail-view-toggle:nth(1)') .click() - .wait(50); + .wait(40); cy.get('.slick-cell + .dynamic-cell-detail') .find('h4') @@ -34,7 +38,7 @@ describe('Example 21 - Row Detail View', () => { it('should open the 2nd Row Detail of the 4th row and expect to find some details', () => { cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 9}px;"] .slick-cell:nth(1)`) .click() - .wait(50); + .wait(40); cy.get('.slick-cell + .dynamic-cell-detail') .find('h4') @@ -56,7 +60,7 @@ describe('Example 21 - Row Detail View', () => { it('should open the Task 3 Row Detail and still expect same detail', () => { cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 3}px;"] .slick-cell:nth(1)`) .click() - .wait(50); + .wait(40); cy.get('.dynamic-cell-detail').should('have.length', 1); @@ -111,7 +115,7 @@ describe('Example 21 - Row Detail View', () => { cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 4}px;"] .slick-cell:nth(1)`) .click() - .wait(50); + .wait(40); cy.get('.grid21') .find('.slick-cell + .dynamic-cell-detail .innerDetailView_5') @@ -123,7 +127,7 @@ describe('Example 21 - Row Detail View', () => { cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] .slick-cell:nth(1)`) .click() - .wait(50); + .wait(40); cy.get('.grid21') .find('.slick-cell + .dynamic-cell-detail .innerDetailView_1') @@ -164,7 +168,7 @@ describe('Example 21 - Row Detail View', () => { cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] .slick-cell:nth(1)`) .click() - .wait(50); + .wait(40); cy.get('.grid21') .find('.slick-cell + .dynamic-cell-detail .innerDetailView_1') @@ -307,7 +311,7 @@ describe('Example 21 - Row Detail View', () => { it('should close all row details & make grid editable', () => { cy.get('[data-test="collapse-all-btn"]').click(); - cy.get('[data-test="editable-grid-btn"]').click(); + cy.get('[data-test="toggle-readonly-btn"]').click(); }); it('should click on 5th row detail open icon and expect it to open', () => { @@ -336,5 +340,56 @@ describe('Example 21 - Row Detail View', () => { cy.get('.grid21') .find('.slick-cell + .dynamic-cell-detail .innerDetailView_5') .should('not.exist'); + + cy.get('[data-test="toggle-readonly-btn"]').click(); + }); + + it('should open two Row Details and expect 2 detail panels opened', () => { + cy.get('.slick-viewport-top.slick-viewport-left') + .scrollTo('top'); + + cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 8}px;"] .slick-cell:nth(1)`) + .click() + .wait(40); + + cy.get('.slick-cell.detail-view-toggle:nth(1)') + .click() + .wait(40); + + cy.get('.dynamic-cell-detail') + .should('have.length', 2); + }); + + it('should toggle to Dark Mode and expect all row details to get closed', () => { + cy.get('[data-test="toggle-dark-mode"]').click(); + + cy.get('.dynamic-cell-detail') + .should('have.length', 0); + }); + + it('should open 1st row detail again and be able to delete the row detail', () => { + cy.get('.slick-viewport-top.slick-viewport-left') + .scrollTo('top'); + + cy.get('.slick-cell.detail-view-toggle:nth(1)') + .click() + .wait(40); + + cy.get('.dynamic-cell-detail') + .should('have.length', 1); + + cy.get('.grid21') + .find('.slick-cell + .dynamic-cell-detail .innerDetailView_1') + .as('detailContainer1'); + + cy.get('@detailContainer1') + .find('[data-test=delete-btn]') + .click(); + + cy.get('.notification.is-danger[data-test=status]') + .contains('Deleted row with Task 1'); + + cy.get('.dynamic-cell-detail') + .should('have.length', 0); }); }); From e193713d1fb504ee95bca4c8aee3b89fa9214e6a Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 25 Apr 2024 14:52:31 -0400 Subject: [PATCH 12/25] chore: use same SVG loading spinner for autocompleter - since we use a `::after` pseudo, we cannot convert that SVG to pure CSS and so because the SVG is created once we cannot use the `currentColor` color, so we'll keep using a light gray color so that it works for both light/dark themes. Also note that is the last SVG left to address for migrating to pure CSS --- .../vite-demo-vanilla-bundle/src/bulma.scss | 8 ++++ .../src/examples/example04.html | 14 +++--- .../src/examples/example04.ts | 44 +++++++++---------- .../src/styles/_variables-theme-material.scss | 7 --- .../styles/_variables-theme-salesforce.scss | 6 --- packages/common/src/styles/_variables.scss | 33 +++++++------- .../common/src/styles/slick-autocomplete.scss | 1 - packages/common/src/styles/slick-editors.scss | 7 +++ 8 files changed, 60 insertions(+), 60 deletions(-) diff --git a/examples/vite-demo-vanilla-bundle/src/bulma.scss b/examples/vite-demo-vanilla-bundle/src/bulma.scss index 575590eaf..75e655b32 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: #626262; + } } 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; diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example04.html b/examples/vite-demo-vanilla-bundle/src/examples/example04.html index 0b99703de..9e4e56eb6 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,33 +18,33 @@
- - diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example04.ts b/examples/vite-demo-vanilla-bundle/src/examples/example04.ts index dd2552b6d..66750975c 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example04.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example04.ts @@ -106,7 +106,7 @@ export default class Example04 { // We can also add HTML text to be rendered (any bad script will be sanitized) but we have to opt-in, else it will be sanitized enableRenderHtml: true, // collection: [{ value: '1', label: '1' }, { value: '2', label: '2' }, { value: '3', label: '3' }, { value: '4', label: '4' }, { value: '5', label: '5' }], - collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k, symbol: '' })), + collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k, symbol: '' })), customStructure: { value: 'value', label: 'label', @@ -240,7 +240,7 @@ export default class Example04 { // // collectionAsync: fetch(URL_COUNTRIES_COLLECTION), // enableRenderHtml: true, - // collection: [{ code: true, name: 'True', labelPrefix: ` ` }, { code: false, name: 'False', labelSuffix: '' }], + // collection: [{ code: true, name: 'True', labelPrefix: ` ` }, { code: false, name: 'False', labelSuffix: '' }], // editorOptions: { minLength: 1 } // }, editor: { @@ -267,7 +267,7 @@ export default class Example04 { // collectionAsync: fetch(URL_COUNTRIES_COLLECTION), // // enableRenderHtml: true, - // // collection: [{ code: true, name: 'True', labelPrefix: ` ` }, { code: false, name: 'False', labelSuffix: '' }], + // // collection: [{ code: true, name: 'True', labelPrefix: ` ` }, { code: false, name: 'False', labelSuffix: '' }], // // filterOptions: { minLength: 1 } // }, filter: { @@ -326,7 +326,7 @@ export default class Example04 { { command: 'command1', title: 'Command 1', cssClass: 'orange', positionOrder: 61 }, { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold', + iconCssClass: 'sgi sgi-close', cssClass: 'red', textCssClass: 'bold', // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext.completed; @@ -337,13 +337,13 @@ export default class Example04 { { divider: true, command: '', positionOrder: 63 }, // 'divider', - { command: 'help', title: 'Help', iconCssClass: 'mdi mdi-help-circle', positionOrder: 66, }, + { command: 'help', title: 'Help', iconCssClass: 'sgi sgi-help-circle', positionOrder: 66, }, { command: 'something', title: 'Disabled Command', disabled: true, positionOrder: 67, }, ], optionTitle: 'Change Complete Flag', optionItems: [ - { option: true, title: 'True', iconCssClass: 'mdi mdi-check-box-outline' }, - { option: false, title: 'False', iconCssClass: 'mdi mdi-checkbox-blank-outline' }, + { option: true, title: 'True', iconCssClass: 'sgi sgi-check-box-outline' }, + { option: false, title: 'False', iconCssClass: 'sgi sgi-checkbox-blank-outline' }, ] } }, @@ -392,7 +392,7 @@ export default class Example04 { // when using the cellMenu, you can change some of the default options and all use some of the callback methods enableCellMenu: true, cellMenu: { - subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', + subItemChevronClass: 'sgi sgi-chevron-down sgi-rotate-270', // all the Cell Menu callback methods (except the action callback) // are available under the grid options as shown below onCommand: (e, args) => this.executeCommand(e, args), @@ -410,7 +410,7 @@ export default class Example04 { enableContextMenu: true, contextMenu: { optionShownOverColumnIds: ['percentComplete'], - subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', + subItemChevronClass: 'sgi sgi-chevron-down sgi-rotate-270', hideCloseButton: true, optionTitle: 'Change Percent Complete', onOptionSelected: (_e, args) => { @@ -424,16 +424,16 @@ export default class Example04 { } }, optionItems: [ - { option: 0, iconCssClass: 'mdi mdi-checkbox-blank-outline 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: 0, iconCssClass: 'sgi sgi-checkbox-blank-outline color-secondary', title: 'Not Started (0%)' }, + { option: 50, iconCssClass: 'sgi sgi-flip-vertical', title: 'Half Completed (50%)' }, + { option: 100, iconCssClass: 'sgi sgi-checkbox-marked 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: 50, iconCssClass: 'mdi mdi-flip-vertical', title: 'Half Completed (50%)' }, - { option: 100, iconCssClass: 'mdi mdi-checkbox-marked color-success', title: 'Completed (100%)' }, + { option: 0, iconCssClass: 'sgi sgi-checkbox-blank-outline color-secondary', title: 'Not Started (0%)' }, + { option: 50, iconCssClass: 'sgi sgi-flip-vertical', title: 'Half Completed (50%)' }, + { option: 100, iconCssClass: 'sgi sgi-checkbox-marked color-success', title: 'Completed (100%)' }, ] } ], @@ -441,7 +441,7 @@ export default class Example04 { { command: '', divider: true, positionOrder: 98 }, { // we can also have multiple nested sub-menus - command: 'export', title: 'Exports', iconCssClass: 'mdi mdi-download', positionOrder: 99, + command: 'export', title: 'Exports', iconCssClass: 'sgi sgi-download', positionOrder: 99, commandItems: [ { command: 'exports-txt', title: 'Text (tab delimited)' }, { @@ -454,16 +454,16 @@ export default class Example04 { ] }, { - command: 'feedback', title: 'Feedback', iconCssClass: 'mdi mdi-information-outline', positionOrder: 100, + command: 'feedback', title: 'Feedback', iconCssClass: 'sgi sgi-information-outline', positionOrder: 100, commandItems: [ - { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, + { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'sgi sgi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, 'divider', { - command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', + command: 'sub-menu', title: 'Contact Us', iconCssClass: 'sgi sgi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', commandItems: [ - { command: 'contact-email', title: 'Email us', iconCssClass: 'mdi mdi-pencil-outline' }, - { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'mdi mdi-message-text-outline' }, - { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'mdi mdi-coffee' }, + { command: 'contact-email', title: 'Email us', iconCssClass: 'sgi sgi-pencil-outline' }, + { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'sgi sgi-message-text-outline' }, + { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'sgi sgi-coffee' }, ] } ] diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index eda8f7f0b..062dbf5ba 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -11,7 +11,6 @@ $slick-highlight-color: #48c774 !default; $slick-font-family: Roboto, "Helvetica Neue", sans-serif !default; $slick-font-size-base-value: 14 !default; $slick-icon-color: inherit !default; -$slick-icon-font-family: "Material Design Icons" !default; $slick-icon-font-size: 18px !default; $slick-icon-width: 18px !default; $slick-group-totals-formatter-color: #666666 !default; @@ -76,12 +75,6 @@ $slick-header-button-width: 18px !default; $slick-header-button-margin: -4px 0 100px 0 !default; $slick-header-menu-button-icon-color: $slick-icon-color !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; diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index 2c687ecfe..b8f02cf0f 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -87,12 +87,6 @@ $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-icon-color: inherit !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 #6cb6ff !default; $slick-compound-filter-text-color: $slick-primary-color-dark !default; $slick-multiselect-icon-checked-color: $slick-highlight-color !default; diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index bcf3bc9e0..f60bbe68b 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -167,7 +167,6 @@ $slick-frozen-overflow-right: scroll !default; /* icon font is using Font-Awesome by default but could be changed to any other icon package like Glyphicons, ... */ $slick-icon-color: inherit !default; -$slick-icon-font-family: "FontAwesome" !default; // or Glyphicons Halflings */ $slick-icon-font-size: 14px !default; $slick-icon-group-color: $slick-primary-color !default; $slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" !default; @@ -176,22 +175,22 @@ $slick-icon-group-font-size: calc(#{$slick-icon-f $slick-icon-group-margin-right: 2px !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; 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-editors.scss b/packages/common/src/styles/slick-editors.scss index 54d1ad2ee..e69cb4cc3 100644 --- a/packages/common/src/styles/slick-editors.scss +++ b/packages/common/src/styles/slick-editors.scss @@ -67,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; @@ -465,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; From 07f11ba408f0c08e45ed8ec6efdb9b18311e1e0d Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 25 Apr 2024 18:06:05 -0400 Subject: [PATCH 13/25] chore: remove all Font-Awesome icon references - let's use our own SlickGridIcon (`.sgi`) everywhere instead - increase default base sgi icon font size to 18px - improve colors used in Dark Mode --- docs/column-functionalities/Cell-Menu.md | 46 +++++++------- docs/column-functionalities/Formatters.md | 4 +- ...elect-Dropdown-Editor-(single,multiple).md | 2 +- .../filters/Select-Filter.md | 2 +- docs/grid-functionalities/Context-Menu.md | 42 ++++++------- docs/grid-functionalities/Export-to-Excel.md | 6 +- .../Export-to-Text-File.md | 4 +- docs/grid-functionalities/Grid-Menu.md | 18 +++--- .../frozen-columns-rows.md | 2 +- .../grouping-aggregators.md | 22 +++---- .../header-menu-header-buttons.md | 6 +- docs/styling/dark-mode.md | 2 +- .../vite-demo-vanilla-bundle/src/bulma.scss | 2 +- .../src/examples/example03.ts | 1 - .../src/examples/icons.ts | 1 + .../vite-demo-vanilla-bundle/src/styles.scss | 2 +- .../editors/__tests__/selectEditor.spec.ts | 12 ++-- .../__tests__/singleSelectEditor.spec.ts | 10 +-- .../__tests__/slickContextMenu.spec.ts | 2 +- .../__tests__/slickGridMenu.spec.ts | 34 +++++----- .../__tests__/slickHeaderMenu.spec.ts | 62 +++++++++---------- .../common/src/extensions/slickContextMenu.ts | 14 ++--- .../common/src/extensions/slickGridMenu.ts | 22 +++---- .../common/src/extensions/slickHeaderMenu.ts | 14 ++--- .../filters/__tests__/selectFilter.spec.ts | 8 +-- .../__tests__/checkmarkFormatter.spec.ts | 16 ++--- .../checkmarkMaterialFormatter.spec.ts | 12 ++-- .../__tests__/iconBooleanFormatter.spec.ts | 54 ++++++++-------- .../__tests__/iconFormatter.spec.ts | 8 +-- .../src/formatters/checkmarkFormatter.ts | 2 +- .../src/formatters/iconBooleanFormatter.ts | 2 +- .../common/src/formatters/iconFormatter.ts | 6 +- packages/common/src/global-grid-options.ts | 50 +++++++-------- .../services/__tests__/filter.service.spec.ts | 4 +- .../services/__tests__/sort.service.spec.ts | 14 ++--- .../src/styles/_variables-theme-material.scss | 2 - .../styles/_variables-theme-salesforce.scss | 4 -- packages/common/src/styles/_variables.scss | 16 +++-- packages/common/src/styles/slick-editors.scss | 4 +- packages/common/src/styles/slick-plugins.scss | 6 +- .../common/src/styles/slickgrid-icons.scss | 5 ++ .../src/slick-empty-warning.spec.ts | 12 ++-- .../src/salesforce-global-grid-options.ts | 4 +- 43 files changed, 276 insertions(+), 285 deletions(-) diff --git a/docs/column-functionalities/Cell-Menu.md b/docs/column-functionalities/Cell-Menu.md index 48983d58f..9bf0a523e 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: 'sgi sgi-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: 'sgi sgi-check-box-outline' }, + { option: false, title: 'False', iconCssClass: 'sgi sgi-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: 'sgi sgi-star-outline yellow', title: 'Low' }, + { option: 2, iconCssClass: 'sgi sgi-star orange', title: 'Medium' }, + { option: 3, iconCssClass: 'sgi sgi-star red', title: 'High' }, + }] } -]; +}]; ``` ### 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: 'sgi sgi-star-outline yellow' }, + { option: 2, titleKey: 'MEDIUM', iconCssClass: 'sgi sgi-star orange' }, + { option: 3, titleKey: 'HIGH', iconCssClass: 'sgi sgi-star red' }, ] } } diff --git a/docs/column-functionalities/Formatters.md b/docs/column-functionalities/Formatters.md index 752267fb3..40d2a0fed 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: 'sgi sgi-fire', text: '', tooltip: 'burning fire' } : ''; ``` ### Example of Custom Formatter with Native DOM Element 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..c749c9aff 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..6e9d2c257 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..acf6810f6 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: 'sgi sgi-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: 'sgi sgi-check-box-outline' }, + { option: false, title: 'False', iconCssClass: 'sgi sgi-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: 'sgi sgi-star-outline yellow', title: 'Low' }, + { option: 2, iconCssClass: 'sgi sgi-star orange', title: 'Medium' }, + { option: 3, iconCssClass: 'sgi sgi-star red', title: 'High' }, + }] } ``` @@ -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: 'sgi sgi-star-outline yellow' }, + { option: 2, titleKey: 'MEDIUM', iconCssClass: 'sgi sgi-star orange' }, + { option: 3, titleKey: 'HIGH', iconCssClass: 'sgi sgi-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: 'sgi sgi-content-copy', + iconExportCsvCommand: 'sgi sgi-download', + iconExportExcelCommand: 'sgi sgi-file-excel-outline text-success', + iconExportTextDelimitedCommand: 'sgi sgi-download', width: 200, }, ``` diff --git a/docs/grid-functionalities/Export-to-Excel.md b/docs/grid-functionalities/Export-to-Excel.md index eb8e09ae7..6bf5e6550 100644 --- a/docs/grid-functionalities/Export-to-Excel.md +++ b/docs/grid-functionalities/Export-to-Excel.md @@ -59,7 +59,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 +74,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 @@ -238,7 +238,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..b78b70553 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..606cb88ff 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: 'sgi sgi-dots-vertical', menuWidth: 17, resizeOnShowHeaderRow: true, commandItems: [ { - iconCssClass: 'fa fa-filter text-danger', + iconCssClass: 'sgi sgi-filter-remove-outline', title: 'Clear All Filters', disabled: false, command: 'clear-filter' }, { - iconCssClass: 'fa fa-random', + iconCssClass: 'sgi-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: 'sgi sgi-filter-remove-outline' + iconClearAllSortingCommand: 'sgi sgi-sort-variant-off', + iconExportCsvCommand: 'sgi sgi-download', + iconExportTextDelimitedCommand: 'sgi sgi-download', + iconRefreshDatasetCommand: 'sgi sgi-sync', + iconToggleFilterCommand: 'sgi-flip-vertical', }, }; ``` diff --git a/docs/grid-functionalities/frozen-columns-rows.md b/docs/grid-functionalities/frozen-columns-rows.md index 77e1f2825..c9284b77b 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..ab6bf80bb 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: 'sgi sgi-close' + iconSortAscCommand: 'sgi sgi-sort-ascending' + iconSortDescCommand: 'sgi sgi-sort-descending', }, }; ``` diff --git a/docs/styling/dark-mode.md b/docs/styling/dark-mode.md index f5e567c64..21113bb58 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: 'sgi sgi-brightness-4', commandLabels: { toggleDarkModeCommand: 'Toggle Dark Mode', }, diff --git a/examples/vite-demo-vanilla-bundle/src/bulma.scss b/examples/vite-demo-vanilla-bundle/src/bulma.scss index 75e655b32..791f58bcb 100644 --- a/examples/vite-demo-vanilla-bundle/src/bulma.scss +++ b/examples/vite-demo-vanilla-bundle/src/bulma.scss @@ -12,7 +12,7 @@ --bulma-body-color: white; --bulma-body-background-color: #33393e !important; .button { - border-color: #626262; + border-color: #585858; } } diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example03.ts b/examples/vite-demo-vanilla-bundle/src/examples/example03.ts index 4c34bd782..5ad6cbfba 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example03.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example03.ts @@ -312,7 +312,6 @@ export default class Example03 { draggableGrouping: { dropPlaceHolderText: 'Drop a column header here to group by the column', // hideGroupSortIcons: true, - // groupIconCssClass: 'fa fa-outdent', deleteIconCssClass: 'sgi sgi-close color-danger', sortAscIconCssClass: 'sgi sgi-arrow-up', sortDescIconCssClass: 'sgi sgi-arrow-down', diff --git a/examples/vite-demo-vanilla-bundle/src/examples/icons.ts b/examples/vite-demo-vanilla-bundle/src/examples/icons.ts index dcd02a86f..cd7474229 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/icons.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/icons.ts @@ -226,6 +226,7 @@ export default class Icons { '.sgi.sgi-snowflake', '.sgi.sgi-sort-ascending', '.sgi.sgi-sort-descending', + '.sgi.sgi-sort-variant-off', '.sgi.sgi-sort-variant-remove', '.sgi.sgi-square-edit-outline', '.sgi.sgi-star', diff --git a/examples/vite-demo-vanilla-bundle/src/styles.scss b/examples/vite-demo-vanilla-bundle/src/styles.scss index 37f801d0b..de40530ac 100644 --- a/examples/vite-demo-vanilla-bundle/src/styles.scss +++ b/examples/vite-demo-vanilla-bundle/src/styles.scss @@ -36,7 +36,7 @@ body { background-color: #33393e; color: #e6e6e6; h3 { - color: #dddddd; + color: #e4e4e4; } .subtitle { color: #cbcbcb; diff --git a/packages/common/src/editors/__tests__/selectEditor.spec.ts b/packages/common/src/editors/__tests__/selectEditor.spec.ts index 5e622622d..0637a477e 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..a13ce42e1 100644 --- a/packages/common/src/editors/__tests__/singleSelectEditor.spec.ts +++ b/packages/common/src/editors/__tests__/singleSelectEditor.spec.ts @@ -234,7 +234,7 @@ describe('SingleSelectEditor', () => { it('should create the multi-select editor with a default value and have the HTML rendered when "enableRenderHtml" is set', () => { mockColumn.editor = { enableRenderHtml: true, - collection: [{ value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], + collection: [{ value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], customStructure: { value: 'isEffort', label: 'label', @@ -252,14 +252,14 @@ describe('SingleSelectEditor', () => { expect(editor.selectOptions.useSelectOptionLabelToHtml).toBeFalsy(); expect(editor.getValue()).toEqual(''); expect(editorListElm.length).toBe(2); - expect(editorListElm[0].innerHTML).toBe(' True'); + expect(editorListElm[0].innerHTML).toBe(' True'); }); it('should create the multi-select editor with a default value and have the HTML rendered and sanitized when "enableRenderHtml" is set and has ` }, { isEffort: false, label: 'False' }], + collection: [{ isEffort: true, label: 'True', labelPrefix: ` ` }, { isEffort: false, label: 'False' }], collectionOptions: { separatorBetweenTextLabels: ': ', includePrefixSuffixToSelectedValues: true, @@ -281,9 +281,9 @@ describe('SingleSelectEditor', () => { editorListElm[0].click(); expect(editorBtnElm).toBeTruthy(); - expect(editor.getValue()).toEqual(` : true`); + expect(editor.getValue()).toEqual(` : true`); expect(editorListElm.length).toBe(2); - expect(editorListElm[0].innerHTML).toBe(' : True'); + expect(editorListElm[0].innerHTML).toBe(' : True'); }); }); }); diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts index d8b711a98..cb3a5ddf4 100644 --- a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts @@ -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('sgi-content-copy')).toBeTruthy(); expect(commandLabelElm1.textContent).toBe('Copy'); commandItemElm1.dispatchEvent(new CustomEvent('click')); diff --git a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts index e7e41d699..001ebafd6 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'); }); @@ -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: 'sgi sgi-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: 'sgi sgi-filter-remove-outline', titleKey: 'CLEAR_ALL_FILTERS', title: 'Supprimer tous les filtres', disabled: false, command: 'clear-filter', positionOrder: 50 }, + { iconCssClass: 'sgi sgi-flip-vertical', titleKey: 'TOGGLE_FILTER_ROW', title: 'Basculer la ligne des filtres', disabled: false, command: 'toggle-filter', positionOrder: 53 }, + { iconCssClass: 'sgi sgi-sync', titleKey: 'REFRESH_DATASET', title: 'Rafraîchir les données', disabled: false, command: 'refresh-dataset', positionOrder: 58 } ]); }); @@ -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: 'sgi sgi-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: 'sgi sgi-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: 'sgi sgi-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: 'sgi sgi-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: 'sgi sgi-flip-vertical', titleKey: 'TOGGLE_PRE_HEADER_ROW', title: 'Basculer la ligne de pré-en-tête', disabled: false, command: 'toggle-preheader', positionOrder: 53 } ]); }); @@ -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: 'sgi sgi-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: 'sgi sgi-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: 'sgi sgi-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: 'sgi sgi-download', titleKey: 'EXPORT_TO_TAB_DELIMITED', title: 'Exporter en format texte (délimité par tabulation)', disabled: false, command: 'export-text-delimited', positionOrder: 57 } ]); }); diff --git a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts index e42fa336a..dade4e3c0 100644 --- a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts @@ -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: 'sgi sgi-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: 'sgi sgi-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('sgi-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: 'sgi sgi-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: 'sgi sgi-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('sgi-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: 'sgi sgi-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: 'sgi sgi-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('sgi-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: 'sgi sgi-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('sgi-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: 'sgi sgi-sort-ascending', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, + { iconCssClass: 'sgi sgi-flip-v sgi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 }, { divider: true, command: '', positionOrder: 52 }, - { iconCssClass: 'fa fa-unsorted', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 }, + { iconCssClass: 'sgi sgi-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('sgi-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: 'sgi sgi-sort-ascending', title: 'Trier par ordre croissant', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, + { iconCssClass: 'sgi sgi-flip-v sgi-sort-descending', title: 'Trier par ordre décroissant', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 }, { divider: true, command: '', positionOrder: 52 }, - { iconCssClass: 'fa fa-unsorted', title: 'Supprimer le tri', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 }, + { iconCssClass: 'sgi sgi-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: 'sgi sgi-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('sgi-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: 'sgi sgi-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: 'sgi sgi-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: 'sgi sgi-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: 'sgi sgi-sort-ascending', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, + { iconCssClass: 'sgi sgi-flip-v sgi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 }, { divider: true, command: '', positionOrder: 52 }, - { iconCssClass: 'fa fa-unsorted', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 }, + { iconCssClass: 'sgi sgi-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: 'sgi sgi-sort-ascending', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 }, + { iconCssClass: 'sgi sgi-flip-v sgi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 }, { divider: true, command: '', positionOrder: 52 }, - { iconCssClass: 'fa fa-unsorted', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 }, + { iconCssClass: 'sgi sgi-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/slickContextMenu.ts b/packages/common/src/extensions/slickContextMenu.ts index 2049d997f..a6523d38b 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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-arrow-expand', titleKey: `${translationPrefix}EXPAND_ALL_GROUPS`, disabled: false, command: commandName, diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts index 9dbd8d55c..5bc4fcdff 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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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: 'sgi sgi-menu', menuWidth: 18, commandItems: [], hideClearAllFiltersCommand: false, diff --git a/packages/common/src/extensions/slickHeaderMenu.ts b/packages/common/src/extensions/slickHeaderMenu.ts index 3a5b5ec81..2ec367d1c 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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-flip-v sgi-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 || 'sgi sgi-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 || 'sgi sgi-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 || 'sgi sgi-close', titleKey: `${translationPrefix}HIDE_COLUMN`, command: 'hide-column', positionOrder: 55 diff --git a/packages/common/src/filters/__tests__/selectFilter.spec.ts b/packages/common/src/filters/__tests__/selectFilter.spec.ts index a33286d3d..3ffb458b3 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..a38c13643 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 e9fb06d9d..53f289ceb 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..52a56e664 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 = 'sgi sgi-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 = 'sgi sgi-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 = 'sgi sgi-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 = 'sgi sgi-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 = 'sgi sgi-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 = 'sgi sgi-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 = 'sgi sgi-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 = 'sgi sgi-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 = 'sgi sgi-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 = 'sgi sgi-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 = 'sgi sgi-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 = 'sgi sgi-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 = 'sgi sgi-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..f6319b747 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 = 'sgi sgi-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 = 'sgi sgi-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 = 'sgi sgi-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: "sgi sgi-magnify" }}`'); }); }); diff --git a/packages/common/src/formatters/checkmarkFormatter.ts b/packages/common/src/formatters/checkmarkFormatter.ts index ebb66da43..513a0a012 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: 'sgi sgi-check checkmark-icon', ariaHidden: 'true' }) : ''; }; diff --git a/packages/common/src/formatters/iconBooleanFormatter.ts b/packages/common/src/formatters/iconBooleanFormatter.ts index 447aab3be..a6d6ee128 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: "sgi sgi-check" }}'); } let isTruthy = false; diff --git a/packages/common/src/formatters/iconFormatter.ts b/packages/common/src/formatters/iconFormatter.ts index b0a3fba37..fb416af2f 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: "sgi sgi-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: "sgi sgi-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 aa45db422..63577accd 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 sgi sgi-arrow-collapse', - iconExpandAllGroupsCommand: 'fa fa-expand sgi sgi-arrow-expand', - iconClearGroupingCommand: 'fa fa-times sgi sgi-close', - iconCopyCellValueCommand: 'fa fa-clone sgi sgi-content-copy', - iconExportCsvCommand: 'fa fa-download sgi sgi-download', - iconExportExcelCommand: 'fa fa-file-excel-o sgi sgi-file-excel-outline', - iconExportTextDelimitedCommand: 'fa fa-download sgi sgi-download', + iconCollapseAllGroupsCommand: 'sgi sgi-arrow-collapse', + iconExpandAllGroupsCommand: 'sgi sgi-arrow-expand', + iconClearGroupingCommand: 'sgi sgi-close', + iconCopyCellValueCommand: 'sgi sgi-content-copy', + iconExportCsvCommand: 'sgi sgi-download', + iconExportExcelCommand: 'sgi sgi-file-excel-outline', + iconExportTextDelimitedCommand: 'sgi sgi-download', showBulletWhenIconMissing: true, subItemChevronClass: 'sgi sgi-chevron-down sgi-rotate-270', }, @@ -198,17 +198,17 @@ export const GlobalGridOptions: Partial = { hideToggleFilterCommand: false, hideToggleDarkModeCommand: true, hideTogglePreHeaderCommand: false, - iconCssClass: 'fa fa-bars sgi sgi-menu', - iconClearAllFiltersCommand: 'fa fa-filter sgi sgi-filter-remove-outline', - iconClearAllSortingCommand: 'fa fa-unsorted sgi sgi-swap-vertical', - iconClearFrozenColumnsCommand: 'fa fa-times sgi sgi-pin-off-outline', - iconExportCsvCommand: 'fa fa-download sgi sgi-download', - iconExportExcelCommand: 'fa fa-file-excel-o sgi sgi-file-excel-outline', - iconExportTextDelimitedCommand: 'fa fa-download sgi sgi-download', - iconRefreshDatasetCommand: 'fa fa-refresh sgi sgi-sync', - iconToggleDarkModeCommand: 'fa fa-moon-o sgi sgi-brightness-4', - iconToggleFilterCommand: 'fa fa-random sgi sgi-flip-vertical', - iconTogglePreHeaderCommand: 'fa fa-random sgi sgi-flip-vertical', + iconCssClass: 'sgi sgi-menu', + iconClearAllFiltersCommand: 'sgi sgi-filter-remove-outline', + iconClearAllSortingCommand: 'sgi sgi-sort-variant-off', + iconClearFrozenColumnsCommand: 'sgi sgi-pin-off-outline', + iconExportCsvCommand: 'sgi sgi-download', + iconExportExcelCommand: 'sgi sgi-file-excel-outline', + iconExportTextDelimitedCommand: 'sgi sgi-download', + iconRefreshDatasetCommand: 'sgi sgi-sync', + iconToggleDarkModeCommand: 'sgi sgi-brightness-4', + iconToggleFilterCommand: 'sgi sgi-flip-vertical', + iconTogglePreHeaderCommand: 'sgi sgi-flip-vertical', menuWidth: 16, resizeOnShowHeaderRow: true, showBulletWhenIconMissing: true, @@ -219,13 +219,13 @@ export const GlobalGridOptions: Partial = { autoAlign: true, autoAlignOffset: 4, minWidth: 140, - iconClearFilterCommand: 'fa fa-filter sgi sgi sgi-filter-remove-outline', - iconClearSortCommand: 'fa fa-unsorted sgi sgi-swap-vertical', - iconFreezeColumns: 'fa fa-thumb-tack sgi sgi-pin-outline', - iconSortAscCommand: 'fa fa-sort-amount-asc sgi sgi-flip-v sgi-sort-ascending', - iconSortDescCommand: 'fa fa-sort-amount-desc sgi sgi-flip-v sgi-sort-descending', - iconColumnHideCommand: 'fa fa-times sgi sgi-close', - iconColumnResizeByContentCommand: 'fa fa-arrows-h sgi sgi-arrow-expand-horizontal', + iconClearFilterCommand: 'sgi sgi-filter-remove-outline', + iconClearSortCommand: 'sgi sgi-sort-variant-off', + iconFreezeColumns: 'sgi sgi-pin-outline', + iconSortAscCommand: 'sgi sgi-sort-ascending', + iconSortDescCommand: 'sgi sgi-flip-v sgi-sort-descending', + iconColumnHideCommand: 'sgi sgi-close', + iconColumnResizeByContentCommand: 'sgi sgi-arrow-expand-horizontal', 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..a3725db73 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: 'sgi sgi-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: 'sgi sgi-flip-vertical', positionOrder: 52, title: 'Toggle Filter Row' }] diff --git a/packages/common/src/services/__tests__/sort.service.spec.ts b/packages/common/src/services/__tests__/sort.service.spec.ts index cb6b98d85..b0aad98cb 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: 'sgi sgi-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/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index 062dbf5ba..93a5c900f 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -11,7 +11,6 @@ $slick-highlight-color: #48c774 !default; $slick-font-family: Roboto, "Helvetica Neue", sans-serif !default; $slick-font-size-base-value: 14 !default; $slick-icon-color: inherit !default; -$slick-icon-font-size: 18px !default; $slick-icon-width: 18px !default; $slick-group-totals-formatter-color: #666666 !default; $slick-cell-border-top: none !default; @@ -83,7 +82,6 @@ $slick-row-move-plugin-icon-color: $slick-icon-color !d $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-padding: 1px 6px !default; -$slick-editor-input-group-clear-btn-icon-size: $slick-icon-font-size !default; $slick-row-mouse-hover-color: #ebfaef !default; $slick-row-selected-color: #d4f6d7 !default; $slick-pagination-icon-color: $slick-primary-color !default; diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index b8f02cf0f..424682827 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -22,8 +22,6 @@ $slick-cell-box-shadow: 0px 1px 0px #dddbd $slick-cell-font-weight: 400 !default; $slick-cell-odd-background-color: #f3f2f2 !default; $slick-cell-text-color: #333 !default; -$slick-font-size-base-value: 13 !default; -$slick-icon-font-size: 16px !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; @@ -68,7 +66,6 @@ $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-filled-filter-color: $slick-primary-color-dark !default; @@ -102,7 +99,6 @@ $slick-row-move-plugin-cursor: grab !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-padding: 1px 6px !default; -$slick-editor-input-group-clear-btn-icon-size: $slick-icon-font-size !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; diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index f60bbe68b..b5472d3cc 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -167,11 +167,11 @@ $slick-frozen-overflow-right: scroll !default; /* icon font is using Font-Awesome by default but could be changed to any other icon package like Glyphicons, ... */ $slick-icon-color: inherit !default; -$slick-icon-font-size: 14px !default; +$slick-icon-font-size: 18px !default; $slick-icon-group-color: $slick-primary-color !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} + 8px) !default; +$slick-icon-group-font-size: calc(#{$slick-icon-font-size} + 6px) !default; $slick-icon-group-margin-right: 2px !default; /* Kraaden AutoComplete */ @@ -396,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; @@ -461,7 +460,6 @@ $slick-editor-focus-border-color: $slick-input-focus-b $slick-editor-focus-box-shadow: $slick-input-focus-box-shadow !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-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; @@ -876,7 +874,7 @@ $slick-pagination-text-color: #808080 !default; /* Row Move Manager Plugin */ $slick-row-move-plugin-icon-color: $slick-icon-color !default; -$slick-row-move-plugin-icon-size: 22px !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; @@ -985,7 +983,7 @@ $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; @@ -1027,13 +1025,13 @@ $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-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-font-color: #d3d3d3; @@ -1110,7 +1108,7 @@ $slick-empty-data-warning-z-index: 10 !default; --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; diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss index e69cb4cc3..7ef95fd16 100644 --- a/packages/common/src/styles/slick-editors.scss +++ b/packages/common/src/styles/slick-editors.scss @@ -95,8 +95,8 @@ display: flex; align-items: center; background-color: currentColor; - height: var(--slick-editor-input-group-clear-btn-icon-size, $slick-editor-input-group-clear-btn-icon-size); - width: var(--slick-editor-input-group-clear-btn-icon-size, $slick-editor-input-group-clear-btn-icon-size); + height: 1em; + width: 1em; @include generateSvgStyle('slick-editor-input-group-clear-btn-icon-svg', $slick-editor-input-group-clear-btn-icon-svg-path); } diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss index a2d6c9b8a..89dc45aa0 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -358,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 { @@ -556,10 +555,11 @@ li.hidden { .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); - height: var(--slick-row-move-plugin-icon-size, $slick-row-move-plugin-icon-size); - width: var(--slick-row-move-plugin-icon-size, $slick-row-move-plugin-icon-size); @include generateSvgStyle('slick-row-move-plugin-icon-svg', $slick-row-move-plugin-icon-svg-path); } } diff --git a/packages/common/src/styles/slickgrid-icons.scss b/packages/common/src/styles/slickgrid-icons.scss index f7dce83b5..3d2043a93 100644 --- a/packages/common/src/styles/slickgrid-icons.scss +++ b/packages/common/src/styles/slickgrid-icons.scss @@ -876,6 +876,11 @@ $slick-icon-font-size: $slick-icon-width; "M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" ); +@include generateSvgClass( + "sgi-sort-variant-off", + "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z" +); + @include generateSvgClass( "sgi-sort-variant-remove", "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" 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..a63000259 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: 'sgi sgi-alert 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: 'sgi sgi-alert color-warning' })); emptyWarningElm.appendChild(document.createTextNode(' No Record found.')); const mockOptions = { message: emptyWarningElm, className: 'custom-class', marginTop: 22, marginLeft: 11 }; @@ -394,7 +394,7 @@ describe('Slick-Empty-Warning Component', () => { expect(componentElm).toBeTruthy(); expect(componentElm.style.display).toBe('block'); expect(componentElm.classList.contains('custom-class')).toBeTruthy(); - expect(componentElm.innerHTML).toBe('
No Record found.
'); + expect(componentElm.innerHTML).toBe('
No Record found.
'); }); it('should expect the Slick-Empty-Warning message to be translated to French when providing a Translater Service and "messageKey" property', () => { diff --git a/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts b/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts index ec638910b..9582d6b2b 100644 --- a/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts +++ b/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts @@ -63,8 +63,8 @@ export const SalesforceGlobalGridOptions = { }, headerMenu: { hideFreezeColumnsCommand: false, - iconSortAscCommand: 'fa fa-sort-amount-asc sgi sgi-arrow-up', - iconSortDescCommand: 'fa fa-sort-amount-desc sgi sgi-arrow-down', + iconSortAscCommand: 'sgi sgi-arrow-up', + iconSortDescCommand: 'sgi sgi-arrow-down', }, preventDocumentFragmentUsage: true, sanitizer: (dirtyHtml: string) => typeof dirtyHtml === 'string' ? dirtyHtml.replace(/(\b)(on[a-z]+)(\s*)=|javascript:([^>]*)[^>]*|(<\s*)(\/*)script([<>]*).*(<\s*)(\/*)script(>*)|(<)(\/*)(script|script defer)(.*)(>|>">)/gi, '') : dirtyHtml, From 99131e8cc19283c3ffcfa328781879094831f08d Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 25 Apr 2024 18:44:52 -0400 Subject: [PATCH 14/25] chore: replace all `.mdi` CSS classes leftover --- docs/column-functionalities/Formatters.md | 2 +- .../Autocomplete-Editor-(Kraaden-lib).md | 16 +- docs/grid-functionalities/Grid-Menu.md | 2 +- docs/grid-functionalities/Tree-Data-Grid.md | 4 +- docs/styling/styling.md | 92 +- .../src/examples/example01.html | 8 +- .../src/examples/example01.ts | 16 +- .../src/examples/example02.html | 10 +- .../src/examples/example02.ts | 2 +- .../src/examples/example08.html | 8 +- .../src/examples/example09.html | 10 +- .../src/examples/example14.html | 12 +- .../src/examples/example14.ts | 150 +-- .../src/examples/example15.html | 10 +- .../src/examples/example15.ts | 6 +- .../src/examples/example17.html | 2 +- .../src/examples/example18.html | 6 +- .../src/examples/example18.ts | 12 +- .../src/examples/example19.html | 6 +- .../src/examples/example20.html | 2 +- .../src/examples/example22.html | 2 +- .../src/examples/example22.ts | 10 +- .../__tests__/slickCellMenu.plugin.spec.ts | 24 +- .../__tests__/slickContextMenu.spec.ts | 20 +- .../__tests__/slickDraggableGrouping.spec.ts | 38 +- .../__tests__/slickGridMenu.spec.ts | 16 +- .../__tests__/slickHeaderMenu.spec.ts | 40 +- .../src/extensions/slickRowBasedEdit.ts | 8 +- .../__tests__/treeFormatter.spec.ts | 4 +- .../src/styles/_variables-theme-material.scss | 4 +- .../styles/_variables-theme-salesforce.scss | 4 +- .../common/src/styles/material-svg-icons.scss | 1043 ----------------- .../src/styles/material-svg-utilities.scss | 101 -- .../src/styles/slickgrid-icons-svg-utils.scss | 59 + .../styles/slickgrid-theme-material.bare.scss | 4 +- .../styles/slickgrid-theme-material.lite.scss | 3 +- .../src/styles/slickgrid-theme-material.scss | 4 +- .../slickgrid-theme-salesforce.bare.scss | 4 +- .../slickgrid-theme-salesforce.lite.scss | 3 +- .../styles/slickgrid-theme-salesforce.scss | 3 +- .../slick-composite-editor.component.spec.ts | 6 +- .../src/__tests__/slickCustomTooltip.spec.ts | 12 +- test/cypress/e2e/example11.cy.ts | 1 + 43 files changed, 350 insertions(+), 1439 deletions(-) delete mode 100644 packages/common/src/styles/material-svg-icons.scss delete mode 100644 packages/common/src/styles/material-svg-utilities.scss create mode 100644 packages/common/src/styles/slickgrid-icons-svg-utils.scss diff --git a/docs/column-functionalities/Formatters.md b/docs/column-functionalities/Formatters.md index 40d2a0fed..c626b21b6 100644 --- a/docs/column-functionalities/Formatters.md +++ b/docs/column-functionalities/Formatters.md @@ -219,7 +219,7 @@ Demo ```ts export const iconFormatter: Formatter = (_row, _cell, _value, columnDef) => { const iconElm = document.createElement('span'); - iconElm.className = 'mdi mdi-check'; + iconElm.className = 'sgi sgi-check'; return iconElm; }; diff --git a/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md b/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md index f669b165a..8443da652 100644 --- a/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md +++ b/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md @@ -84,8 +84,8 @@ this.columnDefinitions = [ // collectionAsync: this.http.get(URL_COUNTRIES_COLLECTION), collection: [ { value: '', label: '' }, - { value: true, label: 'True', labelPrefix: ` ` }, - { value: false, label: 'False', labelPrefix: ` ` } + { value: true, label: 'True', labelPrefix: ` ` }, + { value: false, label: 'False', labelPrefix: ` ` } ], } } @@ -223,11 +223,11 @@ export class GridBasicComponent { layout: 'twoRows', templateCallback: (item: any) => `
- +
- + ${item.itemName}
@@ -290,11 +290,11 @@ export class GridBasicComponent { layout: 'twoRows', templateCallback: (item: any) => `
- +
- + ${item.itemName}
@@ -311,11 +311,11 @@ export class GridBasicComponent { return `
- +
- + ${item.itemName} ${formatNumber(item.listPrice, 2, 2, false, '$')} diff --git a/docs/grid-functionalities/Grid-Menu.md b/docs/grid-functionalities/Grid-Menu.md index 606cb88ff..3e4466213 100644 --- a/docs/grid-functionalities/Grid-Menu.md +++ b/docs/grid-functionalities/Grid-Menu.md @@ -85,7 +85,7 @@ gridMenu: { // commandItems: [ // { command: 'help', title: 'Help', positionOrder: 70, action: (e, args) => console.log(args) }, // { command: '', divider: true, positionOrder: 72 }, - // { command: 'hello', title: 'Hello', positionOrder: 69, action: (e, args) => alert('Hello World'), cssClass: 'red', tooltip: 'Hello World', iconCssClass: 'mdi mdi-close' }, + // { command: 'hello', title: 'Hello', positionOrder: 69, action: (e, args) => alert('Hello World'), cssClass: 'red', tooltip: 'Hello World', iconCssClass: 'sgi sgi-close' }, // ], // menuUsabilityOverride: () => false, onBeforeMenuShow: () => { diff --git a/docs/grid-functionalities/Tree-Data-Grid.md b/docs/grid-functionalities/Tree-Data-Grid.md index 4065e6489..639dcf06e 100644 --- a/docs/grid-functionalities/Tree-Data-Grid.md +++ b/docs/grid-functionalities/Tree-Data-Grid.md @@ -149,7 +149,7 @@ this.gridOptions = { titleFormatter: (_row, _cell, value, _def, dataContext) => { let prefix = ''; if (dataContext.treeLevel > 0) { - prefix = ``; + prefix = ``; } return `${prefix}${value}(parentId: ${dataContext.parentId})`; }, @@ -179,7 +179,7 @@ treeFormatter: Formatter = (row, cell, value, columnDef, dataContext, grid) => { const spacer = ``; if (data[idx + 1] && data[idx + 1][treeLevelPropName] > data[idx][treeLevelPropName]) { - const folderPrefix = ``; + const folderPrefix = ``; if (dataContext.__collapsed) { return `${spacer} ${folderPrefix} ${prefix} ${value}`; } else { diff --git a/docs/styling/styling.md b/docs/styling/styling.md index bec9623a4..9d0ea3bf2 100644 --- a/docs/styling/styling.md +++ b/docs/styling/styling.md @@ -128,83 +128,83 @@ $color-darken-percentage: 6%; ##### HTML Color Test ```html
- color-primary - - color-primary-light - - color-primary-dark + color-primary - + color-primary-light - + color-primary-dark
- color-secondary - - color-secondary-light - - color-secondary-dark + color-secondary - + color-secondary-light - + color-secondary-dark
- color-success - - color-success-light - - color-success-dark + color-success - + color-success-light - + color-success-dark
- color-danger - - color-danger-light - - color-danger-dark + color-danger - + color-danger-light - + color-danger-dark
- color-warning - - color-warning-light - - color-warning-dark + color-warning - + color-warning-light - + color-warning-dark
- color-info - - color-info-light - - color-info-dark + color-info - + color-info-light - + color-info-dark
- color-body - - color-body-light - - color-body-dark + color-body - + color-body-light - + color-body-dark
- color-muted - - color-muted-light - - color-muted-dark + color-muted - + color-muted-light - + color-muted-dark
- color-dark + color-dark
- color-light + color-light
- color-white + color-white
- color-alt-default - - color-alt-default-light - - color-alt-default-dark + color-alt-default - + color-alt-default-light - + color-alt-default-dark
- color-alt-warning - - color-alt-warning-light - - color-alt-warning-dark + color-alt-warning - + color-alt-warning-light - + color-alt-warning-dark
- color-alt-success - - color-alt-success-light - - color-alt-success-dark + color-alt-success - + color-alt-success-light - + color-alt-success-dark
- color-alt-danger - - color-alt-danger-light - - color-alt-danger-dark + color-alt-danger - + color-alt-danger-light - + color-alt-danger-dark
-
color-se-primary
+
color-se-primary
- color-se-link - - color-se-link-dark + color-se-link - + color-se-link-dark
-
color-se-secondary
-
color-se-danger
+
color-se-secondary
+
color-se-danger
- color-se-warning - - color-se-warning-light + color-se-warning - + color-se-warning-light
``` \ 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..b62c3cc2c 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example01.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example01.html @@ -5,7 +5,7 @@

Example 01 - Basic Grids - code + code

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

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

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

- code + code

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

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

- code + code

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

Grid 1 (with Header Grouping & Colspan)

- +

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

Grid 1 (with Header Grouping & Colspan) diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example09.html b/examples/vite-demo-vanilla-bundle/src/examples/example09.html index 783e87ef6..eabd643bf 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example09.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example09.html @@ -5,7 +5,7 @@

- code + code

@@ -21,7 +21,7 @@
@@ -45,10 +45,10 @@
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.html b/examples/vite-demo-vanilla-bundle/src/examples/example14.html index b2a2ffcba..88d23d29e 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example14.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example14.html @@ -6,7 +6,7 @@

- code + code

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

Container Width (1000px)

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

Container Width (1000px)

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

- code + code

@@ -20,7 +20,7 @@
@@ -45,10 +45,10 @@
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example15.ts b/examples/vite-demo-vanilla-bundle/src/examples/example15.ts index d553fb150..945f5b945 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example15.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example15.ts @@ -99,7 +99,7 @@ export default class Example15 { // example 2 (async w/Observable): // when using async, the `formatter` will contain the loading spinner // you will need to provide an `asyncPost` function returning a Promise and also `asyncPostFormatter` formatter to display the result once the Promise resolves - formatter: () => `
loading...
`, + formatter: () => `
loading...
`, asyncProcess: (_row, _cell, _value, _column, dataContext) => new Observable((observer) => { observer.next({ // return random door number & zip code to simulare company address @@ -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)); diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example17.html b/examples/vite-demo-vanilla-bundle/src/examples/example17.html index 620ea47e5..efdcc77c8 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example17.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example17.html @@ -4,7 +4,7 @@

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

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

see - code + code

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

see - code + code

@@ -26,11 +26,11 @@
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example20.html b/examples/vite-demo-vanilla-bundle/src/examples/example20.html index da0149a3c..ef8f2b546 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/example22.html b/examples/vite-demo-vanilla-bundle/src/examples/example22.html index 2584aa267..f7cf887f4 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..3c1cddf0d 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', @@ -183,7 +183,7 @@ export default class Example22 { }, actionButtons: { editButtonClassName: 'button-style padding-3px mr-2', - iconEditButtonClassName: 'mdi mdi-pencil', + iconEditButtonClassName: 'sgi sgi-pencil', // since no title and no titleKey is provided, it will fallback to the default text provided by the plugin // if the title is provided but no titleKey, it will override the default text // last but not least if a titleKey is provided, it will use the translation key to translate the text @@ -192,18 +192,18 @@ export default class Example22 { cancelButtonClassName: 'button-style padding-3px', cancelButtonTitle: 'Cancel row', cancelButtonTitleKey: 'RBE_BTN_CANCEL', - iconCancelButtonClassName: 'mdi mdi-undo color-danger', + iconCancelButtonClassName: 'sgi sgi-undo 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: 'sgi sgi-check color-success', updateButtonPrompt: 'Save changes?', deleteButtonClassName: 'button-style padding-3px', deleteButtonTitle: 'Delete row', - iconDeleteButtonClassName: 'mdi mdi-trash-can color-danger', + iconDeleteButtonClassName: 'sgi sgi-trash-can color-danger', deleteButtonPrompt: 'Are you sure you want to delete this row?', }, }, diff --git a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts index 2e2a90d58..e021606ab 100644 --- a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts @@ -88,7 +88,7 @@ const commandItemsMock = [ { divider: true, command: '', positionOrder: 63 }, { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold', + iconCssClass: 'sgi sgi-close', cssClass: 'red', textCssClass: 'bold', }, 'divider', { @@ -114,7 +114,7 @@ const optionItemsMock = [ { divider: true, option: '', positionOrder: 63 }, { option: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-checked', cssClass: 'sky', textCssClass: 'underline', + iconCssClass: 'sgi sgi-checked', cssClass: 'sky', textCssClass: 'underline', }, 'divider', { @@ -323,7 +323,7 @@ describe('CellMenu Plugin', () => { @@ -367,7 +367,7 @@ describe('CellMenu Plugin', () => { expect(commandLabelElm1.textContent).toBe('Command 1'); expect(commandItemElm2.classList.contains('slick-menu-item-divider')).toBeTruthy(); expect(commandItemElm2.innerHTML).toBe(''); - expect(commandIconElm3.classList.contains('mdi-close')).toBeTruthy(); + expect(commandIconElm3.classList.contains('sgi-close')).toBeTruthy(); expect(commandLabelElm3.textContent).toBe('Delete Row'); }); @@ -628,7 +628,7 @@ describe('CellMenu Plugin', () => { plugin.dispose(); plugin.init({ commandItems: deepCopy(commandItemsMock), dropSide: 'left' }); (columnsMock[3].cellMenu!.commandItems![1] as MenuCommandItem).action = actionMock; - plugin.addonOptions.subItemChevronClass = 'mdi mdi-chevron-right'; + plugin.addonOptions.subItemChevronClass = 'sgi sgi-chevron-right'; plugin.addonOptions.autoAdjustDropOffset = -780; plugin.addonOptions.dropSide = 'left'; gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); @@ -656,7 +656,7 @@ describe('CellMenu Plugin', () => { expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); - expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); + expect(commandChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); expect(cellMenu1Elm.classList.contains('dropleft')); @@ -679,7 +679,7 @@ describe('CellMenu Plugin', () => { plugin.dispose(); plugin.init({ commandItems: deepCopy(commandItemsMock) }); (columnsMock[3].cellMenu!.commandItems![1] as MenuCommandItem).action = actionMock; - plugin.addonOptions.subItemChevronClass = 'mdi mdi-chevron-right'; + plugin.addonOptions.subItemChevronClass = 'sgi sgi-chevron-right'; plugin.addonOptions.autoAdjustDropOffset = -780; plugin.addonOptions.dropSide = 'right'; gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); @@ -707,7 +707,7 @@ describe('CellMenu Plugin', () => { expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); - expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); + expect(commandChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); expect(cellMenu1Elm.classList.contains('dropright')); @@ -812,7 +812,7 @@ describe('CellMenu Plugin', () => { @@ -851,7 +851,7 @@ describe('CellMenu Plugin', () => { expect(optionLabelElm1.textContent).toBe('Option 1'); expect(optionItemElm2.classList.contains('slick-menu-item-divider')).toBeTruthy(); expect(optionItemElm2.innerHTML).toBe(''); - expect(optionIconElm3.classList.contains('mdi-checked')).toBeTruthy(); + expect(optionIconElm3.classList.contains('sgi-checked')).toBeTruthy(); expect(optionLabelElm3.textContent).toBe('Delete Row'); }); @@ -1048,7 +1048,7 @@ describe('CellMenu Plugin', () => { plugin.dispose(); plugin.init({ optionItems: deepCopy(optionItemsMock) }); (columnsMock[4].cellMenu!.optionItems![1] as MenuOptionItem).action = actionMock; - plugin.addonOptions.subItemChevronClass = 'mdi mdi-chevron-right'; + plugin.addonOptions.subItemChevronClass = 'sgi sgi-chevron-right'; gridStub.onClick.notify({ cell: 4, row: 1, grid: gridStub }, eventData, gridStub); const cellMenu1Elm = document.body.querySelector('.slick-cell-menu.slickgrid12345.slick-menu-level-0') as HTMLDivElement; @@ -1065,7 +1065,7 @@ describe('CellMenu Plugin', () => { expect(optionList1Elm.querySelectorAll('.slick-menu-item').length).toBe(6); expect(optionList2Elm.querySelectorAll('.slick-menu-item').length).toBe(2); expect(optionContentElm2.textContent).toBe('Sub Options'); - expect(optionChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); + expect(optionChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); expect(subOption3Elm.textContent).toContain('Option 3'); }); diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts index cb3a5ddf4..c0d252862 100644 --- a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts @@ -18,7 +18,7 @@ const commandItemsMock = [ { divider: true, command: '', positionOrder: 63 }, { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold', + iconCssClass: 'sgi sgi-close', cssClass: 'red', textCssClass: 'bold', }, 'divider', { @@ -39,7 +39,7 @@ const optionItemsMock = [ { divider: true, option: '', positionOrder: 63 }, { option: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-checked', cssClass: 'sky', textCssClass: 'underline', + iconCssClass: 'sgi sgi-checked', cssClass: 'sky', textCssClass: 'underline', }, 'divider', { @@ -351,7 +351,7 @@ describe('ContextMenu Plugin', () => { @@ -402,7 +402,7 @@ describe('ContextMenu Plugin', () => { expect(commandLabelElm1.textContent).toBe('Command 1'); expect(commandItemElm2.classList.contains('slick-menu-item-divider')).toBeTruthy(); expect(commandItemElm2.innerHTML).toBe(''); - expect(commandIconElm3.classList.contains('mdi-close')).toBeTruthy(); + expect(commandIconElm3.classList.contains('sgi-close')).toBeTruthy(); expect(commandLabelElm3.textContent).toBe('Delete Row'); }); @@ -677,7 +677,7 @@ describe('ContextMenu Plugin', () => { plugin.dispose(); plugin.init({ commandItems: deepCopy(commandItemsMock) }); (gridOptionsMock.contextMenu!.commandItems![1] as MenuCommandItem).action = actionMock; - plugin.addonOptions.subItemChevronClass = 'mdi mdi-chevron-right'; + plugin.addonOptions.subItemChevronClass = 'sgi sgi-chevron-right'; gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); let contextMenu1Elm = document.body.querySelector('.slick-context-menu.slickgrid12345.slick-menu-level-0') as HTMLDivElement; @@ -704,7 +704,7 @@ describe('ContextMenu Plugin', () => { expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); - expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); + expect(commandChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); @@ -1364,7 +1364,7 @@ describe('ContextMenu Plugin', () => { @@ -1403,7 +1403,7 @@ describe('ContextMenu Plugin', () => { expect(optionLabelElm1.textContent).toBe('Option 1'); expect(optionItemElm2.classList.contains('slick-menu-item-divider')).toBeTruthy(); expect(optionItemElm2.innerHTML).toBe(''); - expect(optionIconElm3.classList.contains('mdi-checked')).toBeTruthy(); + expect(optionIconElm3.classList.contains('sgi-checked')).toBeTruthy(); expect(optionLabelElm3.textContent).toBe('Delete Row'); }); @@ -1611,7 +1611,7 @@ describe('ContextMenu Plugin', () => { plugin.dispose(); plugin.init({ optionItems: deepCopy(optionItemsMock) }); (gridOptionsMock.contextMenu!.optionItems![1] as MenuOptionItem).action = actionMock; - plugin.addonOptions.subItemChevronClass = 'mdi mdi-chevron-right'; + plugin.addonOptions.subItemChevronClass = 'sgi sgi-chevron-right'; gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); const contextMenu1Elm = document.body.querySelector('.slick-context-menu.slickgrid12345.slick-menu-level-0') as HTMLDivElement; @@ -1632,7 +1632,7 @@ describe('ContextMenu Plugin', () => { expect(optionContentElm2.textContent).toBe('Sub Options'); expect(subMenuTitleElm.textContent).toBe('Sub Option Title'); expect(subMenuTitleElm.className).toBe('slick-menu-title bold italic'); - expect(optionChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); + expect(optionChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); expect(subOption3Elm.textContent).toContain('Option 3'); document.body.dispatchEvent(new Event('mousedown')); diff --git a/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts b/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts index 3e8273fbd..3f753bf65 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: 'sgi sgi-close color-danger', }, showHeaderRow: false, showTopPanel: false, @@ -224,13 +224,13 @@ describe('Draggable Grouping Plugin', () => { it('should add an icon beside each column title when "groupIconCssClass" is provided', () => { jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue({ ...gridOptionsMock, enableTranslate: true }); translateService.use('fr'); - plugin.init(gridStub, { ...addonOptions, groupIconCssClass: 'mdi mdi-drag' }); + plugin.init(gridStub, { ...addonOptions, groupIconCssClass: 'sgi sgi-drag' }); const eventData = { ...new SlickEventData(), preventDefault: jest.fn() }; gridStub.onHeaderCellRendered.notify({ column: mockColumns[2], node: headerDiv, grid: gridStub }, eventData as any, gridStub); const groupableElm = headerDiv.querySelector('.slick-column-groupable') as HTMLSpanElement; expect(headerDiv.style.cursor).toBe('pointer'); - expect(groupableElm.classList.contains('mdi-drag')).toBeTruthy(); + expect(groupableElm.classList.contains('sgi-drag')).toBeTruthy(); }); describe('setupColumnReorder definition', () => { @@ -329,14 +329,14 @@ describe('Draggable Grouping Plugin', () => { it('should execute the "onEnd" callback of Sortable and expect sortable to be cancelled', () => { plugin.init(gridStub, { ...addonOptions }); - plugin.setAddonOptions({ deleteIconCssClass: 'mdi mdi-close color-danger' }); + plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-close color-danger' }); const fn = plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); fn.sortableLeftInstance!.options.onStart!({} as any); plugin.droppableInstance!.options.onAdd!({ item: headerColumnDiv3, clone: headerColumnDiv3.cloneNode(true) } as any); fn.sortableLeftInstance.options.onEnd!(new CustomEvent('end') as any); - const groupByRemoveElm = document.querySelector('.slick-groupby-remove.mdi-close') as HTMLDivElement; + const groupByRemoveElm = document.querySelector('.slick-groupby-remove.sgi-close') as HTMLDivElement; expect(groupByRemoveElm).toBeTruthy(); expect(setColumnsSpy).not.toHaveBeenCalled(); @@ -346,7 +346,7 @@ describe('Draggable Grouping Plugin', () => { it('should clear grouping and expect placeholder to be displayed when calling "onEnd" callback', () => { plugin.init(gridStub, { ...addonOptions }); - plugin.setAddonOptions({ deleteIconCssClass: 'mdi mdi-close color-danger' }); + plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-close color-danger' }); const fn = plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); fn.sortableLeftInstance!.options.onStart!({} as any); @@ -361,7 +361,7 @@ describe('Draggable Grouping Plugin', () => { it('should execute the "onEnd" callback of Sortable and expect css classes to be updated', () => { plugin.init(gridStub, { ...addonOptions }); plugin.setColumns(mockColumns); - plugin.setAddonOptions({ deleteIconCssClass: 'mdi mdi-close' }); + plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-close' }); jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(true); getColumnIndexSpy.mockReturnValue(2); const fn = plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); @@ -370,7 +370,7 @@ describe('Draggable Grouping Plugin', () => { fn.sortableLeftInstance!.options.onStart!({} as any); plugin.droppableInstance!.options.onAdd!({ item: headerColumnDiv3, clone: headerColumnDiv3.cloneNode(true) } as any); - const groupByRemoveElm = document.querySelector('.slick-groupby-remove.mdi-close'); + const groupByRemoveElm = document.querySelector('.slick-groupby-remove.sgi-close'); expect(groupByRemoveElm).toBeTruthy(); fn.sortableLeftInstance.options.onEnd!(new CustomEvent('end') as any); @@ -382,7 +382,7 @@ describe('Draggable Grouping Plugin', () => { it('should drag over dropzone and expect hover css class be added and removed when dragging outside of dropzone', () => { plugin.init(gridStub, { ...addonOptions }); - plugin.setAddonOptions({ deleteIconCssClass: 'mdi mdi-close color-danger' }); + plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-close color-danger' }); const fn = plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); fn.sortableLeftInstance!.options.onStart!({} as any); @@ -428,8 +428,8 @@ describe('Draggable Grouping Plugin', () => { mockHeaderColumnDiv1.appendChild(mockDivPaneContainer1); mockHeaderColumnDiv2.appendChild(mockDivPaneContainer1); - plugin.init(gridStub, { ...addonOptions, deleteIconCssClass: 'mdi mdi-close', onGroupChanged: onGroupChangedCallbackSpy }); - plugin.setAddonOptions({ deleteIconCssClass: 'mdi mdi-close' }); + plugin.init(gridStub, { ...addonOptions, deleteIconCssClass: 'sgi sgi-close', onGroupChanged: onGroupChangedCallbackSpy }); + plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-close' }); jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(false); const fn = plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); @@ -644,7 +644,7 @@ describe('Draggable Grouping Plugin', () => { it('should toggle ascending/descending order with different icons when original sort is ascending then user clicked the sorting icon twice', () => { const onGroupChangedCallbackSpy = jest.fn(); - plugin.init(gridStub, { ...addonOptions, sortAscIconCssClass: 'mdi mdi-arrow-up', sortDescIconCssClass: 'mdi mdi-arrow-down', onGroupChanged: onGroupChangedCallbackSpy }); + plugin.init(gridStub, { ...addonOptions, sortAscIconCssClass: 'sgi sgi-arrow-up', sortDescIconCssClass: 'sgi sgi-arrow-down', onGroupChanged: onGroupChangedCallbackSpy }); const fn = plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); jest.spyOn(fn.sortableLeftInstance, 'toArray').mockReturnValue(['age', 'medals']); const invalidateSpy = jest.spyOn(gridStub, 'invalidate'); @@ -653,7 +653,7 @@ describe('Draggable Grouping Plugin', () => { plugin.droppableInstance!.options.onAdd!({ item: headerColumnDiv3, clone: headerColumnDiv3.cloneNode(true) } as any); let groupBySortElm = preHeaderDiv.querySelector('.slick-groupby-sort') as HTMLDivElement; - let groupBySortAscIconElm = preHeaderDiv.querySelector('.mdi-arrow-up') as HTMLDivElement; + let groupBySortAscIconElm = preHeaderDiv.querySelector('.sgi-arrow-up') as HTMLDivElement; expect(fn.sortableLeftInstance).toEqual(plugin.sortableLeftInstance); expect(fn.sortableRightInstance).toEqual(plugin.sortableRightInstance); @@ -662,16 +662,16 @@ describe('Draggable Grouping Plugin', () => { expect(groupBySortAscIconElm).toBeTruthy(); groupBySortAscIconElm.dispatchEvent(new Event('click')); - groupBySortAscIconElm = preHeaderDiv.querySelector('.mdi-arrow-up') as HTMLDivElement; - let groupBySortDescIconElm = preHeaderDiv.querySelector('.mdi-arrow-down') as HTMLDivElement; + groupBySortAscIconElm = preHeaderDiv.querySelector('.sgi-arrow-up') as HTMLDivElement; + let groupBySortDescIconElm = preHeaderDiv.querySelector('.sgi-arrow-down') as HTMLDivElement; expect(setGroupingSpy).toHaveBeenCalledWith(expect.toBeArray()); expect(groupBySortAscIconElm).toBeFalsy(); expect(groupBySortDescIconElm).toBeTruthy(); groupBySortDescIconElm.dispatchEvent(new Event('click')); - groupBySortAscIconElm = preHeaderDiv.querySelector('.mdi-arrow-up') as HTMLDivElement; - groupBySortDescIconElm = preHeaderDiv.querySelector('.mdi-arrow-down') as HTMLDivElement; + groupBySortAscIconElm = preHeaderDiv.querySelector('.sgi-arrow-up') as HTMLDivElement; + groupBySortDescIconElm = preHeaderDiv.querySelector('.sgi-arrow-down') as HTMLDivElement; expect(setGroupingSpy).toHaveBeenCalledWith(expect.toBeArray()); expect(groupBySortAscIconElm).toBeTruthy(); @@ -704,7 +704,7 @@ describe('Draggable Grouping Plugin', () => { it('should execute the "onEnd" callback of Sortable and expect sortable to be cancelled', () => { plugin.init(gridStub, { ...addonOptions }); - plugin.setAddonOptions({ deleteIconCssClass: 'mdi mdi-close color-danger' }); + plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-close color-danger' }); const fn = plugin.setupColumnReorder(gridStub, [mockHeaderLeftDiv1, mockHeaderLeftDiv2], {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy); jest.spyOn(fn.sortableLeftInstance, 'toArray').mockReturnValue(['firstName', 'lastName', 'age']); jest.spyOn(fn.sortableRightInstance, 'toArray').mockReturnValue(['gender']); @@ -713,7 +713,7 @@ describe('Draggable Grouping Plugin', () => { plugin.droppableInstance!.options.onAdd!({ item: headerColumnDiv3, clone: headerColumnDiv3.cloneNode(true) } as any); fn.sortableLeftInstance.options.onEnd!(new CustomEvent('end') as any); - const groupByRemoveElm = document.querySelector('.slick-groupby-remove.mdi-close') as HTMLDivElement; + const groupByRemoveElm = document.querySelector('.slick-groupby-remove.sgi-close') as HTMLDivElement; expect(groupByRemoveElm).toBeTruthy(); mockColumns.pop(); // all original columns except last column which is what we returned on sortableRightInstance diff --git a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts index 001ebafd6..5bbb6a3fb 100644 --- a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts @@ -849,7 +849,7 @@ describe('GridMenuControl', () => { }); it('should add a custom Grid Menu item with "iconCssClass" and expect an icon to be included on the item DOM element', () => { - gridOptionsMock.gridMenu!.commandItems = [{ command: 'help', title: 'Help', iconCssClass: 'mdi mdi-close' }]; + gridOptionsMock.gridMenu!.commandItems = [{ command: 'help', title: 'Help', iconCssClass: 'sgi sgi-close' }]; control.columns = columnsMock; control.init(); const buttonElm = document.querySelector('.slick-grid-menu-button') as HTMLDivElement; @@ -860,9 +860,9 @@ describe('GridMenuControl', () => { expect(helpTextElm.textContent).toBe('Help'); expect(helpIconElm.classList.contains('slick-menu-icon')).toBeTrue(); - expect(helpIconElm.classList.contains('mdi')).toBeTrue(); - expect(helpIconElm.classList.contains('mdi-close')).toBeTrue(); - expect(helpIconElm.className).toBe('slick-menu-icon mdi mdi-close'); + expect(helpIconElm.classList.contains('sgi')).toBeTrue(); + expect(helpIconElm.classList.contains('sgi-close')).toBeTrue(); + expect(helpIconElm.className).toBe('slick-menu-icon sgi sgi-close'); }); it('should add a custom Grid Menu item with "tooltip" and expect the item title attribute to be part of the item DOM element', () => { @@ -931,7 +931,7 @@ describe('GridMenuControl', () => { const disposeSubMenuSpy = jest.spyOn(control, 'disposeSubMenus'); Object.defineProperty(document.documentElement, 'clientWidth', { writable: true, configurable: true, value: 50 }); - gridOptionsMock.gridMenu!.subItemChevronClass = 'mdi mdi-chevron-right'; + gridOptionsMock.gridMenu!.subItemChevronClass = 'sgi sgi-chevron-right'; gridOptionsMock.gridMenu!.dropSide = 'left'; gridOptionsMock.gridMenu!.commandItems = mockCommandItems; control.columns = columnsMock; @@ -964,7 +964,7 @@ describe('GridMenuControl', () => { expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); - expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); + expect(commandChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); expect(gridMenu1Elm.classList.contains('dropleft')); @@ -990,7 +990,7 @@ describe('GridMenuControl', () => { const disposeSubMenuSpy = jest.spyOn(control, 'disposeSubMenus'); Object.defineProperty(document.documentElement, 'clientWidth', { writable: true, configurable: true, value: 50 }); - gridOptionsMock.gridMenu!.subItemChevronClass = 'mdi mdi-chevron-right'; + gridOptionsMock.gridMenu!.subItemChevronClass = 'sgi sgi-chevron-right'; gridOptionsMock.gridMenu!.dropSide = 'right'; gridOptionsMock.gridMenu!.commandItems = mockCommandItems; control.columns = columnsMock; @@ -1020,7 +1020,7 @@ describe('GridMenuControl', () => { expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); - expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); + expect(commandChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); expect(gridMenu1Elm.classList.contains('dropright')); diff --git a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts index dade4e3c0..066a5ce63 100644 --- a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts @@ -25,7 +25,7 @@ const gridOptionsMock = { postProcess: jest.fn(), }, headerMenu: { - buttonCssClass: 'mdi mdi-chevron-down', + buttonCssClass: 'sgi sgi-chevron-down', hideFreezeColumnsCommand: false, hideColumnResizeByContentCommand: false, hideForceFitButton: false, @@ -95,11 +95,11 @@ const headerMock = { menu: { commandItems: [ { - cssClass: 'mdi mdi-lightbulb-outline', + cssClass: 'sgi sgi-lightbulb-outline', command: 'show-positive-numbers', }, { - cssClass: 'mdi mdi-lightbulb-on', + cssClass: 'sgi sgi-lightbulb-on', command: 'show-negative-numbers', tooltip: 'Highlight negative numbers.', }, @@ -177,7 +177,7 @@ describe('HeaderMenu Plugin', () => { jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub); columnsMock[0].header!.menu!.commandItems![1] = undefined as any; columnsMock[0].header!.menu!.commandItems![1] = { - cssClass: 'mdi mdi-lightbulb-on', + cssClass: 'sgi sgi-lightbulb-on', command: 'show-negative-numbers', tooltip: 'Highlight negative numbers.', } as MenuCommandItem; @@ -200,14 +200,14 @@ describe('HeaderMenu Plugin', () => { it('should populate a Header Menu button with extra button css classes when header menu option "buttonCssClass" and cell is being rendered', () => { plugin.dispose(); - plugin.init({ buttonCssClass: 'mdi mdi-chevron-down' }); + plugin.init({ buttonCssClass: 'sgi sgi-chevron-down' }); (columnsMock[0].header!.menu!.commandItems![1] as MenuCommandItem).itemVisibilityOverride = () => undefined as any; const eventData = { ...new SlickEventData(), preventDefault: jest.fn() }; gridStub.onHeaderCellRendered.notify({ column: columnsMock[0], node: headerDiv, grid: gridStub }, eventData as any, gridStub); expect(removeExtraSpaces(headerDiv.innerHTML)).toBe(removeExtraSpaces( - `
`)); + `
`)); }); it('should populate a Header Menu button with extra tooltip title attribute when header menu option "tooltip" and cell is being rendered', () => { @@ -268,7 +268,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -290,7 +290,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -314,7 +314,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -334,7 +334,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -354,7 +354,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -376,13 +376,13 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` )); - gridContainerDiv.querySelector('.slick-menu-item.mdi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + gridContainerDiv.querySelector('.slick-menu-item.sgi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); expect(actionMock).toHaveBeenCalled(); expect(headerDiv.querySelector('.slick-header-menu-button')!.innerHTML).toBe(''); }); @@ -402,13 +402,13 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` )); - gridContainerDiv.querySelector('.slick-menu-item.mdi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + gridContainerDiv.querySelector('.slick-menu-item.sgi-lightbulb-on')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); expect(onCommandMock).toHaveBeenCalled(); expect(headerDiv.querySelector('.slick-header-menu-button')!.innerHTML).toBe(''); }); @@ -431,7 +431,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -458,7 +458,7 @@ describe('HeaderMenu Plugin', () => { expect(menuElm.clientWidth).toBe(275); expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -513,7 +513,7 @@ describe('HeaderMenu Plugin', () => { expect(commandElm).toBeTruthy(); expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces( - `` @@ -688,7 +688,7 @@ describe('HeaderMenu Plugin', () => { Object.defineProperty(document.documentElement, 'clientWidth', { writable: true, configurable: true, value: 50 }); jest.spyOn(gridStub, 'getColumns').mockReturnValueOnce(columnsMock); - plugin.init({ autoAlign: true, subItemChevronClass: 'mdi mdi-chevron-right' }); + plugin.init({ autoAlign: true, subItemChevronClass: 'sgi sgi-chevron-right' }); plugin.addonOptions.onCommand = onCommandMock; const eventData = { ...new SlickEventData(), preventDefault: jest.fn() }; @@ -718,7 +718,7 @@ describe('HeaderMenu Plugin', () => { expect(commandContentElm2.textContent).toBe('Sub Commands'); expect(subMenuTitleElm.textContent).toBe('Sub Command Title 2'); expect(subMenuTitleElm.className).toBe('slick-menu-title color-warning'); - expect(commandChevronElm.className).toBe('sub-item-chevron mdi mdi-chevron-right'); + expect(commandChevronElm.className).toBe('sub-item-chevron sgi sgi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); expect(headerMenu1Elm.classList.contains('dropright')); diff --git a/packages/common/src/extensions/slickRowBasedEdit.ts b/packages/common/src/extensions/slickRowBasedEdit.ts index 29d9afbd9..a8829f160 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 || 'sgi sgi-table-edit 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 || 'sgi sgi-close 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 || 'sgi sgi-check-bold 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 || 'sgi sgi-cancel color-danger', }) ); diff --git a/packages/common/src/formatters/__tests__/treeFormatter.spec.ts b/packages/common/src/formatters/__tests__/treeFormatter.spec.ts index a0ed0002c..7fb1d855d 100644 --- a/packages/common/src/formatters/__tests__/treeFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/treeFormatter.spec.ts @@ -103,7 +103,7 @@ describe('Tree Formatter', () => { mockGridOptions.treeDataOptions!.levelPropName = 'indent'; mockGridOptions.treeDataOptions!.titleFormatter = (_row, _cell, value, _def, dataContext) => { if (dataContext.indent > 0) { - return `${value}`; + return `${value}`; } return value || ''; }; @@ -112,7 +112,7 @@ describe('Tree Formatter', () => { expect(output.addClasses).toBe('slick-tree-level-1'); expect(getHtmlStringOutput(output.html as DocumentFragment, 'outerHTML')) - .toEqual(`
Jane`); + .toEqual(`
Jane`); }); it('should execute "queryFieldNameGetterFn" callback to get field name to use when it is defined', () => { diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index 93a5c900f..4bbcff957 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -2,8 +2,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) */ $slick-primary-color: #009530 !default; diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index 424682827..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; diff --git a/packages/common/src/styles/material-svg-icons.scss b/packages/common/src/styles/material-svg-icons.scss deleted file mode 100644 index 320c31f81..000000000 --- a/packages/common/src/styles/material-svg-icons.scss +++ /dev/null @@ -1,1043 +0,0 @@ -$slick-icon-height: $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 -); - -@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 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 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 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 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 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 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 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 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 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 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 loadsvg( - ".mdi.mdi-alert", - "M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z", - encodecolor($slick-icon-color), $slick-icon-height, $slick-icon-width, inline-block -); - -@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 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 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 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 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 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 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 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 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 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 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 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 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); - 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 d593778f7..000000000 --- a/packages/common/src/styles/material-svg-utilities.scss +++ /dev/null @@ -1,101 +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, .sgi { - &.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, - &.sgi-flip-h { - transform: scaleX(-1); - } - &.mdi-flip-v, - &.sgi-flip-v { - transform: scaleY(-1); - } - &.mdi-pulse, - &.sgi-pulse { - animation: md-spin 1s infinite steps(8); - } - /* use mdi-spin or mdi-spin-1s to change the speed */ - &.mdi-spin, - &.sgi-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; - } - &.sgi-spin-#{$i}s { - align-items: center; - display: inline-flex; - justify-content: center; - animation: md-spin #{$i}s infinite linear; - } - } - &.mdi-rotate-45, &.sgi-rotate-45 { @include md-icon-rotate(45deg, 1); } - &.mdi-rotate-90, &.sgi-rotate-90 { @include md-icon-rotate(90deg, 1); } - &.mdi-rotate-135, &.sgi-rotate-135 { @include md-icon-rotate(135deg, 2); } - &.mdi-rotate-180, &.sgi-rotate-180 { @include md-icon-rotate(180deg, 2); } - &.mdi-rotate-220, &.sgi-rotate-220 { @include md-icon-rotate(220deg, 3); } - &.mdi-rotate-270, &.sgi-rotate-270 { @include md-icon-rotate(270deg, 3); } - &.mdi-rotate-315, &.sgi-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, - &.sgi-rotate-45, .sgi-rotate-90, .sgi-rotate-135, .sgi-rotate-180, .sgi-rotate-220 .sgi-rotate-270, .sgi-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; - } - } - } - - @for $i from $slick-icon-width-min-size through $slick-icon-width-max-size { - &.sgi-#{$i}px { - font-size: #{$i}px; - height: #{$i}px; - width: #{$i}px; - } - } -} 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..6c4a8d244 --- /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); +} + +.sgi { + &.sgi-flip-h { + transform: scaleX(-1); + } + &.sgi-flip-v { + transform: scaleY(-1); + } + &.sgi-pulse { + animation: sg-spin 1s infinite steps(8); + } + /* use sgi-spin or sgi-spin-1s to change the speed */ + &.sgi-spin { + align-items: center; + display: inline-flex; + justify-content: center; + animation: sg-spin 2s infinite linear; + } + @for $i from 1 through 5 { + &.sgi-spin-#{$i}s { + align-items: center; + display: inline-flex; + justify-content: center; + animation: sg-spin #{$i}s infinite linear; + } + } + &.sgi-rotate-45 { @include sg-icon-rotate(45deg, 1); } + &.sgi-rotate-90 { @include sg-icon-rotate(90deg, 1); } + &.sgi-rotate-135 { @include sg-icon-rotate(135deg, 2); } + &.sgi-rotate-180 { @include sg-icon-rotate(180deg, 2); } + &.sgi-rotate-220 { @include sg-icon-rotate(220deg, 3); } + &.sgi-rotate-270 { @include sg-icon-rotate(270deg, 3); } + &.sgi-rotate-315 { @include sg-icon-rotate(315deg, 3); } + &.sgi-rotate-45, .sgi-rotate-90, .sgi-rotate-135, .sgi-rotate-180, .sgi-rotate-220 .sgi-rotate-270, .sgi-rotate-315 { + filter: none; + } + + @for $i from $slick-icon-width-min-size through $slick-icon-width-max-size { + &.sgi-#{$i}px { + font-size: #{$i}px; + height: #{$i}px; + width: #{$i}px; + } + } +} 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 b8acae821..3f3c28b9b 100644 --- a/packages/common/src/styles/slickgrid-theme-material.lite.scss +++ b/packages/common/src/styles/slickgrid-theme-material.lite.scss @@ -21,9 +21,8 @@ @import './slickgrid-examples'; @import './slick-bootstrap'; @import './slick-autocomplete'; -@import './material-svg-icons'; @import './slickgrid-icons'; -@import './material-svg-utilities'; +@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 31cca4b5b..5b218de6e 100644 --- a/packages/common/src/styles/slickgrid-theme-material.scss +++ b/packages/common/src/styles/slickgrid-theme-material.scss @@ -22,9 +22,7 @@ @import './slickgrid-examples'; @import './slick-bootstrap'; @import './slick-autocomplete'; -@import './material-svg-icons'; -@import './material-svg-icons'; -@import './material-svg-utilities'; +@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.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 894fdf3dc..1c5f674d2 100644 --- a/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss +++ b/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss @@ -20,9 +20,8 @@ @import './slickgrid-examples'; @import './slick-bootstrap'; @import './slick-autocomplete'; -@import './material-svg-icons'; @import './slickgrid-icons'; -@import './material-svg-utilities'; +@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 286c4bf19..aeeef77e2 100644 --- a/packages/common/src/styles/slickgrid-theme-salesforce.scss +++ b/packages/common/src/styles/slickgrid-theme-salesforce.scss @@ -23,9 +23,8 @@ @import './slick-bootstrap'; @import './slick-filters'; @import './slick-autocomplete'; -@import './material-svg-icons'; @import './slickgrid-icons'; -@import './material-svg-utilities'; +@import './slickgrid-icons-svg-utils'; $slick-editing-field-bg-color: #fff !default; $slick-editing-field-border: 1px solid #dddbda !default; diff --git a/packages/composite-editor-component/src/slick-composite-editor.component.spec.ts b/packages/composite-editor-component/src/slick-composite-editor.component.spec.ts index 573b1b0b9..71315f23b 100644 --- a/packages/composite-editor-component/src/slick-composite-editor.component.spec.ts +++ b/packages/composite-editor-component/src/slick-composite-editor.component.spec.ts @@ -336,7 +336,7 @@ describe('CompositeEditorService', () => { }); it('should make sure Slick-Composite-Editor is being created and rendered with 1 column layout & also expect column name html to be rendered as well', () => { - columnsMock[2].name = ' Field 3'; // add tooltip + columnsMock[2].name = ' Field 3'; // add tooltip const mockProduct = { id: 222, address: { zip: 123456 }, productName: 'Product ABC', price: 12.55 }; jest.spyOn(gridStub, 'getDataItem').mockReturnValue(mockProduct); @@ -361,7 +361,7 @@ describe('CompositeEditorService', () => { expect(compositeContainerElm).toBeTruthy(); expect(compositeHeaderElm).toBeTruthy(); expect(productNameLabelElm.textContent).toBe('Product'); // regular, without column group - expect(field3LabelElm.innerHTML).toBe('Group Name - Field 3'); // with column group + expect(field3LabelElm.innerHTML).toBe('Group Name - Field 3'); // with column group expect(compositeTitleElm).toBeTruthy(); expect(compositeTitleElm.textContent).toBe('Details'); expect(compositeBodyElm).toBeTruthy(); @@ -1089,7 +1089,7 @@ describe('CompositeEditorService', () => { jest.spyOn(dataViewStub, 'getItems').mockReturnValue([mockProduct1]); const mockModalOptions = { - headerTitle: 'Details', modalType: 'create', showResetButtonOnEachEditor: true, resetEditorButtonCssClass: 'mdi mdi-refresh' + headerTitle: 'Details', modalType: 'create', showResetButtonOnEachEditor: true, resetEditorButtonCssClass: 'sgi sgi-refresh' } as CompositeEditorOpenDetailOption; component = new SlickCompositeEditorComponent(); component.init(gridStub, container); diff --git a/packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts b/packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts index d1380c7c3..8cbcfb028 100644 --- a/packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts +++ b/packages/custom-tooltip-plugin/src/__tests__/slickCustomTooltip.spec.ts @@ -397,9 +397,9 @@ describe('SlickCustomTooltip plugin', () => { const icon1Elm = document.createElement('span'); const icon2Elm = document.createElement('span'); cellNode.className = 'slick-cell l2 r2'; - icon1Elm.className = 'mdi mdi-check'; + icon1Elm.className = 'sgi sgi-check'; icon1Elm.title = 'Click here when successful'; - icon2Elm.className = 'mdi mdi-cancel'; + icon2Elm.className = 'sgi sgi-cancel'; icon2Elm.title = 'Click here to cancel the action'; cellNode.appendChild(icon1Elm); cellNode.appendChild(icon2Elm); @@ -433,9 +433,9 @@ describe('SlickCustomTooltip plugin', () => { const icon1Elm = document.createElement('span'); const icon2Elm = document.createElement('span'); cellNode.className = 'slick-cell l2 r2'; - icon1Elm.className = 'mdi mdi-check'; + icon1Elm.className = 'sgi sgi-check'; icon1Elm.title = 'Click here when successful'; - icon2Elm.className = 'mdi mdi-cancel'; + icon2Elm.className = 'sgi sgi-cancel'; icon2Elm.title = 'Click here to cancel the action'; cellNode.appendChild(icon1Elm); cellNode.appendChild(icon2Elm); @@ -469,9 +469,9 @@ describe('SlickCustomTooltip plugin', () => { const icon1Elm = document.createElement('span'); const icon2Elm = document.createElement('span'); cellNode.className = 'slick-cell l2 r2'; - icon1Elm.className = 'mdi mdi-check'; + icon1Elm.className = 'sgi sgi-check'; icon1Elm.title = 'Click here when successful'; - icon2Elm.className = 'mdi mdi-cancel'; + icon2Elm.className = 'sgi sgi-cancel'; icon2Elm.title = 'Click here to cancel the action'; icon2Elm.style.display = 'none'; cellNode.appendChild(icon1Elm); diff --git a/test/cypress/e2e/example11.cy.ts b/test/cypress/e2e/example11.cy.ts index d0b518304..d13cab48f 100644 --- a/test/cypress/e2e/example11.cy.ts +++ b/test/cypress/e2e/example11.cy.ts @@ -581,6 +581,7 @@ describe('Example 11 - Batch Editing', () => { }); it('should be able to filter "Country of Origin" with a text range filter "b..e" and expect to see only Canada showing up', () => { + cy.get('.slick-header-columns .slick-header-column:nth(9)').trigger('mouseover'); // mouseover column headers to get rid of cell tooltip cy.get('input.search-filter.filter-countryOfOrigin').type('b..e'); cy.get('input.search-filter.filter-countryOfOrigin.filled').should('exist'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Canada'); From d1b81606bc5abe29842bd920d5c06ef3b231e3c7 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 25 Apr 2024 19:22:10 -0400 Subject: [PATCH 15/25] chore: remove all recolor, `.color-xx` and use only `text-color-xx` - since SVG can now be colorized the same way as regular text, we can merge previous recolor SASS utils and only keep native CSS text `color` definitions --- docs/grid-functionalities/Tree-Data-Grid.md | 4 +- docs/styling/styling.md | 92 +++++++++---------- .../vite-demo-vanilla-bundle/src/app.html | 2 +- .../src/examples/example03.ts | 2 +- .../src/examples/example04.ts | 10 +- .../src/examples/example05.ts | 4 +- .../src/examples/example06.ts | 4 +- .../src/examples/example07.ts | 2 +- .../src/examples/example11.ts | 2 +- .../src/examples/example12.ts | 6 +- .../src/examples/example13.ts | 8 +- .../src/examples/example14.html | 2 +- .../src/examples/example14.ts | 6 +- .../src/examples/example15.ts | 2 +- .../src/examples/example16.ts | 2 +- .../src/examples/example18.ts | 4 +- .../src/examples/example22.ts | 6 +- .../src/examples/icons.html | 2 +- .../src/material-styles.scss | 5 - .../__tests__/slickCellMenu.plugin.spec.ts | 4 +- .../__tests__/slickContextMenu.spec.ts | 2 +- .../__tests__/slickDraggableGrouping.spec.ts | 10 +- .../__tests__/slickGridMenu.spec.ts | 4 +- .../__tests__/slickHeaderMenu.spec.ts | 4 +- .../src/extensions/slickRowBasedEdit.ts | 8 +- .../src/styles/colors-from-filters.scss | 87 ------------------ packages/common/src/styles/colors.scss | 55 ----------- .../common/src/styles/sass-utilities.scss | 47 ---------- .../styles/slickgrid-theme-salesforce.scss | 3 +- .../src/slick-empty-warning.spec.ts | 12 +-- .../src/salesforce-global-grid-options.ts | 2 +- test/cypress/e2e/example13.cy.ts | 16 ++-- 32 files changed, 112 insertions(+), 307 deletions(-) delete mode 100644 packages/common/src/styles/colors-from-filters.scss diff --git a/docs/grid-functionalities/Tree-Data-Grid.md b/docs/grid-functionalities/Tree-Data-Grid.md index 639dcf06e..de7c86d3e 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/styling/styling.md b/docs/styling/styling.md index 9d0ea3bf2..02e69bfc9 100644 --- a/docs/styling/styling.md +++ b/docs/styling/styling.md @@ -128,83 +128,83 @@ $color-darken-percentage: 6%; ##### HTML Color Test ```html
- color-primary - - color-primary-light - - color-primary-dark + color-primary - + color-primary-light - + color-primary-dark
- color-secondary - - color-secondary-light - - color-secondary-dark + color-secondary - + color-secondary-light - + color-secondary-dark
- color-success - - color-success-light - - color-success-dark + color-success - + color-success-light - + color-success-dark
- color-danger - - color-danger-light - - color-danger-dark + color-danger - + color-danger-light - + color-danger-dark
- color-warning - - color-warning-light - - color-warning-dark + color-warning - + color-warning-light - + color-warning-dark
- color-info - - color-info-light - - color-info-dark + color-info - + color-info-light - + color-info-dark
- color-body - - color-body-light - - color-body-dark + color-body - + color-body-light - + color-body-dark
- color-muted - - color-muted-light - - color-muted-dark + color-muted - + color-muted-light - + color-muted-dark
- color-dark + color-dark
- color-light + color-light
- color-white + color-white
- color-alt-default - - color-alt-default-light - - color-alt-default-dark + color-alt-default - + color-alt-default-light - + color-alt-default-dark
- color-alt-warning - - color-alt-warning-light - - color-alt-warning-dark + color-alt-warning - + color-alt-warning-light - + color-alt-warning-dark
- color-alt-success - - color-alt-success-light - - color-alt-success-dark + color-alt-success - + color-alt-success-light - + color-alt-success-dark
- color-alt-danger - - color-alt-danger-light - - color-alt-danger-dark + color-alt-danger - + color-alt-danger-light - + color-alt-danger-dark
-
color-se-primary
+
color-se-primary
- color-se-link - - color-se-link-dark + color-se-link - + color-se-link-dark
-
color-se-secondary
-
color-se-danger
+
color-se-secondary
+
color-se-danger
- color-se-warning - - color-se-warning-light + color-se-warning - + 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 584b20486..cab77870f 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

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example03.ts b/examples/vite-demo-vanilla-bundle/src/examples/example03.ts index 5ad6cbfba..ecb4c7448 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example03.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example03.ts @@ -312,7 +312,7 @@ export default class Example03 { draggableGrouping: { dropPlaceHolderText: 'Drop a column header here to group by the column', // hideGroupSortIcons: true, - deleteIconCssClass: 'sgi sgi-close color-danger', + deleteIconCssClass: 'sgi sgi-close text-color-danger', sortAscIconCssClass: 'sgi sgi-arrow-up', sortDescIconCssClass: 'sgi sgi-arrow-down', onGroupChanged: (_e, args) => this.onGroupChanged(args), diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example04.ts b/examples/vite-demo-vanilla-bundle/src/examples/example04.ts index 66750975c..87cc370ef 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: 'sgi sgi-checkbox-blank-outline color-secondary', title: 'Not Started (0%)' }, + { option: 0, iconCssClass: 'sgi sgi-checkbox-blank-outline text-color-secondary', title: 'Not Started (0%)' }, { option: 50, iconCssClass: 'sgi sgi-flip-vertical', title: 'Half Completed (50%)' }, - { option: 100, iconCssClass: 'sgi sgi-checkbox-marked color-success', title: 'Completed (100%)' }, + { option: 100, iconCssClass: 'sgi sgi-checkbox-marked text-color-success', title: 'Completed (100%)' }, 'divider', { // we can also have multiple nested sub-menus option: null, title: 'Sub-Options (demo)', subMenuTitle: 'Set Percent Complete', optionItems: [ - { option: 0, iconCssClass: 'sgi sgi-checkbox-blank-outline color-secondary', title: 'Not Started (0%)' }, + { option: 0, iconCssClass: 'sgi sgi-checkbox-blank-outline text-color-secondary', title: 'Not Started (0%)' }, { option: 50, iconCssClass: 'sgi sgi-flip-vertical', title: 'Half Completed (50%)' }, - { option: 100, iconCssClass: 'sgi sgi-checkbox-marked color-success', title: 'Completed (100%)' }, + { option: 100, iconCssClass: 'sgi sgi-checkbox-marked text-color-success', title: 'Completed (100%)' }, ] } ], diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example05.ts b/examples/vite-demo-vanilla-bundle/src/examples/example05.ts index 47d1e3a5c..e40456043 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 = 'sgi sgi-load sgi-spin-1s sgi-24px color-alt-success'; + this.loadingClass = 'sgi sgi-load sgi-spin-1s sgi-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.ts b/examples/vite-demo-vanilla-bundle/src/examples/example06.ts index c63d93ecf..d3ed5af93 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example06.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example06.ts @@ -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 diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts index 2d6565784..33226862d 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: 'sgi sgi-chevron-down sgi-rotate-270', diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts index 3880fa114..ff7597bc8 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.ts b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts index 3501d3d94..7d39e28df 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', @@ -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.ts b/examples/vite-demo-vanilla-bundle/src/examples/example13.ts index 9a5702b90..51c8905ab 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example13.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example13.ts @@ -98,13 +98,13 @@ export default class Example13 { const command = args.command; if (command === 'toggle-highlight') { - if (button.cssClass === 'sgi sgi-lightbulb-on color-danger') { + if (button.cssClass === 'sgi sgi-lightbulb-on text-color-danger') { if (gridNo === 1) { delete columns1WithHighlightingById[column.id]; } else { delete columns2WithHighlightingById[column.id]; } - button.cssClass = 'sgi sgi-lightbulb-outline color-warning faded'; + button.cssClass = 'sgi sgi-lightbulb-outline text-color-warning faded'; button.tooltip = 'Highlight negative numbers.'; } else { if (gridNo === 1) { @@ -112,7 +112,7 @@ export default class Example13 { } else { columns2WithHighlightingById[column.id] = true; } - button.cssClass = 'sgi sgi-lightbulb-on color-danger'; + button.cssClass = 'sgi sgi-lightbulb-on text-color-danger'; button.tooltip = 'Remove highlight.'; } this[`sgb${gridNo}`].slickGrid?.invalidate(); @@ -143,7 +143,7 @@ export default class Example13 { header: { buttons: [ { - cssClass: 'sgi sgi-lightbulb-outline color-warning faded', + cssClass: 'sgi sgi-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 88d23d29e..69acbb5d1 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example14.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example14.html @@ -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 43a8a86dc..cf6117f9e 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts @@ -326,7 +326,7 @@ export default class Example14 { { id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70, excludeFromExport: true, - formatter: () => `
`, + formatter: () => `
`, cellMenu: { hideCloseButton: false, commandTitle: 'Commands', @@ -341,7 +341,7 @@ export default class Example14 { 'divider', { command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'sgi sgi-close color-danger', cssClass: 'red', textCssClass: 'text-italic color-danger-light', + iconCssClass: 'sgi sgi-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 = 'sgi sgi-load sgi-spin-1s sgi-24px color-alt-success'; + this.loadingClass = 'sgi sgi-load sgi-spin-1s sgi-24px text-color-alt-success'; } loadData(count: number) { diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example15.ts b/examples/vite-demo-vanilla-bundle/src/examples/example15.ts index 945f5b945..65f85377a 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example15.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example15.ts @@ -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.ts b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts index 067e3b0e1..accad568a 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example16.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts @@ -481,7 +481,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)}
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example18.ts b/examples/vite-demo-vanilla-bundle/src/examples/example18.ts index 5ec58db9f..4a1774c45 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example18.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example18.ts @@ -25,7 +25,7 @@ const priceFormatter: Formatter = (_cell, _row, value, _col, dataContext) => { const direction = dataContext.priceChange >= 0 ? 'up' : 'down'; const fragment = new DocumentFragment(); const spanElm = document.createElement('span'); - spanElm.className = `sgi sgi-arrow-${direction} color-${direction === 'up' ? 'success' : 'danger'}`; + spanElm.className = `sgi sgi-arrow-${direction} text-color-${direction === 'up' ? 'success' : 'danger'}`; fragment.appendChild(spanElm); if (value instanceof HTMLElement) { fragment.appendChild(value); @@ -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: 'sgi sgi-close color-danger', + deleteIconCssClass: 'sgi sgi-close text-color-danger', sortAscIconCssClass: 'sgi sgi-arrow-up', sortDescIconCssClass: 'sgi sgi-arrow-down', }, diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example22.ts b/examples/vite-demo-vanilla-bundle/src/examples/example22.ts index 3c1cddf0d..633f69bb4 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example22.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example22.ts @@ -192,18 +192,18 @@ export default class Example22 { cancelButtonClassName: 'button-style padding-3px', cancelButtonTitle: 'Cancel row', cancelButtonTitleKey: 'RBE_BTN_CANCEL', - iconCancelButtonClassName: 'sgi sgi-undo color-danger', + iconCancelButtonClassName: 'sgi sgi-undo text-color-danger', cancelButtonPrompt: 'Are you sure you want to cancel your changes?', updateButtonClassName: 'button-style padding-3px mr-2', updateButtonTitle: 'Update row', updateButtonTitleKey: 'RBE_BTN_UPDATE', - iconUpdateButtonClassName: 'sgi sgi-check color-success', + iconUpdateButtonClassName: 'sgi sgi-check text-color-success', updateButtonPrompt: 'Save changes?', deleteButtonClassName: 'button-style padding-3px', deleteButtonTitle: 'Delete row', - iconDeleteButtonClassName: 'sgi sgi-trash-can color-danger', + iconDeleteButtonClassName: 'sgi sgi-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 1cffb765e..edae47479 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/icons.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/icons.html @@ -111,7 +111,7 @@

- Icon Colors + Icon & Text Colors

diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss index 322fbe76e..3e232b46f 100644 --- a/examples/vite-demo-vanilla-bundle/src/material-styles.scss +++ b/examples/vite-demo-vanilla-bundle/src/material-styles.scss @@ -87,11 +87,6 @@ } } - - .color-primary { - filter: url("data:image/svg+xml;utf8, #recolor"); - } - .slick-headerrow { input.search-filter.filled, .search-filter.filled input, diff --git a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts index e021606ab..225009e15 100644 --- a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts @@ -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 sgi sgi-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 sgi sgi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts index c0d252862..58126c5e5 100644 --- a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts @@ -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 sgi sgi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); diff --git a/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts b/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts index 3f753bf65..1ecb81855 100644 --- a/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts +++ b/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts @@ -54,7 +54,7 @@ const gridOptionsMock = { enableDraggableGrouping: true, draggableGrouping: { hideToggleAllButton: false, - deleteIconCssClass: 'sgi sgi-close color-danger', + deleteIconCssClass: 'sgi sgi-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: 'sgi sgi-close color-danger' }); + plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-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: 'sgi sgi-close color-danger' }); + plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-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: 'sgi sgi-close color-danger' }); + plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-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: 'sgi sgi-close color-danger' }); + plugin.setAddonOptions({ deleteIconCssClass: 'sgi sgi-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 5bbb6a3fb..49d4fc9b0 100644 --- a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts @@ -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 sgi sgi-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 sgi sgi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); diff --git a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts index 066a5ce63..0faf241de 100644 --- a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts @@ -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 sgi sgi-chevron-right'); expect(subCommand3Elm.textContent).toContain('Command 3'); expect(subCommand5Elm.textContent).toContain('Command 5'); diff --git a/packages/common/src/extensions/slickRowBasedEdit.ts b/packages/common/src/extensions/slickRowBasedEdit.ts index a8829f160..0de31fca3 100644 --- a/packages/common/src/extensions/slickRowBasedEdit.ts +++ b/packages/common/src/extensions/slickRowBasedEdit.ts @@ -439,7 +439,7 @@ export class SlickRowBasedEdit { .appendChild( createDomElement('span', { className: - options.rowBasedEditOptions?.actionButtons?.iconEditButtonClassName || 'sgi sgi-table-edit color-primary', + options.rowBasedEditOptions?.actionButtons?.iconEditButtonClassName || 'sgi sgi-table-edit text-color-primary', }) ); actionFragment @@ -455,7 +455,7 @@ export class SlickRowBasedEdit { .appendChild( createDomElement('span', { className: - options.rowBasedEditOptions?.actionButtons?.iconDeleteButtonClassName || 'sgi sgi-close color-danger', + options.rowBasedEditOptions?.actionButtons?.iconDeleteButtonClassName || 'sgi sgi-close text-color-danger', }) ); actionFragment @@ -471,7 +471,7 @@ export class SlickRowBasedEdit { .appendChild( createDomElement('span', { className: - options.rowBasedEditOptions?.actionButtons?.iconUpdateButtonClassName || 'sgi sgi-check-bold color-success', + options.rowBasedEditOptions?.actionButtons?.iconUpdateButtonClassName || 'sgi sgi-check-bold text-color-success', }) ); actionFragment @@ -487,7 +487,7 @@ export class SlickRowBasedEdit { .appendChild( createDomElement('span', { className: - options.rowBasedEditOptions?.actionButtons?.iconCancelButtonClassName || 'sgi sgi-cancel color-danger', + options.rowBasedEditOptions?.actionButtons?.iconCancelButtonClassName || 'sgi sgi-cancel text-color-danger', }) ); 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 3c032c9c9..c784301e9 100644 --- a/packages/common/src/styles/colors.scss +++ b/packages/common/src/styles/colors.scss @@ -37,61 +37,6 @@ $color-sf-highlight: #0070D2 !default; $color-sf-primary: #006DCC !default; $color-sf-primary-dark: #004487 !default; -// @deprecated - colors using CSS filter -.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); } - -.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); } - // new simple .text-color-primary { color: $color-primary; } .text-color-secondary { color: $color-secondary; } diff --git a/packages/common/src/styles/sass-utilities.scss b/packages/common/src/styles/sass-utilities.scss index f02ecee31..fdd75d194 100644 --- a/packages/common/src/styles/sass-utilities.scss +++ b/packages/common/src/styles/sass-utilities.scss @@ -1,52 +1,5 @@ -@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} { diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.scss b/packages/common/src/styles/slickgrid-theme-salesforce.scss index aeeef77e2..d9df971b2 100644 --- a/packages/common/src/styles/slickgrid-theme-salesforce.scss +++ b/packages/common/src/styles/slickgrid-theme-salesforce.scss @@ -30,7 +30,7 @@ $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/empty-warning-component/src/slick-empty-warning.spec.ts b/packages/empty-warning-component/src/slick-empty-warning.spec.ts index a63000259..e6b5205d6 100644 --- a/packages/empty-warning-component/src/slick-empty-warning.spec.ts +++ b/packages/empty-warning-component/src/slick-empty-warning.spec.ts @@ -342,7 +342,7 @@ describe('Slick-Empty-Warning Component', () => { }); it('should expect the Slick-Empty-Warning to change some options and display a different message when provided as an option', () => { - const mockOptions = { message: ' No Record found.', className: 'custom-class', marginTop: 22, marginLeft: 11 }; + const mockOptions = { message: ' No Record found.', className: 'custom-class', marginTop: 22, marginLeft: 11 }; component = new SlickEmptyWarningComponent(); component.init(gridStub, container); component.showEmptyDataMessage(true, mockOptions); @@ -354,12 +354,12 @@ describe('Slick-Empty-Warning Component', () => { expect(componentElm).toBeTruthy(); expect(componentElm.style.display).toBe('block'); expect(componentElm.classList.contains('custom-class')).toBeTruthy(); - expect(componentElm.innerHTML).toBe(' No Record found.'); + expect(componentElm.innerHTML).toBe(' No Record found.'); }); it('should expect the Slick-Empty-Warning to change some options and display a different message is provided as a DocumentFragment', () => { const emptyWarningElm = new DocumentFragment(); - emptyWarningElm.appendChild(createDomElement('span', { className: 'sgi sgi-alert color-warning' })); + emptyWarningElm.appendChild(createDomElement('span', { className: 'sgi sgi-alert text-color-warning' })); emptyWarningElm.appendChild(document.createTextNode(' No Record found.')); const mockOptions = { message: emptyWarningElm, className: 'custom-class', marginTop: 22, marginLeft: 11 }; @@ -374,12 +374,12 @@ describe('Slick-Empty-Warning Component', () => { expect(componentElm).toBeTruthy(); expect(componentElm.style.display).toBe('block'); expect(componentElm.classList.contains('custom-class')).toBeTruthy(); - expect(componentElm.innerHTML).toBe(' No Record found.'); + expect(componentElm.innerHTML).toBe(' No Record found.'); }); it('should expect the Slick-Empty-Warning to change some options and display a different message is provided as an HTMLElement', () => { const emptyWarningElm = createDomElement('div', { className: 'container' }); - emptyWarningElm.appendChild(createDomElement('span', { className: 'sgi sgi-alert color-warning' })); + emptyWarningElm.appendChild(createDomElement('span', { className: 'sgi sgi-alert text-color-warning' })); emptyWarningElm.appendChild(document.createTextNode(' No Record found.')); const mockOptions = { message: emptyWarningElm, className: 'custom-class', marginTop: 22, marginLeft: 11 }; @@ -394,7 +394,7 @@ describe('Slick-Empty-Warning Component', () => { expect(componentElm).toBeTruthy(); expect(componentElm.style.display).toBe('block'); expect(componentElm.classList.contains('custom-class')).toBeTruthy(); - expect(componentElm.innerHTML).toBe('
No Record found.
'); + expect(componentElm.innerHTML).toBe('
No Record found.
'); }); it('should expect the Slick-Empty-Warning message to be translated to French when providing a Translater Service and "messageKey" property', () => { diff --git a/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts b/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts index 9582d6b2b..d1a61793f 100644 --- a/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts +++ b/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts @@ -3,7 +3,7 @@ import { EventNamingStyle } from '@slickgrid-universal/event-pub-sub'; // create empty warning message as Document Fragment to be CSP safe const emptyWarningElm = document.createElement('div'); -emptyWarningElm.appendChild(createDomElement('span', { className: 'sgi sgi-alert color-warning' })); +emptyWarningElm.appendChild(createDomElement('span', { className: 'sgi sgi-alert text-color-warning' })); emptyWarningElm.appendChild(document.createTextNode(' No data to display.')); /** Global Grid Options Defaults for Salesforce */ diff --git a/test/cypress/e2e/example13.cy.ts b/test/cypress/e2e/example13.cy.ts index 620aeb4b2..0f25b8c84 100644 --- a/test/cypress/e2e/example13.cy.ts +++ b/test/cypress/e2e/example13.cy.ts @@ -27,12 +27,12 @@ describe('Example 13 - Header Button Plugin', () => { cy.get('.grid13-1 .slick-header-columns') .children('.slick-header-column:nth(2)') - .find('.slick-header-button.sgi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.sgi-lightbulb-outline.text-color-warning.faded') .click(); cy.get('.grid13-1 .slick-header-columns') .children('.slick-header-column:nth(2)') - .find('.slick-header-button.sgi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.sgi-lightbulb-outline.text-color-warning.faded') .should('not.exist'); // shouldn't be faded anymore cy.window().then((win) => { @@ -83,13 +83,13 @@ describe('Example 13 - Header Button Plugin', () => { cy.get('.grid13-1 .slick-header-columns') .children('.slick-header-column:nth(9)') - .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.text-color-warning.faded') .should('exist') .click(); cy.get('.grid13-1 .slick-header-columns') .children('.slick-header-column:nth(9)') - .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.text-color-warning.faded') .should('exist'); // should still be faded after previous click cy.get('.grid13-1 .slick-row') @@ -227,12 +227,12 @@ describe('Example 13 - Header Button Plugin', () => { cy.get('.grid13-2 .slick-header-columns') .children('.slick-header-column:nth(2)') - .find('.slick-header-button.sgi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.sgi-lightbulb-outline.text-color-warning.faded') .click({ force: true }); cy.get('.grid13-2 .slick-header-columns') .children('.slick-header-column:nth(2)') - .find('.slick-header-button.sgi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.sgi-lightbulb-outline.text-color-warning.faded') .should('not.exist'); // shouldn't be faded anymore cy.window().then((win) => { @@ -283,13 +283,13 @@ describe('Example 13 - Header Button Plugin', () => { cy.get('.grid13-2 .slick-header-columns') .children('.slick-header-column:nth(9)') - .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.text-color-warning.faded') .should('exist') .click({ force: true }); cy.get('.grid13-2 .slick-header-columns') .children('.slick-header-column:nth(9)') - .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.color-warning.faded') + .find('.slick-header-button.slick-header-button-disabled.sgi-lightbulb-outline.text-color-warning.faded') .should('exist'); // should still be faded after previous click cy.get('.grid13-2 .slick-row') From 2c6537398f42e5bbdca1d3629feda574420d301e Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 25 Apr 2024 19:40:12 -0400 Subject: [PATCH 16/25] chore: remove any jQueryUI `.ui-` CSS classes and fix some more stylings --- .../Autocomplete-Editor-(Kraaden-lib).md | 5 - .../src/examples/example06.html | 2 +- .../src/examples/example08.html | 4 +- .../src/examples/example16.ts | 2 +- .../src/examples/example18.ts | 2 +- .../src/material-styles.scss | 2 + packages/common/src/core/slickGrid.ts | 10 +- .../__tests__/slickCellMenu.plugin.spec.ts | 2 +- .../__tests__/slickContextMenu.spec.ts | 2 +- .../__tests__/slickGridMenu.spec.ts | 2 +- .../__tests__/slickHeaderMenu.spec.ts | 2 +- packages/common/src/styles/_variables.scss | 2 +- packages/common/src/styles/colors.scss | 162 +++++++++--------- .../common/src/styles/slick-bootstrap.scss | 12 +- .../common/src/styles/slick-component.scss | 2 +- packages/common/src/styles/slick-grid.scss | 6 +- 16 files changed, 108 insertions(+), 111 deletions(-) diff --git a/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md b/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md index 8443da652..10477b688 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/examples/vite-demo-vanilla-bundle/src/examples/example06.html b/examples/vite-demo-vanilla-bundle/src/examples/example06.html index 18322954f..b10a3c2c8 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example06.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example06.html @@ -63,7 +63,7 @@

- +

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example08.html b/examples/vite-demo-vanilla-bundle/src/examples/example08.html index 182bec8f2..4f904b49a 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example08.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example08.html @@ -42,7 +42,7 @@

Grid 1 (with Header Grouping & Colspan)

- +

@@ -50,7 +50,7 @@

Grid 1 (with Header Grouping & Colspan) +``` + +### 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` utils removed +When Dart-SASS released their version 1.33, it caused a lot of console warnings in projects that were using `/` (for math division) instead of their new `math.div` function. To avoid seeing all these warnings, I had created a temporary polyfill (that piece of code was actually copied from Bootstrap project). This change happened 3 years ago, so I'm assuming that most users have already upgraded their SASS and fix these warnings and I think it's time to remove this polyfill since it was always meant to be a temp patch. If you see these warnings coming back, you can use the SASS option `--quiet-upstream`. + +For reference, below is an example of these old Math warnings when we were compiling SASS + +```sh +Recommendation: math.div($m, $columns) +More info and automated migrator: https://sass-lang.com/d/slash-div +╷ +94 │ margin-right: $m / $columns * 100% +│ ^^^^^^^^^^^^^^^^^^ +``` + +##### CSS classes +There were a few `.ui-state-default` and other jQueryUI CSS classes leftovers, 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 -this.columnDefinitions = { - id: 'finish', name: 'Finish', field: 'finish', - editor: { - model: Editors.date, - editorOptions: { -- minDate: 'today', -+ range: { min: 'today' }, +- 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 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. - -### 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. +> **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. -##### Grid Options From 60bc73a086114d4089b9916389db138daa5b7511 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 26 Apr 2024 16:15:20 -0400 Subject: [PATCH 23/25] docs: improve migration doc --- docs/migrations/migration-to-5.x.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/migrations/migration-to-5.x.md b/docs/migrations/migration-to-5.x.md index fb54855ed..a6c45c5c1 100644 --- a/docs/migrations/migration-to-5.x.md +++ b/docs/migrations/migration-to-5.x.md @@ -73,8 +73,8 @@ Since the SVG icons are now pure CSS, we can now colorize them the same way that ##### 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` utils removed -When Dart-SASS released their version 1.33, it caused a lot of console warnings 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`. +##### SASS `math` polyfills are removed +When Dart-SASS released their version 1.33, it caused a lot of console warnings (and lot of unhappy users) in projects that were using `/` (for math division) instead of their new `math.div` function. To avoid seeing all these warnings, I had created a temporary polyfill (that piece of code was actually copied from Bootstrap project). This change happened 3 years ago, so I'm assuming that most users have already upgraded their SASS and fix these warnings and I think it's time to remove this polyfill since it was always meant to be a temp patch. If you see these warnings coming back, you can use the SASS option `--quiet-upstream`. For reference, below is an example of these old Math warnings when we were compiling SASS @@ -86,8 +86,8 @@ More info and automated migrator: https://sass-lang.com/d/slash-div │ ^^^^^^^^^^^^^^^^^^ ``` -##### CSS classes -There were a few `.ui-state-default` and other jQueryUI CSS classes leftovers, 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-` +##### 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 { From 4798b40c44f5b3da7c525081171d577a667dbcb6 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 26 Apr 2024 16:33:41 -0400 Subject: [PATCH 24/25] docs: improve migration doc --- docs/migrations/migration-to-5.x.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/migrations/migration-to-5.x.md b/docs/migrations/migration-to-5.x.md index a6c45c5c1..7bc34a2e3 100644 --- a/docs/migrations/migration-to-5.x.md +++ b/docs/migrations/migration-to-5.x.md @@ -11,13 +11,15 @@ Another noticeable UI change is the migration from [Flatpickr](https://flatpickr - 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 found, expect even more decreate with gzip) + - 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 but since we're no longer using jQuery the project is in fact much smaller than it was 2 years ago. This is really nice to see, that is even considering the fact that we keep adding new features to the project and the project size managed to decrease yet again :) + #### Major Changes - Quick Summary - minimum requirements bump - Node 18 is now required From 1473903d4eaed87404ccea46140438dd87225b72 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 26 Apr 2024 18:16:35 -0400 Subject: [PATCH 25/25] chore: revert `.sgi` and keep using `.mdi` same as before - the idea was to renamed mdi to `.sgi` for SlickGrid Icons but the change would bring a ton of change on the user side, so let's keep using `.mdi` and table this aside for maybe another future major version (or not) --- docs/column-functionalities/Cell-Menu.md | 18 +- docs/column-functionalities/Formatters.md | 6 +- .../Autocomplete-Editor-(Kraaden-lib).md | 16 +- ...elect-Dropdown-Editor-(single,multiple).md | 2 +- .../filters/Select-Filter.md | 2 +- docs/grid-functionalities/Context-Menu.md | 26 +- docs/grid-functionalities/Export-to-Excel.md | 6 +- .../Export-to-Text-File.md | 4 +- docs/grid-functionalities/Grid-Menu.md | 20 +- docs/grid-functionalities/Tree-Data-Grid.md | 4 +- .../frozen-columns-rows.md | 2 +- .../header-menu-header-buttons.md | 6 +- docs/migrations/migration-to-5.x.md | 48 +- docs/styling/dark-mode.md | 2 +- docs/styling/styling.md | 96 ++-- .../vite-demo-vanilla-bundle/src/app.html | 4 +- .../vite-demo-vanilla-bundle/src/bulma.scss | 4 +- .../src/examples/example01.html | 8 +- .../src/examples/example01.ts | 16 +- .../src/examples/example02.html | 10 +- .../src/examples/example02.ts | 2 +- .../src/examples/example03.html | 12 +- .../src/examples/example03.ts | 18 +- .../src/examples/example04.html | 10 +- .../src/examples/example04.ts | 44 +- .../src/examples/example05.html | 18 +- .../src/examples/example05.ts | 6 +- .../src/examples/example06.html | 16 +- .../src/examples/example06.scss | 12 +- .../src/examples/example06.ts | 14 +- .../src/examples/example07.html | 22 +- .../src/examples/example07.ts | 40 +- .../src/examples/example08.html | 8 +- .../src/examples/example09.html | 10 +- .../src/examples/example10.html | 10 +- .../src/examples/example11.html | 14 +- .../src/examples/example11.ts | 140 +++--- .../src/examples/example12.html | 22 +- .../src/examples/example12.ts | 124 +++--- .../src/examples/example13.html | 2 +- .../src/examples/example13.ts | 18 +- .../src/examples/example14.html | 12 +- .../src/examples/example14.ts | 148 +++---- .../src/examples/example15.html | 10 +- .../src/examples/example15.ts | 2 +- .../src/examples/example16.html | 4 +- .../src/examples/example16.ts | 12 +- .../src/examples/example17.html | 2 +- .../src/examples/example18.html | 6 +- .../src/examples/example18.ts | 12 +- .../src/examples/example19.html | 6 +- .../src/examples/example20.html | 2 +- .../src/examples/example21.html | 4 +- .../src/examples/example21.ts | 2 +- .../src/examples/example22.html | 2 +- .../src/examples/example22.ts | 8 +- .../src/examples/icons.html | 156 +++---- .../src/examples/icons.ts | 418 +++++++++--------- .../src/material-styles.scss | 4 +- .../editors/__tests__/selectEditor.spec.ts | 12 +- .../__tests__/singleSelectEditor.spec.ts | 10 +- .../__tests__/slickCellMenu.plugin.spec.ts | 24 +- .../slickCheckboxSelectColumn.spec.ts | 6 +- .../__tests__/slickContextMenu.spec.ts | 22 +- .../__tests__/slickDraggableGrouping.spec.ts | 38 +- .../__tests__/slickGridMenu.spec.ts | 42 +- .../__tests__/slickHeaderButtons.spec.ts | 48 +- .../__tests__/slickHeaderMenu.spec.ts | 98 ++-- .../src/extensions/extensionCommonUtils.ts | 10 +- .../extensions/slickCheckboxSelectColumn.ts | 12 +- .../common/src/extensions/slickContextMenu.ts | 14 +- .../common/src/extensions/slickGridMenu.ts | 22 +- .../common/src/extensions/slickHeaderMenu.ts | 14 +- .../src/extensions/slickRowBasedEdit.ts | 8 +- .../filters/__tests__/selectFilter.spec.ts | 8 +- .../__tests__/checkmarkFormatter.spec.ts | 16 +- .../checkmarkMaterialFormatter.spec.ts | 16 +- .../__tests__/iconBooleanFormatter.spec.ts | 42 +- .../__tests__/iconFormatter.spec.ts | 8 +- .../__tests__/treeFormatter.spec.ts | 4 +- .../src/formatters/checkmarkFormatter.ts | 2 +- .../formatters/checkmarkMaterialFormatter.ts | 4 +- .../common/src/formatters/formatters.index.ts | 2 +- .../src/formatters/iconBooleanFormatter.ts | 2 +- .../common/src/formatters/iconFormatter.ts | 4 +- packages/common/src/global-grid-options.ts | 58 +-- .../services/__tests__/filter.service.spec.ts | 4 +- .../services/__tests__/sort.service.spec.ts | 2 +- packages/common/src/styles/slick-editors.scss | 2 +- packages/common/src/styles/slick-plugins.scss | 12 +- .../src/styles/slickgrid-icons-svg-utils.scss | 32 +- .../common/src/styles/slickgrid-icons.scss | 416 ++++++++--------- .../slick-composite-editor.component.spec.ts | 6 +- .../src/__tests__/slickCustomTooltip.spec.ts | 12 +- .../src/slick-empty-warning.spec.ts | 12 +- .../src/salesforce-global-grid-options.ts | 10 +- test/cypress/e2e/example03.cy.ts | 4 +- test/cypress/e2e/example07.cy.ts | 12 +- test/cypress/e2e/example11.cy.ts | 8 +- test/cypress/e2e/example12.cy.ts | 42 +- test/cypress/e2e/example13.cy.ts | 20 +- test/cypress/e2e/example16.cy.ts | 4 +- 102 files changed, 1400 insertions(+), 1416 deletions(-) diff --git a/docs/column-functionalities/Cell-Menu.md b/docs/column-functionalities/Cell-Menu.md index 9bf0a523e..4afffbfd1 100644 --- a/docs/column-functionalities/Cell-Menu.md +++ b/docs/column-functionalities/Cell-Menu.md @@ -38,7 +38,7 @@ this.columnDefinitions = [ console.log(args.dataContext, args.column); // action callback.. do something } }, - { command: 'help', title: 'HELP', iconCssClass: 'sgi sgi-help-circle', positionOrder: 62 }, + { command: 'help', title: 'HELP', iconCssClass: 'mdi mdi-help-circle', positionOrder: 62 }, // you can add sub-menus by adding nested `commandItems` { // we can also have multiple nested sub-menus @@ -74,8 +74,8 @@ this.columnDefinitions = [ cellMenu: { optionTitle: 'Change Effort Driven Flag', // optional, add title optionItems: [ - { option: true, title: 'True', iconCssClass: 'sgi sgi-check-box-outline' }, - { option: false, title: 'False', iconCssClass: 'sgi sgi-checkbox-blank-outline' }, + { option: true, title: 'True', iconCssClass: 'mdi mdi-check-box-outline' }, + { option: false, title: 'False', iconCssClass: 'mdi mdi-checkbox-blank-outline' }, { divider: true, command: '', positionOrder: 60 }, ], // subscribe to Context Menu onOptionSelected event (or use the "action" callback on each option) @@ -173,9 +173,9 @@ this.columnDefinitions = [{ const dataContext = args?.dataContext; return !dataContext.completed; }, - { option: 1, iconCssClass: 'sgi sgi-star-outline yellow', title: 'Low' }, - { option: 2, iconCssClass: 'sgi sgi-star orange', title: 'Medium' }, - { option: 3, iconCssClass: 'sgi sgi-star red', title: 'High' }, + { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' }, + { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' }, + { option: 3, iconCssClass: 'mdi mdi-star red', title: 'High' }, }] } }]; @@ -189,9 +189,9 @@ this.columnDefinitions = [ cellMenu: { optionTitleKey: 'COMMANDS', // optionally pass a title to show over the Options optionItems: [ - { option: 1, titleKey: 'LOW', iconCssClass: 'sgi sgi-star-outline yellow' }, - { option: 2, titleKey: 'MEDIUM', iconCssClass: 'sgi sgi-star orange' }, - { option: 3, titleKey: 'HIGH', iconCssClass: 'sgi sgi-star red' }, + { option: 1, titleKey: 'LOW', iconCssClass: 'mdi mdi-star-outline yellow' }, + { option: 2, titleKey: 'MEDIUM', iconCssClass: 'mdi mdi-star orange' }, + { option: 3, titleKey: 'HIGH', iconCssClass: 'mdi mdi-star red' }, ] } } diff --git a/docs/column-functionalities/Formatters.md b/docs/column-functionalities/Formatters.md index c626b21b6..aa16d44e4 100644 --- a/docs/column-functionalities/Formatters.md +++ b/docs/column-functionalities/Formatters.md @@ -195,7 +195,7 @@ For example, we will use `Font-Awesome` with a `boolean` as input data, and disp ```ts // create a custom Formatter with the Formatter type const myCustomCheckboxFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => - value ? `` : ''; + value ? `` : ''; ``` #### Example with `FormatterResultObject` instead of a string @@ -203,7 +203,7 @@ Using this object return type will provide the user the same look and feel, it w ```ts // create a custom Formatter and returning a string and/or an object of type FormatterResultObject const myCustomCheckboxFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid?: any) => - value ? { addClasses: 'sgi sgi-fire', text: '', tooltip: 'burning fire' } : ''; + value ? { addClasses: 'mdi mdi-fire', text: '', tooltip: 'burning fire' } : ''; ``` ### Example of Custom Formatter with Native DOM Element @@ -219,7 +219,7 @@ Demo ```ts export const iconFormatter: Formatter = (_row, _cell, _value, columnDef) => { const iconElm = document.createElement('span'); - iconElm.className = 'sgi sgi-check'; + iconElm.className = 'mdi mdi-check'; return iconElm; }; diff --git a/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md b/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md index 10477b688..7af780e4a 100644 --- a/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md +++ b/docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md @@ -84,8 +84,8 @@ this.columnDefinitions = [ // collectionAsync: this.http.get(URL_COUNTRIES_COLLECTION), collection: [ { value: '', label: '' }, - { value: true, label: 'True', labelPrefix: ` ` }, - { value: false, label: 'False', labelPrefix: ` ` } + { value: true, label: 'True', labelPrefix: ` ` }, + { value: false, label: 'False', labelPrefix: ` ` } ], } } @@ -223,11 +223,11 @@ export class GridBasicComponent { layout: 'twoRows', templateCallback: (item: any) => `
- +
- + ${item.itemName}
@@ -285,11 +285,11 @@ export class GridBasicComponent { layout: 'twoRows', templateCallback: (item: any) => `
- +
- + ${item.itemName}
@@ -306,11 +306,11 @@ export class GridBasicComponent { return `
- +
- + ${item.itemName} ${formatNumber(item.listPrice, 2, 2, false, '$')} diff --git a/docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md b/docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md index c749c9aff..54bb00a4c 100644 --- a/docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md +++ b/docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md @@ -163,7 +163,7 @@ this.columnDefinitions = [ editor: { // display checkmark icon when True enableRenderHtml: true, - collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], + collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], model: Editors.singleSelect } } diff --git a/docs/column-functionalities/filters/Select-Filter.md b/docs/column-functionalities/filters/Select-Filter.md index 6e9d2c257..a59ff38f9 100644 --- a/docs/column-functionalities/filters/Select-Filter.md +++ b/docs/column-functionalities/filters/Select-Filter.md @@ -416,7 +416,7 @@ this.columnDefinitions = [ filter: { // display checkmark icon when True enableRenderHtml: true, - collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], + collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], model: Filters.singleSelect } } diff --git a/docs/grid-functionalities/Context-Menu.md b/docs/grid-functionalities/Context-Menu.md index acf6810f6..5e94673e9 100644 --- a/docs/grid-functionalities/Context-Menu.md +++ b/docs/grid-functionalities/Context-Menu.md @@ -39,7 +39,7 @@ this.gridOptions = { console.log(args.dataContext, args.column); // action callback.. do something } }, - { command: 'help', title: 'HELP', iconCssClass: 'sgi sgi-help-circle', positionOrder: 62 }, + { command: 'help', title: 'HELP', iconCssClass: 'mdi mdi-help-circle', positionOrder: 62 }, // you can add sub-menus by adding nested `commandItems` { // we can also have multiple nested sub-menus @@ -68,8 +68,8 @@ this.gridOptions = { hideCloseButton: false, optionTitle: 'Change Effort Driven Flag', // optional, add title optionItems: [ - { option: true, title: 'True', iconCssClass: 'sgi sgi-check-box-outline' }, - { option: false, title: 'False', iconCssClass: 'sgi sgi-checkbox-blank-outline' }, + { option: true, title: 'True', iconCssClass: 'mdi mdi-check-box-outline' }, + { option: false, title: 'False', iconCssClass: 'mdi mdi-checkbox-blank-outline' }, { divider: true, command: '', positionOrder: 60 }, ], // subscribe to Context Menu onOptionSelected event (or use the "action" callback on each option) @@ -148,9 +148,9 @@ contextMenu: { const dataContext = args?.dataContext; return !dataContext.completed; }, - { option: 1, iconCssClass: 'sgi sgi-star-outline yellow', title: 'Low' }, - { option: 2, iconCssClass: 'sgi sgi-star orange', title: 'Medium' }, - { option: 3, iconCssClass: 'sgi sgi-star red', title: 'High' }, + { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' }, + { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' }, + { option: 3, iconCssClass: 'mdi mdi-star red', title: 'High' }, }] } ``` @@ -161,9 +161,9 @@ It works exactly like the rest of the library when `enableTranslate` is set, all contextMenu: { optionTitleKey: 'COMMANDS', // optionally pass a title to show over the Options optionItems: [{ - { option: 1, titleKey: 'LOW', iconCssClass: 'sgi sgi-star-outline yellow' }, - { option: 2, titleKey: 'MEDIUM', iconCssClass: 'sgi sgi-star orange' }, - { option: 3, titleKey: 'HIGH', iconCssClass: 'sgi sgi-star red' }, + { option: 1, titleKey: 'LOW', iconCssClass: 'mdi mdi-star-outline yellow' }, + { option: 2, titleKey: 'MEDIUM', iconCssClass: 'mdi mdi-star orange' }, + { option: 3, titleKey: 'HIGH', iconCssClass: 'mdi mdi-star red' }, }] } ``` @@ -197,10 +197,10 @@ contextMenu: { hideExportTextDelimitedCommand: true, hideMenuOnScroll: true, hideOptionSection: false, - iconCopyCellValueCommand: 'sgi sgi-content-copy', - iconExportCsvCommand: 'sgi sgi-download', - iconExportExcelCommand: 'sgi sgi-file-excel-outline text-success', - iconExportTextDelimitedCommand: 'sgi sgi-download', + iconCopyCellValueCommand: 'mdi mdi-content-copy', + iconExportCsvCommand: 'mdi mdi-download', + iconExportExcelCommand: 'mdi mdi-file-excel-outline text-success', + iconExportTextDelimitedCommand: 'mdi mdi-download', width: 200, }, ``` diff --git a/docs/grid-functionalities/Export-to-Excel.md b/docs/grid-functionalities/Export-to-Excel.md index 4035ce797..e6bbc0bdb 100644 --- a/docs/grid-functionalities/Export-to-Excel.md +++ b/docs/grid-functionalities/Export-to-Excel.md @@ -58,7 +58,7 @@ initializeGrid() { - So basically, if `exportWithFormatter` is set to True in the `excelExportOptions` of the Grid Options, but is set to False in the Column Definition, then the result will be False and will not evaluate it's Formatter. - `exportCustomFormatter` will let you choose a different Formatter when exporting - For example, you might have `formatter: Formatters.checkmark` but you want to see a boolean translated value, in this case you would define an extra property of `customFormatter: Formatters.translateBoolean`. -- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `True` will export `True` without any HTML (data is sanitized). +- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `True` will export `True` without any HTML (data is sanitized). - this flag can be used in the Grid Options (all columns) or in a Column Definition (per column). #### Grid Options @@ -73,7 +73,7 @@ Inside the column definition there are couple of flags you can set in `excelExpo - `sheetName` allows you to change the Excel Sheet Name (defaults to "Sheet1") - `groupingColumnHeaderTitle` The column header title (at A0 in Excel) of the Group by. If nothing is provided it will use "Group By" - `groupingAggregatorRowText` The default text to display in 1st column of the File Export, which will identify that the current row is a Grouping Aggregator -- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `True` will export `True` without any HTML (data is sanitized). +- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `True` will export `True` without any HTML (data is sanitized). - this flag can be used in the Grid Options (all columns) or in a Column Definition (per column). - `customExcelHeader` is a callback method that can be used to provide a custom Header Title to your Excel File @@ -222,7 +222,7 @@ If you have lots of data, you might want to show a spinner telling the user that ##### View ```html - +
diff --git a/docs/grid-functionalities/Export-to-Text-File.md b/docs/grid-functionalities/Export-to-Text-File.md index b78b70553..b32b4e651 100644 --- a/docs/grid-functionalities/Export-to-Text-File.md +++ b/docs/grid-functionalities/Export-to-Text-File.md @@ -52,7 +52,7 @@ Inside the column definition there are couple of flags you can set and also some - `exportCustomFormatter` will let you choose a different Formatter when exporting - For example, you might have `formatter: Formatters.checkmark` but you want to see a boolean translated value, in this case you would define an extra property of `exportCustomFormatter: Formatters.translateBoolean`. - you can set `exportCsvForceToKeepAsString` flag, this one will wrap the cell value into double quotes and add an equal sign in the front, this is especially useful on a column that could be turned into an exponential number by Excel. For example, we could have "1E06" and without this flag will become (1.0E06) in Excel, unless we enable the flag which will become `="1E06"` which will keep it as a string, also note that it will be shown as "1E06" but if you click on the cell value, you will see `="1E06"` -- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `True` will export `True` without any HTML (data is sanitized). +- set `sanitizeDataExport` to remove any HTML/Script code from being export. For example if your value is `True` will export `True` without any HTML (data is sanitized). - this flag can be used in the Grid Options (all columns) or in a Column Definition (per column). #### Behaviors @@ -140,7 +140,7 @@ If you have lots of data, you might want to show a spinner telling the user that ##### View ```html - +
diff --git a/docs/grid-functionalities/Grid-Menu.md b/docs/grid-functionalities/Grid-Menu.md index 3e4466213..fce112f7e 100644 --- a/docs/grid-functionalities/Grid-Menu.md +++ b/docs/grid-functionalities/Grid-Menu.md @@ -29,18 +29,18 @@ this.gridOptions = { gridMenu: { commandTitle: 'Custom Commands', columnTitle: 'Columns', - iconCssClass: 'sgi sgi-dots-vertical', + iconCssClass: 'mdi mdi-dots-vertical', menuWidth: 17, resizeOnShowHeaderRow: true, commandItems: [ { - iconCssClass: 'sgi sgi-filter-remove-outline', + iconCssClass: 'mdi mdi-filter-remove-outline', title: 'Clear All Filters', disabled: false, command: 'clear-filter' }, { - iconCssClass: 'sgi-flip-vertical', + iconCssClass: 'mdi-flip-vertical', title: 'Toggle Filter Row', disabled: false, command: 'toggle-filter' @@ -85,7 +85,7 @@ gridMenu: { // commandItems: [ // { command: 'help', title: 'Help', positionOrder: 70, action: (e, args) => console.log(args) }, // { command: '', divider: true, positionOrder: 72 }, - // { command: 'hello', title: 'Hello', positionOrder: 69, action: (e, args) => alert('Hello World'), cssClass: 'red', tooltip: 'Hello World', iconCssClass: 'sgi sgi-close' }, + // { command: 'hello', title: 'Hello', positionOrder: 69, action: (e, args) => alert('Hello World'), cssClass: 'red', tooltip: 'Hello World', iconCssClass: 'mdi mdi-close' }, // ], // menuUsabilityOverride: () => false, onBeforeMenuShow: () => { @@ -110,12 +110,12 @@ You can change any of the default command icon(s) by changing the `icon[X-comman this.gridOptions = { enableGridMenu: true, gridMenu: { - iconClearAllFiltersCommand: 'sgi sgi-filter-remove-outline' - iconClearAllSortingCommand: 'sgi sgi-sort-variant-off', - iconExportCsvCommand: 'sgi sgi-download', - iconExportTextDelimitedCommand: 'sgi sgi-download', - iconRefreshDatasetCommand: 'sgi sgi-sync', - iconToggleFilterCommand: 'sgi-flip-vertical', + iconClearAllFiltersCommand: 'mdi mdi-filter-remove-outline' + iconClearAllSortingCommand: 'mdi mdi-sort-variant-off', + iconExportCsvCommand: 'mdi mdi-download', + iconExportTextDelimitedCommand: 'mdi mdi-download', + iconRefreshDatasetCommand: 'mdi mdi-sync', + iconToggleFilterCommand: 'mdi-flip-vertical', }, }; ``` diff --git a/docs/grid-functionalities/Tree-Data-Grid.md b/docs/grid-functionalities/Tree-Data-Grid.md index de7c86d3e..34afee089 100644 --- a/docs/grid-functionalities/Tree-Data-Grid.md +++ b/docs/grid-functionalities/Tree-Data-Grid.md @@ -149,7 +149,7 @@ this.gridOptions = { titleFormatter: (_row, _cell, value, _def, dataContext) => { let prefix = ''; if (dataContext.treeLevel > 0) { - prefix = ``; + prefix = ``; } return `${prefix}${value}(parentId: ${dataContext.parentId})`; }, @@ -179,7 +179,7 @@ treeFormatter: Formatter = (row, cell, value, columnDef, dataContext, grid) => { const spacer = ``; if (data[idx + 1] && data[idx + 1][treeLevelPropName] > data[idx][treeLevelPropName]) { - const folderPrefix = ``; + const folderPrefix = ``; if (dataContext.__collapsed) { return `${spacer} ${folderPrefix} ${prefix} ${value}`; } else { diff --git a/docs/grid-functionalities/frozen-columns-rows.md b/docs/grid-functionalities/frozen-columns-rows.md index c9284b77b..f3aba1c33 100644 --- a/docs/grid-functionalities/frozen-columns-rows.md +++ b/docs/grid-functionalities/frozen-columns-rows.md @@ -81,7 +81,7 @@ You can change the number of pinned columns/rows and even the pinning of columns : ${ isFrozenBottom ? 'Bottom' : 'Top' } diff --git a/docs/grid-functionalities/header-menu-header-buttons.md b/docs/grid-functionalities/header-menu-header-buttons.md index ab6bf80bb..97d6dfe64 100644 --- a/docs/grid-functionalities/header-menu-header-buttons.md +++ b/docs/grid-functionalities/header-menu-header-buttons.md @@ -64,9 +64,9 @@ You can change any of the default command icon(s) by changing the `icon[X-comman this.gridOptions = { enableHeaderMenu: true, headerMenu: { - iconColumnHideCommand: 'sgi sgi-close' - iconSortAscCommand: 'sgi sgi-sort-ascending' - iconSortDescCommand: 'sgi sgi-sort-descending', + iconColumnHideCommand: 'mdi mdi-close' + iconSortAscCommand: 'mdi mdi-sort-ascending' + iconSortDescCommand: 'mdi mdi-sort-descending', }, }; ``` diff --git a/docs/migrations/migration-to-5.x.md b/docs/migrations/migration-to-5.x.md index 7bc34a2e3..24f172227 100644 --- a/docs/migrations/migration-to-5.x.md +++ b/docs/migrations/migration-to-5.x.md @@ -1,5 +1,5 @@ ## Version 5 - Better Dark Mode with Pure CSS SVG icons -This new release brings a lot of changes oriented towards better UI/UX, our SVG icons are now pure CSS and can be colorized like any other text via the `color` CSS property (which helps a lot for the Dark Mode Theme). However this change come with an important change to the user (you), that is if you were using any of the `.mdi` SVG icons, these icons were renamed to `.sgi` (SlickGrid Icons) because of how the SVG are created which is entirely different compare to previous `.mdi` +This new release brings a lot of changes oriented towards better UI/UX, our SVG icons are now pure CSS and can be colorized like any other text via the `color` CSS property (which helps a lot for the Dark Mode Theme). Another noticeable UI change is the migration from [Flatpickr](https://flatpickr.js.org/) to [Vanilla-Calendar-Picker](https://github.com/ghiscoding/vanilla-calendar-picker) (which is in fact a fork of [Vanilla-Calendar-Pro](https://vanilla-calendar.pro/) and maybe one day we'll drop the fork if possible), there are multiple reasons to migrate our date picker to another library: - Flatpickr cons: @@ -18,7 +18,7 @@ Another noticeable UI change is the migration from [Flatpickr](https://flatpickr - some settings were missing, like the `'today'` shortcut which is why I forked the project - I did open a few PRs on the main project, so the hope is to drop the fork in the future while being a totally transparent change to the user (you) -Similar to previous releases, I managed to decrease the project build size even more (about 5%). At this point, the project has a similar size to what it was in v2.x that is when we were using jQuery/jQueryUI but since we're no longer using jQuery the project is in fact much smaller than it was 2 years ago. This is really nice to see, that is even considering the fact that we keep adding new features to the project and the project size managed to decrease yet again :) +Similar to previous releases, I managed to decrease the project build size even more (about 5%). At this point, the project has a similar size to what it was in v2.x that is when we were using jQuery/jQueryUI separately. However, since we're no longer using jQuery in the project, our project build size is in fact much smaller than it was 2 years ago. This is really nice to see especially since we keep adding features (like Dark Mode and others), we still size managed to decrease the project size yet again :) #### Major Changes - Quick Summary - minimum requirements bump @@ -29,35 +29,11 @@ Similar to previous releases, I managed to decrease the project build size even --- -**NOTE:** if you come from an earlier version, please make sure to follow each migration in their respected order (review other migration guides) +**NOTE:** if you come from an earlier version, please make sure to follow each migrations in their respected order (review other migration guides) ## Changes -### Styling -#### `.mdi` SVG icons were renamed to `.sgi` -The previous `.mdi` Material Design Icons were renamed to `.sgi` SlickGrid Icons mostly because the icons are now pure CSS and the way we create the icons is totally different in comparison to the `.mdi` icons. The `.sgi` icons can now be colorized like any other text via the `color` CSS property but that was not possible with the previous `.mdi` icons. - - -We recommend to do a search and replace in your editor (below is 1 of **many** changes you will have to do) -```diff -this.columnDefinitions = { - id: 'action', name: 'Action', field: 'action', - cellMenu: { - hideCloseButton: false, - commandTitle: 'Commands', - commandItems: [ - { - command: 'edit', - title: 'Edit Row', -- iconCssClass: 'mdi mdi-square-edit-outline', -+ iconCssClass: 'sgi sgi-square-edit-outline', - positionOrder: 66, - action: () => this.openCompositeModal('edit'), - }, - ] - } -} -``` +### Styling #### `.color-xx` are removed (use `.text-color-xx` instead) Since the SVG icons are now pure CSS, we can now colorize them the same way that we would do for any other text via the `color` CSS property. Because of that, we no longer need any of the `.color-xx` classes (which were created via CSS [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)). They were useful to override the SVG icon colors, but since we can now use regular `color` property, I decided to keep only the `text-color-xx` and remove all `color-xx` @@ -65,8 +41,16 @@ Since the SVG icons are now pure CSS, we can now colorize them the same way that ```diff +``` +or move the class to the parent container and have both the icon and the text inherit the color :) +```diff ++ ``` @@ -78,7 +62,7 @@ A lot of SASS variables changed, we recommend you take a look at the [_variables ##### SASS `math` polyfills are removed When Dart-SASS released their version 1.33, it caused a lot of console warnings (and lot of unhappy users) in projects that were using `/` (for math division) instead of their new `math.div` function. To avoid seeing all these warnings, I had created a temporary polyfill (that piece of code was actually copied from Bootstrap project). This change happened 3 years ago, so I'm assuming that most users have already upgraded their SASS and fix these warnings and I think it's time to remove this polyfill since it was always meant to be a temp patch. If you see these warnings coming back, you can use the SASS option `--quiet-upstream`. -For reference, below is an example of these old Math warnings when we were compiling SASS +For reference, below is an example of these old Math warnings when we used to compile it with SASS CLI ```sh Recommendation: math.div($m, $columns) @@ -119,5 +103,5 @@ prepareGrid() { } ``` -> **Note** the `'today'` shortcut currently only exist in `Vanilla-Calendar-Picker` fork, however the rest of the settings should be similar, visit `Vanilla-Calendar-Pro` [settings](https://vanilla-calendar.pro/docs/reference/additionally/settings) website for all other options. +> **Note** the `'today'` shortcut currently only exist in `Vanilla-Calendar-Picker` fork, however the rest of the settings should be similar, visit `Vanilla-Calendar-Pro` [settings](https://vanilla-calendar.pro/docs/reference/additionally/settings) website for all other options. The hope is to drop the fork whenever the original project receives all missing features. diff --git a/docs/styling/dark-mode.md b/docs/styling/dark-mode.md index dfef76547..b371694d4 100644 --- a/docs/styling/dark-mode.md +++ b/docs/styling/dark-mode.md @@ -83,7 +83,7 @@ export class MyDemo { }, // you can also change the icon and/or command name - iconToggleDarkModeCommand: 'sgi sgi-brightness-4', + iconToggleDarkModeCommand: 'mdi mdi-brightness-4', commandLabels: { toggleDarkModeCommand: 'Toggle Dark Mode', }, diff --git a/docs/styling/styling.md b/docs/styling/styling.md index 730a6968e..c500c2090 100644 --- a/docs/styling/styling.md +++ b/docs/styling/styling.md @@ -9,9 +9,9 @@ - [SVG Colors CSS Classes](#svg-colors---css-classes) ### Description -Slickgrid-Universal was originally using Font-Awesome to display internal icons but we now use SVG only and the font was dropped completely. We now use SVG only and they are all pure CSS which mean that you can colorize them the same as any other text (which helps for dark mode). Slickgrid-Universal now has 2-3 Styling Themes (Bootstrap, Material and Salesforce) and we also optionally provide extra SVG icons, which are a tiny a subset of [Material Design Icons](https://materialdesignicons.com/) SVGs. These extra SVG icons are optionals and can be imported manually (however, they do come by default in the Material and Salesforce themes), when imported you'll want to use the `.sgi` CSS classes which is a short name for SlickGrid Icons. +Slickgrid-Universal was originally using Font-Awesome to display internal icons but we now use SVG only for icons and the font was dropped completely. Our SVG are now also using pure CSS which mean that you can colorize them the same way that you would change text color (which is also helpful in dark mode). Slickgrid-Universal has 3 Styling Themes (Bootstrap, Material and Salesforce) and we also optionally provide extra SVG icons, which are a tiny a subset of [Material Design Icons](https://materialdesignicons.com/) SVGs. These extra SVG icons are optionals and can be imported manually (note however, they are part of the Material and Salesforce themes by default), when imported you'll want to use the `.mdi` CSS classes. -> **Note** some icons are built-ins (sorting, grouping, row selections, ...) while other icons are defined by CSS classes (grid menu, column picker, header menu, context menu, ...) and you could use `.sgi` icons or any other icons framework (you'll want to override global grid options). +> **Note** some icons are built-ins (sorting, grouping, row selections, ...) while some other icons are defined by CSS classes (grid menu, column picker, header menu, context menu, ...) and you could use `.mdi` icons or any other icons framework (if you do, then you'll want to override global grid options). If you use SASS and you want to change some of the default SVGs, you will find out it super easy to simply replace the SVG path via associated SASS variable, more on further down. @@ -135,83 +135,83 @@ $text-color-darken-percentage: 6%; ##### HTML Color Test ```html
- text-color-primary - - text-color-primary-light - - text-color-primary-dark + text-color-primary - + text-color-primary-light - + text-color-primary-dark
- text-color-secondary - - text-color-secondary-light - - text-color-secondary-dark + text-color-secondary - + text-color-secondary-light - + text-color-secondary-dark
- text-color-success - - text-color-success-light - - text-color-success-dark + text-color-success - + text-color-success-light - + text-color-success-dark
- text-color-danger - - text-color-danger-light - - text-color-danger-dark + text-color-danger - + text-color-danger-light - + text-color-danger-dark
- text-color-warning - - text-color-warning-light - - text-color-warning-dark + text-color-warning - + text-color-warning-light - + text-color-warning-dark
- text-color-info - - text-color-info-light - - text-color-info-dark + text-color-info - + text-color-info-light - + text-color-info-dark
- text-color-body - - text-color-body-light - - text-color-body-dark + text-color-body - + text-color-body-light - + text-color-body-dark
- text-color-muted - - text-color-muted-light - - text-color-muted-dark + text-color-muted - + text-color-muted-light - + text-color-muted-dark
- text-color-dark + text-color-dark
- text-color-light + text-color-light
- text-color-white + text-color-white
- text-color-alt-default - - text-color-alt-default-light - - text-color-alt-default-dark + text-color-alt-default - + text-color-alt-default-light - + text-color-alt-default-dark
- text-color-alt-warning - - text-color-alt-warning-light - - text-color-alt-warning-dark + text-color-alt-warning - + text-color-alt-warning-light - + text-color-alt-warning-dark
- text-color-alt-success - - text-color-alt-success-light - - text-color-alt-success-dark + text-color-alt-success - + text-color-alt-success-light - + text-color-alt-success-dark
- text-color-alt-danger - - text-color-alt-danger-light - - text-color-alt-danger-dark + text-color-alt-danger - + text-color-alt-danger-light - + text-color-alt-danger-dark
-
text-color-se-primary
+
text-color-se-primary
- text-color-se-link - - text-color-se-link-dark + text-color-se-link - + text-color-se-link-dark
-
text-color-se-secondary
-
text-color-se-danger
+
text-color-se-secondary
+
text-color-se-danger
- text-color-se-warning - - text-color-se-warning-light + text-color-se-warning - + text-color-se-warning-light
``` \ No newline at end of file diff --git a/examples/vite-demo-vanilla-bundle/src/app.html b/examples/vite-demo-vanilla-bundle/src/app.html index cab77870f..12f0efdde 100644 --- a/examples/vite-demo-vanilla-bundle/src/app.html +++ b/examples/vite-demo-vanilla-bundle/src/app.html @@ -2,7 +2,7 @@
- +

Slickgrid-Universal

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

Slickgrid-Universal

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

Example 01 - Basic Grids - code + code

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

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

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

- code + code

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

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

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

- code + code

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

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

- code + code

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

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

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

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

see - code + code

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

- code + code

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

Grid 1 (with Header Grouping & Colspan)

- +

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

Grid 1 (with Header Grouping & Colspan) diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example09.html b/examples/vite-demo-vanilla-bundle/src/examples/example09.html index eabd643bf..fe9bab6a7 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example09.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example09.html @@ -5,7 +5,7 @@

- code + code

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

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

see - code + code

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

- code + code

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

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

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

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

- code + code

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

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

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

- code + code

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

- code + code

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

Container Width (1000px)

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

Container Width (1000px)

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

- code + code

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

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

- code + code

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

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

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

see - code + code

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

see - code + code

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

see - code + code

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

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

see - code + code

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

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

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

SlickGrid Icons +

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

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

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

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

(from 8px up to 50px)

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

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