fix(ng22): removing mentions of hammermodule

docs/angular/src/content/en/components/calendar.mdx

@@ -39,20 +39,19 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta
 The next step is to import the `IgxCalendarModule` in your **app.module.ts** file.
 
 <DocsAside type="info">
-The <ApiLink type="Calendar" label="**IgxCalendarComponent**" /> also depends on the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) and **optionally** the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) for touch interactions, so they need to be added to the AppModule as well:
+The <ApiLink type="Calendar" label="**IgxCalendarComponent**" /> also depends on the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule), so it needs to be added to the AppModule as well:
 </DocsAside>
 
 ```typescript
 // app.module.ts
 ...
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxCalendarModule } from 'igniteui-angular/calendar';
 // import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
     ...
-    imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
+    imports: [..., BrowserAnimationsModule, IgxCalendarModule],
     ...
 })
 export class AppModule {}
@@ -63,7 +62,6 @@ Alternatively, as of `16.0.0` you can import the `IgxCalendarComponent` as a sta
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular/calendar';
 // import { IGX_CALENDAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@@ -73,8 +71,8 @@ import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular/calendar';
     template: '<igx-calendar></igx-calendar>',
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES]
-    /* or imports: [BrowserAnimationsModule, HammerModule, IgxCalendarComponent] */
+    imports: [BrowserAnimationsModule, IGX_CALENDAR_DIRECTIVES]
+    /* or imports: [BrowserAnimationsModule, IgxCalendarComponent] */
 })
 export class HomeComponent {}
 ```

docs/angular/src/content/en/components/carousel.mdx

@@ -38,20 +38,15 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta
 
 The next step is to import the **IgxCarouselModule** in our **app.module.ts** file:
 
-<DocsAside type="info">
-This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.
-</DocsAside>
-
 ```typescript
 // app.module.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { IgxCarouselModule } from 'igniteui-angular/carousel';
 // import { IgxCarouselModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
     ...
-    imports: [..., HammerModule, IgxCarouselModule],
+    imports: [..., IgxCarouselModule],
     ...
 })
 export class AppModule {}
@@ -63,7 +58,6 @@ Alternatively, as of `16.0.0` you can import the `IgxCarouselComponent` as a sta
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular/carousel';
 // import { IGX_CAROUSEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
@@ -82,8 +76,8 @@ import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular/carousel';
     `,
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [HammerModule, IGX_CAROUSEL_DIRECTIVES]
-    /* or imports: [HammerModule, IgxCarouselComponent, IgxSlideComponent] */
+    imports: [IGX_CAROUSEL_DIRECTIVES]
+    /* or imports: [IgxCarouselComponent, IgxSlideComponent] */
 })
 export class HomeComponent {}
 ```

docs/angular/src/content/en/components/date-picker.mdx

@@ -37,18 +37,17 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta
 The next step is to import the `IgxDatePickerModule` in your **app.module.ts** file.
 
 <DocsAside type="info">
-As the picker uses the <ApiLink type="Calendar" label="**IgxCalendarComponent**" />, it is also dependent on the **BrowserAnimationsModule** and **optionally** on the **HammerModule** for touch interactions, so they need to be added to the module as well:
+As the picker uses the <ApiLink type="Calendar" label="**IgxCalendarComponent**" />, it is also dependent on the **BrowserAnimationsModule**, so it needs to be added to the module as well:
 </DocsAside>
 
 ```typescript
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxDatePickerModule } from 'igniteui-angular/date-picker';
 // import { IgxDatePickerModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
     ...
-    imports: [..., IgxDatePickerModule, BrowserAnimationsModule, HammerModule],
+    imports: [..., IgxDatePickerModule, BrowserAnimationsModule],
     ...
 })
 export class AppModule {}
@@ -59,7 +58,6 @@ Alternatively, as of `16.0.0` you can import the `IgxDatePickerComponent` as a s
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IGX_DATE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker';
 // import { IGX_DATE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@@ -73,8 +71,8 @@ import { IGX_DATE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker';
     `,
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_PICKER_DIRECTIVES]
-    /* or imports: [BrowserAnimationsModule, HammerModule, IgxDatePickerComponent, IgxLabelDirective] */
+    imports: [BrowserAnimationsModule, IGX_DATE_PICKER_DIRECTIVES]
+    /* or imports: [BrowserAnimationsModule, IgxDatePickerComponent, IgxLabelDirective] */
 })
 export class HomeComponent {}
 ```

docs/angular/src/content/en/components/date-range-picker.mdx

@@ -33,20 +33,19 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta
 
 The next step is to import the `IgxDateRangePickerModule` in your **app.module.ts** file.
 
