igniteui-angular 22.0.0 → 22.0.1

package/migrations/common/import-helper.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nativeImport = nativeImport;
+/**
+ * Native Node dynamic import helper
+ * @remarks
+ * NB: Import this via a bare specifier (igniteui-angular/migrations/common/import-helper.cjs)
+ * to escape the schematics encapsulation for this file and thus the dynamic import inside.
+ * This allows to dynamically import ESM modules from outside the schematics host context.
+ */
+function nativeImport(name) {
+    return import(name);
+}
+;

package/migrations/common/import-helper.d.cts

@@ -0,0 +1,13 @@
+/** Explicit module map, as generic T can't be resolved to a direct string literal via inference */
+type ModuleMap = {
+    '@angular/compiler': typeof import('@angular/compiler', { with: { "resolution-mode": "import" } });
+};
+/**
+ * Native Node dynamic import helper
+ * @remarks
+ * NB: Import this via a bare specifier (igniteui-angular/migrations/common/import-helper.cjs)
+ * to escape the schematics encapsulation for this file and thus the dynamic import inside.
+ * This allows to dynamically import ESM modules from outside the schematics host context.
+ */
+export declare function nativeImport<T extends keyof ModuleMap>(name: T): Promise<ModuleMap[T]>;
+export {};

package/migrations/update-11_0_0/index.js

@@ -11,11 +11,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const UpdateChanges_1 = require("../common/UpdateChanges");
 const util_1 = require("../common/util");
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const version = '11.0.0';
 exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
-    const { HtmlParser, getHtmlTagDefinition } = yield import('@angular/compiler');
+    const { HtmlParser, getHtmlTagDefinition } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
     const TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid'];
     const prop = ['[showToolbar]', 'showToolbar'];

package/migrations/update-12_0_0/index.js

@@ -11,11 +11,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const UpdateChanges_1 = require("../common/UpdateChanges");
 const util_1 = require("../common/util");
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const version = '12.0.0';
 exports.default = (options) => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
