fix(filters): css "filled" class on filters should also work w/Grid View

- on Example 11, when we change Grid Views from the select dropdown, it uses `setValues` of each Filters and those weren't looking at adding/removing the "filled" css class

packages/common/src/filters/__tests__/compoundDateFilter.spec.ts

@@ -208,6 +208,20 @@ describe('CompoundDateFilter', () => {
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01T05:00:00.000Z'], shouldTriggerQuery: true });
   });
 
+  it('should be able to call "setValues" and set empty values and the picker input to not have the "filled" css class', () => {
+    const mockDate = '2001-01-02T16:02:02.239Z';
+    filter.init(filterArguments);
+    filter.setValues(mockDate);
+    let filledInputElm = divContainer.querySelector('.search-filter.filter-finish .filled') as HTMLInputElement;
+
+    expect(filter.currentDate).toEqual(mockDate);
+    expect(filledInputElm).toBeTruthy();
+
+    filter.setValues('');
+    filledInputElm = divContainer.querySelector('.search-filter.filter-finish .filled') as HTMLInputElement;
+    expect(filledInputElm).toBeFalsy();
+  });
+
   it('should work with different locale when locale is changed', async () => {
     await (await import('flatpickr/dist/l10n/fr')).French;
 

packages/common/src/filters/__tests__/compoundInputFilter.spec.ts

@@ -146,6 +146,18 @@ describe('CompoundInputFilter', () => {
     expect(filterSelectElm.value).toBe('>=');
   });
 
+  it('should be able to call "setValues" and set empty values and the input to not have the "filled" css class', () => {
+    filter.init(filterArguments);
+    filter.setValues('9');
+    let filledInputElm = divContainer.querySelector('.search-filter.filter-duration .filled') as HTMLInputElement;
+
+    expect(filledInputElm).toBeTruthy();
+
+    filter.setValues('');
+    filledInputElm = divContainer.querySelector('.search-filter.filter-duration .filled') as HTMLInputElement;
+    expect(filledInputElm).toBeFalsy();
+  });
+
   it('should trigger an operator change event and expect the callback to be called with the searchTerms and operator defined', () => {
     mockColumn.type = FieldType.number;
     const spyCallback = jest.spyOn(filterArguments, 'callback');

packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts

@@ -124,6 +124,18 @@ describe('CompoundSliderFilter', () => {
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '>=', searchTerms: ['9'], shouldTriggerQuery: true });
   });
 
+  it('should be able to call "setValues" and set empty values and the input to not have the "filled" css class', () => {
+    filter.init(filterArguments);
+    filter.setValues(9);
+    let filledInputElm = divContainer.querySelector('.search-filter.filter-duration.filled') as HTMLInputElement;
+
+    expect(filledInputElm).toBeTruthy();
+
+    filter.setValues('');
+    filledInputElm = divContainer.querySelector('.search-filter.filter-duration.filled') as HTMLInputElement;
+    expect(filledInputElm).toBeFalsy();
+  });
+
   it('should create the input filter with default search terms range when passed as a filter argument', () => {
     const filterArgs = { ...filterArguments, operator: '<=', searchTerms: [3] } as FilterArguments;
 

packages/common/src/filters/__tests__/dateRangeFilter.spec.ts

@@ -194,6 +194,20 @@ describe('DateRangeFilter', () => {
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'RangeInclusive', searchTerms: ['2000-01-01', '2000-01-31'], shouldTriggerQuery: true });
   });
 
+  it('should be able to call "setValues" and set empty values and the picker input to not have the "filled" css class', () => {
+    const mockDates = ['2000-01-01T05:00:00.000Z', '2000-01-31T05:00:00.000Z'];
+    filter.init(filterArguments);
+    filter.setValues(mockDates);
+    let filledInputElm = divContainer.querySelector('.search-filter.filter-finish.filled') as HTMLInputElement;
+
+    expect(filter.currentDates).toEqual(mockDates);
+    expect(filledInputElm).toBeTruthy();
+
+    filter.setValues('');
+    filledInputElm = divContainer.querySelector('.search-filter.filter-finish.filled') as HTMLInputElement;
+    expect(filledInputElm).toBeFalsy();
+  });
+
   it('should work with different locale when locale is changed', async () => {
     await (await import('flatpickr/dist/l10n/fr')).French;
 

packages/common/src/filters/__tests__/inputFilter.spec.ts

@@ -146,44 +146,56 @@ describe('InputFilter', () => {
       expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['abc'], shouldTriggerQuery: true });
     });
 
+    it('should be able to call "setValues" and set empty values and the input to not have the "filled" css class', () => {
+      filter.init(filterArguments);
+      filter.setValues('9');
+      let filledInputElm = divContainer.querySelector('.search-filter.filter-duration.filled') as HTMLInputElement;
+
+      expect(filledInputElm).toBeTruthy();
+
+      filter.setValues('');
+      filledInputElm = divContainer.querySelector('.search-filter.filter-duration.filled') as HTMLInputElement;
+      expect(filledInputElm).toBeFalsy();
+    });
+
     it('should call "setValues" and include an operator and expect the operator to show up in the output search string shown in the filter input text value', () => {
       filter.init(filterArguments);
 
       filter.setValues('abc', '<>');
-      expect(filter.getValue()).toBe('<>abc');
+      expect(filter.getValues()).toBe('<>abc');
 
       filter.setValues('abc', '!=');
-      expect(filter.getValue()).toBe('!=abc');
+      expect(filter.getValues()).toBe('!=abc');
 
       filter.setValues('abc', '=');
-      expect(filter.getValue()).toBe('=abc');
+      expect(filter.getValues()).toBe('=abc');
 
       filter.setValues('abc', '==');
-      expect(filter.getValue()).toBe('==abc');
+      expect(filter.getValues()).toBe('==abc');
 
       filter.setValues(123, '<');
-      expect(filter.getValue()).toBe('<123');
+      expect(filter.getValues()).toBe('<123');
 
       filter.setValues(123, '<=');
-      expect(filter.getValue()).toBe('<=123');
+      expect(filter.getValues()).toBe('<=123');
 
       filter.setValues(123, '>');
-      expect(filter.getValue()).toBe('>123');
+      expect(filter.getValues()).toBe('>123');
 
       filter.setValues(123, '>=');
-      expect(filter.getValue()).toBe('>=123');
+      expect(filter.getValues()).toBe('>=123');
 
       filter.setValues('abc', 'EndsWith');
-      expect(filter.getValue()).toBe('*abc');
+      expect(filter.getValues()).toBe('*abc');
 
       filter.setValues('abc', '*z');
-      expect(filter.getValue()).toBe('*abc');
+      expect(filter.getValues()).toBe('*abc');
 
       filter.setValues('abc', 'StartsWith');
-      expect(filter.getValue()).toBe('abc*');
+      expect(filter.getValues()).toBe('abc*');
 
       filter.setValues('abc', 'a*');
-      expect(filter.getValue()).toBe('abc*');
+      expect(filter.getValues()).toBe('abc*');
     });
   });
 

