Merge branch '20.0.x' into ikitanov/fix#15913-20.0.x

Author: RivaIvanova

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts

@@ -1123,7 +1123,13 @@ describe('IgxDateTimeEditor', () => {
                 inputElement.triggerEventHandler('focus', {});
                 fixture.detectChanges();
                 dateTimeEditorDirective.nativeElement.setSelectionRange(1, 1);
-                inputElement.triggerEventHandler('wheel', new WheelEvent('wheel', { deltaY: 1 }));
+                // typical wheel scrolls are 120px and the date-editor employs touchpad-friendly implementation
+                // that accumulates to 50 before incrementing/decrementing
+                // we'll test the behavior by doing two scrolls with the first one not expected to trigger a change
+                inputElement.triggerEventHandler('wheel', new WheelEvent('wheel', { deltaY: 20 }));
+                fixture.detectChanges();
+                expect(dateTimeEditorDirective.value.getDate()).toEqual(today.getDate());
+                inputElement.triggerEventHandler('wheel', new WheelEvent('wheel', { deltaY: 40 }));
                 fixture.detectChanges();
                 expect(dateTimeEditorDirective.value.getDate()).toEqual(today.getDate() - 1);
             }));

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts

@@ -228,7 +228,10 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     @Output()
     public validationFailed = new EventEmitter<IgxDateTimeEditorEventArgs>();
 
+
+    private readonly SCROLL_THRESHOLD = 50;
     private _inputFormat: string;
+    private _scrollAccumulator = 0;
     private _displayFormat: string;
     private _oldValue: Date;
     private _dateValue: Date;
@@ -313,10 +316,14 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
         }
         event.preventDefault();
         event.stopPropagation();
