igniteui-angular 22.1.0-beta.7 → 22.1.0-rc.0

package/migrations/update-22_1_0_import-migration/index.js

@@ -0,0 +1,228 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = migrate;
+const ts = __importStar(require("typescript"));
+const tsUtils_1 = require("../common/tsUtils");
+const version = '22.1.0';
+// Exports that moved to a different entry point in 22.1.0.
+// Keyed by exported symbol -> { from: source entry point, to: target entry point }.
+const EXPORT_MOVES = new Map([
+    // IgxSummaryOperand definitions moved from grids/core to core
+    ['IgxSummaryOperand', { from: 'grids/core', to: 'core' }],
+    ['IgxNumberSummaryOperand', { from: 'grids/core', to: 'core' }],
+    ['IgxDateSummaryOperand', { from: 'grids/core', to: 'core' }],
+    ['IgxTimeSummaryOperand', { from: 'grids/core', to: 'core' }],
+    // Selection/transaction types moved from grids/core to core
+    ['GridSelectionRange', { from: 'grids/core', to: 'core' }],
+    ['ISelectionNode', { from: 'grids/core', to: 'core' }],
+    ['IMultiRowLayoutNode', { from: 'grids/core', to: 'core' }],
+    ['ISelectionKeyboardState', { from: 'grids/core', to: 'core' }],
+    ['ISelectionPointerState', { from: 'grids/core', to: 'core' }],
+    ['IColumnSelectionState', { from: 'grids/core', to: 'core' }],
+    ['SelectionState', { from: 'grids/core', to: 'core' }],
+    ['IgxGridTransaction', { from: 'grids/core', to: 'core' }],
+    // IGroupingDoneEventArgs moved from grids/grid to grids/core
+    ['IGroupingDoneEventArgs', { from: 'grids/grid', to: 'grids/core' }]
+]);
+// Distinct source entry points we need to inspect, e.g. 'grids/core', 'grids/grid'.
+const SOURCE_ENTRY_POINTS = [...new Set([...EXPORT_MOVES.values()].map(m => m.from))];
+/**
+ * Resolves an import module specifier to its base package and entry point,
+ * e.g. `igniteui-angular/grids/core` -> { basePackage: 'igniteui-angular', entry: 'grids/core' }.
+ * Returns null for specifiers that are not an Ignite UI entry point.
+ */
+function resolveEntryPoint(importPath) {
+    for (const basePackage of [tsUtils_1.IG_PACKAGE_NAME, tsUtils_1.IG_LICENSED_PACKAGE_NAME]) {
+        if (importPath.startsWith(`${basePackage}/`)) {
+            return { basePackage, entry: importPath.substring(basePackage.length + 1) };
+        }
+    }
+    return null;
+}
+/** Sorts specifiers alphabetically by their imported symbol name. */
+const sortByName = (a, b) => a.key < b.key ? -1 : a.key > b.key ? 1 : 0;
+/** Collects Ignite UI named imports from the file, in source order. */
+function collectIgImports(sourceFile) {
+    const imports = [];
+    const visit = (node) => {
+        if (ts.isImportDeclaration(node) && (0, tsUtils_1.igNamedImportFilter)(node)) {
+            const resolved = resolveEntryPoint(node.moduleSpecifier.text);
+            if (resolved) {
+                const namedBindings = node.importClause.namedBindings;
+                const specifiers = namedBindings.elements.map(element => {
+                    var _a;
+                    const name = element.name.text;
+                    const alias = (_a = element.propertyName) === null || _a === void 0 ? void 0 : _a.text;
+                    const importName = alias || name;
+                    const typePrefix = element.isTypeOnly ? 'type ' : '';
+                    const specifier = alias ? `${importName} as ${name}` : importName;
+                    return { key: importName, text: `${typePrefix}${specifier}` };
+                });
+                imports.push({
+                    node,
+                    basePackage: resolved.basePackage,
+                    entry: resolved.entry,
+                    isTypeOnly: node.importClause.phaseModifier === ts.SyntaxKind.TypeKeyword,
+                    specifiers
+                });
+            }
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return imports;
+}
+function migrateFile(filePath, content) {
+    const sourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true);
+    const imports = collectIgImports(sourceFile);
+    // The full module path a specifier ends up in, or null if it stays where it is.
+    const movedTo = (imp, spec) => {
+        const move = EXPORT_MOVES.get(spec.key);
+        return move && move.from === imp.entry ? `${imp.basePackage}/${move.to}` : null;
+    };
+    // A stable key per output import: its `type` modifier plus module path.
+    const importKey = (path, isTypeOnly) => `${isTypeOnly ? 'type ' : ''}${path}`;
+    // Imports (module path + type modifier) that gain a moved specifier.
+    const mergeTargets = new Set();
+    for (const imp of imports) {
+        for (const spec of imp.specifiers) {
+            const to = movedTo(imp, spec);
+            if (to) {
+                mergeTargets.add(importKey(to, imp.isTypeOnly));
+            }
+        }
+    }
+    // Nothing moves in this file.
+    if (mergeTargets.size === 0) {
+        return content;
+    }
+    // Rewrite imports that lose a specifier (sources) or receive one (merge targets).
+    const participating = imports.filter(imp => imp.specifiers.some(spec => movedTo(imp, spec)) ||
+        mergeTargets.has(importKey(`${imp.basePackage}/${imp.entry}`, imp.isTypeOnly)));
+    // Collect the surviving specifiers per output import, retained ones before moved ones.
+    const groups = new Map();
+    const add = (path, isTypeOnly, spec) => {
+        var _a;
+        const key = importKey(path, isTypeOnly);
+        ((_a = groups.get(key)) !== null && _a !== void 0 ? _a : groups.set(key, { path, isTypeOnly, specifiers: [] }).get(key)).specifiers.push(spec);
+    };
+    for (const imp of participating) {
+        const from = `${imp.basePackage}/${imp.entry}`;
+        for (const spec of imp.specifiers) {
+            if (!movedTo(imp, spec)) {
+                add(from, imp.isTypeOnly, spec);
+            }
+        }
+        for (const spec of imp.specifiers) {
+            const to = movedTo(imp, spec);
+            if (to) {
+                add(to, imp.isTypeOnly, spec);
+            }
+        }
+    }
+    const newImports = [...groups.values()].map(group => {
+        const typeModifier = group.isTypeOnly ? 'type ' : '';
+        const specifiers = group.specifiers.sort(sortByName).map(s => s.text).join(', ');
+        return `import ${typeModifier}{ ${specifiers} } from '${group.path}';`;
+    });
+    // Replace the first participating declaration with the merged imports; drop the rest.
+    const anchor = participating[0];
+    const changes = [
+        { start: anchor.node.getStart(sourceFile), end: anchor.node.getEnd(), replacement: newImports.join('\n') },
+        ...participating.slice(1).map(imp => ({
+            start: imp.node.getFullStart(),
+            end: imp.node.getEnd(),
+            replacement: ''
+        }))
+    ];
+    // Apply changes in reverse order to maintain positions.
+    changes.sort((a, b) => b.start - a.start);
+    let result = content;
+    for (const change of changes) {
+        result = result.substring(0, change.start) + change.replacement + result.substring(change.end);
+    }
+    return result;
+}
+/** Fast-path check: does the file import from any of the source entry points we migrate? */
+function hasRelevantImport(content) {
+    return SOURCE_ENTRY_POINTS.some(entry => [tsUtils_1.IG_PACKAGE_NAME, tsUtils_1.IG_LICENSED_PACKAGE_NAME].some(basePackage => content.includes(`from '${basePackage}/${entry}'`) ||
+        content.includes(`from "${basePackage}/${entry}"`)));
+}
+function migrate() {
+    return (host, context) => __awaiter(this, void 0, void 0, function* () {
+        context.logger.info(`Applying optional import migration for Ignite UI for Angular to version ${version}`);
+        context.logger.info('Migrating imports to new entry points...');
+        const visit = (filePath) => {
+            // Only process TypeScript files
+            if (!filePath.endsWith('.ts')) {
+                return;
+            }
+            // Skip node_modules and dist
+            if (filePath.includes('node_modules') || filePath.includes('dist')) {
+                return;
+            }
+            const content = host.read(filePath);
+            if (!content) {
+                return;
+            }
+            const originalContent = content.toString();
+            // Check if file imports from any migrated source entry point
+            if (!hasRelevantImport(originalContent)) {
+                return;
+            }
+            const migratedContent = migrateFile(filePath, originalContent);
+            if (migratedContent !== originalContent) {
+                host.overwrite(filePath, migratedContent);
+                context.logger.info(`  ✓ Migrated ${filePath}`);
+            }
+        };
+        host.visit(visit);
+        context.logger.info('Migration complete!');
+        context.logger.info('Breaking changes:');
+        for (const [symbol, move] of EXPORT_MOVES) {
+            context.logger.info(`  - ${symbol} moved from ${tsUtils_1.IG_PACKAGE_NAME}/${move.from} to ${tsUtils_1.IG_PACKAGE_NAME}/${move.to}`);
+        }
+    });
+}

package/migrations/update-22_1_0_import-migration/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/migrations/update-22_1_0_import-migration/index.spec.js

@@ -0,0 +1,188 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path = __importStar(require("path"));
+const index_js_1 = require("@angular-devkit/schematics/testing/index.js");
+const setup_spec_1 = require("../common/setup.spec");
+const version = '22.1.0';
+describe(`Update to ${version}`, () => {
+    let appTree;
+    const schematicRunner = new index_js_1.SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    beforeEach(() => {
+        appTree = (0, setup_spec_1.setupTestTree)();
+    });
+    const migrationName = 'migration-59';
+    const filePath = '/testSrc/appPrefix/component/test.component.ts';
+    it('should move a single IgxSummaryOperand import from grids/core to core', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxSummaryOperand } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxSummaryOperand } from 'igniteui-angular/core';`);
+    }));
+    it('should move all summary operand imports from grids/core to core', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand, IgxTimeSummaryOperand } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryOperand, IgxTimeSummaryOperand } from 'igniteui-angular/core';`);
+    }));
+    it('should split mixed imports, keeping non-operand exports in grids/core', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxGridComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxGridComponent } from 'igniteui-angular/grids/core';\n` +
+            `import { IgxNumberSummaryOperand } from 'igniteui-angular/core';`);
+    }));
+    it('should preserve aliased operand imports', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxSummaryOperand as SummaryOperand } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxSummaryOperand as SummaryOperand } from 'igniteui-angular/core';`);
+    }));
+    it('should migrate imports from the licensed package', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxTimeSummaryOperand } from '@infragistics/igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxTimeSummaryOperand } from '@infragistics/igniteui-angular/core';`);
+    }));
+    it('should NOT modify operand imports that already come from core', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `import { IgxSummaryOperand } from 'igniteui-angular/core';`;
+        appTree.create(filePath, content);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath)).toEqual(content);
+    }));
+    it('should NOT modify grids/core imports that are not moved operands', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `import { IgxGridComponent } from 'igniteui-angular/grids/core';`;
+        appTree.create(filePath, content);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath)).toEqual(content);
+    }));
+    it('should move selection and transaction types from grids/core to core', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { GridSelectionRange, ISelectionNode, IMultiRowLayoutNode, ISelectionKeyboardState, ISelectionPointerState, IColumnSelectionState, SelectionState, IgxGridTransaction } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { GridSelectionRange, IColumnSelectionState, IMultiRowLayoutNode, ISelectionKeyboardState, ISelectionNode, ISelectionPointerState, IgxGridTransaction, SelectionState } from 'igniteui-angular/core';`);
+    }));
+    it('should split a mixed grids/core import, keeping non-moved exports in place', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxGridComponent, SelectionState, IgxSummaryOperand } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxGridComponent } from 'igniteui-angular/grids/core';\n` +
+            `import { IgxSummaryOperand, SelectionState } from 'igniteui-angular/core';`);
+    }));
+    it('should move IGroupingDoneEventArgs from grids/grid to grids/core', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IGroupingDoneEventArgs } from 'igniteui-angular/grids/grid';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IGroupingDoneEventArgs } from 'igniteui-angular/grids/core';`);
+    }));
+    it('should move IGroupingDoneEventArgs from grids/grid to grids/core as type import', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import type { IGroupingDoneEventArgs } from 'igniteui-angular/grids/grid';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import type { IGroupingDoneEventArgs } from 'igniteui-angular/grids/core';`);
+    }));
+    it('should preserve the type modifier when moving summary operands from grids/core to core', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import type { IgxSummaryOperand } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import type { IgxSummaryOperand } from 'igniteui-angular/core';`);
+    }));
+    it('should preserve a per-specifier inline type modifier when moving an export', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { type IGroupingDoneEventArgs, IgxGridComponent } from 'igniteui-angular/grids/grid';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxGridComponent } from 'igniteui-angular/grids/grid';\n` +
+            `import { type IGroupingDoneEventArgs } from 'igniteui-angular/grids/core';`);
+    }));
+    it('should migrate multiple separate import declarations in the same file', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxSummaryOperand } from 'igniteui-angular/grids/core';\n` +
+            `import { IGroupingDoneEventArgs } from 'igniteui-angular/grids/grid';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxSummaryOperand } from 'igniteui-angular/core';\n` +
+            `import { IGroupingDoneEventArgs } from 'igniteui-angular/grids/core';`);
+    }));
+    it('should migrate multiple import type declarations in the same file', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import type { IMultiRowLayoutNode, ISelectionNode } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import type { IMultiRowLayoutNode, ISelectionNode } from 'igniteui-angular/core';`);
+    }));
+    it('should merge migrated import declarations', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxSummaryResult } from 'igniteui-angular/core';\n` +
+            `import { IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core';`);
+    }));
+    it('should split IGroupingDoneEventArgs out of grids/grid, keeping other exports', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxGridComponent, IGroupingDoneEventArgs } from 'igniteui-angular/grids/grid';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxGridComponent } from 'igniteui-angular/grids/grid';\n` +
+            `import { IGroupingDoneEventArgs } from 'igniteui-angular/grids/core';`);
+    }));
+    it('should NOT move IGroupingDoneEventArgs when imported from grids/core', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `import { IGroupingDoneEventArgs } from 'igniteui-angular/grids/core';`;
+        appTree.create(filePath, content);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath)).toEqual(content);
+    }));
+    it('should merge into an existing core import while leaving unrelated imports untouched', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { Component, OnInit, ViewChild } from '@angular/core';\n` +
+            `import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid';\n` +
+            `import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core';\n` +
+            `import { IgxSummaryResult } from 'igniteui-angular/core';\n` +
+            `import { SINGERS } from '../../data/singersData';\n` +
+            `import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { Component, OnInit, ViewChild } from '@angular/core';\n` +
+            `import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid';\n` +
+            `import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core';\n` +
+            `import { IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core';\n` +
+            `import { SINGERS } from '../../data/singersData';\n` +
+            `import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';`);
+    }));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "22.1.0-beta.7",
+  "version": "22.1.0-rc.0",
   "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/SKILL.md