packages/common/src/filters/__tests__/sliderFilter.spec.ts

@@ -92,6 +92,18 @@ describe('SliderFilter', () => {
     expect(spyCallback).toHaveBeenLastCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['13'], shouldTriggerQuery: true });
   });
 
+  it('should be able to call "setValues" and set empty values and the input to not have the "filled" css class', () => {
+    filter.init(filterArguments);
+    filter.setValues(9);
+    let filledInputElm = divContainer.querySelector('.search-filter.slider-container.filter-duration.filled') as HTMLInputElement;
+
+    expect(filledInputElm).toBeTruthy();
+
+    filter.setValues('');
+    filledInputElm = divContainer.querySelector('.search-filter.slider-container.filter-duration.filled') as HTMLInputElement;
+    expect(filledInputElm).toBeFalsy();
+  });
+
   it('should create the input filter with default search terms range when passed as a filter argument', () => {
     filterArguments.searchTerms = [3];
 

packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts

@@ -129,6 +129,18 @@ describe('SliderRangeFilter', () => {
     expect(spyCallback).toHaveBeenLastCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'RangeInclusive', searchTerms: [3, 84], shouldTriggerQuery: true });
   });
 
+  it('should be able to call "setValues" and set empty values and the input to not have the "filled" css class', () => {
+    filter.init(filterArguments);
+    filter.setValues([3, 80]);
+    let filledInputElm = divContainer.querySelector('.search-filter.slider-range-container.filter-duration.filled') as HTMLInputElement;
+
+    expect(filledInputElm).toBeTruthy();
+
+    filter.setValues('');
+    filledInputElm = divContainer.querySelector('.search-filter.slider-range-container.filter-duration.filled') as HTMLInputElement;
+    expect(filledInputElm).toBeFalsy();
+  });
+
   it('should create the input filter with default search terms range when passed as a filter argument', () => {
     filterArguments.searchTerms = [3, 80];
 

packages/common/src/filters/autoCompleteFilter.ts

@@ -203,6 +203,7 @@ export class AutoCompleteFilter implements Filter {
       this.searchTerms = [];
       this.$filterElm.val('');
       this.$filterElm.trigger('input');
+      this.$filterElm.removeClass('filled');
     }
   }
 
@@ -221,11 +222,16 @@ export class AutoCompleteFilter implements Filter {
     unsubscribeAll(this.subscriptions);
   }
 
+  getValues() {
+    return this.$filterElm.val();
+  }
+
   /** Set value(s) on the DOM element  */
   setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString) {
     if (values) {
       this.$filterElm.val(values);
     }
+    this.getValues() !== '' ? this.$filterElm.addClass('filled') : this.$filterElm.removeClass('filled');
 
     // set the operator when defined
     this.operator = operator || this.defaultOperator;

packages/common/src/filters/compoundDateFilter.ts

@@ -1,5 +1,5 @@
 import * as flatpickr_ from 'flatpickr';
-import { BaseOptions as FlatpickrBaseOptions, DateOption } from 'flatpickr/dist/types/options';
+import { BaseOptions as FlatpickrBaseOptions, } from 'flatpickr/dist/types/options';
 import { Instance as FlatpickrInstance, FlatpickrFn } from 'flatpickr/dist/types/instance';
 const flatpickr: FlatpickrFn = (flatpickr_ && flatpickr_['default'] || flatpickr_) as any; // patch for rollup
 
@@ -128,6 +128,8 @@ export class CompoundDateFilter implements Filter {
         this.flatInstance.clear();
       }
     }
