Merge branch '9.0.x' into ibarakov/fix-7072-9.0.x

Author: kdinev

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/date-picker/date-picker.component.html

@@ -24,11 +24,11 @@
         <input
             class="igx-date-picker__input-date"
             igxInput
-            [igxTextSelection]="true"
             type="text"
             [value]="transformedDate"
             [igxMask]="inputMask"
             [placeholder]="mask"
+            [igxTextSelection]="true"
             [disabled]="disabled"
             [displayValuePipe]="displayValuePipe"
             [focusedValuePipe]="inputValuePipe"

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/directives/input/input.directive.spec.ts

@@ -615,6 +615,29 @@ describe('IgxInput', () => {
         expect(inputGroup.element.nativeElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(false);
         expect(inputGroup.element.nativeElement.classList.contains(INPUT_GROUP_VALID_CSS_CLASS)).toBe(false);
     });
+
+    it('should not set null or undefined as input value', () => {
+        const fixture = TestBed.createComponent(InputComponent);
+        fixture.detectChanges();
+
+        const igxInput = fixture.componentInstance.igxInput;
+        expect(igxInput.value).toBe('');
+
+        igxInput.value = undefined;
+        expect(igxInput.value).toBe('');
+
+        igxInput.value = null;
+        expect(igxInput.value).toBe('');
+
+        igxInput.value = 0;
+        expect(igxInput.value).toBe('0');
+
+        igxInput.value = false;
+        expect(igxInput.value).toBe('false');
+
+        igxInput.value = 'Test';
+        expect(igxInput.value).toBe('Test');
+    });
 });
 
 @Component({ template: `

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

@@ -74,7 +74,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
      */
     @Input('value')
     set value(value: any) {
-        this.nativeElement.value = value;
+        this.nativeElement.value = value ?? '';
         this.checkValidity();
     }
     /**

projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts

@@ -62,6 +62,8 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
     private _nextX;
     private _nextY;
     private parentElement;
+    private baseDeltaMultiplier = 1 / 120;
+    private firefoxDeltaMultiplier = 1 / 30;
 
     ngOnInit(): void {
         this._zone.runOutsideAngular(() => {
@@ -106,28 +108,30 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
         if (evt.wheelDeltaX) {
             /* Option supported on Chrome, Safari, Opera.
             /* 120 is default for mousewheel on these browsers. Other values are for trackpads */
-            scrollDeltaX = -evt.wheelDeltaX / 120;
+            scrollDeltaX = -evt.wheelDeltaX * this.baseDeltaMultiplier;
 
             if (-minWheelStep < scrollDeltaX && scrollDeltaX < minWheelStep) {
                 scrollDeltaX = Math.sign(scrollDeltaX) * minWheelStep;
             }
         } else if (evt.deltaX) {
             /* For other browsers that don't provide wheelDelta, use the deltaY to determine direction and pass default values. */
-            scrollDeltaX = this.calcAxisCoords(evt.deltaX, -1, 1);
+            const deltaScaledX = evt.deltaX * (evt.deltaMode === 0 ?  this.firefoxDeltaMultiplier : 1);
+            scrollDeltaX = this.calcAxisCoords(deltaScaledX, -1, 1);
         }
 
         /** Get delta for the Y axis*/
         if (evt.wheelDeltaY) {
             /* Option supported on Chrome, Safari, Opera.
             /* 120 is default for mousewheel on these browsers. Other values are for trackpads */
-            scrollDeltaY = -evt.wheelDeltaY / 120;
+            scrollDeltaY = -evt.wheelDeltaY * this.baseDeltaMultiplier;
 
             if (-minWheelStep < scrollDeltaY && scrollDeltaY < minWheelStep) {
                 scrollDeltaY = Math.sign(scrollDeltaY) * minWheelStep;
             }
         } else if (evt.deltaY) {
             /* For other browsers that don't provide wheelDelta, use the deltaY to determine direction and pass default values. */
-            scrollDeltaY = this.calcAxisCoords(evt.deltaY, -1, 1);
+            const deltaScaledY = evt.deltaY * (evt.deltaMode === 0 ?  this.firefoxDeltaMultiplier : 1);
+            scrollDeltaY = this.calcAxisCoords(deltaScaledY, -1, 1);
         }
         if (scrollDeltaX && this.IgxScrollInertiaDirection === 'horizontal') {
             this._scrollToX(

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>