From 855151b9f47a5238e3069f8c85ba4ed8a5bf9bb6 Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Sat, 2 Mar 2024 15:38:19 -0500 Subject: [PATCH] feat(styling): add Dark Mode grid option (#1407) * feat(styling): add Dark Mode grid option --- .../vite-demo-vanilla-bundle/package.json | 2 +- .../src/examples/example01.html | 15 +- .../src/examples/example01.ts | 12 ++ .../src/examples/example07.html | 6 + .../src/examples/example07.ts | 13 ++ .../src/examples/example12.html | 8 +- .../src/examples/example12.ts | 15 +- .../src/examples/example16.html | 6 + .../src/examples/example16.scss | 8 +- .../src/examples/example16.ts | 14 ++ .../src/examples/icons.ts | 2 + .../src/material-styles.scss | 32 ++- .../vite-demo-vanilla-bundle/src/styles.css | 1 - .../vite-demo-vanilla-bundle/src/styles.scss | 24 +++ packages/common/package.json | 2 +- .../__tests__/autocompleterEditor.spec.ts | 27 ++- .../src/editors/__tests__/dateEditor.spec.ts | 13 ++ .../editors/__tests__/longTextEditor.spec.ts | 10 +- .../editors/__tests__/selectEditor.spec.ts | 10 + .../common/src/editors/autocompleterEditor.ts | 8 +- packages/common/src/editors/dateEditor.ts | 5 + packages/common/src/editors/longTextEditor.ts | 5 + packages/common/src/editors/selectEditor.ts | 1 + .../__tests__/slickCellMenu.plugin.spec.ts | 15 +- .../__tests__/slickColumnPicker.spec.ts | 13 ++ .../__tests__/slickContextMenu.spec.ts | 14 ++ .../__tests__/slickGridMenu.spec.ts | 16 ++ .../src/extensions/menuFromCellBaseClass.ts | 5 + .../common/src/extensions/slickCellMenu.ts | 5 +- .../src/extensions/slickColumnPicker.ts | 7 +- .../common/src/extensions/slickContextMenu.ts | 7 +- .../common/src/extensions/slickGridMenu.ts | 7 +- .../__tests__/autocompleterFilter.spec.ts | 26 ++- .../__tests__/compoundDateFilter.spec.ts | 15 ++ .../filters/__tests__/dateRangeFilter.spec.ts | 1 + .../filters/__tests__/selectFilter.spec.ts | 21 ++ .../common/src/filters/autocompleterFilter.ts | 8 +- packages/common/src/filters/dateFilter.ts | 6 + packages/common/src/filters/selectFilter.ts | 1 + .../interfaces/flatpickrOption.interface.ts | 3 + .../src/interfaces/gridOption.interface.ts | 7 + .../src/styles/_variables-theme-material.scss | 31 +++ .../styles/_variables-theme-salesforce.scss | 24 ++- packages/common/src/styles/_variables.scss | 204 +++++++++++++++++- packages/common/src/styles/extra-styling.scss | 7 +- .../common/src/styles/flatpickr-dark.scss | 107 +++++++++ .../common/src/styles/material-svg-icons.scss | 10 + .../common/src/styles/slick-bootstrap.scss | 19 +- .../common/src/styles/slick-component.scss | 8 +- packages/common/src/styles/slick-editors.scss | 17 +- packages/common/src/styles/slick-grid.scss | 11 +- packages/common/src/styles/slick-plugins.scss | 11 +- .../slick-without-bootstrap-min-styling.scss | 18 +- .../src/styles/slickgrid-theme-bootstrap.scss | 1 + .../styles/slickgrid-theme-material.bare.scss | 1 + .../styles/slickgrid-theme-material.lite.scss | 1 + .../src/styles/slickgrid-theme-material.scss | 1 + .../slickgrid-theme-salesforce.bare.scss | 1 + .../slickgrid-theme-salesforce.lite.scss | 1 + .../styles/slickgrid-theme-salesforce.scss | 9 +- .../slick-composite-editor.component.spec.ts | 23 +- .../src/slick-composite-editor.component.ts | 5 + .../__tests__/slick-vanilla-grid.spec.ts | 20 ++ .../components/slick-vanilla-grid-bundle.ts | 26 +++ .../__tests__/vanilla-force-bundle.spec.ts | 1 + pnpm-lock.yaml | 12 +- 66 files changed, 901 insertions(+), 84 deletions(-) delete mode 100644 examples/vite-demo-vanilla-bundle/src/styles.css create mode 100644 packages/common/src/styles/flatpickr-dark.scss diff --git a/examples/vite-demo-vanilla-bundle/package.json b/examples/vite-demo-vanilla-bundle/package.json index d4116f907..3f3f96419 100644 --- a/examples/vite-demo-vanilla-bundle/package.json +++ b/examples/vite-demo-vanilla-bundle/package.json @@ -29,7 +29,7 @@ "fetch-jsonp": "^1.3.0", "flatpickr": "^4.6.13", "moment-mini": "^2.29.4", - "multiple-select-vanilla": "^2.0.2", + "multiple-select-vanilla": "^2.1.0", "rxjs": "^7.8.1", "whatwg-fetch": "^3.6.20" }, diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example01.html b/examples/vite-demo-vanilla-bundle/src/examples/example01.html index 761c3290e..1d6d069d7 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example01.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example01.html @@ -10,7 +10,20 @@

Example 01 - Basic Grids

-
Grid 1
+
+
+
Grid 1
+
+
+

+ +

+
+
+
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example01.ts b/examples/vite-demo-vanilla-bundle/src/examples/example01.ts index 837b21d21..0a8f0e595 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example01.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example01.ts @@ -11,6 +11,7 @@ import './example01.scss'; const NB_ITEMS = 995; export default class Example01 { + private _darkModeGrid1 = false; gridOptions1!: GridOption; gridOptions2!: GridOption; columnDefinitions1!: Column[]; @@ -56,6 +57,7 @@ export default class Example01 { ]; this.gridOptions1 = { enableAutoResize: false, + darkMode: this._darkModeGrid1, gridHeight: 225, gridWidth: 800, rowHeight: 33, @@ -170,6 +172,16 @@ export default class Example01 { return mockDataset; } + toggleDarkModeGrid1() { + this._darkModeGrid1 = !this._darkModeGrid1; + if (this._darkModeGrid1) { + document.querySelector('.grid-container1')?.classList.add('dark-mode'); + } else { + document.querySelector('.grid-container1')?.classList.remove('dark-mode'); + } + this.sgb1.gridOptions = { darkMode: this._darkModeGrid1 }; + } + // Toggle the Pagination of Grid2 // IMPORTANT, the Pagination MUST BE CREATED on initial page load before you can start toggling it // Basically you cannot toggle a Pagination that doesn't exist (must created at the time as the grid) diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.html b/examples/vite-demo-vanilla-bundle/src/examples/example07.html index 02e12815e..a677e9440 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example07.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example07.html @@ -1,5 +1,11 @@

Example 07 - Row Move & Row Selections + + +
see Example 12 - Composite Editor Modal - (with Salesforce Theme) + (with Salesforce Theme) + + +
see `
`, + formatter: () => `
`, cellMenu: { hideCloseButton: false, commandTitle: 'Commands', @@ -401,6 +403,7 @@ export default class Example12 { useSalesforceDefaultGridOptions: true, autoFixResizeRequiredGoodCount: 1, datasetIdPropertyName: 'id', + darkMode: this._darkMode, eventNamingStyle: EventNamingStyle.lowerCase, autoAddCustomEditorFormatter: customEditableInputFormatter, enableAddRow: true, // <-- this flag is required to work with the (create & clone) modal types @@ -744,6 +747,16 @@ export default class Example12 { this.editQueue = []; } + toggleDarkMode() { + this._darkMode = !this._darkMode; + if (this._darkMode) { + document.querySelector('.demo-container')?.classList.add('dark-mode'); + } else { + document.querySelector('.demo-container')?.classList.remove('dark-mode'); + } + this.sgb.gridOptions = { darkMode: this._darkMode }; + } + mockProducts() { return [ { diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.html b/examples/vite-demo-vanilla-bundle/src/examples/example16.html index 091839fc2..d2dff0106 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example16.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/example16.html @@ -1,6 +1,12 @@

Example 16 - Regular & Custom Tooltips (with Salesforce Theme) + + +
see '); + --slick-column-picker-checkbox-icon-unchecked: var(--slick-column-picker-checkbox-icon-checked); --slick-multiselect-icon-checked: url('data:image/svg+xml,'); --slick-multiselect-icon-unchecked: url('data:image/svg+xml,'); --slick-multiselect-icon-color: var(--slick-primary-color); @@ -105,9 +106,38 @@ border: 1px solid #55B876; span { font-weight: normal; - color: #555; + color: var(--slick-dark-text-color); } } } + + .ms-dark-mode, + .ms-drop.ms-dark-mode, + .slick-dark-mode .ms-dark-mode, + .slick-dark-mode { + --slick-base-dark-menu-bg-color: #212121; + --slick-primary-color: #4caf50; + --slick-button-primary-bg-color: var(--slick-primary-color); + --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; + --slick-container-border-right: 1px solid #505050; + --slick-container-border-top: 1px solid #505050; + --slick-container-border-left: 1px solid #505050; + --slick-container-border-bottom: 1px solid #505050; + --slick-pane-top-border-top: 1px solid #505050; + --slick-filled-filter-color: #00ab3b; + --slick-highlight-color: #49a54e; + --slick-pagination-icon-color: #49a54e; + --slick-checkbox-selector-checked-color: #4caf50; + --slick-row-mouse-hover-box-shadow: none; + --slick-row-mouse-hover-color: #575757; + --slick-checkbox-selector-opacity: 1; + --slick-checkbox-selector-icon-height: 22px; + --slick-checkbox-selector-icon-bg-color: transparent; + --slick-checkbox-selector-icon-border: none; + --ms-ok-button-text-color: #4caf50; + } } } diff --git a/examples/vite-demo-vanilla-bundle/src/styles.css b/examples/vite-demo-vanilla-bundle/src/styles.css deleted file mode 100644 index c31aa259f..000000000 --- a/examples/vite-demo-vanilla-bundle/src/styles.css +++ /dev/null @@ -1 +0,0 @@ -@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss'; diff --git a/examples/vite-demo-vanilla-bundle/src/styles.scss b/examples/vite-demo-vanilla-bundle/src/styles.scss index 681b833b2..9f21da037 100644 --- a/examples/vite-demo-vanilla-bundle/src/styles.scss +++ b/examples/vite-demo-vanilla-bundle/src/styles.scss @@ -66,4 +66,28 @@ input.is-narrow { } .text-red { color: red; +} +.d-inline-flex { + display: inline-flex; +} + +.demo-container { + background-color: #fff; + h3 { + color: #333; + } + .subtitle { + color: #727272; + } +} +.demo-container.dark-mode { + padding: 20px; + background-color: #33393e; + color: #dddddd; + h3 { + color: #dddddd; + } + .subtitle { + color: #cbcbcb; + } } \ No newline at end of file diff --git a/packages/common/package.json b/packages/common/package.json index 9dbbba9d8..91b70d807 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -76,7 +76,7 @@ "excel-builder-vanilla": "3.0.1", "flatpickr": "^4.6.13", "moment-mini": "^2.29.4", - "multiple-select-vanilla": "^2.0.2", + "multiple-select-vanilla": "^2.1.0", "sortablejs": "^1.15.2", "un-flatten-tree": "^2.0.12" }, diff --git a/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts b/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts index 00b4ed43d..4da9d6516 100644 --- a/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts +++ b/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts @@ -731,9 +731,7 @@ describe('AutocompleterEditor', () => { mockColumn.internalColumnEditor = { editorOptions: { showOnFocus: true, - fetch: (searchText, updateCallback) => { - updateCallback(mockCollection); - } + fetch: (_, updateCallback) => updateCallback(mockCollection) } as AutocompleterOption }; editor = new AutocompleterEditor(editorArguments); @@ -749,6 +747,29 @@ describe('AutocompleterEditor', () => { expect(autocompleteListElms[0].textContent).toBe('Female'); expect(autocompleteListElms[1].textContent).toBe('Undefined'); }); + + it('should enable Dark Mode and expect ".slick-dark-mode" CSS class to be found on parent element', () => { + gridOptionMock.darkMode = true; + const mockCollection = [{ value: 'female', label: 'Female' }, { value: 'undefined', label: 'Undefined' }]; + const event = new (window.window as any).KeyboardEvent('keydown', { key: 'm', bubbles: true, cancelable: true }); + + mockColumn.internalColumnEditor = { + editorOptions: { + showOnFocus: true, + fetch: (_, updateCallback) => updateCallback(mockCollection) + } as AutocompleterOption + }; + editor = new AutocompleterEditor(editorArguments); + + const editorElm = divContainer.querySelector('input.editor-gender') as HTMLInputElement; + editorElm.focus(); + editorElm.dispatchEvent(event); + + jest.runAllTimers(); // fast-forward timer + + const autocompleteElm = document.body.querySelector('.slick-autocomplete') as HTMLDivElement; + expect(autocompleteElm.classList.contains('slick-dark-mode')).toBeTruthy(); + }); }); describe('with Composite Editor', () => { diff --git a/packages/common/src/editors/__tests__/dateEditor.spec.ts b/packages/common/src/editors/__tests__/dateEditor.spec.ts index bf9a26e47..6e8db3155 100644 --- a/packages/common/src/editors/__tests__/dateEditor.spec.ts +++ b/packages/common/src/editors/__tests__/dateEditor.spec.ts @@ -196,6 +196,19 @@ describe('DateEditor', () => { expect(spy).toHaveBeenCalled(); }); + it('should enable Dark Mode and expect ".slick-dark-mode" CSS class to be found on parent element', () => { + gridOptionMock.darkMode = true; + editor = new DateEditor(editorArguments); + const spy = jest.spyOn(editor.flatInstance, 'open'); + const calendarElm = document.body.querySelector('.flatpickr-calendar'); + editor.show(); + editor.focus(); + + expect(gridStub.focus).toHaveBeenCalled(); + expect(calendarElm?.classList.contains('slick-dark-mode')).toBeTruthy(); + expect(spy).toHaveBeenCalled(); + }); + it('should call the "changeEditorOption" method and expect new option to be merged with the previous Editor options and also expect to call Flatpickr "set" method', () => { editor = new DateEditor(editorArguments); const spy = jest.spyOn(editor.flatInstance, 'set'); diff --git a/packages/common/src/editors/__tests__/longTextEditor.spec.ts b/packages/common/src/editors/__tests__/longTextEditor.spec.ts index 5e331f1e8..d619cee7d 100644 --- a/packages/common/src/editors/__tests__/longTextEditor.spec.ts +++ b/packages/common/src/editors/__tests__/longTextEditor.spec.ts @@ -239,6 +239,14 @@ describe('LongTextEditor', () => { expect(wrapperElm.style.display).toBe('block'); }); + it('should enable Dark Mode and expect ".slick-dark-mode" CSS class to be found on parent element', () => { + gridOptionMock.darkMode = true; + editor = new LongTextEditor(editorArguments); + const wrapperElm = document.body.querySelector('.slick-large-editor-text.editor-title') as HTMLDivElement; + + expect(wrapperElm.classList.contains('slick-dark-mode')).toBeTruthy(); + }); + describe('isValueChanged method', () => { it('should return True when previously dispatched keyboard event is a new char "a" and it should also update the text counter accordingly', () => { const eventKeyDown = new (window.window as any).KeyboardEvent('keydown', { key: 'a', bubbles: true, cancelable: true }); @@ -568,7 +576,6 @@ describe('LongTextEditor', () => { mockItemData = { id: 1, title: 'task', isActive: true }; editor = new LongTextEditor(editorArguments); - // const spySave = jest.spyOn(editor, 'save'); const spySave = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit'); editor.loadValue(mockItemData); @@ -585,7 +592,6 @@ describe('LongTextEditor', () => { editor = new LongTextEditor(editorArguments); editor.loadValue(mockItemData); - // const spyCancel = jest.spyOn(editor, 'cancel'); const spyCancel = jest.spyOn(editorArguments, 'cancelChanges'); const editorFooterElm = document.body.querySelector('.slick-large-editor-text.editor-title .editor-footer') as HTMLDivElement; diff --git a/packages/common/src/editors/__tests__/selectEditor.spec.ts b/packages/common/src/editors/__tests__/selectEditor.spec.ts index 57d1b9330..1ef0afafd 100644 --- a/packages/common/src/editors/__tests__/selectEditor.spec.ts +++ b/packages/common/src/editors/__tests__/selectEditor.spec.ts @@ -189,6 +189,16 @@ describe('SelectEditor', () => { expect(editorElm.innerHTML).toBe(testValue); }); + it('should enable Dark Mode and expect ".ms-dark-mode" CSS class to be found on parent element', () => { + gridOptionMock.darkMode = true; + (mockColumn.internalColumnEditor as ColumnEditor).collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }]; + + editor = new SelectEditor(editorArguments, true); + const editorElm = divContainer.querySelector('.ms-parent.editor-gender') as HTMLSpanElement; + + expect(editorElm.classList.contains('ms-dark-mode')).toBeTruthy(); + }); + it('should call "columnEditor" GETTER and expect to equal the editor settings we provided', () => { (mockColumn.internalColumnEditor as ColumnEditor).collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }]; (mockColumn.internalColumnEditor as ColumnEditor).placeholder = 'test placeholder'; diff --git a/packages/common/src/editors/autocompleterEditor.ts b/packages/common/src/editors/autocompleterEditor.ts index 2d4297c90..143b66671 100644 --- a/packages/common/src/editors/autocompleterEditor.ts +++ b/packages/common/src/editors/autocompleterEditor.ts @@ -1,7 +1,7 @@ import autocompleter from 'autocompleter'; import type { AutocompleteItem, AutocompleteResult, AutocompleteSettings } from 'autocompleter'; import { BindingEventService } from '@slickgrid-universal/binding'; -import { createDomElement, isObject, isPrimitiveValue, setDeepValue, toKebabCase } from '@slickgrid-universal/utils'; +import { classNameToList, createDomElement, isObject, isPrimitiveValue, setDeepValue, toKebabCase } from '@slickgrid-universal/utils'; import { Constants } from './../constants'; import { FieldType } from '../enums/index'; @@ -618,6 +618,12 @@ export class AutocompleterEditor implements Ed ...this.editorOptions, } as Partial>; + // add dark mode CSS class when enabled + if (this.gridOptions?.darkMode) { + this._autocompleterOptions.className += ' slick-dark-mode'; + } + this.autocompleterOptions.className = classNameToList(this.autocompleterOptions.className).join(' '); + // "render" callback overriding if (this._autocompleterOptions.renderItem?.layout) { // when "renderItem" is defined, we need to add our custom style CSS classes & custom item renderer diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts index 6870b9941..62f8771e5 100644 --- a/packages/common/src/editors/dateEditor.ts +++ b/packages/common/src/editors/dateEditor.ts @@ -167,6 +167,11 @@ export class DateEditor implements Editor { this.args.container.appendChild(this._editorInputGroupElm); this.flatInstance = flatpickr(this._editorInputGroupElm, this._pickerMergedOptions as unknown as Partial); + // add dark mode CSS class when enabled + if (this.gridOptions?.darkMode) { + this.flatInstance.calendarContainer.classList.add('slick-dark-mode'); + } + // when we're using an alternate input to display data, we'll consider this input as the one to do the focus later on // else just use the top one this._inputWithDataElm = (this._pickerMergedOptions?.altInput) ? document.querySelector(`${inputCssClasses}.flatpickr-alt-input`) : this._inputElm; diff --git a/packages/common/src/editors/longTextEditor.ts b/packages/common/src/editors/longTextEditor.ts index 825e1ffd5..19f42d47f 100644 --- a/packages/common/src/editors/longTextEditor.ts +++ b/packages/common/src/editors/longTextEditor.ts @@ -122,6 +122,11 @@ export class LongTextEditor implements Editor { className: `slick-large-editor-text editor-${columnId}`, style: { position: compositeEditorOptions ? 'relative' : 'absolute' } }); + + // add dark mode CSS class when enabled + if (this.gridOptions?.darkMode) { + this._wrapperElm.classList.add('slick-dark-mode'); + } containerElm.appendChild(this._wrapperElm); // use textarea row if defined but don't go over 3 rows with composite editor modal diff --git a/packages/common/src/editors/selectEditor.ts b/packages/common/src/editors/selectEditor.ts index 71a58d955..5a1560b5d 100644 --- a/packages/common/src/editors/selectEditor.ts +++ b/packages/common/src/editors/selectEditor.ts @@ -112,6 +112,7 @@ export class SelectEditor implements Editor { autoAdjustDropPosition: true, autoAdjustDropWidthByTextSize: true, container: 'body', + darkMode: !!this.gridOptions.darkMode, filter: false, maxHeight: 275, minHeight: 25, diff --git a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts index 70577b52e..2e2a90d58 100644 --- a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts @@ -248,6 +248,18 @@ describe('CellMenu Plugin', () => { expect(hideMenuSpy).toHaveBeenCalled(); }); + it('should enable Dark Mode and expect ".slick-dark-mode" CSS class to be found on parent element when opening Cell Menu', () => { + jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue({ ...gridOptionsMock, darkMode: true }); + + plugin.dispose(); + plugin.init(); + gridStub.onClick.notify(null as any, eventData, gridStub); + + let cellMenuElm = document.body.querySelector('.slick-cell-menu.slickgrid12345') as HTMLDivElement; + expect(cellMenuElm).toBeTruthy(); + expect(cellMenuElm.classList.contains('slick-dark-mode')).toBeTruthy(); + }); + it('should "autoAlignSide" and expect menu to aligned left with a calculate offset when showing menu', () => { jest.spyOn(gridStub, 'getGridPosition').mockReturnValue({ top: 10, bottom: 5, left: 15, right: 22, width: 225 } as ElementPosition); plugin.dispose(); @@ -772,6 +784,7 @@ describe('CellMenu Plugin', () => { }); it('should create a Cell Menu to be create and show up when item visibility & usability callbacks returns true', () => { + gridOptionsMock.darkMode = true; plugin.dispose(); plugin.init(); (columnsMock[4].cellMenu!.optionItems![1] as MenuOptionItem).itemVisibilityOverride = () => true; @@ -784,7 +797,7 @@ describe('CellMenu Plugin', () => { expect(optionListElm.querySelectorAll('.slick-menu-item').length).toBe(6); expect(document.body.querySelector('button.close')!.ariaLabel).toBe('Close'); // JSDOM doesn't support ariaLabel, but we can test attribute this way expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces( - `
+ `