igniteui-angular 22.2.0-rc.0 → 22.2.0-rc.2

package/fesm2022/igniteui-angular-core.mjs

@@ -46,10 +46,10 @@ class IgxNavigationService {
             return this.navs[id].close(...args);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavigationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavigationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavigationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -71,10 +71,10 @@ class IgxNavigationToggleDirective {
     toggleNavigationDrawer() {
         this.state.toggle(this.target, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavigationToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxNavigationToggleDirective, isStandalone: true, selector: "[igxNavToggle]", inputs: { target: ["igxNavToggle", "target"] }, host: { listeners: { "click": "toggleNavigationDrawer()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavigationToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxNavigationToggleDirective, isStandalone: true, selector: "[igxNavToggle]", inputs: { target: ["igxNavToggle", "target"] }, host: { listeners: { "click": "toggleNavigationDrawer()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavigationToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavigationToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxNavToggle]',
@@ -104,10 +104,10 @@ class IgxNavigationCloseDirective {
     closeNavigationDrawer() {
         this.state.close(this.target, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavigationCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxNavigationCloseDirective, isStandalone: true, selector: "[igxNavClose]", inputs: { target: ["igxNavClose", "target"] }, host: { listeners: { "click": "closeNavigationDrawer()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavigationCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxNavigationCloseDirective, isStandalone: true, selector: "[igxNavClose]", inputs: { target: ["igxNavClose", "target"] }, host: { listeners: { "click": "closeNavigationDrawer()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavigationCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavigationCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxNavClose]',
@@ -520,10 +520,10 @@ class PlatformUtil {
             this.KEYMAP.ARROW_DOWN, this.KEYMAP.ARROW_LEFT, this.KEYMAP.ARROW_RIGHT, this.KEYMAP.ARROW_UP
         ].includes(key);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PlatformUtil, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PlatformUtil, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: PlatformUtil, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: PlatformUtil, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PlatformUtil, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: PlatformUtil, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1010,10 +1010,10 @@ class IgxSelectionAPIService {
     get_empty() {
         return new Set();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectionAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectionAPIService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectionAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectionAPIService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSelectionAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSelectionAPIService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1109,9 +1109,10 @@ class IgxTouchManager {
                 return;
             }
             const gesture = this._createEvent(event);
-            // Defer `panStart` until movement actually begins, mirroring Hammer's `panstart`.
-            // A press with no movement (a tap) therefore never raises `panStart`.
             if (!this._panStarted) {
+                if (!this._canStartPan(gesture)) {
+                    return;
+                }
                 this._panStarted = true;
                 if (this.callbacks.panStart) {
                     this._runInAngular(() => this.callbacks.panStart?.(gesture));
@@ -1129,15 +1130,15 @@ class IgxTouchManager {
             if (!this._tracking || event.pointerId !== this._pointerId || !this._accepts(event.pointerType)) {
                 return;
             }
-            this._tracking = false;
-            this._pointerId = null;
             const gesture = this._createEvent(event);
+            const panStarted = this._panStarted;
+            this._resetTracking();
             this._runInAngular(() => {
                 if (this.callbacks.tap && gesture.distance < this._tapThreshold) {
                     this.callbacks.tap(gesture);
                     return;
                 }
-                if (this.callbacks.swipe &&
+                if (panStarted && this.callbacks.swipe &&
                     gesture.velocity > this._swipeVelocityThreshold &&
                     Math.abs(gesture.deltaX) > Math.abs(gesture.deltaY)) {
                     this.callbacks.swipe(gesture);
@@ -1152,10 +1153,9 @@ class IgxTouchManager {
             if (!this._tracking || event.pointerId !== this._pointerId) {
                 return;
             }
-            this._tracking = false;
-            this._pointerId = null;
+            const gesture = this._createEvent(event);
+            this._resetTracking();
             if (this.callbacks.panCancel) {
-                const gesture = this._createEvent(event);
                 this._runInAngular(() => this.callbacks.panCancel?.(gesture));
             }
         };
@@ -1163,14 +1163,17 @@ class IgxTouchManager {
             if (!(event instanceof TouchEvent)) {
                 return;
             }
-            // Prevent scrolling only while a gesture is actively tracked.
-            if (this._tracking && event.cancelable) {
+            // Preserve native scrolling and compatibility clicks while the contact is
+            // only a tap candidate. Suppress scrolling after a pan is recognized.
+            if (this._tracking && this._panStarted && event.cancelable) {
                 event.preventDefault();
             }
         };
         this._pointerTypes = options.pointerTypes ?? ['touch', 'pen'];
         this._setPointerCapture = options.setPointerCapture ?? true;
         this._tapThreshold = options.tapThreshold ?? 0;
+        this._panThreshold = options.panThreshold ?? 0;
+        this._panAxis = options.panAxis ?? 'all';
         this._swipeVelocityThreshold = options.swipeVelocityThreshold ?? 0.3;
         this._canStart = options.canStart ?? null;
         this._ngZone = options.ngZone ?? null;
@@ -1197,15 +1200,14 @@ class IgxTouchManager {
     }
     /** Detaches all listeners and stops tracking. */
     destroy() {
-        if (!this._supported) {
-            return;
+        if (this._supported) {
+            this.target.removeEventListener('pointerdown', this._onPointerDown);
+            this.target.removeEventListener('pointermove', this._onPointerMove);
+            this.target.removeEventListener('pointerup', this._onPointerUp);
+            this.target.removeEventListener('pointercancel', this._onPointerCancel);
+            this.target.removeEventListener('touchmove', this._onTouchMove);
         }
-        this.target.removeEventListener('pointerdown', this._onPointerDown);
-        this.target.removeEventListener('pointermove', this._onPointerMove);
-        this.target.removeEventListener('pointerup', this._onPointerUp);
-        this.target.removeEventListener('pointercancel', this._onPointerCancel);
-        this.target.removeEventListener('touchmove', this._onTouchMove);
-        this._tracking = false;
+        this._resetTracking();
     }
     _accepts(pointerType) {
         return this._pointerTypes.includes(pointerType);
@@ -1253,22 +1255,35 @@ class IgxTouchManager {
             }
         };
     }
-    /** Stops tracking the current gesture and best-effort releases the pointer capture. */
+    _canStartPan(event) {
+        if (event.distance < this._panThreshold) {
+            return false;
+        }
+        if (this._panAxis === 'horizontal') {
+            return Math.abs(event.deltaX) > Math.abs(event.deltaY);
+        }
+        if (this._panAxis === 'vertical') {
+            return Math.abs(event.deltaY) > Math.abs(event.deltaX);
+        }
+        return true;
+    }
     _stopTracking(pointerId) {
-        this._tracking = false;
-        this._panStarted = false;
-        this._pointerId = null;
-        this._startTarget = null;
+        this._resetTracking();
         if (this._setPointerCapture && typeof this.target.releasePointerCapture === 'function') {
             try {
                 this.target.releasePointerCapture(pointerId);
             }
             catch {
-                // `releasePointerCapture` can throw when the pointer is no longer captured.
-                // Releasing is a best-effort cleanup, so ignore it.
+                // Pointer capture is best-effort and may already have been released.
             }
         }
     }
+    _resetTracking() {
+        this._tracking = false;
+        this._panStarted = false;
+        this._pointerId = null;
+        this._startTarget = null;
+    }
 }
 
 /**
@@ -1301,18 +1316,31 @@ class NgControlAdapter {
     get invalid() {
         return !!this.ngControl.invalid;
     }
+    get pending() {
+        return !!this.ngControl.pending;
+    }
+    /** Derived, not read from `status`: the Signal Forms interop throws on a status it does not know. */
+    get status() {
+        if (this.disabled) {
+            return 'disabled';
+        }
+        if (this.invalid) {
+            return 'invalid';
+        }
+        return this.pending ? 'pending' : 'valid';
+    }
     get touchedOrDirty() {
         const control = this.ngControl.control;
         return !!(control?.touched || control?.dirty);
     }
     /**
-     * Signal Forms expose no rule list. A field that is required, or was ever
-     * invalid or pending, is known to have rules; a rule satisfied from the
-     * start stays undetected.
+     * Signal Forms expose no rule list. A field that is required, or was invalid or
+     * pending since it was last pristine and untouched, is known to have rules;
+     * a rule satisfied from that point on stays undetected.
      */
     get hasValidators() {
         if (this.backend === 'signal') {
-            return this.required || this.noteErrors();
+            return this.required || this.sawErrors;
         }
         const control = this.ngControl.control;
         return !!(control?.validator || control?.asyncValidator);
@@ -1343,10 +1371,13 @@ class NgControlAdapter {
      */
     get statusChanges() {
         if (this.backend === 'signal') {
-            return this.watch(() => [
-                this.ngControl.valid, this.noteErrors(), this.ngControl.pending, this.required,
-                this.ngControl.disabled, this.ngControl.dirty, this.ngControl.touched
-            ]);
+            return this.watch(() => {
+                this.observeErrors();
+                return [
+                    this.ngControl.valid, this.pending, this.required,
+                    this.ngControl.disabled, this.ngControl.dirty, this.ngControl.touched
+                ];
+            });
         }
         return this.ngControl.statusChanges;
     }
@@ -1378,11 +1409,14 @@ class NgControlAdapter {
         control.setValue(value);
         return 'accepted';
     }
-    /** Remembers that the field had rules. Returns the current invalid or pending state. */
-    noteErrors() {
-        const hasErrors = this.invalid || !!this.ngControl.pending;
-        this.sawErrors ||= hasErrors;
-        return hasErrors || this.sawErrors;
+    /**
+     * Records that the field has rules. A `[formField]` switch reuses the same interop
+     * `NgControl`, so an untouched, pristine control drops earlier observations and keeps
+     * only its current state, e.g. an empty field failing a custom rule before the first edit.
+     */
+    observeErrors() {
+        const kept = this.touchedOrDirty && this.sawErrors;
+        this.sawErrors = kept || this.invalid || this.pending;
     }
     // Signal-backed getters are reactive, so an effect over them replaces the missing observables.
     // A root effect runs before change detection, like an observable would; a view effect would
@@ -1435,10 +1469,10 @@ class IgxPickerToggleComponent {
         event.stopPropagation();
         this.clicked.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxPickerToggleComponent, isStandalone: true, selector: "igx-picker-toggle", outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", type: IgxPickerToggleComponent, isStandalone: true, selector: "igx-picker-toggle", outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPickerToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPickerToggleComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<ng-content></ng-content>`,
@@ -1467,10 +1501,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * ```
  */
 class IgxPickerClearComponent extends IgxPickerToggleComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPickerClearComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxPickerClearComponent, isStandalone: true, selector: "igx-picker-clear", usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPickerClearComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", type: IgxPickerClearComponent, isStandalone: true, selector: "igx-picker-clear", usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPickerClearComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPickerClearComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<ng-content></ng-content>`,
@@ -1489,10 +1523,10 @@ class IgxPickerActionsDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPickerActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxPickerActionsDirective, isStandalone: true, selector: "[igxPickerActions]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPickerActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxPickerActionsDirective, isStandalone: true, selector: "[igxPickerActions]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPickerActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPickerActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxPickerActions]',
@@ -5144,10 +5178,10 @@ class IgxDateFormatterPipe {
     transform(value, format, timezone, locale) {
         return this.i18nFormatter.formatDate(value, format, locale ?? this.locale_ID, timezone);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxDateFormatterPipe, isStandalone: true, name: "date" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxDateFormatterPipe, isStandalone: true, name: "date" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'date',
@@ -5161,10 +5195,10 @@ class IgxNumberFormatterPipe {
     transform(value, digitsInfo, locale) {
         return this.i18nFormatter.formatNumber(value, locale, digitsInfo);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNumberFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxNumberFormatterPipe, isStandalone: true, name: "number" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNumberFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxNumberFormatterPipe, isStandalone: true, name: "number" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNumberFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNumberFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'number',
@@ -5178,10 +5212,10 @@ class IgxPercentFormatterPipe {
     transform(value, digitsInfo, locale) {
         return this.i18nFormatter.formatPercent(value, locale, digitsInfo);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPercentFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxPercentFormatterPipe, isStandalone: true, name: "percent" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPercentFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxPercentFormatterPipe, isStandalone: true, name: "percent" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPercentFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPercentFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'percent',
@@ -5195,10 +5229,10 @@ class IgxCurrencyFormatterPipe {
     transform(value, currencyCode, display, digitsInfo, locale) {
         return this.i18nFormatter.formatCurrency(value, locale, display, currencyCode, digitsInfo);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCurrencyFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxCurrencyFormatterPipe, isStandalone: true, name: "currency" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCurrencyFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxCurrencyFormatterPipe, isStandalone: true, name: "currency" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCurrencyFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCurrencyFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'currency',
@@ -5266,10 +5300,10 @@ class IgxAngularAnimationService {
         const player = new IgxAngularAnimationPlayer(animationBuilder.create(element));
         return player;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAngularAnimationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAngularAnimationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxAngularAnimationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxAngularAnimationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAngularAnimationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxAngularAnimationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5294,10 +5328,10 @@ class IgxOverlayOutletDirective {
     get nativeElement() {
         return this.element.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxOverlayOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxOverlayOutletDirective, isStandalone: true, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxOverlayOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxOverlayOutletDirective, isStandalone: true, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxOverlayOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxOverlayOutletDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'overlay-outlet',
@@ -7030,10 +7064,10 @@ class IgxOverlayService {
             info.size = size;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxOverlayService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxOverlayService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxOverlayService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxOverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -7137,6 +7171,9 @@ class BlockScrollStrategy extends ScrollStrategy {
             this._sourceElement.scrollTop = this._initialScrollTop;
             this._sourceElement.scrollLeft = this._initialScrollLeft;
         };
+        this.preventDefault = (ev) => {
+            ev.preventDefault();
+        };
     }
     /**
      * Initializes the strategy. Should be called once
@@ -7156,6 +7193,14 @@ class BlockScrollStrategy extends ScrollStrategy {
      * ```
      */
     attach() {
+        // Prevent scroll from mouse/trackpad/touch before it occurs.
+        // `{ passive: false }` is required — without it, browsers ignore preventDefault() on these events.
+        // This also fixes Safari bug #17217 where the scroll event fires after the compositor has already
+        // scrolled, making scroll-position reset ineffective for wheel/touch input.
+        this._document.addEventListener('wheel', this.preventDefault, { passive: false });
+        this._document.addEventListener('touchmove', this.preventDefault, { passive: false });
+        // Handles keyboard-driven scrolling (arrow keys, spacebar, Page Up/Down) as a fallback,
+        // since keyboard input cannot be intercepted via wheel/touchmove.
         this._document.addEventListener('scroll', this.onScroll, true);
     }
     /**
@@ -7165,6 +7210,8 @@ class BlockScrollStrategy extends ScrollStrategy {
      * ```
      */
     detach() {
+        this._document.removeEventListener('wheel', this.preventDefault);
+        this._document.removeEventListener('touchmove', this.preventDefault);
         this._document.removeEventListener('scroll', this.onScroll, true);
         this._sourceElement = null;
         this._initialScrollTop = 0;
@@ -7876,10 +7923,10 @@ class IgxFlatTransactionFactory {
                 return new IgxBaseTransactionService();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFlatTransactionFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFlatTransactionFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxFlatTransactionFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxFlatTransactionFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFlatTransactionFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxFlatTransactionFactory, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -7903,10 +7950,10 @@ class IgxHierarchicalTransactionFactory extends IgxFlatTransactionFactory {
                 return new IgxBaseTransactionService();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHierarchicalTransactionFactory, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHierarchicalTransactionFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHierarchicalTransactionFactory, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHierarchicalTransactionFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHierarchicalTransactionFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHierarchicalTransactionFactory, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -7971,10 +8018,10 @@ class IgxStylesRegistrar {
             this._document.head?.appendChild(style);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxStylesRegistrar, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxStylesRegistrar, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxStylesRegistrar, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxStylesRegistrar, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxStylesRegistrar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxStylesRegistrar, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });