igniteui-angular 22.0.0-rc.2 → 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-rc.2",
+  "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",
@@ -104,7 +104,7 @@
     }
   },
   "igxDevDependencies": {
-    "@igniteui/angular-schematics": "~22.0.1531-beta.1"
+    "@igniteui/angular-schematics": "~22.0.1540"
   },
   "ng-update": {
     "migrations": "./migrations/migration-collection.json",

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/skills/igniteui-angular-grids/references/sizing.md

@@ -212,3 +212,4 @@ igx-grid {
 - Use `null` for height only when the data set is small; row virtualization is disabled and large data will hurt performance.
 - When using percentage height, the parent **must** have an explicit height for the percentage to resolve correctly. Without it, the grid falls back to 10 visible rows.
 - A mix of fixed-width and auto-sized columns is valid — auto-sized columns fill the remaining space after fixed-width columns are laid out.
+- **Omit `width` on generated columns.** No `width` = columns equally share available grid width. Pixel widths leave empty space when their sum is less than the grid width. Only set `width` when the user explicitly asks for it. If column widths are used, at least one column must not have a specified width so that it fills the remaining space in the grid.

package/skills/igniteui-angular-grids/references/structure.md

@@ -263,6 +263,7 @@ Events: `(rowSelectionChanging)`, `(columnSelectionChanging)`, `(selected)` (cel
 6. **Set `dataType` on every column** for correct filtering, sorting, editing, and summaries
 7. **Use signals** for data binding — `[data]="myData()"` with `signal<T[]>([])`
 8. **Virtualization is automatic** — don't wrap grids in virtual scroll containers
+9. **Omit `width` on generated `<igx-column>` elements.** Columns without `width` equally share available grid width. Only set `width` when the user explicitly asks for fixed or percentage column sizing. If column widths are used, at least one column must not have a specified width so that it fills the remaining space in the grid.
 
 ## See Also
 

package/skills/igniteui-angular-grids/references/types.md

@@ -247,7 +247,7 @@ Columns use `<igx-grid-lite-column>` with these inputs:
 | `field` | `string` | Data property key (required) |
 | `dataType` | `'string' \| 'number' \| 'boolean' \| 'date'` | Column data type |
 | `header` | `string` | Header text |
-| `width` | `string` | CSS width (e.g., `'250px'`) |
+| `width` | `string` | CSS width — omit by default; columns auto-fill available grid space. Only set when a fixed or percentage width is explicitly needed (e.g. `'20%'`). |
 | `hidden` | `boolean` | Hide the column |
 | `resizable` | `boolean` | Allow column resizing |
 | `sortable` | `boolean` | Enable sorting |
@@ -487,6 +487,7 @@ Provide a drag-and-drop UI for users to reshape the pivot interactively:
 2. **Hierarchical Grid**: sorting/filtering/paging are independent per level; configure features on the `<igx-row-island>` blueprint
 3. **Pivot Grid is read-only** — editing, paging, pinning, column moving, row dragging are all disabled; use `pivotConfiguration` for all data operations
 4. **Grid Lite requires `CUSTOM_ELEMENTS_SCHEMA`** and `igniteui-grid-lite` npm package — it has no editing, selection, paging, or export
+5. **Omit `width` on generated `<igx-grid-lite-column>` elements.** Columns without `width` equally share available grid width. Only set `width` when the user explicitly asks for it. If column widths are used, at least one column must not have a specified width so that it fills the remaining space in the grid.
 
 ## See Also
 

package/types/igniteui-angular-grids-core.d.ts

@@ -6155,6 +6155,7 @@ declare class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     private onActionKeyDown;
     private navigateItem;
     private isIndexOutOfBounds;
+    private isTreeGridWithGroupBy;
     private isRemote;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxExcelStyleSearchComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<IgxExcelStyleSearchComponent, "igx-excel-style-search", never, { "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;

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