Open
Remove Hammer.js dependency, replace with native Pointer/Touch Events#17359
Conversation
Replace HammerGesturesManager with native pointer events in all components: - Carousel: native pointerdown/pointermove/pointerup for pan/swipe/tap - Navigation Drawer: native pointer events on document for swipe/pan - List Item: native pointer events replacing @HostListener pan bindings - Time Picker: native pointer events for vertical pan scrolling - Grid Cells: native touchend-based double-tap detection for iOS Infrastructure cleanup: - Remove HammerGesturesManager and touch-annotations exports from core - Remove hammerjs/@types/hammerjs from package.json dependencies - Remove hammer from all karma configs, angular.json, tsconfig files - Update ng-add schematic: remove addHammer option and install logic - Clean up igniteui-angular-extras ng-package.json Closes #17358
Update test files to remove HammerGesturesManager, HammerInput, HammerOptions imports and mocking. Remove hammer-specific test cases from ng-add schematic tests. Update navigation drawer gesture handler tests to use plain objects instead of HammerInput type. Also update CHANGELOG.md with breaking change note for Hammer.js removal.
Copilot
AI
changed the title
[WIP] Remove Hammer.js dependency and implement native gesture support
Remove Hammer.js dependency, replace with native Pointer/Touch Events
Jun 25, 2026
Member
|
@copilot , the lib needs to be zoneless. Why are you injecting ngzone everywhere? Also can't you combine the implementation logic into a separate touch manager so that we don't repeat the same pan/swipe logic between all files? |
Contributor
Author
Addressed in aed8dce.
All affected suites pass (list 40/40, carousel 45/45, time-picker 58/58, nav-drawer 36/36). |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR removes the Hammer.js dependency from Ignite UI for Angular and replaces Hammer-based gesture handling with a shared native Pointer/Touch Events implementation (IgxTouchManager) across affected components, along with the necessary test, schematic, and tooling updates.
Changes:
- Introduces
IgxTouchManager(pointer-based pan/tap/swipe callbacks) and removes Hammer-related exports/types. - Updates Carousel, Navigation Drawer, List Item, Time Picker, and Grid cell double-tap handling to use native events.
- Removes Hammer from schematics, test/build configs (Karma, tsconfig spec types), and package manifests; updates tests and changelog for the breaking change.
Reviewed changes
Copilot reviewed 37 out of 38 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/tsconfig.spec.json | Removes hammerjs from spec types to match new gesture approach. |
| projects/igniteui-angular/tsconfig.spec.json | Removes hammerjs from library spec types. |
| projects/igniteui-angular/time-picker/src/time-picker/time-picker.directives.ts | Replaces Hammer pan handling with IgxTouchManager for vertical gesture scrolling. |
| projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.spec.ts | Removes Hammer-specific wiring assertions; keeps time picker unit/interaction coverage otherwise. |
| projects/igniteui-angular/schematics/utils/dependency-handler.ts | Removes Hammer dependencies and config injection logic from ng add flow. |
| projects/igniteui-angular/schematics/ng-add/schema.json | Drops the addHammer prompt/option from the schematic schema. |
| projects/igniteui-angular/schematics/ng-add/index.spec.ts | Updates schematic tests to reflect Hammer removal and reduced prompts. |
| projects/igniteui-angular/schematics/interfaces/options.ts | Removes addHammer from schematic options interface. |
| projects/igniteui-angular/package.json | Removes Hammer peer dependencies and related peer meta. |
| projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts | Replaces global Hammer gestures with IgxTouchManager on the document; adjusts gesture lifecycle. |
| projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts | Reworks gesture tests to dispatch native pointer events and mock time/velocity. |
| projects/igniteui-angular/list/src/list/list.component.spec.ts | Updates panning tests to use native PointerEvent dispatch instead of Hammer events. |
| projects/igniteui-angular/list/src/list/list-item.component.ts | Replaces @HostListener Hammer pan events with IgxTouchManager lifecycle management. |
| projects/igniteui-angular/karma.watch.conf.js | Removes Hammer scripts from Karma watch config. |
| projects/igniteui-angular/karma.tree-grid.conf.js | Removes Hammer scripts from Tree Grid Karma config. |
| projects/igniteui-angular/karma.test-perf.conf.js | Removes Hammer scripts from perf Karma config. |
| projects/igniteui-angular/karma.pivot-grid.conf.js | Removes Hammer scripts from Pivot Grid Karma config. |
| projects/igniteui-angular/karma.non-grid.conf.js | Removes Hammer scripts from non-grid Karma config. |
| projects/igniteui-angular/karma.hierarchical-grid.conf.js | Removes Hammer scripts from Hierarchical Grid Karma config. |
| projects/igniteui-angular/karma.grid.conf.js | Removes Hammer scripts from Grid Karma config. |
| projects/igniteui-angular/karma.conf.js | Removes Hammer scripts from main Karma config. |
| projects/igniteui-angular/grids/tree-grid/src/tree-cell.component.ts | Removes Hammer provider/import now that gestures are native. |
| projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-cell.component.ts | Removes Hammer provider/import now that gestures are native. |
| projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts | Removes Hammer provider/import now that gestures are native. |
| projects/igniteui-angular/grids/grid/src/cell.spec.ts | Updates iOS double-tap testing to align with native implementation (removes Hammer assertions). |
| projects/igniteui-angular/grids/core/src/cell.component.ts | Replaces Hammer doubletap with iOS-only native touchend double-tap detection. |
| projects/igniteui-angular/core/src/public_api.ts | Stops exporting removed Hammer annotations; continues exporting touch utilities. |
| projects/igniteui-angular/core/src/core/touch.ts | Replaces HammerGesturesManager with the new IgxTouchManager implementation. |
| projects/igniteui-angular/core/src/core/touch-annotations.ts | Deletes Hammer type annotations previously exported as core touch types. |
| projects/igniteui-angular/core/src/core/styles/components/time-picker/_time-picker-theme.scss | Adds touch-action styling to support native gesture behavior. |
| projects/igniteui-angular/core/src/core/styles/components/navdrawer/_navdrawer-theme.scss | Adjusts dummy sizing vars to keep width measurements correct with new gesture behavior. |
| projects/igniteui-angular/carousel/src/carousel/carousel.component.ts | Replaces Hammer gesture subscriptions with IgxTouchManager and pan routing. |
| projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts | Updates gesture tests to call native handlers instead of Hammer manager emits. |
| projects/igniteui-angular-extras/ng-package.json | Removes Hammer packages from allowedNonPeerDependencies. |
| package.json | Removes Hammer-related dev dependencies from repo root. |
| package-lock.json | Updates lockfile to reflect dependency removals and related resolution changes. |
| CHANGELOG.md | Documents the breaking removal of Hammer.js and migration guidance. |
| angular.json | Removes hammerjs from polyfills arrays. |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…om/IgniteUI/igniteui-angular into copilot/remove-hammerjs-dependency
ChronosSF
added
🛠️ status: in-development
…nt-17359 Add spec coverage for time picker touch pan-to-scroll gesture
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hammer.js is unmaintained (last release 2019), requires extra setup in consuming apps, and wraps APIs now universally available in browsers. This PR removes the
hammerjs/@types/hammerjspeer dependency entirely and replaces all gesture handling with native Pointer Events.Shared gesture manager
A single zoneless
IgxTouchManager(inigniteui-angular/core,core/src/core/touch.ts) consolidates the pan/swipe/tap recognition that was previously duplicated across components. It is built on native Pointer Events and exposes a small callback API (panStart,panMove,panEnd,panCancel,tap,swipe), computingdeltaX/deltaY/distance/velocity/centeralong withpreventDefault/resetOriginhelpers. It is configurable viapointerTypes,setPointerCapture,tapThreshold, andswipeVelocityThreshold(default0.3px/ms).The manager does not depend on
NgZone— it attaches plain native listeners and consumers mutate their own state inside the callbacks. The library stays zoneless; noNgZoneis injected into the gesture consumers.Component migrations
IgxTouchManager;pointerdown/pointermove/pointerupwith velocity calculation replacestap,panleft/right/up/down,panend. Axis routing (onPan) preserves the vertical/horizontal pan guards.IgxTouchManageron the document; pointer listeners replicateswipe,panstart,panmove,panendwith the same internal event shapeIgxTouchManager;@HostListener('panstart/panmove/panend/pancancel')→pointerdown/pointermove/pointerupwithsetPointerCaptureIgxItemListDirective) — consumesIgxTouchManager; vertical pan → threshold-basedpointermovedelta trackingdoubletapHammer event → nativetouchenddouble-tap detection (300ms threshold, iOS only)Mouse events are excluded where the original Hammer config only handled touch input.
Infrastructure removal
HammerGesturesManager,HammerInput,HammerStatic,HammerManager,HammerOptionsno longer exported fromigniteui-angular/core(the deadtouch-annotations.tsis removed); the newIgxTouchManageris exported insteadaddHammerprompt/option andaddHammerToConfiglogic fromdependency-handler.tshammerjs/hammer.min.jsandhammer-simulatorscript patternshammerjsfrom polyfills arrayshammerjsfromtypeshammerjs,@types/hammerjs,hammer-simulatorfrom root devDependencies; removed peer deps from library package.jsonTest updates
Removed all Hammer-specific imports, mocks, spies, and test cases from the affected spec files, and updated the gesture specs to dispatch native
PointerEvents instead of Hammer simulator events. Navigation drawer gesture handler unit tests are preserved — they call the same private methods with plain objects instead ofHammerInput. All affected suites pass (list, carousel, time-picker, navigation-drawer).Breaking change
Documented in CHANGELOG under
22.0.0 > Breaking Changes. Apps that importedhammerjssolely for Ignite UI can remove it from dependencies,angular.jsonscripts/polyfills, and anyimport 'hammerjs'statements.