diff --git a/README.md b/README.md index a8da224e3..2a0edb375 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,9 @@ and [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid) to use Note however that this project also has a Vanilla Implementation (not associated to any framework) and it is also used to test with the UI portion. The Vanilla bundle is also used in our SalesForce (with Lightning Web Component) hence the creation of this monorepo. +### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests) +Slickgrid-Universal has **100%** Unit Test Coverage, we are talking about 10,000 lines of code (+2,700 unit tests) that are now fully tested with [Jest](https://jestjs.io/). There are also over 300 Cypress E2E tests to cover most UI functionalities. + ### Available Public Packages | Package Name | Version | Description | diff --git a/packages/common/src/editors/autoCompleteEditor.ts b/packages/common/src/editors/autoCompleteEditor.ts index b7469c34a..8a4939b32 100644 --- a/packages/common/src/editors/autoCompleteEditor.ts +++ b/packages/common/src/editors/autoCompleteEditor.ts @@ -173,7 +173,7 @@ export class AutoCompleteEditor implements Editor { const data = (isComplexObject) ? getDescendantProperty(item, fieldName) : item[fieldName]; this._currentValue = data; - this._defaultTextValue = typeof data === 'string' ? data : data[this.labelName]; + this._defaultTextValue = typeof data === 'string' ? data : (data?.[this.labelName] ?? ''); this._$editorElm.val(this._defaultTextValue); this._$editorElm.select(); } @@ -264,6 +264,9 @@ export class AutoCompleteEditor implements Editor { } }); + // add a in order to add spinner styling + $(``).appendTo(this.args.container); + // user might pass his own autocomplete options const autoCompleteOptions: AutocompleteOption = this.columnEditor.editorOptions; diff --git a/packages/common/src/filters/autoCompleteFilter.ts b/packages/common/src/filters/autoCompleteFilter.ts index a133ab82f..f10a6d88c 100644 --- a/packages/common/src/filters/autoCompleteFilter.ts +++ b/packages/common/src/filters/autoCompleteFilter.ts @@ -320,7 +320,12 @@ export class AutoCompleteFilter implements Filter { // append the new DOM element to the header row if ($filterElm && typeof $filterElm.appendTo === 'function') { - $filterElm.appendTo($headerElm); + const $container = $(`
`); + $container.appendTo($headerElm); + $filterElm.appendTo($container); + + // add a in order to add spinner styling + $(``).appendTo($container); } return $filterElm; diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 8f14026fd..2b8a3ab2c 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -145,6 +145,12 @@ $autocomplete-border-radius: 4px !default; $autocomplete-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !default; $autocomplete-hover-color: #262626 !default; $autocomplete-hover-bg-color: darken($row-mouse-hover-color, 3%) !default; +$autocomplete-loading-icon: "\f021" !default; +$autocomplete-loading-icon-color: inherit !default; +$autocomplete-loading-icon-width: inherit !default; +$autocomplete-loading-icon-margin-left: -16px !default; +$autocomplete-loading-icon-line-height: 0px !default; +$autocomplete-loading-icon-vertical-align: inherit !default; $autocomplete-max-height: 25vh !default; $autocomplete-min-height: 75px !default; $autocomplete-min-width: 50px !default; diff --git a/packages/common/src/styles/bootstrap-jquery-ui-autocomplete.scss b/packages/common/src/styles/bootstrap-jquery-ui-autocomplete.scss index caff02da9..aa0aab4bb 100644 --- a/packages/common/src/styles/bootstrap-jquery-ui-autocomplete.scss +++ b/packages/common/src/styles/bootstrap-jquery-ui-autocomplete.scss @@ -4,6 +4,9 @@ // jQuery UI AutoComplete for Bootstrap // --------------------------------------------------------- +.autocomplete-container { + display: flex; +} .ui-autocomplete { position: absolute; z-index: $autocomplete-z-index; @@ -33,6 +36,25 @@ } } +/* jquery ui loading spinner */ +@keyframes md-spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} +.ui-autocomplete-loading { + & + span:after { + animation: md-spin 2s infinite linear; + display: inline-block; + font-family: $icon-font-family; + color: $autocomplete-loading-icon-color; + content: $autocomplete-loading-icon !important; /* important is required to override default jquery-ui styling */ + width: $autocomplete-loading-icon-width; + margin-left: $autocomplete-loading-icon-margin-left; + line-height: $autocomplete-loading-icon-line-height; + vertical-align: $autocomplete-loading-icon-vertical-align; + } +} + .ui-state-hover, .ui-state-active, .ui-state-focus { diff --git a/packages/common/src/styles/material-svg-icons.scss b/packages/common/src/styles/material-svg-icons.scss index c10e15622..7677789a9 100644 --- a/packages/common/src/styles/material-svg-icons.scss +++ b/packages/common/src/styles/material-svg-icons.scss @@ -101,13 +101,6 @@ $icon-width-mdi-table-refresh: $icon-width !default; $icon-width-mdi-undo: $icon-width !default; .mdi { - &.mdi-flip-h { - transform: scaleX(-1); - } - &.mdi-flip-v { - transform: scaleY(-1); - } - &.mdi-arrow-collapse:before { width: $icon-width-mdi-arrow-collapse; display: inline-block; diff --git a/packages/common/src/styles/material-svg-utilities.scss b/packages/common/src/styles/material-svg-utilities.scss new file mode 100644 index 000000000..5ef6726c2 --- /dev/null +++ b/packages/common/src/styles/material-svg-utilities.scss @@ -0,0 +1,36 @@ +@-webkit-keyframes md-spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} +@keyframes md-spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} +@mixin md-icon-rotate($degrees, $rotation) { + transform: rotate($degrees); +} + +.mdi { + &.mdi-flip-h { + transform: scaleX(-1); + } + &.mdi-flip-v { + transform: scaleY(-1); + } + &.mdi-pulse { + animation: md-spin 1s infinite steps(8); + } + &.mdi-spin { + animation: md-spin 2s infinite linear; + } + &.mdi-rotate-45 { @include md-icon-rotate(45deg, 1); } + &.mdi-rotate-90 { @include md-icon-rotate(90deg, 1); } + &.mdi-rotate-135 { @include md-icon-rotate(135deg, 2); } + &.mdi-rotate-180 { @include md-icon-rotate(180deg, 2); } + &.mdi-rotate-220 { @include md-icon-rotate(220deg, 3); } + &.mdi-rotate-270 { @include md-icon-rotate(270deg, 3); } + &.mdi-rotate-315 { @include md-icon-rotate(315deg, 3); } + &.mdi-rotate-45, .mdi-rotate-90, .mdi-rotate-135, .mdi-rotate-180, .mdi-rotate-220 .mdi-rotate-270, .mdi-rotate-315 { + filter: none; + } +} diff --git a/packages/common/src/styles/slickgrid-theme-material.scss b/packages/common/src/styles/slickgrid-theme-material.scss index 6f067e3d9..46e4ae07c 100644 --- a/packages/common/src/styles/slickgrid-theme-material.scss +++ b/packages/common/src/styles/slickgrid-theme-material.scss @@ -1,126 +1,132 @@ @import './sass-utilities'; -$primary-color: #009530 !default; -$font-family: Roboto, "Helvetica Neue", sans-serif !default; -$font-size-base-value: 14 !default; -$icon-color: #3f3e3e !default; -$icon-font-family: "Material Design Icons" !default; -$icon-font-size: 18px !default; -$icon-width: 18px !default; -$group-totals-formatter-color: #666666 !default; -$cell-border-top: none !default; -$cell-font-weight: 400 !default; -$cell-padding-top-bottom: 8px !default; -$cell-padding-right-left: 7px !default; -$cell-odd-background-color: #f5f5f5 !default; -$cell-text-color: rgba(0, 0, 0, 0.87) !default; -$header-row-filter-padding: 8px 4px !default; -$header-font-size: 12px !default; -$header-font-weight: 700 !default; -$header-text-color: rgba(0, 0, 0, 0.87) !default; -$header-border-bottom: transparent !default; -$header-filter-row-border-bottom: 1px solid #d0d0d0 !default; -$header-resizable-hover: 2px solid lighten(#48c774, 15%) !default; -$header-resizable-hover-border-bottom: $header-resizable-hover !default; -$header-resizable-hover-border-left: $header-resizable-hover !default; -$header-resizable-hover-border-right: $header-resizable-hover !default; -$header-resizable-hover-border-top: $header-resizable-hover !default; -$header-resizable-hover-width: 4px !default; -$header-resizable-hover-border-radius: 8px !default; -$header-resizable-hover-right: 0 !default; -$header-resizable-hover-opacity: 0.4 !default; -$slick-pane-top-border-top: 1px solid #d0d0d0 !default; -$container-border-top: 1px solid #ccc !default; -$container-border-bottom: 1px solid #ccc !default; -$container-border-left: 1px solid #ccc !default; -$container-border-right: 1px solid #ccc !default; -$icon-sort-color: $primary-color !default; -$icon-sort-asc: url('data:image/svg+xml,') !default; -$icon-sort-desc: url('data:image/svg+xml,') !default; -$icon-sort-font-size: $icon-width !default; -$icon-sort-position-right: 14px !default; -$icon-sort-width: $icon-width !default; -$checkbox-selector-size: 22px !default; -$checkbox-selector-color: $primary-color !default; -$checkbox-selector-icon-width: $checkbox-selector-size !default; -$checkbox-selector-icon-checked: url('data:image/svg+xml,') !default; -$checkbox-selector-icon-unchecked: url('data:image/svg+xml,') !default; -$checkbox-selector-opacity: 1 !default; -$checkbox-selector-opacity-hover: 0.9 !default; -$cell-menu-icon-margin-right: 6px !default; -$column-picker-checkbox-color: $primary-color !default; -$column-picker-checkbox-size: $icon-width !default; -$column-picker-checkbox-font-weight: normal !default; -$column-picker-checkbox-icon-checked: url('data:image/svg+xml,') !default; -$column-picker-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; -$column-picker-checkbox-width: $icon-width !default; -$column-picker-title-font-size: 18px !default; -$context-menu-item-font-size: 16px !default; -$context-menu-icon-font-size: $icon-width !default; -$icon-group-width: 22px !default; -$icon-group-color: $primary-color !default; -$icon-group-collapsed: url('data:image/svg+xml,') !default; -$icon-group-expanded: url('data:image/svg+xml,') !default; -$icon-group-font-weight: normal !default; -$icon-group-margin-right: 0 !default; -$draggable-group-drop-width: 100% !default; -$draggable-group-drop-radius: 0 !default; -$draggable-group-toggle-collapsed-icon: $icon-group-collapsed !default; -$draggable-group-toggle-expanded-icon: $icon-group-expanded !default; -$draggable-group-title-height: 24px !default; -$draggable-group-title-line-height: 24px !default; -$draggable-group-title-vertical-align: top !default; -$grid-menu-checkbox-size: $column-picker-checkbox-width !default; -$grid-menu-checkbox-font-weight: normal !default; -$grid-menu-checkbox-icon-checked: $column-picker-checkbox-icon-checked !default; -$grid-menu-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; -$grid-menu-checkbox-width: $column-picker-checkbox-width !default; -$grid-menu-icon-font-size: $icon-width !default; -$grid-menu-icon-width: $icon-width !default; -$grid-menu-icon-top-margin: 8px !default; -$grid-menu-title-font-size: 18px !default; -$header-menu-button-icon-font-size: 24px !default; -$header-menu-button-icon-width: 24px !default; -$header-menu-button-icon-color: $icon-color !default; -$header-menu-button-icon: url('data:image/svg+xml,') !default; -$header-menu-button-margin-right: 8px !default; -$header-menu-display: inline-block !default; -$header-menu-icon-margin-right: 6px !default; -$header-menu-icon-font-size: $icon-width !default; -$header-menu-icon-width: $icon-width !default; -$multiselect-icon-arrow-font-size: 16px !default; -$multiselect-icon-color: $primary-color !default; -$multiselect-icon-height: 16px !default; -$multiselect-icon-width: 16px !default; -$multiselect-icon-margin: 0px 4px 0 0 !default; -$multiselect-icon-checked: $checkbox-selector-icon-checked !default; -$multiselect-icon-unchecked: $checkbox-selector-icon-unchecked !default; -$multiselect-icon-radio-checked: url('data:image/svg+xml,') !default; -$multiselect-icon-radio-unchecked: url('data:image/svg+xml,') !default; -$multiselect-unchecked-opacity: 0.8 !default; -$preheader-border-right: 1px solid #e2e2e2 !default; -$row-move-plugin-cursor: grab !default; -$row-move-plugin-icon-color: $icon-color !default; -$row-move-plugin-icon: url('data:image/svg+xml,') !default; -$slider-editor-height: 26px !default; -$row-mouse-hover-color: #ebfaef !default; -$row-selected-color: #d4f6d7 !default; -$detail-view-icon-collapse-color: $primary-color !default; -$detail-view-icon-expand-color: $primary-color !default; -$detail-view-icon-collapse: url('data:image/svg+xml,') !default; -$detail-view-icon-expand: url('data:image/svg+xml,') !default; -$pagination-icon-color: $primary-color !default; -$pagination-icon-seek-first: url('data:image/svg+xml,') !default; -$pagination-icon-seek-end: url('data:image/svg+xml,') !default; -$pagination-icon-seek-next: url('data:image/svg+xml,') !default; -$pagination-icon-seek-prev: url('data:image/svg+xml, ') !default; -$pagination-icon-seek-first-width: $icon-width !default; -$pagination-icon-seek-prev-width: $icon-width !default; -$pagination-icon-seek-next-width: $icon-width !default; -$pagination-icon-seek-end-width: $icon-width !default; -$pagination-button-padding: 6px 9px !default; -$pagination-button-border-radius: 2px !default; -$pagination-page-input-border-radius: 3px !default; +$primary-color: #009530 !default; +$font-family: Roboto, "Helvetica Neue", sans-serif !default; +$font-size-base-value: 14 !default; +$icon-color: #3f3e3e !default; +$icon-font-family: "Material Design Icons" !default; +$icon-font-size: 18px !default; +$icon-width: 18px !default; +$group-totals-formatter-color: #666666 !default; +$cell-border-top: none !default; +$cell-font-weight: 400 !default; +$cell-padding-top-bottom: 8px !default; +$cell-padding-right-left: 7px !default; +$cell-odd-background-color: #f5f5f5 !default; +$cell-text-color: rgba(0, 0, 0, 0.87) !default; +$header-row-filter-padding: 8px 4px !default; +$header-font-size: 12px !default; +$header-font-weight: 700 !default; +$header-text-color: rgba(0, 0, 0, 0.87) !default; +$header-border-bottom: transparent !default; +$header-filter-row-border-bottom: 1px solid #d0d0d0 !default; +$header-resizable-hover: 2px solid lighten(#48c774, 15%) !default; +$header-resizable-hover-border-bottom: $header-resizable-hover !default; +$header-resizable-hover-border-left: $header-resizable-hover !default; +$header-resizable-hover-border-right: $header-resizable-hover !default; +$header-resizable-hover-border-top: $header-resizable-hover !default; +$header-resizable-hover-width: 4px !default; +$header-resizable-hover-border-radius: 8px !default; +$header-resizable-hover-right: 0 !default; +$header-resizable-hover-opacity: 0.4 !default; +$slick-pane-top-border-top: 1px solid #d0d0d0 !default; +$container-border-top: 1px solid #ccc !default; +$container-border-bottom: 1px solid #ccc !default; +$container-border-left: 1px solid #ccc !default; +$container-border-right: 1px solid #ccc !default; +$icon-sort-color: $primary-color !default; +$icon-sort-asc: url('data:image/svg+xml,') !default; +$icon-sort-desc: url('data:image/svg+xml,') !default; +$icon-sort-font-size: $icon-width !default; +$icon-sort-position-right: 14px !default; +$icon-sort-width: $icon-width !default; +$checkbox-selector-size: 22px !default; +$checkbox-selector-color: $primary-color !default; +$checkbox-selector-icon-width: $checkbox-selector-size !default; +$checkbox-selector-icon-checked: url('data:image/svg+xml,') !default; +$checkbox-selector-icon-unchecked: url('data:image/svg+xml,') !default; +$checkbox-selector-opacity: 1 !default; +$checkbox-selector-opacity-hover: 0.9 !default; +$cell-menu-icon-margin-right: 6px !default; +$column-picker-checkbox-color: $primary-color !default; +$column-picker-checkbox-size: $icon-width !default; +$column-picker-checkbox-font-weight: normal !default; +$column-picker-checkbox-icon-checked: url('data:image/svg+xml,') !default; +$column-picker-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; +$column-picker-checkbox-width: $icon-width !default; +$column-picker-title-font-size: 18px !default; +$context-menu-item-font-size: 16px !default; +$context-menu-icon-font-size: $icon-width !default; +$icon-group-width: 22px !default; +$icon-group-color: $primary-color !default; +$icon-group-collapsed: url('data:image/svg+xml,') !default; +$icon-group-expanded: url('data:image/svg+xml,') !default; +$icon-group-font-weight: normal !default; +$icon-group-margin-right: 0 !default; +$draggable-group-drop-width: 100% !default; +$draggable-group-drop-radius: 0 !default; +$draggable-group-toggle-collapsed-icon: $icon-group-collapsed !default; +$draggable-group-toggle-expanded-icon: $icon-group-expanded !default; +$draggable-group-title-height: 24px !default; +$draggable-group-title-line-height: 24px !default; +$draggable-group-title-vertical-align: top !default; +$grid-menu-checkbox-size: $column-picker-checkbox-width !default; +$grid-menu-checkbox-font-weight: normal !default; +$grid-menu-checkbox-icon-checked: $column-picker-checkbox-icon-checked !default; +$grid-menu-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; +$grid-menu-checkbox-width: $column-picker-checkbox-width !default; +$grid-menu-icon-font-size: $icon-width !default; +$grid-menu-icon-width: $icon-width !default; +$grid-menu-icon-top-margin: 8px !default; +$grid-menu-title-font-size: 18px !default; +$header-menu-button-icon-font-size: 24px !default; +$header-menu-button-icon-width: 24px !default; +$header-menu-button-icon-color: $icon-color !default; +$header-menu-button-icon: url('data:image/svg+xml,') !default; +$header-menu-button-margin-right: 8px !default; +$header-menu-display: inline-block !default; +$header-menu-icon-margin-right: 6px !default; +$header-menu-icon-font-size: $icon-width !default; +$header-menu-icon-width: $icon-width !default; +$autocomplete-loading-icon-color: $icon-color !default; +$autocomplete-loading-icon: url('data:image/svg+xml,') !default; +$autocomplete-loading-icon-width: 22px !default; +$autocomplete-loading-icon-margin-left: -26px !default; +$autocomplete-loading-icon-line-height: 0px !default; +$autocomplete-loading-icon-vertical-align: sub !default; +$multiselect-icon-arrow-font-size: 16px !default; +$multiselect-icon-color: $primary-color !default; +$multiselect-icon-height: 16px !default; +$multiselect-icon-width: 16px !default; +$multiselect-icon-margin: 0px 4px 0 0 !default; +$multiselect-icon-checked: $checkbox-selector-icon-checked !default; +$multiselect-icon-unchecked: $checkbox-selector-icon-unchecked !default; +$multiselect-icon-radio-checked: url('data:image/svg+xml,') !default; +$multiselect-icon-radio-unchecked: url('data:image/svg+xml,') !default; +$multiselect-unchecked-opacity: 0.8 !default; +$preheader-border-right: 1px solid #e2e2e2 !default; +$row-move-plugin-cursor: grab !default; +$row-move-plugin-icon-color: $icon-color !default; +$row-move-plugin-icon: url('data:image/svg+xml,') !default; +$slider-editor-height: 26px !default; +$row-mouse-hover-color: #ebfaef !default; +$row-selected-color: #d4f6d7 !default; +$detail-view-icon-collapse-color: $primary-color !default; +$detail-view-icon-expand-color: $primary-color !default; +$detail-view-icon-collapse: url('data:image/svg+xml,') !default; +$detail-view-icon-expand: url('data:image/svg+xml,') !default; +$pagination-icon-color: $primary-color !default; +$pagination-icon-seek-first: url('data:image/svg+xml,') !default; +$pagination-icon-seek-end: url('data:image/svg+xml,') !default; +$pagination-icon-seek-next: url('data:image/svg+xml,') !default; +$pagination-icon-seek-prev: url('data:image/svg+xml, ') !default; +$pagination-icon-seek-first-width: $icon-width !default; +$pagination-icon-seek-prev-width: $icon-width !default; +$pagination-icon-seek-next-width: $icon-width !default; +$pagination-icon-seek-end-width: $icon-width !default; +$pagination-button-padding: 6px 9px !default; +$pagination-button-border-radius: 2px !default; +$pagination-page-input-border-radius: 3px !default; @import './roboto-font'; @import './slick-default-theme'; @@ -135,6 +141,7 @@ $pagination-page-input-border-radius: 3px !default; @import './slick-bootstrap'; @import './bootstrap-jquery-ui-autocomplete'; @import './material-svg-icons'; +@import './material-svg-utilities'; $link-color: $primary-color !default; @import './extra-styling.scss'; diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.scss b/packages/common/src/styles/slickgrid-theme-salesforce.scss index d9e7aeb0a..abbabcad5 100644 --- a/packages/common/src/styles/slickgrid-theme-salesforce.scss +++ b/packages/common/src/styles/slickgrid-theme-salesforce.scss @@ -3,153 +3,159 @@ @import './multiple-select'; @import './sass-utilities'; -$primary-color: #006DCC !default; -$highlight-color: #0070D2 !default; -$bare-color: #b5b5b5 !default; -$icon-color: #514f4d !default; -$font-family: var(--lwc-fontFamily,'Salesforce Sans', 'SalesforceSans-Regular', Arial, sans-serif) !default; -$cell-active-box-shadow: inset 0 0 0 1px $highlight-color !default; -$cell-border-top: none !default; -$cell-border-bottom: none !default; -$cell-box-shadow: 0px 1px 0px #dddbda, 0px -1px 0px #dddbda !default; -$cell-font-weight: 400 !default; -$cell-odd-background-color: #f3f2f2 !default; -$cell-text-color: #080707 !default; -$font-size-base-value: 13 !default; -$icon-font-size: 18px !default; -$icon-width: 18px !default; -$frozen-border-right: 2px solid $highlight-color !default; -$group-totals-formatter-color: #666666 !default; -$header-background-color: #fafaf9 !default; -$header-border-bottom: transparent !default; -$header-font-size: 13px !default; -$header-font-weight: 700 !default; -$header-text-color: #514f4d !default; -$header-border-bottom: transparent !default; -$header-filter-row-border-bottom: 1px solid #d0d0d0 !default; -$slick-pane-top-border-top: 1px solid #d0d0d0 !default; -$header-resizable-hover: 2px solid $highlight-color !default; -$header-resizable-hover-border-bottom: $header-resizable-hover !default; -$header-resizable-hover-border-left: $header-resizable-hover !default; -$header-resizable-hover-border-right: $header-resizable-hover !default; -$header-resizable-hover-border-top: $header-resizable-hover !default; -$header-resizable-hover-width: 4px !default; -$header-resizable-hover-border-radius: 8px !default; -$header-resizable-hover-right: 0 !default; -$header-resizable-hover-opacity: 0.5 !default; -$container-border-top: 1px solid #ccc !default; -$container-border-bottom: 1px solid #ccc !default; -$container-border-left: 0px solid #ccc !default; -$container-border-right: 0px solid #ccc !default; -$icon-sort-color: $highlight-color !default; -$icon-sort-asc: url('data:image/svg+xml,') !default; -$icon-sort-desc: url('data:image/svg+xml,') !default; -$icon-sort-font-size: 13px !default; -$icon-sort-width: 13px !default; -$icon-sort-position-right: 12px !default; -$checkbox-selector-checked-color: $highlight-color !default; -$checkbox-selector-unchecked-color: $bare-color !default; -$checkbox-selector-size: 12px !default; -$checkbox-selector-icon-font-weight: normal !default; -$checkbox-selector-icon-height: calc(#{$checkbox-selector-size} + 4px) !default; -$checkbox-selector-icon-width: calc(#{$checkbox-selector-size} + 4px) !default; -$checkbox-selector-icon-margin: 2px 0 0 0 !default; -$checkbox-selector-icon-border: 1px solid #d6d4d4 !default; -$checkbox-selector-icon-border-radius: 0.125rem !default; -$checkbox-selector-icon-bg-color: white !default; -$checkbox-selector-color: $highlight-color !default; -$checkbox-selector-icon-checked: url('data:image/svg+xml,') !default; -$checkbox-selector-icon-unchecked: url('data:image/svg+xml,') !default; -$checkbox-selector-opacity: 1 !default; -$checkbox-selector-opacity-hover: 0.9 !default; -$cell-menu-icon-margin-right: 6px !default; -$cell-menu-close-btn-height: 14px !default; -$cell-menu-close-btn-margin: -8px 1px 1px 1px !default; -$column-picker-checkbox-color: $primary-color !default; -$column-picker-checkbox-size: $icon-width !default; -$column-picker-checkbox-font-weight: normal !default; -$column-picker-checkbox-icon-checked: url('data:image/svg+xml,') !default; -$column-picker-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; -$column-picker-checkbox-width: 13px !default; -$column-picker-title-font-size: 16px !default; -$context-menu-item-font-size: 16px !default; -$context-menu-icon-font-size: $icon-width !default; -$icon-group-color: $primary-color !default; -$icon-group-collapsed: url('data:image/svg+xml,') !default; -$icon-group-expanded: url('data:image/svg+xml,') !default; -$icon-group-font-weight: normal !default; -$icon-group-margin-right: 4px !default; -$draggable-group-drop-width: 100% !default; -$draggable-group-drop-radius: 0 !default; -$draggable-group-toggle-collapsed-icon: $icon-group-collapsed !default; -$draggable-group-toggle-expanded-icon: $icon-group-expanded !default; -$draggable-group-title-height: 24px !default; -$draggable-group-title-line-height: 24px !default; -$draggable-group-title-vertical-align: top !default; -$grid-menu-checkbox-size: $column-picker-checkbox-width !default; -$grid-menu-checkbox-font-weight: normal !default; -$grid-menu-checkbox-icon-checked: $column-picker-checkbox-icon-checked !default; -$grid-menu-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; -$grid-menu-checkbox-width: $column-picker-checkbox-width !default; -$grid-menu-icon-font-size: 18px !default; -$grid-menu-icon-width: 18px !default; -$grid-menu-title-font-size: 18px !default; -$header-menu-button-icon-font-size: 26px !default; -$header-menu-button-icon-color: #706e6b !default; -$header-menu-button-icon: url('data:image/svg+xml,') !default; -$header-menu-button-margin-right: 8px !default; -$header-menu-display: inline-block !default; -$header-menu-icon-margin-right: 6px !default; -$header-menu-icon-font-size: $icon-width !default; -$header-menu-icon-width: $icon-width !default; -$large-editor-border-radius: 6px !default; -$multiselect-icon-arrow-font-size: $icon-font-size - 4px !default; -$multiselect-icon-checked-color: $highlight-color !default; -$multiselect-icon-border: 1px solid #d6d4d4 !default; -$multiselect-icon-height: 15px !default; -$multiselect-icon-width: 15px !default; -$multiselect-icon-margin: 0px 4px 2px 0 !default; -$multiselect-icon-border-radius: 0.125rem !default; -$multiselect-icon-unchecked-color: $bare-color !default; -$multiselect-icon-radio-color: $highlight-color !default; -$multiselect-icon-checked: url('data:image/svg+xml,') !default; -$multiselect-icon-unchecked: url('data:image/svg+xml,') !default; -$multiselect-icon-radio-checked: url('data:image/svg+xml,') !default; -$multiselect-icon-radio-unchecked: url('data:image/svg+xml,') !default; -$multiselect-icon-font-size: 10px !default; -$multiselect-icon-radio-border-radius: 50% !default; -$multiselect-unchecked-opacity: 0.8 !default; -$preheader-border-right: 1px solid #e8e8e8 !default; -$preheader-grouped-title-justify: center !default; -$preheader-font-size: 14px !default; -$preheader-height: 21px !default; -$row-move-plugin-icon-color: $cell-text-color !default; -$row-move-plugin-cursor: grab !default; -$row-move-plugin-icon-width: 18px !default; -$row-move-plugin-icon: url('data:image/svg+xml,') !default; -$editor-focus-box-shadow: 0 0 3px $primary-color !default; -$slider-editor-height: 24px !default; -$slider-filter-thumb-color: #3C97DD !default; -$slider-filter-runnable-track-bgcolor: #ECEBEA !default; -$row-selected-color: darken($cell-odd-background-color, 2%) !default; -$row-mouse-hover-color: $cell-odd-background-color !default; -$row-mouse-hover-box-shadow: 0 0 0 2px #dddbda !default; -$detail-view-icon-collapse-color: $primary-color !default; -$detail-view-icon-expand-color: $primary-color !default; -$detail-view-icon-collapse: url('data:image/svg+xml,') !default; -$detail-view-icon-expand: url('data:image/svg+xml,') !default; -$pagination-icon-color: $primary-color !default; -$pagination-icon-seek-first: url('data:image/svg+xml,') !default; -$pagination-icon-seek-end: url('data:image/svg+xml,') !default; -$pagination-icon-seek-next: url('data:image/svg+xml,') !default; -$pagination-icon-seek-prev: url('data:image/svg+xml, ') !default; -$pagination-icon-seek-first-width: $icon-width !default; -$pagination-icon-seek-prev-width: $icon-width !default; -$pagination-icon-seek-next-width: $icon-width !default; -$pagination-icon-seek-end-width: $icon-width !default; -$pagination-button-padding: 6px 9px !default; -$pagination-button-border-radius: 2px !default; -$pagination-page-input-border-radius: 3px !default; +$primary-color: #006DCC !default; +$highlight-color: #0070D2 !default; +$bare-color: #b5b5b5 !default; +$icon-color: #514f4d !default; +$font-family: var(--lwc-fontFamily,'Salesforce Sans', 'SalesforceSans-Regular', Arial, sans-serif) !default; +$cell-active-box-shadow: inset 0 0 0 1px $highlight-color !default; +$cell-border-top: none !default; +$cell-border-bottom: none !default; +$cell-box-shadow: 0px 1px 0px #dddbda, 0px -1px 0px #dddbda !default; +$cell-font-weight: 400 !default; +$cell-odd-background-color: #f3f2f2 !default; +$cell-text-color: #080707 !default; +$font-size-base-value: 13 !default; +$icon-font-size: 18px !default; +$icon-width: 18px !default; +$frozen-border-right: 2px solid $highlight-color !default; +$group-totals-formatter-color: #666666 !default; +$header-background-color: #fafaf9 !default; +$header-border-bottom: transparent !default; +$header-font-size: 13px !default; +$header-font-weight: 700 !default; +$header-text-color: #514f4d !default; +$header-border-bottom: transparent !default; +$header-filter-row-border-bottom: 1px solid #d0d0d0 !default; +$slick-pane-top-border-top: 1px solid #d0d0d0 !default; +$header-resizable-hover: 2px solid $highlight-color !default; +$header-resizable-hover-border-bottom: $header-resizable-hover !default; +$header-resizable-hover-border-left: $header-resizable-hover !default; +$header-resizable-hover-border-right: $header-resizable-hover !default; +$header-resizable-hover-border-top: $header-resizable-hover !default; +$header-resizable-hover-width: 4px !default; +$header-resizable-hover-border-radius: 8px !default; +$header-resizable-hover-right: 0 !default; +$header-resizable-hover-opacity: 0.5 !default; +$container-border-top: 1px solid #ccc !default; +$container-border-bottom: 1px solid #ccc !default; +$container-border-left: 0px solid #ccc !default; +$container-border-right: 0px solid #ccc !default; +$icon-sort-color: $highlight-color !default; +$icon-sort-asc: url('data:image/svg+xml,') !default; +$icon-sort-desc: url('data:image/svg+xml,') !default; +$icon-sort-font-size: 13px !default; +$icon-sort-width: 13px !default; +$icon-sort-position-right: 12px !default; +$checkbox-selector-checked-color: $highlight-color !default; +$checkbox-selector-unchecked-color: $bare-color !default; +$checkbox-selector-size: 12px !default; +$checkbox-selector-icon-font-weight: normal !default; +$checkbox-selector-icon-height: calc(#{$checkbox-selector-size} + 4px) !default; +$checkbox-selector-icon-width: calc(#{$checkbox-selector-size} + 4px) !default; +$checkbox-selector-icon-margin: 2px 0 0 0 !default; +$checkbox-selector-icon-border: 1px solid #d6d4d4 !default; +$checkbox-selector-icon-border-radius: 0.125rem !default; +$checkbox-selector-icon-bg-color: white !default; +$checkbox-selector-color: $highlight-color !default; +$checkbox-selector-icon-checked: url('data:image/svg+xml,') !default; +$checkbox-selector-icon-unchecked: url('data:image/svg+xml,') !default; +$checkbox-selector-opacity: 1 !default; +$checkbox-selector-opacity-hover: 0.9 !default; +$cell-menu-icon-margin-right: 6px !default; +$cell-menu-close-btn-height: 14px !default; +$cell-menu-close-btn-margin: -8px 1px 1px 1px !default; +$column-picker-checkbox-color: $primary-color !default; +$column-picker-checkbox-size: $icon-width !default; +$column-picker-checkbox-font-weight: normal !default; +$column-picker-checkbox-icon-checked: url('data:image/svg+xml,') !default; +$column-picker-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; +$column-picker-checkbox-width: 13px !default; +$column-picker-title-font-size: 16px !default; +$context-menu-item-font-size: 16px !default; +$context-menu-icon-font-size: $icon-width !default; +$icon-group-color: $primary-color !default; +$icon-group-collapsed: url('data:image/svg+xml,') !default; +$icon-group-expanded: url('data:image/svg+xml,') !default; +$icon-group-font-weight: normal !default; +$icon-group-margin-right: 4px !default; +$draggable-group-drop-width: 100% !default; +$draggable-group-drop-radius: 0 !default; +$draggable-group-toggle-collapsed-icon: $icon-group-collapsed !default; +$draggable-group-toggle-expanded-icon: $icon-group-expanded !default; +$draggable-group-title-height: 24px !default; +$draggable-group-title-line-height: 24px !default; +$draggable-group-title-vertical-align: top !default; +$grid-menu-checkbox-size: $column-picker-checkbox-width !default; +$grid-menu-checkbox-font-weight: normal !default; +$grid-menu-checkbox-icon-checked: $column-picker-checkbox-icon-checked !default; +$grid-menu-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; +$grid-menu-checkbox-width: $column-picker-checkbox-width !default; +$grid-menu-icon-font-size: 18px !default; +$grid-menu-icon-width: 18px !default; +$grid-menu-title-font-size: 18px !default; +$header-menu-button-icon-font-size: 26px !default; +$header-menu-button-icon-color: #706e6b !default; +$header-menu-button-icon: url('data:image/svg+xml,') !default; +$header-menu-button-margin-right: 8px !default; +$header-menu-display: inline-block !default; +$header-menu-icon-margin-right: 6px !default; +$header-menu-icon-font-size: $icon-width !default; +$header-menu-icon-width: $icon-width !default; +$autocomplete-loading-icon-color: $icon-color !default; +$autocomplete-loading-icon: url('data:image/svg+xml,') !default; +$autocomplete-loading-icon-width: 22px !default; +$autocomplete-loading-icon-margin-left: -26px !default; +$autocomplete-loading-icon-line-height: 0px !default; +$autocomplete-loading-icon-vertical-align: sub !default; +$large-editor-border-radius: 6px !default; +$multiselect-icon-arrow-font-size: $icon-font-size - 4px !default; +$multiselect-icon-checked-color: $highlight-color !default; +$multiselect-icon-border: 1px solid #d6d4d4 !default; +$multiselect-icon-height: 15px !default; +$multiselect-icon-width: 15px !default; +$multiselect-icon-margin: 0px 4px 2px 0 !default; +$multiselect-icon-border-radius: 0.125rem !default; +$multiselect-icon-unchecked-color: $bare-color !default; +$multiselect-icon-radio-color: $highlight-color !default; +$multiselect-icon-checked: url('data:image/svg+xml,') !default; +$multiselect-icon-unchecked: url('data:image/svg+xml,') !default; +$multiselect-icon-radio-checked: url('data:image/svg+xml,') !default; +$multiselect-icon-radio-unchecked: url('data:image/svg+xml,') !default; +$multiselect-icon-font-size: 10px !default; +$multiselect-icon-radio-border-radius: 50% !default; +$multiselect-unchecked-opacity: 0.8 !default; +$preheader-border-right: 1px solid #e8e8e8 !default; +$preheader-grouped-title-justify: center !default; +$preheader-font-size: 14px !default; +$preheader-height: 21px !default; +$row-move-plugin-icon-color: $cell-text-color !default; +$row-move-plugin-cursor: grab !default; +$row-move-plugin-icon-width: 18px !default; +$row-move-plugin-icon: url('data:image/svg+xml,') !default; +$editor-focus-box-shadow: 0 0 3px $primary-color !default; +$slider-editor-height: 24px !default; +$slider-filter-thumb-color: #3C97DD !default; +$slider-filter-runnable-track-bgcolor: #ECEBEA !default; +$row-selected-color: darken($cell-odd-background-color, 2%) !default; +$row-mouse-hover-color: $cell-odd-background-color !default; +$row-mouse-hover-box-shadow: 0 0 0 2px #dddbda !default; +$detail-view-icon-collapse-color: $primary-color !default; +$detail-view-icon-expand-color: $primary-color !default; +$detail-view-icon-collapse: url('data:image/svg+xml,') !default; +$detail-view-icon-expand: url('data:image/svg+xml,') !default; +$pagination-icon-color: $primary-color !default; +$pagination-icon-seek-first: url('data:image/svg+xml,') !default; +$pagination-icon-seek-end: url('data:image/svg+xml,') !default; +$pagination-icon-seek-next: url('data:image/svg+xml,') !default; +$pagination-icon-seek-prev: url('data:image/svg+xml, ') !default; +$pagination-icon-seek-first-width: $icon-width !default; +$pagination-icon-seek-prev-width: $icon-width !default; +$pagination-icon-seek-next-width: $icon-width !default; +$pagination-icon-seek-end-width: $icon-width !default; +$pagination-button-padding: 6px 9px !default; +$pagination-button-border-radius: 2px !default; +$pagination-page-input-border-radius: 3px !default; @import './slick-without-bootstrap-min-styling'; @import './slick-default-theme'; @@ -163,6 +169,7 @@ $pagination-page-input-border-radius: 3px !default; @import './slick-bootstrap'; @import './bootstrap-jquery-ui-autocomplete'; @import './material-svg-icons'; +@import './material-svg-utilities'; $link-color: $primary-color !default; @import './extra-styling'; diff --git a/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip b/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip index 8786290e2..a28247fc9 100644 Binary files a/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip and b/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip differ