-        if (event.deltaY > 0) {
-            this.decrement();
-        } else {
-            this.increment();
+        this._scrollAccumulator += event.deltaY;
+        if (Math.abs(this._scrollAccumulator) > this.SCROLL_THRESHOLD) {
+            if (this._scrollAccumulator > 0) {
+                this.decrement();
+            } else {
+                this.increment();
+            }
+            this._scrollAccumulator = 0;
         }
     }
 

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -1,4 +1,5 @@
-import {
+import { useAnimation } from '@angular/animations';
+import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
@@ -52,6 +53,7 @@ import { IgxFocusDirective } from '../directives/focus/focus.directive';
 import { IgxInputDirective } from '../directives/input/input.directive';
 import { IgxInputGroupComponent } from '../input-group/input-group.component';
 import { IgxChipComponent } from '../chips/chip.component';
+import { fadeOut, scaleInCenter } from 'igniteui-angular/animations';
 
 /**
  * Providing reference to `IgxGridCellComponent`:
@@ -883,7 +885,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
                 modal: false,
                 positionStrategy: new AutoPositionStrategy({
                     horizontalStartPoint: HorizontalAlignment.Center,
-                    horizontalDirection: HorizontalAlignment.Center
+                    horizontalDirection: HorizontalAlignment.Center,
+                    openAnimation: useAnimation(scaleInCenter, { params: { duration: '150ms' } }),
+                    closeAnimation: useAnimation(fadeOut, { params: { duration: '75ms' } })
                 })
             }
         );

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

@@ -30,8 +30,8 @@
         [placeholder]="inputValuePlaceholder"
         [disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary"
         autocomplete="off"
-        [value]="expressionUI.expression.searchVal"
-        (input)="onValuesInput($event)"
+        [(ngModel)]="expressionUI.expression.searchVal"
+        (blur)="updateSearchValueOnBlur($event)"
     />
 </igx-input-group>
 

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

@@ -7,6 +7,7 @@ import {
     ChangeDetectorRef,
     ViewChild
 } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component';
 import { GridColumnDataType, DataUtil } from '../../../data-operations/data-util';
 import { IFilteringOperation } from '../../../data-operations/filtering-condition';
@@ -41,7 +42,7 @@ export interface ILogicOperatorChangedArgs extends IBaseEventArgs {
 @Component({
     selector: 'igx-excel-style-default-expression',
     templateUrl: './excel-style-default-expression.component.html',
-    imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective]
+    imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective]
 })
 export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
     @Input()
@@ -163,7 +164,7 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
         return this.grid.resourceStrings[`igx_grid_filter_${name}`] || name;
     }
 
-    public onValuesInput(eventArgs) {
+    public updateSearchValueOnBlur(eventArgs) {
         this.expressionUI.expression.searchVal = DataUtil.parseValue(this.column.dataType, eventArgs.target.value);
     }
 

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

@@ -3814,12 +3814,15 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             // set first expression's value
             GridFunctions.setInputValueESF(fix, 0, 0);
+            tick(100);
 
             // select second expression's operator
             GridFunctions.setOperatorESF(fix, 1, 1);
+            tick(100);
 
             // set second expression's value
             GridFunctions.setInputValueESF(fix, 1, 20);
+            tick(100);
 
             GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
 
@@ -6302,6 +6305,55 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
                 expect(input.value).toBe('');
             });
         }));
+
+        it('should correctly filter negative decimal values in Excel Style filtering', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 2);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.setInputValueESF(fix, 0, '-1');
+            tick(100);
+            fix.detectChanges();
+            expect(GridFunctions.getExcelFilteringInput(fix, 0).value).toBe('-1');
+
+            const applyButton = GridFunctions.getApplyExcelStyleCustomFiltering(fix);
+            applyButton.click();
+            tick(100);
+            fix.detectChanges();
+
+            expect(grid.filteredData.length).toBe(8);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 2);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.setInputValueESF(fix, 0, '-0.1');
+            tick(100);
+            fix.detectChanges();
+            expect(GridFunctions.getExcelFilteringInput(fix, 0).value).toBe('-0.1');
+
+            applyButton.click();
+            tick(100);
+            fix.detectChanges();
+
+            expect(grid.filteredData.length).toBe(8);
+        }));
     });
 
     describe('Templates: ', () => {

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

@@ -17,6 +17,7 @@ import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { IGridFormGroupCreatedEventArgs } from '../common/grid.interface';
 import { IgxTreeGridComponent } from '../tree-grid/tree-grid.component';
 import { IgxGridComponent } from './grid.component';
+import { AutoPositionStrategy, HorizontalAlignment, IgxOverlayService, VerticalAlignment } from '../../services/public_api';
 
 describe('IgxGrid - Validation #grid', () => {
 
@@ -187,6 +188,18 @@ describe('IgxGrid - Validation #grid', () => {
             const erorrMessage = cell.errorTooltip.first.elementRef.nativeElement.children[0].textContent;
             expect(erorrMessage).toEqual(' Entry should be at least 4 character(s) long ');
 
+            const overlayService = TestBed.inject(IgxOverlayService);
+            const info = overlayService.getOverlayById(cell.errorTooltip.first.overlayId);
+            const positionSettings = info.settings.positionStrategy.settings;
+
+            expect(info.settings.positionStrategy instanceof AutoPositionStrategy).toBe(true);
+            expect(positionSettings.horizontalStartPoint).toEqual(HorizontalAlignment.Center);
+            expect(positionSettings.horizontalDirection).toEqual(HorizontalAlignment.Center);
+            expect(positionSettings.verticalStartPoint).toEqual(VerticalAlignment.Bottom);
+            expect(positionSettings.verticalDirection).toEqual(VerticalAlignment.Bottom);
+            expect(positionSettings.openAnimation.options.params).toEqual({ duration: '150ms' });
+            expect(positionSettings.closeAnimation.options.params).toEqual({ duration: '75ms' });
+
             cell.errorTooltip.first.close();
             tick();
             fixture.detectChanges();

projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts

@@ -34,6 +34,14 @@ export class IgxItemListDirective implements OnInit, OnDestroy {
 
     public isActive: boolean;
 
+    private readonly SCROLL_THRESHOLD = 50;
+    private readonly PAN_THRESHOLD = 10;
+
+    /**
+     * accumulates wheel scrolls and triggers a change action above SCROLL_THRESHOLD
+     */
+    private scrollAccumulator = 0;
+
     constructor(
         @Inject(IGX_TIME_PICKER_COMPONENT) public timePicker: IgxTimePickerBase,
         private elementRef: ElementRef,
@@ -170,24 +178,35 @@ export class IgxItemListDirective implements OnInit, OnDestroy {
         event.preventDefault();
         event.stopPropagation();
 
-        const delta = event.deltaY;
-        if (delta !== 0) {
-            this.nextItem(delta);
+        this.scrollAccumulator += event.deltaY;
+        if (Math.abs(this.scrollAccumulator) > this.SCROLL_THRESHOLD) {
+            this.nextItem(this.scrollAccumulator);
+            this.scrollAccumulator = 0;
         }
     }
 
     /**
      * @hidden @internal
      */
     public ngOnInit() {
-        const hammerOptions: HammerOptions = { recognizers: [[HammerGesturesManager.Hammer?.Pan, { direction: HammerGesturesManager.Hammer?.DIRECTION_VERTICAL, threshold: 10 }]] };
+        const hammerOptions: HammerOptions = {
+            recognizers: [
+                [
+                    HammerGesturesManager.Hammer?.Pan,
+                    {
+                        direction: HammerGesturesManager.Hammer?.DIRECTION_VERTICAL,
+                        threshold: this.PAN_THRESHOLD
+                    }
+                ]
+            ]
+        };
         this.touchManager.addEventListener(this.elementRef.nativeElement, 'pan', this.onPanMove, hammerOptions);
     }
 
     /**
      * @hidden @internal
      */
-     public ngOnDestroy() {
+    public ngOnDestroy() {
         this.touchManager.destroy();
     }
 
@@ -355,7 +374,7 @@ export class IgxTimeItemDirective {
     private getHourPart(date: Date): string {
         const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.appliedFormat);
         const hourPart = inputDateParts.find(element => element.type === 'hours');
-        const ampmPart = inputDateParts.find(element =>element.format.indexOf('a') !== -1 || element.format === 'tt');
+        const ampmPart = inputDateParts.find(element => element.format.indexOf('a') !== -1 || element.format === 'tt');
         const hour = DateTimeUtil.getPartValue(date, hourPart, hourPart.format.length);
         if (ampmPart) {
             const ampm = DateTimeUtil.getPartValue(date, ampmPart, ampmPart.format.length);