Merge remote-tracking branch 'origin/master' into feat/internal-heade…

…r-button

packages/common/src/filters/compoundDateFilter.ts

@@ -285,7 +285,7 @@ export class CompoundDateFilter implements Filter {
 
 
     // create the DOM Select dropdown for the Operator
-    this._selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues());
+    this._selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues(), this.gridOptions);
     this._filterDivInputElm = this.buildDatePickerInput(searchTerm);
     const filterContainerElm = document.createElement('div');
     filterContainerElm.className = `form-group search-filter filter-${columnId}`;

packages/common/src/filters/compoundInputFilter.ts

@@ -228,7 +228,7 @@ export class CompoundInputFilter implements Filter {
     emptyElement(headerElm);
 
     // create the DOM Select dropdown for the Operator
-    this._selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues());
+    this._selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues(), this.gridOptions);
     this._filterInputElm = this.buildInputElement();
     const emptySpanElm = document.createElement('span');
 

packages/common/src/filters/compoundSliderFilter.ts

@@ -241,7 +241,7 @@ export class CompoundSliderFilter implements Filter {
     */
 
     // create the DOM Select dropdown for the Operator
-    this.selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues());
+    this.selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues(), this.gridOptions);
 
     const spanPrependElm = document.createElement('span');
     spanPrependElm.className = 'input-group-addon input-group-prepend operator';

packages/common/src/filters/filterUtilities.ts

@@ -1,21 +1,21 @@
 import { OperatorString } from '../enums/operatorString.type';
-import { Column } from '../interfaces/index';
+import { Column, GridOption } from '../interfaces/index';
 import { Observable, RxJsFacade, Subject, Subscription } from '../services/rxjsFacade';
-import { castObservableToPromise, getDescendantProperty, htmlEncodedStringWithPadding } from '../services/utilities';
+import { castObservableToPromise, getDescendantProperty, htmlEncodedStringWithPadding, sanitizeTextByAvailableSanitizer } from '../services/utilities';
 
 /**
  * Create and return a select dropdown HTML element with a list of Operators with descriptions
  * @param {Array<Object>} optionValues - list of operators and their descriptions
  * @returns {Object} selectElm - Select Dropdown HTML Element
  */
