docs(changelog): update touch gesture instructions for Angular 22 and… (#17350)

* docs(changelog): update touch gesture instructions for Angular 22 and HammerJS integration

* docs(setup): fix formatting for touch gestures installation instructions

Author: mddragnev

CHANGELOG.md

@@ -72,6 +72,16 @@ All notable changes for each version of this project will be documented in this
 
 ### General
 
+- **Touch Gestures (HammerJS)** _(optional)_
+    - `HammerModule`, previously exported from `@angular/platform-browser`, is no longer available in Angular 22. Touch gesture support (Slider, Drag & Drop, Carousel swipe, Navigation Drawer) is optional. To enable it, install the `hammerjs` package and add it to the `scripts` array in your project's `angular.json`:
+        ```bash
+        npm install hammerjs
+        ```
+        ```json
+        // angular.json — inside your project's architect.build.options
+        "scripts": ["./node_modules/hammerjs/hammer.min.js"]
+        ```
+
 - `IgxSelectComponent`
     - The default positioning strategy has changed from the internal overlap strategy to `AutoPositionStrategy`. The dropdown now opens below (or above, if there is not enough space) the input element, consistent with other connected components.
     - Added `IgxSelectOverlapPositionStrategy` - a new publicly exported strategy that preserves the previous behavior of aligning the selected item's text over the input text. To opt into the previous overlap behavior:

skills/igniteui-angular-components/references/directives.md

@@ -254,7 +254,14 @@ onDrop(event: IDropDroppedEventArgs) {
 Key drag events: `(dragStart)`, `(dragMove)`, `(dragEnd)`, `(dragClick)`, `(ghostCreate)`, `(ghostDestroy)`, `(transitioned)`.
 Key drop events: `(enter)`, `(leave)`, `(over)`, `(dropped)`.
 
-> **NOTE:** For touch-based drag, add `importProvidersFrom(HammerModule)` to `app.config.ts` providers.
+> **NOTE (optional):** For touch-based drag, install `hammerjs` and add it to the `scripts` array in `angular.json`.
+> ```bash
+> npm install hammerjs
+> ```
+> ```json
+> // angular.json — inside your project's architect.build.options
+> "scripts": ["./node_modules/hammerjs/hammer.min.js"]
+> ```
 
 ## See Also
 

skills/igniteui-angular-components/references/setup.md

@@ -43,7 +43,17 @@ export const appConfig: ApplicationConfig = {
 | Provider | Package | Required for |
 |---|---|---|
 | `provideAnimations()` | `@angular/platform-browser/animations` | **All overlay and animated components** — Dialog, Combo, Select, Dropdown, Date/Time Picker, Snackbar, Toast, Banner, Navigation Drawer, Carousel, Overlay service |
-| `importProvidersFrom(HammerModule)` | `@angular/platform-browser` | OPTIONAL — touch gestures (Slider, Drag & Drop, swipe) |
+
+> **Touch gestures** (Optional) (Slider, Drag & Drop, swipe) - To enable touch gesture support, install the `hammerjs` package and add it to the `scripts` array in your `angular.json`:
+>
+> ```bash
+> npm install hammerjs
+> ```
+>
+> ```json
+> // angular.json — inside your project's architect.build.options
+> "scripts": ["./node_modules/hammerjs/hammer.min.js"]
+> ```
 
 > **`provideAnimationsAsync()`** lazy-loads the animations module — prefer it for SSR or when optimizing initial bundle size:
 > ```typescript