Merge branch 'master' into ibarakov/fix-8247-master

Author: zdrawku

projects/igniteui-angular/migrations/common/tsLogger.ts

@@ -23,9 +23,9 @@ export class Logger implements ts.server.Logger {
     }
 
     public msg(s: string, type: ts.server.Msg = ts.server.Msg.Err) {
+        if (!this.traceToConsole) { return; }
         if (type === ts.server.Msg.Info) {
-            // TODO: Info ignored for now, hook into context in the future
-            // console.log(s);
+            console.log(s);
         }
         if (type === ts.server.Msg.Err) {
             console.error(s);

projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -23,7 +23,7 @@ <h2 class="igx-calendar__header-date">
 </div>
 
 <div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (@animateView.done)="viewRendered($event)" (swiperight)="previousMonth()"
-    (swipeleft)="nextMonth()">
+    (swipeleft)="nextMonth()" (pointerdown)="suppressBlur()">
     <div class="igx-calendar-picker">
         <div tabindex="0" class="igx-calendar-picker__prev" #prevMonthBtn
             igxCalendarScrollMonth [startScroll]="startPrevMonthScroll" [stopScroll]="stopMonthScroll"  [ngStyle]="{

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

@@ -419,7 +419,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @internal
      */
     private _monthsViewNumber = 1;
-
     /**
      * @hidden
      * @internal
@@ -481,6 +480,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         this.isKeydownTrigger = isKeydownTrigger;
     }
 
+    public suppressBlur() {
+        this.monthViews?.forEach(d => d.shouldResetDate = false);
+        if (this.daysView) { this.daysView.shouldResetDate = false; }
+    }
+
     /**
      * Change to next month
      *
@@ -540,6 +544,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         } else if (this.monthScrollDirection === ScrollMonth.NEXT) {
             this.nextMonthBtn.nativeElement.focus();
         }
+        if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
+            this.resetActiveDate();
+        }
 
         this.monthScrollDirection = ScrollMonth.NONE;
     }
@@ -765,6 +772,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
     public viewRendered(event) {
         if (event.fromState !== 'void') {
             this.activeViewChanged.emit(this.activeView);
+            if (this.activeView === 0) { this.resetActiveDate(); }
         }
     }
 

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts

@@ -119,12 +119,12 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
      */
     public nextMonthView: IgxDaysViewComponent;
 
-    /**
-     * @hidden
-     */
+    /** @hidden */
     public prevMonthView: IgxDaysViewComponent;
-    public _activeDate;
-    private shouldResetDate = true;
+    /** @hidden */
+    public shouldResetDate = true;
+    private _activeDate;
+
 
     /**
      * The default css class applied to the component.

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -212,6 +212,14 @@
         @extend %igx-grid__tr--edit !optional;
     }
 
+    @include e(tr, $m: add-animate) {
+        @extend %igx-grid__tr--add-animate !optional;
+    }
+
+    @include e(tr, $m: inner) {
+        @extend %igx-grid__tr--inner !optional;
+    }
+
     @include e(tr, $m: group) {
         @extend %grid-row--group !optional;
     }

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

@@ -583,6 +583,8 @@
 @mixin igx-grid($theme) {
     @include igx-root-css-vars($theme);
 
+    @include scale-in-ver-center();
+
     $palette: map-get($theme, 'palette');
 
     $variant: map-get($theme, variant);
@@ -1195,6 +1197,14 @@
         }
     }
 
+    %igx-grid__tr--inner {
+        display: flex;
+    }
+
+    %igx-grid__tr--add-animate {
+        @include animation(scale-in-ver-center .2s $ease-in-out-quad);
+    }
+
     %grid-row--edit-mrl {
         &:first-of-type::after {
             top: 0;

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

@@ -53,10 +53,14 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
     constructor(public esf: IgxGridExcelStyleFilteringComponent) {
         this.esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
             if (this.esf.grid) {
-                this._subMenuOverlaySettings.outlet = (this.esf.grid as any).outlet;
+                this._subMenuOverlaySettings.outlet = this.esf.grid.outlet;
             }
         });
-     }
+
+        if (this.esf.grid) {
+            this._subMenuOverlaySettings.outlet = this.esf.grid.outlet;
+        }
+    }
 
     ngOnDestroy(): void {
         this.destroy$.next(true);
@@ -147,7 +151,7 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
         const exprTree = this.esf.column.filteringExpressionsTree;
         return exprTree && exprTree.filteringOperands && exprTree.filteringOperands.length &&
             !((exprTree.filteringOperands[0] as IFilteringExpression).condition &&
-            (exprTree.filteringOperands[0] as IFilteringExpression).condition.name === 'in');
+                (exprTree.filteringOperands[0] as IFilteringExpression).condition.name === 'in');
     }
 
     /**

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

@@ -500,7 +500,15 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
     }
 
     private generateUniqueValues(columnValues: any[]) {
-        this.uniqueValues = Array.from(new Set(columnValues));
+        if (this.column.dataType === DataType.String && this.column.filteringIgnoreCase) {
+            const filteredUniqueValues = columnValues.map(s => s?.toLowerCase())
+                .reduce((map, val, i) => map.get(val) ? map : map.set(val, columnValues[i]),
+                new Map);
+
+            this.uniqueValues = Array.from(filteredUniqueValues.values());
+        } else {
+            this.uniqueValues = Array.from(new Set(columnValues));
+        }
     }
 
     private generateFilterValues(isDateColumn: boolean = false) {

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

@@ -3,7 +3,7 @@ import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IFilteringExpression, FilteringLogic } from '../../data-operations/filtering-expression.interface';
 import { Subject } from 'rxjs';
-import { takeUntil, filter } from 'rxjs/operators';
+import { takeUntil, first } from 'rxjs/operators';
 import { IForOfState } from '../../directives/for-of/for_of.directive';
 import { IgxColumnComponent } from '../columns/column.component';
 import { IFilteringOperation } from '../../data-operations/filtering-condition';
@@ -65,7 +65,8 @@ export class IgxFilteringService implements OnDestroy {
     }
 
     public toggleFilterDropdown(element, column, classRef) {
-        if (!this._componentOverlayId || (this.column  && this.column.field !== column.field)) {
+        if (!this._componentOverlayId || (this.column && this.column.field !== column.field)) {
+            this.initFilteringSettings();
             this.column = column;
             const filterIcon = this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
             const filterIconTarget = element.querySelector('.' + filterIcon);
@@ -97,8 +98,9 @@ export class IgxFilteringService implements OnDestroy {
             positionStrategy: new ExcelStylePositionStrategy(this._filterMenuPositionSettings),
             scrollStrategy: new AbsoluteScrollStrategy()
         };
+
         this._overlayService.onOpening.pipe(
-            filter((overlay) => overlay.id === this._componentOverlayId),
+            first((overlay) => overlay.id === this._componentOverlayId),
             takeUntil(this.destroy$)).subscribe((eventArgs) => {
                 const instance = this.grid.excelStyleFilteringComponent ?
                     this.grid.excelStyleFilteringComponent :
@@ -111,7 +113,7 @@ export class IgxFilteringService implements OnDestroy {
             });
 
         this._overlayService.onClosed.pipe(
-            filter(overlay => overlay.id === this._componentOverlayId),
+            first((overlay) => overlay.id === this._componentOverlayId),
             takeUntil(this.destroy$)).subscribe((eventArgs) => {
                 const instance = this.grid.excelStyleFilteringComponent ?
                     this.grid.excelStyleFilteringComponent :
@@ -354,7 +356,7 @@ export class IgxFilteringService implements OnDestroy {
             }
 
             if ((currExpressionUI.beforeOperator === undefined || currExpressionUI.beforeOperator === null ||
-                 currExpressionUI.beforeOperator === FilteringLogic.Or) &&
+                currExpressionUI.beforeOperator === FilteringLogic.Or) &&
                 currExpressionUI.afterOperator === FilteringLogic.And) {
 
                 currAndBranch = new FilteringExpressionsTree(FilteringLogic.And, columnId);
@@ -481,8 +483,8 @@ export class IgxFilteringService implements OnDestroy {
     }
 
     private generateExpressionsListRecursive(expressions: IFilteringExpressionsTree | IFilteringExpression,
-                                    operator: FilteringLogic,
-                                    expressionsUIs: ExpressionUI[]): void {
+        operator: FilteringLogic,
+        expressionsUIs: ExpressionUI[]): void {
         if (!expressions) {
             return;
         }

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

@@ -4144,11 +4144,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             this.navigateTo(newRowIndex, -1);
         }
         const row = this.getRowByIndex(index + 1);
-        const cell = row.cells.find(c => c.editable);
-        if (cell) {
-            cell.setEditMode(true);
-            cell.activate();
-        }
+        row.animateAdd = true;
+        row.onAnimationEnd.pipe(first()).subscribe(() => {
+            row.animateAdd = false;
+            const cell = row.cells.find(c => c.editable);
+            if (cell) {
+                cell.setEditMode(true);
+                cell.activate();
+            }
+        });
     }
 
     /**