Merge branch '9.0.x' into fix-7351-9.0x

Author: ChronosSF

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -379,7 +379,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
         const result = [];
         start = this.getDateOnly(start);
         end = this.getDateOnly(end);
-        while (start.getTime() !== end.getTime()) {
+        while (start.getTime() < end.getTime()) {
             start = this.calendarModel.timedelta(start, 'day', 1);
             result.push(start);
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -108,7 +108,8 @@
 
     %grid-excel-sort {
         display: block;
-        padding: rem(8px) rem(16px);
+        padding-top: rem(8px);
+        padding-bottom: rem(8px);
 
         header {
             color: igx-color($palette, 'grays', 700);
@@ -239,7 +240,8 @@
         }
 
         %grid-excel-sort {
-            padding: rem(8px);
+            padding-top: rem(8px);
+            padding-bottom: rem(8px);
         }
 
         %grid-excel-actions {
@@ -271,7 +273,8 @@
         }
 
         %grid-excel-sort {
-            padding: rem(4px);
+            padding-top: rem(4px);
+            padding-bottom: rem(4px);
 
             @extend %grid-excel-action--compact;
 

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts

@@ -593,6 +593,31 @@ describe('IgxAutocomplete', () => {
             UIInteractions.triggerKeyDownEvtUponElem('enter', input.nativeElement, true);
             expect(fixture.componentInstance.townSelected).toBe('s');
         }));
+        it('Should trigger onItemSelected only once when the event is cancelled (issue #7483)', fakeAsync(() => {
+            spyOn(autocomplete.onItemSelected, 'emit').and.callThrough();
+
+            fixture.componentInstance.onItemSelected = (args) => { args.cancel = true; };
+            UIInteractions.setInputElementValue(input, 's', fixture);
+            fixture.detectChanges();
+            tick();
+            UIInteractions.triggerKeyDownEvtUponElem('enter', input.nativeElement, true);
+            expect(fixture.componentInstance.townSelected).toBe('s');
+            tick();
+            fixture.detectChanges();
+            expect(autocomplete.onItemSelected.emit).toHaveBeenCalledTimes(1);
+            expect(autocomplete.onItemSelected.emit).toHaveBeenCalledWith({ value: 'Sofia', cancel: true });
+
+            fixture.componentInstance.onItemSelected = (args) => { args.cancel = true; };
+            UIInteractions.setInputElementValue(input, 's', fixture);
+            fixture.detectChanges();
+            tick();
+            UIInteractions.triggerKeyDownEvtUponElem('enter', input.nativeElement, true);
+            expect(fixture.componentInstance.townSelected).toBe('s');
+            tick();
+            fixture.detectChanges();
+            expect(autocomplete.onItemSelected.emit).toHaveBeenCalledTimes(2);
+            expect(autocomplete.onItemSelected.emit).toHaveBeenCalledWith({ value: 'Sofia', cancel: true });
+        }));
         it('Should call onInput/open/close methods properly', fakeAsync(() => {
             let startsWith = 'g';
             spyOn(autocomplete, 'onInput').and.callThrough();

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts

@@ -3,7 +3,7 @@ import {
     NgModule, ElementRef, HostListener, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { NgModel, FormControlName } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { first, takeUntil } from 'rxjs/operators';
 import { CancelableEventArgs, IBaseEventArgs } from '../../core/utils';
 import { OverlaySettings, AbsoluteScrollStrategy, IScrollStrategy, IPositionStrategy, AutoPositionStrategy } from '../../services/index';
@@ -68,6 +68,9 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         excludePositionTarget: true
     };
 
+    /** @hidden  @internal */
+    private subscriptions: Subscription[] = [];
+
     protected id: string;
     protected dropDownOpened$ = new Subject<boolean>();
     protected get model() {
@@ -280,9 +283,18 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         // If no drop-down width is set, the drop-down will be as wide as the autocomplete input;
         this.target.width = this.target.width || (this.parentElement.clientWidth + 'px');
         this.target.open(this.settings);
-        this.target.onSelection.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.select);
-        this.target.onOpened.pipe(first()).subscribe(this.highlightFirstItem);
-        this.target.children.changes.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.highlightFirstItem);
+
+        // unsubscribe from previous subscriptions, before creating new subscriptions.
+        this.unsubscribe();
+
+        this.subscriptions.push(this.target.onSelection.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.select));
+        this.subscriptions.push(this.target.onOpened.pipe(first()).subscribe(this.highlightFirstItem));
+        this.subscriptions.push(this.target.children.changes.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.highlightFirstItem));
+    }
+
+    /** @hidden  @internal */
+    private unsubscribe() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
     }
 
     private get collapsed(): boolean {

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -540,10 +540,6 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
         return false;
     }
 
-    public atInexistingPage(): boolean {
-        return this.grid.totalPages - 1 > this.grid.page;
-    }
-
     public get_row_expansion_state(record: any): boolean {
         const grid = this.grid;
         const states = grid.expansionStates;

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html

@@ -84,11 +84,10 @@ <h4>{{ column.header || column.field }}</h4>
         </div>
     </header>
 
-    <div *ngIf="column.sortable">
-        <ng-container *ngTemplateOutlet="sortingTemplate"></ng-container>
-    </div>
-
     <section class="igx-excel-filter__actions">
+        <div *ngIf="column.sortable">
+            <ng-container *ngTemplateOutlet="sortingTemplate"></ng-container>
+        </div>
 
         <div *ngIf="column.movable">
             <ng-container *ngTemplateOutlet="movingTemplate"></ng-container>

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

@@ -179,7 +179,7 @@ export class IgxFilteringService implements OnDestroy {
     }
 
     /**
-     * Clear the filter of a given column.
+     * Clears the filter of a given column if name is provided. Otherwise clears the filters of all columns.
      */
     public clearFilter(field: string): void {
         if (field) {
@@ -199,6 +199,11 @@ export class IgxFilteringService implements OnDestroy {
         if (field) {
             const expressions = this.getExpressions(field);
             expressions.length = 0;
+        } else {
+            this.grid.columns.forEach(c => {
+                const expressions = this.getExpressions(c.field);
+                expressions.length = 0;
+            });
         }
 
         this.isFiltering = false;

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -28,7 +28,7 @@ import {
     Directive
 } from '@angular/core';
 import ResizeObserver from 'resize-observer-polyfill';
-import { Subject, combineLatest, pipe } from 'rxjs';
+import { Subject, pipe } from 'rxjs';
 import { takeUntil, first, filter, throttleTime, map } from 'rxjs/operators';
 import { cloneArray, isEdge, isNavigationKey, flatten, mergeObjects, isIE } from '../core/utils';
 import { DataType } from '../data-operations/data-util';
@@ -2495,11 +2495,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.zone.run(() => {
             this.zone.onStable.pipe(first()).subscribe(() => {
                 this.verticalScrollContainer.onChunkLoad.emit(this.verticalScrollContainer.state);
+                if (this.rowEditable) {
+                    this.changeRowEditingOverlayStateOnScroll(this.rowInEditMode);
+                }
             });
-
-            if (this.rowEditable) {
-                this.changeRowEditingOverlayStateOnScroll(this.rowInEditMode);
-            }
         });
         this.disableTransitions = false;
 
@@ -2640,12 +2639,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             this.summaryService.clearSummaryCache();
             this._pipeTrigger++;
             this.notifyChanges();
-            if (this.transactions.getAggregatedChanges(false).length === 0) {
-                // Needs better check, calling 'transactions.clear()' will also trigger this
-                if (this.gridAPI.atInexistingPage()) {
-                    this.page--;
-                }
-            }
         });
 
         this.resizeNotify.pipe(destructor, filter(() => !this._init), throttleTime(100))
@@ -2822,6 +2815,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.setupColumns();
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public setFilteredSortedData(data) {
+        this._filteredSortedData = data;
+        this.refreshSearch(true, false);
+    }
+
     /**
      * @hidden @internal
      */
@@ -4025,7 +4027,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * ```
      * @param updateActiveInfo
     */
-    public refreshSearch(updateActiveInfo?: boolean): number {
+    public refreshSearch(updateActiveInfo?: boolean, endEdit = true): number {
         if (this.lastSearchInfo.searchText) {
             this.rebuildMatchCache();
 
@@ -4040,7 +4042,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 });
             }
 
-            return this.find(this.lastSearchInfo.searchText, 0, this.lastSearchInfo.caseSensitive, this.lastSearchInfo.exactMatch, false);
+            return this.find(this.lastSearchInfo.searchText,
+                0,
+                this.lastSearchInfo.caseSensitive,
+                this.lastSearchInfo.exactMatch,
+                false,
+                endEdit);
         } else {
             return 0;
         }
@@ -5357,12 +5364,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return col.field + col._calcWidth;
     }
 
-    private find(text: string, increment: number, caseSensitive?: boolean, exactMatch?: boolean, scroll?: boolean) {
+    private find(text: string, increment: number, caseSensitive?: boolean, exactMatch?: boolean, scroll?: boolean, endEdit = true) {
         if (!this.rowList) {
             return 0;
         }
 
-        this.endEdit(false);
+        if (endEdit) {
+            this.endEdit(false);
+        }
 
         if (!text) {
             this.clearSearch();
@@ -5438,10 +5447,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     get filteredSortedData(): any[] {
         return this._filteredSortedData;
     }
-    set filteredSortedData(value: any[]) {
-        this._filteredSortedData = value;
-        this.refreshSearch(true);
-    }
 
     /**
      * @hidden

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

@@ -2047,6 +2047,40 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(false, 'chip is not committed');
             expect(input.value).toBe('', 'input value is present and not committed');
         }));
+
+        it('should not retain expression values in cell filter after calling grid clearFilter() method.', fakeAsync(() => {
+            // Click on 'ProductName' filter chip
+            GridFunctions.clickFilterCellChipUI(fix, 'ProductName');
+            fix.detectChanges();
+
+            // Enter expression
+            GridFunctions.typeValueInFilterRowInput('NetAdvantage', fix);
+            tick(DEBOUNCETIME);
+            GridFunctions.closeFilterRow(fix);
+            fix.detectChanges();
+
+            // Verify filtered data
+            expect(grid.filteredData.length).toEqual(1);
+
+            // Clear filters of all columns
+            grid.clearFilter();
+            fix.detectChanges();
+
+            // Verify filtered data
+            expect(grid.filteredData).toBeNull();
+
+            // Click on 'ProductName' filter chip
+            GridFunctions.clickFilterCellChipUI(fix, 'ProductName');
+            fix.detectChanges();
+
+            // Verify there are no chips since we cleared all filters
+            const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
+            const conditionChips = filteringRow.queryAll(By.directive(IgxChipComponent));
+            expect(conditionChips.length).toBe(0);
+
+            // Verify filtered data
+            expect(grid.filteredData).toBeNull();
+        }));
     });
 
     describe('Integration scenarios', () => {
@@ -2352,8 +2386,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(colOperands[0].nativeElement.innerText).toEqual('AND');
             expect(colIndicator.length).toEqual(0);
         }));
-
-
     });
 
     describe(null, () => {

projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

@@ -38,7 +38,7 @@ export class IgxGridSortingPipe implements PipeTransform {
         } else {
             result = DataUtil.sort(cloneArray(collection), expressions, sorting);
         }
-        grid.filteredSortedData = result;
+        grid.setFilteredSortedData(result);
 
         return result;
     }