-As the <ApiLink type="DateRangePicker" /> uses the <ApiLink type="Calendar" label="**IgxCalendarComponent**" />, it also has a dependency on the **BrowserAnimationsModule** and **optionally** the **HammerModule** for touch interactions, so they need to be added to the `AppModule` as well:
+As the <ApiLink type="DateRangePicker" /> uses the <ApiLink type="Calendar" label="**IgxCalendarComponent**" />, it also has a dependency on the **BrowserAnimationsModule**, so it needs to be added to the `AppModule` as well:
 
 ```typescript
 // app.module.ts
 
 import { IgxDateRangePickerModule } from 'igniteui-angular/date-picker';
 // import { IgxDateRangePickerModule } from '@infragistics/igniteui-angular'; for licensed package
 
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
     ...
-    imports: [..., IgxDateRangePickerModule, BrowserAnimationsModule, HammerModule],
+    imports: [..., IgxDateRangePickerModule, BrowserAnimationsModule],
     ...
 })
 export class AppModule {}
@@ -57,7 +56,6 @@ Alternatively, as of `16.0.0` you can import the <ApiLink type="DateRangePicker"
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker';
 // import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@@ -67,8 +65,8 @@ import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker';
     template: '<igx-date-range-picker [value]="range"></igx-date-range-picker>',
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_RANGE_PICKER_DIRECTIVES]
-    /* or imports: [BrowserAnimationsModule, HammerModule, IgxDateRangePickerComponent] */
+    imports: [BrowserAnimationsModule, IGX_DATE_RANGE_PICKER_DIRECTIVES]
+    /* or imports: [BrowserAnimationsModule, IgxDateRangePickerComponent] */
 })
 export class HomeComponent {}
 ```

docs/angular/src/content/en/components/general/update-guide.mdx

@@ -61,6 +61,24 @@ Unfortunately not all changes can be automatically updated. Changes below are sp
 
 For example: if you are updating from version 6.2.4 to 7.1.0 you'd start from the "From 6.x .." section apply those changes and work your way up:
 
+## From 21.1.x to 22.0.x
+
+Angular no longer ships the `HammerModule` for touch gestures. To keep touch interactions (pan, swipe, tap) working in Ignite UI for Angular components, load HammerJS as a global script via the `scripts` array in your `angular.json`:
+
+```json
+"architect": {
+  "build": {
+    "options": {
+      "scripts": [
+        "node_modules/hammerjs/hammer.min.js"
+      ]
+    }
+  }
+}
+```
+
+Once loaded globally, Ignite UI for Angular automatically detects `window.Hammer` and uses it to handle touch gestures — no additional imports or module registrations are required.
+
 ## From 21.0.x to 21.1.x
 
 Version 21.1.0 ships with a new `tokens` mixin that can be used in place of the now deprecated `css-vars` mixin of our Sass theming framework. On the surface, this is a cosmetic change, however, the new `tokens` mixin produces universal global component theme tokens that work across all of our Ignite UI frameworks. The `css-vars` mixin is now deprecated and will be removed in a future version, so we recommend switching to the new `tokens` mixin as soon as possible.
@@ -1342,8 +1360,7 @@ grid.getRowByIndex(0).expanded = false;
 
 ## From 8.x.x to 9.0.x
 
-Due to a breaking change in Angular 9 Hammer providers are no longer implicitly added
-[please, refer to the following document for details:](https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-9 ) Because of this the following components require `HammerModule` to be imported in the root module of the application in order for **touch** interactions to work as expected:
+Due to a breaking change in Angular 9, Hammer providers are no longer implicitly added. Because of this the following components require `HammerModule` to be imported in the root module of the application in order for **touch** interactions to work as expected:
 
 - igxGrid
 - igxHierarchicalGrid

docs/angular/src/content/en/components/grid/grid.mdx

@@ -65,10 +65,6 @@ Boston Marathon 2021 – In this angular grid example, you can see how users can
 
 ## Getting Started with Ignite UI for Angular Data Grid
 
-<DocsAside type="info">
-**This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.**.
-</DocsAside>
-
 To get started with the Ignite UI for Angular Data Grid component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
 
 ```cmd

docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx

@@ -26,10 +26,6 @@ In this angular grid example you can see how users can visualize hierarchical se
 
 ## Getting Started with Ignite UI for Angular Hierarchical Data Grid
 
-<DocsAside type="info">
-**This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.**.
-</DocsAside>
-
 To get started with the Ignite UI for Angular Hierarchical Data Grid component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
 
 ```cmd

docs/angular/src/content/en/components/list.mdx

@@ -33,20 +33,15 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta
 
 The next step is to import the `IgxListModule` in the **app.module.ts** file.
 
