Merge branch '10.2.x' into dTsvetkov/fix-issue-8320-master

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss

@@ -19,6 +19,7 @@
 /// @param {Color} $context-menu-color-active [null] - Sets the text color for active context menus.
 /// @param {Color} $dock-background [null] - Sets the background color of the dock manager.
 /// @param {Color} $dock-text [null] - Sets the text color of the dock manager.
+/// @param {Color} $drop-shadow-background [null] - Sets the drop-shadow background color.
 /// @param {Color} $floating-pane-border-color [null] - Sets the border color for floating panes.
 /// @param {Color} $flyout-shadow-color [null] - Sets the flyout shadow color.
 /// @param {Color} $joystick-background [null] - Sets the background color of the joystick.

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dock-manager.scss

@@ -17,6 +17,7 @@
 /// @prop {Color} context-menu-color [null] - Sets the text color for context menus.
 /// @prop {Color} dock-background [null] - Sets the background color of the dock manager.
 /// @prop {Color} dock-text [null] - Sets the text color of the dock manager.
+/// @prop {Color} drop-shadow-background [igx-color: 'primary', rgba: .2] - Sets the drop-shadow background color.
 /// @prop {Color} floating-pane-border-color [igx-color: 'surface'] - Sets the border color for floating panes.
 /// @prop {Color} flyout-shadow-color [rgba(0, 0, 0, .08)] - Sets the flyout shadow color.
 /// @prop {Color} joystick-background [null] - Sets the background color of the joystick.
@@ -62,6 +63,10 @@ $_light-dock-manager: (
     context-menu-color: null,
     dock-background: null,
     dock-text: null,
+    drop-shadow-background: (
+        igx-color: ('primary', 500),
+        rgba: .2
+    ),
     floating-pane-border-color: (
         igx-color: 'surface',
     ),

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -152,7 +152,9 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         });
 
         esf.listDataLoaded.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            this.filterListData();
+            this.searchValue ?
+                this.clearInput() :
+                this.filterListData();
         });
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -4651,7 +4651,49 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(excelMenu).not.toBeNull();
             expect(inputNativeElement.value).toBe('', 'input isn\'t cleared correctly');
         }));
-});
+
+        it('Should clear search criteria when selecting clear column filters option.', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+
+            let checkboxes = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
+            fix.detectChanges();
+
+            checkboxes[0].click();
+            tick();
+            fix.detectChanges();
+
+            checkboxes[2].click();
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix);
+            tick();
+            fix.detectChanges();
+            expect(grid.filteredData.length).toEqual(1);
+
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+            flush();
+
+            let inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, 'Net', fix);
+
+            const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(3, 'incorrect rendered list items count');
+
+            GridFunctions.clickClearFilterInExcelStyleFiltering(fix);
+            flush();
+            expect(grid.filteredData).toBeNull();
+
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            expect(inputNativeElement.value).toBe('', 'search criteria is not cleared');
+
+            checkboxes = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
+            const listItemsCheckboxes = checkboxes.slice(1, checkboxes.length);
+            for (const checkbox of listItemsCheckboxes) {
+                ControlsFunction.verifyCheckboxState(checkbox.parentElement);
+            }
+        }));
+    });
 
     describe('Templates: ', () => {
         let fix, grid;
@@ -4801,6 +4843,23 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             GridSelectionFunctions.verifyColumnAndCellsSelected(columnId, false);
 
         });
+
+        it('Should reset esf menu with templates on column change', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
+            flush();
+
+            let inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, 20, fix);
+
+            const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(3, 'incorrect rendered list items count');
+
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+            flush();
+
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            expect(inputNativeElement.value).toBe('', 'input value didn\'t reset');
+        }));
     });
 
     describe('Load values on demand', () => {