@@ -1,4 +1,5 @@
 ---
+license: MIT
 name: igniteui-angular-components
 description: "Covers all non-grid Ignite UI for Angular UI components: application scaffolding and setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider), layout containers (tabs, stepper, accordion, splitter, navigation drawer), data-display components (list, tree, card, chips, carousel, paginator, progress indicators, chat), feedback overlays (dialog, snackbar, toast, banner), directives (button, icon button, button group, ripple, tooltip, drag-and-drop), Dock Manager, Layout Manager, Tile Manager, and Charts. Use when users ask about any Ignite UI Angular component that is NOT a data grid — such as forms, dropdowns, pickers, dialogs, navigation, lists, trees, cards, charts, or initial project setup. Do NOT use for data grids, tables, or tabular data — use igniteui-angular-grids instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
 user-invocable: true

package/skills/igniteui-angular-figma-to-app/SKILL.md

@@ -1,4 +1,5 @@
 ---
+license: MIT
 name: igniteui-angular-figma-to-app
 description: >
   Translate Figma app screens designed using the Indigo.Design UI Kits into production

package/skills/igniteui-angular-generate-from-image-design/SKILL.md

@@ -1,4 +1,5 @@
 ---
+license: MIT
 name: igniteui-angular-generate-from-image-design
 description: Implement Angular application views from design images using Ignite UI Angular components. Uses MCP servers (igniteui-cli, igniteui-theming, angular-cli) to discover components, generate themes, and follow best practices. Triggers when the user provides a design image (screenshot, mockup, wireframe) and wants it built as a working Angular view with igniteui-angular components. Also triggers when the user asks to "implement this design", "build this UI", "convert this mockup", or "create a page from this image" in an Ignite UI Angular project.
 user-invocable: true