+    this._filterElm.classList.remove('filled');
+    this._filterDivInputElm.classList.remove('filled');
   }
 
   /**
@@ -158,12 +160,24 @@ export class CompoundDateFilter implements Filter {
     }
   }
 
+  getValues() {
+    return this._currentDate;
+  }
+
   /** Set value(s) in the DOM element, we can optionally pass an operator and/or trigger a change event */
   setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString) {
-    if (this.flatInstance && values) {
+    if (this.flatInstance) {
       const newValue = Array.isArray(values) ? values[0] : values;
-      this._currentDate = newValue as Date;
-      this.flatInstance.setDate(newValue as DateOption);
+      this._currentDate = (values && newValue) ? newValue as Date : undefined;
+      this.flatInstance.setDate(this._currentDate || '');
+    }
+
+    if (this.getValues()) {
+      this._filterElm.classList.add('filled');
+      this._filterDivInputElm.classList.add('filled');
+    } else {
+      this._filterElm.classList.remove('filled');
+      this._filterDivInputElm.classList.remove('filled');
     }
 
     // set the operator, in the DOM as well, when defined

packages/common/src/filters/compoundInputFilter.ts

@@ -120,6 +120,8 @@ export class CompoundInputFilter implements Filter {
       this._selectOperatorElm.selectedIndex = 0;
       this._filterInputElm.value = '';
       this.onTriggerEvent(undefined);
+      this._filterElm.classList.remove('filled');
+      this._filterInputElm.classList.remove('filled');
     }
   }
 
@@ -132,11 +134,25 @@ export class CompoundInputFilter implements Filter {
     this._filterElm?.remove?.();
   }
 
+  getValues() {
+    return this._filterInputElm.value;
+  }
+
   /** Set value(s) on the DOM element */
   setValues(values: SearchTerm[] | SearchTerm, operator?: OperatorType | OperatorString) {
+    let newInputValue = '';
     if (values) {
       const newValue = Array.isArray(values) ? values[0] : values;
-      this._filterInputElm.value = `${newValue ?? ''}`;
+      newInputValue = `${newValue ?? ''}`;
+    }
+    this._filterInputElm.value = newInputValue;
+
+    if (this.getValues() !== '') {
+      this._filterElm.classList.add('filled');
+      this._filterInputElm.classList.add('filled');
+    } else {
+      this._filterElm.classList.remove('filled');
+      this._filterInputElm.classList.remove('filled');
     }
 
     // set the operator, in the DOM as well, when defined

packages/common/src/filters/compoundSliderFilter.ts

@@ -12,7 +12,7 @@ import {
 import { Constants } from '../constants';
 import { OperatorString, OperatorType, SearchTerm } from '../enums/index';
 import { buildSelectOperator } from './filterUtilities';
-import { emptyElement, getTranslationPrefix, mapOperatorToShorthandDesignation, toSentenceCase } from '../services/utilities';
+import { emptyElement, getTranslationPrefix, hasData, mapOperatorToShorthandDesignation, toSentenceCase } from '../services/utilities';
 import { BindingEventService } from '../services/bindingEvent.service';
 import { TranslaterService } from '../services/translater.service';
 
@@ -29,6 +29,7 @@ export class CompoundSliderFilter implements Filter {
   protected _elementRangeOutputId = '';
   protected _operator?: OperatorType | OperatorString;
   protected containerInputGroupElm?: HTMLDivElement;
+  protected divContainerFilterElm?: HTMLDivElement;
   protected filterElm!: HTMLDivElement;
   protected filterInputElm!: HTMLInputElement;
   protected filterNumberElm?: HTMLSpanElement;
@@ -135,6 +136,7 @@ export class CompoundSliderFilter implements Filter {
       }
       this.onTriggerEvent(undefined);
       this.filterElm.classList.remove('filled');
+      this.divContainerFilterElm?.classList.remove('filled');
     }
   }
 
@@ -159,10 +161,18 @@ export class CompoundSliderFilter implements Filter {
   /** Set value(s) on the DOM element */
   setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString) {
     const newValue = Array.isArray(values) ? values[0] : values;
-    this._currentValue = +newValue;
+    this._currentValue = hasData(newValue) ? +newValue : undefined;
     this.filterInputElm.value = `${newValue ?? ''}`;
     if (this.filterNumberElm) {
-      this.filterNumberElm.textContent = `${newValue ?? ''}`;
+      this.filterNumberElm.textContent = `${this._currentValue ?? ''}`;
+    }
+
+    if (this.getValues() !== undefined) {
+      this.filterElm.classList.add('filled');
+      this.divContainerFilterElm?.classList.add('filled');
+    } else {
+      this.filterElm.classList.remove('filled');
+      this.divContainerFilterElm?.classList.remove('filled');
     }
 
     // set the operator, in the DOM as well, when defined
@@ -259,14 +269,14 @@ export class CompoundSliderFilter implements Filter {
     this.filterInputElm.name = this._elementRangeInputId;
     this.filterInputElm.setAttribute('aria-label', this.columnFilter?.ariaLabel ?? `${toSentenceCase(columnId + '')} Search Filter`);
 
-    const divContainerFilterElm = document.createElement('div');
-    divContainerFilterElm.className = `form-group search-filter slider-container filter-${columnId}`;
+    this.divContainerFilterElm = document.createElement('div');
+    this.divContainerFilterElm.className = `form-group search-filter slider-container filter-${columnId}`;
 
     this.containerInputGroupElm = document.createElement('div');
     this.containerInputGroupElm.className = `input-group search-filter filter-${columnId}`;
     this.containerInputGroupElm.appendChild(spanPrependElm);
     this.containerInputGroupElm.appendChild(this.filterInputElm);
-    divContainerFilterElm.appendChild(this.containerInputGroupElm);
+    this.divContainerFilterElm.appendChild(this.containerInputGroupElm);
 
     if (!this.filterParams.hideSliderNumber) {
       this.containerInputGroupElm.classList.add('input-group');
@@ -282,7 +292,7 @@ export class CompoundSliderFilter implements Filter {
       this.containerInputGroupElm.appendChild(divGroupAppendElm);
     }
 
-    divContainerFilterElm.dataset.columnid = `${columnId}`;
+    this.divContainerFilterElm.dataset.columnid = `${columnId}`;
 
     if (this.operator) {
       const operatorShorthand = mapOperatorToShorthandDesignation(this.operator);
@@ -291,13 +301,13 @@ export class CompoundSliderFilter implements Filter {
 
     // if there's a search term, we will add the "filled" class for styling purposes
     if (searchTerm) {
-      divContainerFilterElm.classList.add('filled');
+      this.divContainerFilterElm.classList.add('filled');
     }
 
     // append the new DOM element to the header row
-    headerElm.appendChild(divContainerFilterElm);
+    headerElm.appendChild(this.divContainerFilterElm);
 
-    return divContainerFilterElm;
+    return this.divContainerFilterElm;
   }
 
   protected handleInputChange(event: Event) {