-    const { HtmlParser } = yield import('@angular/compiler');
+    const { HtmlParser } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     // eslint-disable-next-line max-len
     const UPDATE_NOTE = `<!--NOTE: This component has been updated by Infragistics migration: v${version}\nPlease check your template whether all bindings/event handlers are correct.-->\n`;
     const COMPONENTS = [

package/migrations/update-12_1_0/index.js

@@ -11,12 +11,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const UpdateChanges_1 = require("../common/UpdateChanges");
 const util_1 = require("../common/util");
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const version = '12.1.0';
 exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
-    const { HtmlParser, getHtmlTagDefinition } = yield import('@angular/compiler');
+    const { HtmlParser, getHtmlTagDefinition } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
     const TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid'];
     const prop = ['[paging]', 'paging'];

package/migrations/update-13_0_0/index.js

@@ -11,6 +11,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const UpdateChanges_1 = require("../common/UpdateChanges");
 const util_1 = require("../common/util");
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const version = '13.0.0';
 exports.default = (options) => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
@@ -26,8 +28,7 @@ exports.default = (options) => (host, context) => __awaiter(void 0, void 0, void
         '[exportExcel]', 'exportExcel', '[exportExcelText]', 'exportExcelText',
         '[exportCsv]', 'exportCsv', '[exportCsvText]', 'exportCsvText', '[exportText]', 'exportText'];
     const actionsLeft = ['igx-grid-toolbar-advanced-filtering'];
-    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
-    const { HtmlParser } = yield import('@angular/compiler');
+    const { HtmlParser } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     const moduleTsFiles = tsFiles.filter(x => x.endsWith('.module.ts'));
     for (const path of moduleTsFiles) {
         let content = (_a = host.read(path)) === null || _a === void 0 ? void 0 : _a.toString();

package/migrations/update-13_1_0/index.js

@@ -9,13 +9,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const UpdateChanges_1 = require("../common/UpdateChanges");
 const util_1 = require("../common/util");
 const version = '13.1.0';
 exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
-    const { HtmlParser } = yield import('@angular/compiler');
+    const { HtmlParser } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
     const GRID_TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid', 'igx-row-island'];
     const prop = ['[movable]'];

package/migrations/update-15_1_0/index.js

@@ -9,13 +9,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const UpdateChanges_1 = require("../common/UpdateChanges");
 const util_1 = require("../common/util");
 const version = '15.1.0';
 exports.default = (options) => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
-    const { HtmlParser } = yield import('@angular/compiler');
+    const { HtmlParser } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
     const cardsToMigrate = new Set();
     const CARD_ACTIONS = ['igx-card-actions'];

package/migrations/update-16_1_0/index.js

@@ -11,11 +11,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const UpdateChanges_1 = require("../common/UpdateChanges");
 const util_1 = require("../common/util");
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const version = '16.1.0';
 exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
-    const { HtmlParser } = yield import('@angular/compiler');
+    const { HtmlParser } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
     update.applyChanges();
     const prop = ['[multiSelection]'];

package/migrations/update-17_0_0/index.js

@@ -44,13 +44,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const ts = __importStar(require("typescript"));
 const UpdateChanges_1 = require("../common/UpdateChanges");
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const tsUtils_1 = require("../common/tsUtils");
 const util_1 = require("../common/util");
 const version = '17.0.0';
 exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
-    const { HtmlParser } = yield import('@angular/compiler');
+    const { HtmlParser } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
     const changes = new Map();
     const prop = ['type'];

package/migrations/update-17_1_0/index.js

@@ -11,11 +11,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const UpdateChanges_1 = require("../common/UpdateChanges");
 const util_1 = require("../common/util");
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const version = '17.1.0';
 exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
-    const { HtmlParser } = yield import('@angular/compiler');
+    const { HtmlParser } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
     const changes = new Map();
     const tags = ['button', 'span', 'a', 'div', 'igx-prefix', 'igx-suffix'];

package/migrations/update-18_0_0/index.js

@@ -11,12 +11,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
 const util_1 = require("../common/util");
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const UpdateChanges_1 = require("../common/UpdateChanges");
 const version = "18.0.0";
 exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
-    const { HtmlParser } = yield import('@angular/compiler');
+    const { HtmlParser } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
     const changes = new Map();
     const prop = ["displayDensity", "[displayDensity]"];

package/migrations/update-20_0_6/index.js

@@ -11,11 +11,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const UpdateChanges_1 = require("../common/UpdateChanges");
 const util_1 = require("../common/util");
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const version = '20.0.6';
 exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
-    const { HtmlParser, Element } = yield import('@angular/compiler');
+    const { HtmlParser, Element } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
     const changes = new Map();
     const parser = new HtmlParser();

package/migrations/update-22_0_0/index.js

@@ -11,10 +11,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const UpdateChanges_1 = require("../common/UpdateChanges");
 const util_1 = require("../common/util");
+// use bare specifier to escape the schematics encapsulation for the dynamic import:
+const import_helper_cjs_1 = require("igniteui-angular/migrations/common/import-helper.cjs");
 const version = '22.0.0';
 exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    const { HtmlParser, Element } = yield import('@angular/compiler');
+    const { HtmlParser, Element } = yield (0, import_helper_cjs_1.nativeImport)('@angular/compiler');
     const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
     const changes = new Map();
     const parser = new HtmlParser();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "22.0.0",
+  "version": "22.0.1",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",

package/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
 

package/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

package/types/igniteui-angular-grids-hierarchical-grid.d.ts

@@ -710,6 +710,8 @@ declare class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirect
      * @hidden
      */
     ngOnInit(): void;
+    protected onLifecyclePlaceholderConnected(): void;
+    protected onLifecyclePlaceholderDisconnected(): void;
     /**
      * @hidden
      */