package/skills/igniteui-angular-grids/SKILL.md

@@ -1,4 +1,5 @@
 ---
+license: MIT
 name: igniteui-angular-grids
 description: "Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data. Do NOT use for non-grid UI components (forms, dialogs, navigation, charts) — use igniteui-angular-components instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
 user-invocable: true

package/skills/igniteui-angular-theming/SKILL.md

@@ -1,4 +1,5 @@
 ---
+license: MIT
 name: igniteui-angular-theming
 description: "Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. Use when users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between light and dark themes, create or apply a global theme, customize typography or elevation shadows, adjust spacing, sizing, or roundness, or configure per-component design tokens. Do NOT use for component behavior, APIs, or data binding — use igniteui-angular-components or igniteui-angular-grids instead."
 user-invocable: true

package/types/igniteui-angular-avatar.d.ts

@@ -199,7 +199,7 @@ declare class IgxAvatarComponent implements OnInit {
     get _isIconType(): boolean;
     /** @hidden @internal */
     get _isInitialsType(): boolean;
-    protected get componentSize(): string;
+    protected get componentSize(): string | undefined;
     /**
      * Returns the template of the avatar.
      *

package/types/igniteui-angular-banner.d.ts

@@ -170,7 +170,7 @@ declare class IgxBannerComponent implements IToggleView {
      * <button type="button" (click)="banner.open()">Open Banner</button>
      * ```
      */
-    open(event?: Event): void;
+    open(event?: MouseEvent): void;
     /**
      * Closes the banner
      *
@@ -185,7 +185,7 @@ declare class IgxBannerComponent implements IToggleView {
      * <button type="button" (click)="banner.close()">Close Banner</button>
      * ```
      */
-    close(event?: Event): void;
+    close(event?: MouseEvent): void;
     /**
      * Toggles the banner
      *
@@ -200,7 +200,7 @@ declare class IgxBannerComponent implements IToggleView {
      * <button type="button" (click)="banner.toggle()">Toggle Banner</button>
      * ```
      */
-    toggle(event?: Event): void;
+    toggle(event?: MouseEvent): void;
     /** @hidden */
     onExpansionPanelOpen(): void;
     /** @hidden */

package/types/igniteui-angular-calendar.d.ts

@@ -98,7 +98,7 @@ declare const IgxCalendarView: {
  * Determines the Calendar active view - days, months or years.
  */
 type IgxCalendarView = (typeof IgxCalendarView)[keyof typeof IgxCalendarView];
-declare const range: (start: number, stop: number, step?: number) => any[];
+declare const range: (start: number | undefined, stop: number, step?: number) => number[];
 /**
  * Returns true for leap years, false for non-leap years.
  *
@@ -252,7 +252,7 @@ declare abstract class IgxCalendarViewDirective implements ControlValueAccessor
     protected dayInterval: DayInterval;
     role: string;
     tabIndex: number;
-    protected get activeDescendant(): number;
+    protected get activeDescendant(): number | undefined;
     /**
      * Gets/sets whether the view should be rendered
      * according to the locale and format, if any.
@@ -293,11 +293,11 @@ declare abstract class IgxCalendarViewDirective implements ControlValueAccessor
     /**
      * @hidden
      */
-    protected _locale: any;
+    protected _locale: string;
     /**
      * @hidden
      */
-    protected _defaultLocale: any;
+    protected _defaultLocale: string;
     private _date;
     private _destroyRef;
     /**
@@ -586,8 +586,8 @@ declare class IgxCalendarBaseDirective implements ControlValueAccessor {
     protected _destroyRef: DestroyRef;
     protected platform: PlatformUtil;
     protected _localeId: string;
-    protected keyboardNavigation?: KeyboardNavigationService;
-    protected cdr?: ChangeDetectorRef;
+    protected keyboardNavigation?: KeyboardNavigationService | undefined;
+    protected cdr?: ChangeDetectorRef | undefined;
     protected i18nFormatter: igniteui_angular_core.BaseFormatter;
     /**
      * Holds month view index we are operating on.
@@ -1063,7 +1063,7 @@ declare class IgxDaysViewComponent extends IgxCalendarBaseDirective implements A
     readonly viewClass = true;
     get standalone(): boolean;
     set standalone(value: boolean);
-    protected get activeDescendant(): number;
+    protected get activeDescendant(): number | undefined;
     /**
      * Show/hide week numbers
      *
@@ -1601,7 +1601,7 @@ declare class IgxCalendarComponent extends IgxCalendarBaseDirective implements A
      * @hidden
      * @internal
      */
-    protected changePage(isKeydownTrigger: boolean, direction: ScrollDirection): void;
+    protected changePage(isKeydownTrigger: boolean | undefined, direction: ScrollDirection): void;
     /**
      * Continious navigation through the previous pages
      *
@@ -1832,7 +1832,7 @@ declare class IgxMonthPickerComponent extends IgxCalendarBaseDirective implement
      *  this.monthPicker.selectDate(new Date(`2018-06-12`));
      * ```
      */
-    selectDate(value: Date): Date;
+    selectDate(value: Date): Date | undefined;
     /**
      * @hidden
      */

package/types/igniteui-angular-card.d.ts

@@ -208,7 +208,7 @@ type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof IgxCardAc
  * Card actions is container for the card actions.
  */
 declare class IgxCardActionsComponent implements OnInit, OnChanges {
-    card: IgxCardComponent;
+    card: IgxCardComponent | null;
     /**
      * Sets the layout style of the actions.
      * You can justify the elements slotted in the igx-card-action container

package/types/igniteui-angular-carousel.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { OnDestroy, ChangeDetectorRef, EventEmitter, AfterContentChecked, AfterContentInit, TemplateRef, QueryList } from '@angular/core';
-import { AnimationPlayer, IBaseEventArgs, ICarouselResourceStrings } from 'igniteui-angular/core';
+import { AnimationPlayer, IBaseEventArgs, ICarouselResourceStrings, IgxGestureEvent } from 'igniteui-angular/core';
 import { AnimationReferenceMetadata } from '@angular/animations';
 import { Subject } from 'rxjs';
 
@@ -127,7 +127,7 @@ declare class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSl
      * @memberof IgxSlideComponent
      * @deprecated in version 19.2.0.
      */
-    get tabIndex(): number;
+    get tabIndex(): 0 | null;
     /**
      * @hidden
      */
@@ -247,7 +247,7 @@ declare class IgxCarouselComponent extends IgxCarouselComponentBase implements O
     /** @hidden */
     roleDescription: string;
     /** @hidden */
-    get labelId(): string;
+    get labelId(): string | null;
     /** @hidden */
     get isVertical(): boolean;
     /**
@@ -594,23 +594,23 @@ declare class IgxCarouselComponent extends IgxCarouselComponentBase implements O
     set interval(value: number);
     constructor();
     /** @hidden */
-    onTap(event: any): void;
+    onTap(event: IgxGestureEvent): void;
     /** @hidden */
     onMouseEnter(): void;
     /** @hidden */
     onMouseLeave(): void;
     /** @hidden */
-    onPanLeft(event: any): void;
+    onPanLeft(event: IgxGestureEvent): void;
     /** @hidden */
-    onPanRight(event: any): void;
+    onPanRight(event: IgxGestureEvent): void;
     /** @hidden */
-    onPanUp(event: any): void;
+    onPanUp(event: IgxGestureEvent): void;
     /** @hidden */
-    onPanDown(event: any): void;
+    onPanDown(event: IgxGestureEvent): void;
     /**
      * @hidden
      */
-    onPanEnd(event: any): void;
+    onPanEnd(event: IgxGestureEvent): void;
     /** @hidden */
     ngAfterContentInit(): void;
     /** @hidden */

package/types/igniteui-angular-chat.d.ts

@@ -63,7 +63,7 @@ declare class IgxChatComponent implements OnInit, OnDestroy {
     readonly draftMessage: _angular_core.InputSignal<{
         text: string;
         attachments?: IgcChatMessageAttachment[];
-    }>;
+    } | undefined>;
     /** Configuration options for the chat component */
     readonly options: _angular_core.InputSignal<IgxChatOptions>;
     /** Custom templates for rendering chat elements */