fix(timepicker): allowing better scroll on touchpads #6292

Author: ChronosSF

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 = 15;
+    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);