-<DocsAside type="info">
-**This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**.It can be imported in the root module of the application in order for touch interactions to work as expected.**.
-</DocsAside>
-
 ```typescript
 // app.module.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { IgxListModule } from 'igniteui-angular/list';
 // import { IgxListModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
     ...
-    imports: [..., IgxListModule, HammerModule],
+    imports: [..., IgxListModule],
     ...
 })
 export class AppModule {}
@@ -57,7 +52,6 @@ Alternatively, as of `16.0.0` you can import the `IgxListComponent` as a standal
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
 // import { IGX_LIST_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
@@ -73,8 +67,8 @@ import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
     `,
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [IGX_LIST_DIRECTIVES, HammerModule]
-    /* or imports: [IgxListComponent, IgxListItemComponent, HammerModule] */
+    imports: [IGX_LIST_DIRECTIVES]
+    /* or imports: [IgxListComponent, IgxListItemComponent] */
 })
 export class HomeComponent {}
 ```

docs/angular/src/content/en/components/month-picker.mdx

@@ -34,20 +34,19 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta
 The first step is to import the `IgxCalendarModule` inside our **app.module.ts** file.
 
 <DocsAside type="info">
-The <ApiLink type="MonthPicker" label="**IgxMonthPickerComponent**" /> also depends on the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) and **optionally** the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) for touch interactions, so they need to be added to the AppModule as well:
+The <ApiLink type="MonthPicker" label="**IgxMonthPickerComponent**" /> also depends on the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule), so it needs to be added to the AppModule as well:
 </DocsAside>
 
 ```typescript
 // app.module.ts
 ...
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxCalendarModule } from 'igniteui-angular/calendar';
 // import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
     ...
-    imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
+    imports: [..., BrowserAnimationsModule, IgxCalendarModule],
     ...
 })
 export class AppModule {}
@@ -58,7 +57,6 @@ Alternatively, as of `16.0.0` you can import the `IgxMonthPickerComponent` as a
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxMonthPickerComponent } from 'igniteui-angular/calendar';
 // import { IgxMonthPickerComponent } from '@infragistics/igniteui-angular'; for licensed package
@@ -68,8 +66,8 @@ import { IgxMonthPickerComponent } from 'igniteui-angular/calendar';
     template: '<igx-month-picker></igx-month-picker>',
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [BrowserAnimationsModule, HammerModule, IgxMonthPickerComponent]
-    /* or imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES] */
+    imports: [BrowserAnimationsModule, IgxMonthPickerComponent]
+    /* or imports: [BrowserAnimationsModule, IGX_CALENDAR_DIRECTIVES] */
 })
 export class HomeComponent {}
 ```

docs/angular/src/content/en/components/navdrawer.mdx

@@ -36,20 +36,19 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta
 The first step is to import the `IgxNavigationDrawerModule` inside our **app.module.ts** file.
 
 <DocsAside type="info">
-The <ApiLink type="NavigationDrawer" /> also depends on the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) and **optionally** the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) for touch interactions, so they need to be added to the AppModule as well:
+The <ApiLink type="NavigationDrawer" /> also depends on the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule), so it needs to be added to the AppModule as well:
 </DocsAside>
 
 ```typescript
 // app.module.ts
 ...
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxNavigationDrawerModule } from 'igniteui-angular/navigation-drawer';
 // import { IgxNavigationDrawerModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
     ...
-    imports: [..., BrowserAnimationsModule, HammerModule, IgxNavigationDrawerModule],
+    imports: [..., BrowserAnimationsModule, IgxNavigationDrawerModule],
     ...
 })
 export class AppModule {}
@@ -60,7 +59,6 @@ Alternatively, as of `16.0.0` you can import the `IgxNavigationDrawerComponent`
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgFor } from '@angular/common';
 import { IGX_NAVIGATION_DRAWER_DIRECTIVES } from 'igniteui-angular/navigation-drawer';
@@ -96,8 +94,8 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
   `,
   styleUrls: ['home.component.scss'],
   standalone: true,
-  imports: [BrowserAnimationsModule, HammerModule, IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent, NgFor],
-  /* or imports: [BrowserAnimationsModule, HammerModule, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxIconComponent, IgxRippleDirective, NgFor] */
+  imports: [BrowserAnimationsModule, IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent, NgFor],
+  /* or imports: [BrowserAnimationsModule, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxIconComponent, IgxRippleDirective, NgFor] */
 })
 export class HomeComponent {
   public navItems: Product[];

docs/angular/src/content/en/components/paginator.mdx

@@ -56,7 +56,6 @@ Alternatively, as of `16.0.0` you can import the `IgxPaginatorComponent` as a st
 // home.component.ts
 
 import { NgFor } from '@angular/common';
-import { HammerModule } from '@angular/platform-browser';
 import { IGX_PAGINATOR_DIRECTIVES } from 'igniteui-angular/paginator';
 import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
 // import { IGX_PAGINATOR_DIRECTIVES, IGX_LIST_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@@ -71,8 +70,8 @@ import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
     `,
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [IGX_PAGINATOR_DIRECTIVES, IGX_LIST_DIRECTIVES, HammerModule, NgFor]
-    /* or imports: [IgxPaginatorComponent, IgxListComponent, IgxListItemComponent, HammerModule, NgFor] */
+    imports: [IGX_PAGINATOR_DIRECTIVES, IGX_LIST_DIRECTIVES, NgFor]
+    /* or imports: [IgxPaginatorComponent, IgxListComponent, IgxListItemComponent, NgFor] */
 })
 export class HomeComponent {
     public products: Product [];