-export function buildSelectOperator(optionValues: Array<{ operator: OperatorString, description: string }>): HTMLSelectElement {
+export function buildSelectOperator(optionValues: Array<{ operator: OperatorString, description: string }>, gridOptions: GridOption): HTMLSelectElement {
   const selectElm = document.createElement('select');
   selectElm.className = 'form-control';
 
   for (const option of optionValues) {
     const selectOption = document.createElement('option');
     selectOption.value = option.operator;
-    selectOption.innerHTML = `${htmlEncodedStringWithPadding(option.operator, 3)}${option.description}`;
+    selectOption.innerHTML = sanitizeTextByAvailableSanitizer(gridOptions, `${htmlEncodedStringWithPadding(option.operator, 3)}${option.description}`);
     selectElm.appendChild(selectOption);
   }
 

packages/common/src/filters/sliderRangeFilter.ts

@@ -134,11 +134,11 @@ export class SliderRangeFilter implements Filter {
     const columnId = this.columnDef?.id ?? '';
     const lowerElm = document.querySelector(`.lowest-range-${columnId}`);
     const highestElm = document.querySelector(`.highest-range-${columnId}`);
-    if (lowerElm && lowerElm.innerHTML) {
-      lowerElm.innerHTML = lowestValue.toString();
+    if (lowerElm?.textContent) {
+      lowerElm.textContent = lowestValue.toString();
     }
-    if (highestElm && highestElm.innerHTML) {
-      highestElm.innerHTML = highestValue.toString();
+    if (highestElm?.textContent) {
+      highestElm.textContent = highestValue.toString();
     }
   }
 

packages/common/src/interfaces/slickDataView.interface.ts

@@ -113,10 +113,10 @@ export interface SlickDataView {
   /** Get Paging Options */
   getPagingInfo(): PagingInfo;
 
-  /** Get row number of an item in the DataView */
+  /** Get row number in the grid by its item object */
   getRowByItem(item: any): number | undefined;
 
-  /** Get row number of an item in the DataView by its Id */
+  /** Get row number in the grid by its Id */
   getRowById(id: string | number): number | undefined;
 
   /**

packages/common/src/services/__tests__/gridState.service.spec.ts

@@ -370,6 +370,7 @@ describe('GridStateService', () => {
         { columnId: 'field2', cssClass: '', headerCssClass: 'blue', width: 150 },
         { columnId: 'field3', cssClass: '', headerCssClass: '', width: 0 },
       ] as CurrentColumn[];
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(columnsMock);
 
       const associatedColumns = service.getAssociatedCurrentColumns(columnsMock);
       const currentColumns = service.getCurrentColumns();

packages/common/src/services/__tests__/resizer.service.spec.ts

@@ -584,7 +584,7 @@ describe('Resizer Service', () => {
           expect(resizeSpy).toHaveBeenNthCalledWith(2);
           expect(resizeSpy).toHaveBeenNthCalledWith(3);
           done();
-        }, 20);
+        }, 25);
       });
 
       it('should try to resize grid when its UI is deemed broken and expect "resizeGridWhenStylingIsBrokenUntilCorrected" but it should stop whenever we force it', (done) => {

packages/common/src/services/grid.service.ts

@@ -337,14 +337,14 @@ export class GridService {
 
   /** Select the selected row by a row index */
   setSelectedRow(rowIndex: number) {
-    if (this._grid && this._grid.setSelectedRows) {
+    if (this._grid?.setSelectedRows) {
       this._grid.setSelectedRows([rowIndex]);
     }
   }
 
   /** Set selected rows with provided array of row indexes */
   setSelectedRows(rowIndexes: number[]) {
-    if (this._grid && this._grid.setSelectedRows) {
+    if (this._grid?.setSelectedRows) {
       this._grid.setSelectedRows(rowIndexes);
     }
   }
@@ -364,13 +364,13 @@ export class GridService {
    */
   resetGrid(columnDefinitions?: Column[]) {
     // reset columns to original states & refresh the grid
-    if (this._grid && this._dataView) {
+    if (this._grid) {
       const originalColumns = this.sharedService.allColumns || [];
 
       if (Array.isArray(originalColumns) && originalColumns.length > 0) {
         // set the grid columns to it's original column definitions
         this._grid.setColumns(originalColumns);
-        if (this._gridOptions && this._gridOptions.enableAutoSizeColumns) {
+        if (this._gridOptions?.enableAutoSizeColumns) {
           this._grid.autosizeColumns();
         }
         this.gridStateService.resetColumns(columnDefinitions);

packages/common/src/services/gridState.service.ts

@@ -34,7 +34,6 @@ declare const Slick: SlickNamespace;
 export class GridStateService {
   protected _eventHandler = new Slick.EventHandler();
   protected _columns: Column[] = [];
-  protected _currentColumns: CurrentColumn[] = [];
   protected _grid!: SlickGrid;
   protected _subscriptions: EventSubscription[] = [];
   protected _selectedRowDataContextIds: Array<number | string> | undefined = []; // used with row selection
@@ -88,7 +87,6 @@ export class GridStateService {
 
   /** Dispose of all the SlickGrid & PubSub subscriptions */
   dispose() {
-    this._currentColumns = [];
     this._columns = [];
 
     // unsubscribe all SlickGrid events
@@ -217,7 +215,6 @@ export class GridStateService {
         }
       });
     }
-    this._currentColumns = currentColumns;
     return currentColumns;
   }
 
@@ -252,14 +249,7 @@ export class GridStateService {
    * @return current columns
    */
   getCurrentColumns(): CurrentColumn[] {
-    let currentColumns: CurrentColumn[] = [];
-    if (this._currentColumns && Array.isArray(this._currentColumns) && this._currentColumns.length > 0) {
-      currentColumns = this._currentColumns;
-    } else {
-      currentColumns = this.getAssociatedCurrentColumns(this._grid.getColumns());
-    }
-
-    return currentColumns;
+    return this.getAssociatedCurrentColumns(this._grid.getColumns() || []);
   }
 
   /**

packages/common/src/styles/slick-grid.scss

@@ -24,7 +24,6 @@
     display: inline-block;
     box-sizing: content-box !important; /* this here only for Firefox! */
     overflow: hidden;
-    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     height: 16px;
     line-height: 16px;
@@ -140,7 +139,6 @@
     display: inline-block;
     box-sizing: content-box !important;
     overflow: hidden;
-    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     height: 16px;
     line-height: 16px;

packages/composite-editor-component/src/slick-composite-editor.component.spec.ts

@@ -48,6 +48,7 @@ const gridOptionsMock = {
 const dataViewStub = {
   getItem: jest.fn(),
   getItemById: jest.fn(),
+  getItemCount: jest.fn(),
   getItems: jest.fn(),
   getLength: jest.fn(),
   refresh: jest.fn(),
@@ -993,6 +994,7 @@ describe('CompositeEditorService', () => {
         const mockProduct1 = { id: 222, address: { zip: 123456 }, productName: 'Product ABC', price: 12.55 };
         const mockProduct2 = { address: { zip: 345678 }, product: { name: 'Product DEF', price: 22.33 } };
         jest.spyOn(gridStub, 'getOptions').mockReturnValue(newGridOptions);
+        jest.spyOn(dataViewStub, 'getItemCount').mockReturnValue(1);
         jest.spyOn(dataViewStub, 'getItems').mockReturnValue([mockProduct1]);
         const gridSrvAddItemSpy = jest.spyOn(gridServiceStub, 'addItem');
         const saveSpy = jest.spyOn(gridStub.getEditController(), 'commitCurrentEdit');

packages/composite-editor-component/src/slick-composite-editor.component.ts

@@ -265,6 +265,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
         return null;
       }
 
+      this._formValues = null; // make sure there's no leftover from previous change
       this._options = { ...defaultOptions, ...this.gridOptions.compositeEditorOptions, ...options, labels: { ...this.gridOptions.compositeEditorOptions?.labels, ...options?.labels } }; // merge default options with user options
       this._options.backdrop = options.backdrop !== undefined ? options.backdrop : 'static';
       const viewColumnLayout = this._options.viewColumnLayout || 1;
@@ -313,8 +314,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
         this._originalDataContext = deepCopy(dataContext);
         this._columnDefinitions = this.grid.getColumns();
         const selectedRowsIndexes = this.hasRowSelectionEnabled() ? this.grid.getSelectedRows() : [];
-        const fullDataset = this.dataView?.getItems() ?? [];
-        const fullDatasetLength = (Array.isArray(fullDataset)) ? fullDataset.length : 0;
+        const fullDatasetLength = this.dataView?.getItemCount() ?? 0;
         this._lastActiveRowNumber = activeRow;
         const gridStateSelection = this.gridStateService?.getCurrentRowSelections() as CurrentRowSelection;
         const dataContextIds = gridStateSelection?.dataContextIds || [];
@@ -357,7 +357,6 @@ export class SlickCompositeEditorComponent implements ExternalResource {
         // open the editor modal and we can also provide a header title with optional parsing pulled from the dataContext, via template {{ }}
         // for example {{title}} => display the item title, or even complex object works {{product.name}} => display item product name
         const parsedHeaderTitle = headerTitle.replace(/\{\{(.*?)\}\}/g, (_match, group) => getDescendantProperty(dataContext, group));
-        const sanitizedHeaderTitle = sanitizeTextByAvailableSanitizer(this.gridOptions, parsedHeaderTitle);
         const layoutColCount = viewColumnLayout === 'auto' ? this.autoCalculateLayoutColumnCount(modalColumns.length) : viewColumnLayout;
 
         this._modalElm = document.createElement('div');
@@ -373,7 +372,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
 
         const modalHeaderTitleElm = document.createElement('div');
         modalHeaderTitleElm.className = 'slick-editor-modal-title';
-        modalHeaderTitleElm.innerHTML = sanitizedHeaderTitle;
+        modalHeaderTitleElm.innerHTML = sanitizeTextByAvailableSanitizer(this.gridOptions, parsedHeaderTitle);
 
         const modalCloseButtonElm = document.createElement('button');
         modalCloseButtonElm.type = 'button';
@@ -998,8 +997,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
 
   /** Insert an item into the DataView or throw an error when finding duplicate id in the dataset */
   protected insertNewItemInDataView(item: any) {
-    const fullDataset = this.dataView?.getItems() ?? [];
-    const fullDatasetLength = (Array.isArray(fullDataset)) ? fullDataset.length : 0;
+    const fullDatasetLength = this.dataView?.getItemCount() ?? 0;
     const newId = this._options.insertNewId ?? fullDatasetLength + 1;
     item[this.gridOptions.datasetIdPropertyName || 'id'] = newId;
 

packages/empty-warning-component/src/slick-empty-warning.component.ts

@@ -95,13 +95,12 @@ export class SlickEmptyWarningComponent implements ExternalResource {
     }
 
     if (!this._warningLeftElement && gridCanvasLeftElm && gridCanvasRightElm) {
-      const sanitizedOptions = this.gridOptions && this.gridOptions.sanitizeHtmlOptions || {};
-      const sanitizedText = sanitizeTextByAvailableSanitizer(this.gridOptions, warningMessage, sanitizedOptions);
+      const sanitizedOptions = this.gridOptions?.sanitizeHtmlOptions ?? {};
 
       this._warningLeftElement = document.createElement('div');
       this._warningLeftElement.classList.add(emptyDataClassName);
       this._warningLeftElement.classList.add('left');
-      this._warningLeftElement.innerHTML = sanitizedText;
+      this._warningLeftElement.innerHTML = sanitizeTextByAvailableSanitizer(this.gridOptions, warningMessage, sanitizedOptions);
 
       // clone the warning element and add the "right" class to it so we can distinguish
       this._warningRightElement = this._warningLeftElement.cloneNode(true) as HTMLDivElement;

packages/pagination-component/src/__tests__/slick-pagination-without-i18n.spec.ts

@@ -106,8 +106,8 @@ describe('Slick-Pagination Component', () => {
       const pageInfoTotalItems = document.querySelector('.page-info-total-items') as HTMLSpanElement;
 
       expect(translateService.getCurrentLanguage()).toBe('en');
-      expect(removeExtraSpaces(pageInfoFromTo.innerHTML)).toBe('<span data-test="item-from" class="item-from" aria-label="Page Item From">10</span>-<span data-test="item-to" class="item-to" aria-label="Page Item To">15</span><span class="text-of">of</span>');
-      expect(removeExtraSpaces(pageInfoTotalItems.innerHTML)).toBe('<span data-test="total-items" class="total-items">95</span><span class="text-items">items</span>');
+      expect(removeExtraSpaces(pageInfoFromTo.innerHTML)).toBe('<span aria-label="Page Item From" class="item-from" data-test="item-from">10</span>-<span aria-label="Page Item To" class="item-to" data-test="item-to">15</span><span class="text-of">of</span>');
+      expect(removeExtraSpaces(pageInfoTotalItems.innerHTML)).toBe('<span class="total-items" data-test="total-items">95</span><span class="text-items">items</span>');
       component.dispose();
     });
   });

packages/pagination-component/src/__tests__/slick-pagination.spec.ts

@@ -96,8 +96,8 @@ describe('Slick-Pagination Component', () => {
       const itemsPerPage = document.querySelector('.items-per-page') as HTMLSelectElement;
 
       expect(translateService.getCurrentLanguage()).toBe('en');
-      expect(removeExtraSpaces(pageInfoFromTo.innerHTML)).toBe('<span data-test="item-from" class="item-from" aria-label="Page Item From">10</span>-<span data-test="item-to" class="item-to" aria-label="Page Item To">15</span><span class="text-of">of</span>');
-      expect(removeExtraSpaces(pageInfoTotalItems.innerHTML)).toBe('<span data-test="total-items" class="total-items">95</span><span class="text-items">items</span>');
+      expect(removeExtraSpaces(pageInfoFromTo.innerHTML)).toBe('<span aria-label="Page Item From" class="item-from" data-test="item-from">10</span>-<span aria-label="Page Item To" class="item-to" data-test="item-to">15</span><span class="text-of">of</span>');
+      expect(removeExtraSpaces(pageInfoTotalItems.innerHTML)).toBe('<span class="total-items" data-test="total-items">95</span><span class="text-items">items</span>');
       expect(itemsPerPage.selectedOptions[0].value).toBe('5');
     });
 
@@ -262,8 +262,8 @@ describe('with different i18n locale', () => {
       const pageInfoFromTo = document.querySelector('.page-info-from-to') as HTMLSpanElement;
       const pageInfoTotalItems = document.querySelector('.page-info-total-items') as HTMLSpanElement;
       expect(translateService.getCurrentLanguage()).toBe('fr');
-      expect(removeExtraSpaces(pageInfoFromTo.innerHTML)).toBe(`<span data-test="item-from" class="item-from" aria-label="Page Item From">10</span>-<span data-test="item-to" class="item-to" aria-label="Page Item To">15</span><span class="text-of">de</span>`);
-      expect(removeExtraSpaces(pageInfoTotalItems.innerHTML)).toBe(`<span data-test="total-items" class="total-items">95</span><span class="text-items">éléments</span>`);
+      expect(removeExtraSpaces(pageInfoFromTo.innerHTML)).toBe(`<span aria-label="Page Item From" class="item-from" data-test="item-from">10</span>-<span aria-label="Page Item To" class="item-to" data-test="item-to">15</span><span class="text-of">de</span>`);
+      expect(removeExtraSpaces(pageInfoTotalItems.innerHTML)).toBe(`<span class="total-items" data-test="total-items">95</span><span class="text-items">éléments</span>`);
       done();
     }, 50);
   });

packages/pagination-component/src/slick-pagination.component.ts

@@ -4,12 +4,13 @@ import {
   GridOption,
   Locale,
   PaginationService,
+  PubSubService,
+  sanitizeTextByAvailableSanitizer,
+  ServicePagination,
   SharedService,
   SlickGrid,
-  ServicePagination,
-  TranslaterService,
   Subscription,
-  PubSubService,
+  TranslaterService,
 } from '@slickgrid-universal/common';
 import { BindingHelper } from '@slickgrid-universal/binding';
 
@@ -134,7 +135,7 @@ export class SlickPaginationComponent {
 
     if (paginationTemplate) {
       const temp = document.createElement('div');
-      temp.innerHTML = paginationTemplate;
+      temp.innerHTML = sanitizeTextByAvailableSanitizer(this.gridOptions, paginationTemplate, { ALLOW_DATA_ATTR: true } as DOMPurify.Config);
       this._paginationElement = temp.firstChild as HTMLDivElement;
       this._paginationElement.classList.add(this.gridUid, 'pager');
       this._paginationElement.style.width = '100%';

test/cypress/integration/example12.spec.js

@@ -273,6 +273,10 @@ describe('Example 12 - Composite Editor Modal', { retries: 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');
+
+    // next few rows Title should be unchanged
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 0');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 1111');
   });
 
   it('should open the Composite Editor (Edit Item) and expect all form inputs to be filled with TASK 8888 data of previous create item', () => {
@@ -303,6 +307,10 @@ describe('Example 12 - Composite Editor Modal', { retries: 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(8)`).should('be.empty');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table');
+
+    // next few rows Title should be unchanged
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 0');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 1111');
   });
 
   it('should open the Composite Editor (Mass Update) and be able to change some of the inputs in the form', () => {