igniteui-angular 22.1.0-beta.7 → 22.1.0

package/migrations/update-21_0_0_import-migration/index.js

@@ -142,8 +142,6 @@ const ENTRY_POINT_MAP = new Map([
     ['IgxButtonGroupComponent', 'button-group'],
     ['IgxButtonGroupModule', 'button-group'],
     ['IGX_BUTTON_GROUP_DIRECTIVES', 'button-group'],
-    ['IgxButtonDirective', 'button-group'],
-    ['IgxIconButtonDirective', 'button-group'],
     ['IButtonGroupEventArgs', 'button-group'],
     ['ButtonGroupAlignment', 'button-group'],
     // Calendar
@@ -706,6 +704,8 @@ const TYPE_RENAMES = new Map([
     ['Direction', { newName: 'CarouselAnimationDirection', entryPoint: 'carousel' }],
     ['IgxColumPatternValidatorDirective', { newName: 'IgxColumnPatternValidatorDirective', entryPoint: 'grids/core' }],
 ]);
+/** Sorts specifiers alphabetically by their imported symbol name. */
+const sortByName = (a, b) => a.key < b.key ? -1 : a.key > b.key ? 1 : 0;
 function migrateImportDeclaration(node, sourceFile) {
     var _a;
     if (!(0, tsUtils_1.igNamedImportFilter)(node)) {
@@ -719,6 +719,10 @@ function migrateImportDeclaration(node, sourceFile) {
     }
     // Group imports by entry point
     const entryPointGroups = new Map();
+    // `import type { ... }` applies to the whole declaration, so it carries over to every generated import.
+    // `phaseModifier` is TS 5.9+; the deprecated `isTypeOnly` keeps this working when an older workspace TS resolves at runtime.
+    const isTypeOnly = node.importClause.phaseModifier === ts.SyntaxKind.TypeKeyword || node.importClause.isTypeOnly;
+    const typeModifier = isTypeOnly ? 'type ' : '';
     for (const element of namedBindings.elements) {
         const name = element.name.text;
         const alias = (_a = element.propertyName) === null || _a === void 0 ? void 0 : _a.text;
@@ -729,6 +733,8 @@ function migrateImportDeclaration(node, sourceFile) {
             const rename = TYPE_RENAMES.get(importName);
             actualImportName = rename.newName;
         }
+        // Per-specifier modifier, e.g. `import { type CellType, IgxGridComponent }`
+        const typePrefix = element.isTypeOnly ? 'type ' : '';
         const fullImport = alias ? `${actualImportName} as ${name}` : actualImportName;
         // Determine target entry point
         let targetEntryPoint = 'core'; // Default to core
@@ -742,13 +748,13 @@ function migrateImportDeclaration(node, sourceFile) {
         if (!entryPointGroups.has(targetEntryPoint)) {
             entryPointGroups.set(targetEntryPoint, []);
         }
-        entryPointGroups.get(targetEntryPoint).push(fullImport);
+        entryPointGroups.get(targetEntryPoint).push({ key: actualImportName, text: `${typePrefix}${fullImport}` });
     }
     // Generate new import statements
     const newImports = [];
     for (const [entryPoint, imports] of entryPointGroups) {
-        const sortedImports = imports.sort();
-        newImports.push(`import { ${sortedImports.join(', ')} } from '${importPath}/${entryPoint}';`);
+        const sortedImports = imports.sort(sortByName).map(specifier => specifier.text);
+        newImports.push(`import ${typeModifier}{ ${sortedImports.join(', ')} } from '${importPath}/${entryPoint}';`);
     }
     return {
         start: node.getStart(sourceFile),

package/migrations/update-21_0_0_import-migration/index.spec.d.ts

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

package/migrations/update-21_0_0_import-migration/index.spec.js

@@ -0,0 +1,175 @@
+"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 = '21.0.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-51';
+    const filePath = '/testSrc/appPrefix/component/test.component.ts';
+    it('should split a root import into granular entry points', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxGridComponent, IgxIconComponent, IgxColumnComponent } from 'igniteui-angular';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxGridComponent } from 'igniteui-angular/grids/grid';\n` +
+            `import { IgxIconComponent } from 'igniteui-angular/icon';\n` +
+            `import { IgxColumnComponent } from 'igniteui-angular/grids/core';`);
+    }));
+    it('should sort the exports of an entry point alphabetically', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxColumnComponent, IgxCellTemplateDirective, IgxCsvExporterService } from 'igniteui-angular';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxCellTemplateDirective, IgxColumnComponent, IgxCsvExporterService } from 'igniteui-angular/grids/core';`);
+    }));
+    it('should default unmapped exports to core', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxOverlayService } from 'igniteui-angular';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxOverlayService } from 'igniteui-angular/core';`);
+    }));
+    it('should preserve aliased imports', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxGridComponent as Grid } from 'igniteui-angular';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxGridComponent as Grid } from 'igniteui-angular/grids/grid';`);
+    }));
+    it('should migrate imports from the licensed package', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxGridComponent } from '@infragistics/igniteui-angular';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxGridComponent } from '@infragistics/igniteui-angular/grids/grid';`);
+    }));
+    it('should NOT modify imports that already use a granular entry point', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `import { IgxGridComponent } from 'igniteui-angular/grids/grid';`;
+        appTree.create(filePath, content);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath)).toEqual(content);
+    }));
+    it('should preserve the type modifier of an import type declaration', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import type { CellType, IgxGridComponent } from 'igniteui-angular';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import type { CellType } from 'igniteui-angular/grids/core';\n` +
+            `import type { IgxGridComponent } from 'igniteui-angular/grids/grid';`);
+    }));
+    it('should preserve a per-specifier inline type modifier', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { type CellType, IgxColumnComponent } from 'igniteui-angular';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { type CellType, IgxColumnComponent } from 'igniteui-angular/grids/core';`);
+    }));
+    it('should split inline type specifiers into their own entry points', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxGridComponent, type CellType } from 'igniteui-angular';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxGridComponent } from 'igniteui-angular/grids/grid';\n` +
+            `import { type CellType } from 'igniteui-angular/grids/core';`);
+    }));
+    it('should rename Direction to CarouselAnimationDirection and move it to carousel', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { Direction, IgxCarouselComponent } from 'igniteui-angular';\n` +
+            `export class TestComponent {\n` +
+            `    public animationDirection: Direction;\n` +
+            `}`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { CarouselAnimationDirection, IgxCarouselComponent } from 'igniteui-angular/carousel';\n` +
+            `export class TestComponent {\n` +
+            `    public animationDirection: CarouselAnimationDirection;\n` +
+            `}`);
+    }));
+    it('should rename a type in an import type declaration', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import type { Direction } from 'igniteui-angular';\n` +
+            `export class TestComponent {\n` +
+            `    public animationDirection: Direction;\n` +
+            `}`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import type { CarouselAnimationDirection } from 'igniteui-angular/carousel';\n` +
+            `export class TestComponent {\n` +
+            `    public animationDirection: CarouselAnimationDirection;\n` +
+            `}`);
+    }));
+    it('should move the button directives to directives', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxButtonDirective, IgxIconButtonDirective, IgxButtonGroupComponent } from 'igniteui-angular';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';\n` +
+            `import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';`);
+    }));
+    it('should rename the misspelled column pattern validator directive', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxColumPatternValidatorDirective } from 'igniteui-angular';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxColumnPatternValidatorDirective } from 'igniteui-angular/grids/core';`);
+    }));
+    it('should migrate a component file, leaving unrelated imports untouched', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { Component, ViewChild } from '@angular/core';\n` +
+            `import { IgxGridComponent, IgxColumnComponent, type CellType } from 'igniteui-angular';\n` +
+            `import { DATA } from '../../data/localData';\n` +
+            `@Component({ selector: 'app-test', template: '' })\n` +
+            `export class TestComponent {\n` +
+            `    @ViewChild(IgxGridComponent, { static: true })\n` +
+            `    public grid: IgxGridComponent;\n` +
+            `    public data = DATA;\n` +
+            `}`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { Component, ViewChild } from '@angular/core';\n` +
+            `import { IgxGridComponent } from 'igniteui-angular/grids/grid';\n` +
+            `import { type CellType, IgxColumnComponent } from 'igniteui-angular/grids/core';\n` +
+            `import { DATA } from '../../data/localData';\n` +
+            `@Component({ selector: 'app-test', template: '' })\n` +
+            `export class TestComponent {\n` +
+            `    @ViewChild(IgxGridComponent, { static: true })\n` +
+            `    public grid: IgxGridComponent;\n` +
+            `    public data = DATA;\n` +
+            `}`);
+    }));
+});

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

@@ -51,6 +51,8 @@ const ENTRY_POINT_MAP = new Map([
     // IgxGridGroupByAreaComponent moved from grids/core to grids/grid
     ['IgxGridGroupByAreaComponent', 'grids/grid']
 ]);
+/** Sorts specifiers alphabetically by their imported symbol name. */
+const sortByName = (a, b) => a.key < b.key ? -1 : a.key > b.key ? 1 : 0;
 function migrateImportDeclaration(node, sourceFile) {
     var _a;
     if (!(0, tsUtils_1.igNamedImportFilter)(node)) {
@@ -65,11 +67,18 @@ function migrateImportDeclaration(node, sourceFile) {
     // Group imports by entry point
     const entryPointGroups = new Map();
     const remainingInCore = [];
+    // `import type { ... }` applies to the whole declaration, so it carries over to every generated import.
+    // `phaseModifier` is TS 5.9+; the deprecated `isTypeOnly` keeps this working when an older workspace TS resolves at runtime.
+    const isTypeOnly = node.importClause.phaseModifier === ts.SyntaxKind.TypeKeyword || node.importClause.isTypeOnly;
+    const typeModifier = isTypeOnly ? 'type ' : '';
     for (const element of namedBindings.elements) {
         const name = element.name.text;
         const alias = (_a = element.propertyName) === null || _a === void 0 ? void 0 : _a.text;
         const importName = alias || name;
-        const fullImport = alias ? `${importName} as ${name}` : importName;
+        // Per-specifier modifier, e.g. `import { type CellType, IgxColumnComponent }`
+        const typePrefix = element.isTypeOnly ? 'type ' : '';
+        const specifier = alias ? `${importName} as ${name}` : importName;
+        const fullImport = { key: importName, text: `${typePrefix}${specifier}` };
         // Check if this import needs to be moved
         if (ENTRY_POINT_MAP.has(importName)) {
             const targetEntryPoint = ENTRY_POINT_MAP.get(importName);
@@ -91,14 +100,14 @@ function migrateImportDeclaration(node, sourceFile) {
     const newImports = [];
     // Add remaining grids/core imports first
     if (remainingInCore.length > 0) {
-        const sortedImports = remainingInCore.sort();
-        newImports.push(`import { ${sortedImports.join(', ')} } from '${importPath}';`);
+        const sortedImports = remainingInCore.sort(sortByName).map(specifier => specifier.text);
+        newImports.push(`import ${typeModifier}{ ${sortedImports.join(', ')} } from '${importPath}';`);
     }
     // Add moved imports
     for (const [entryPoint, imports] of entryPointGroups) {
-        const sortedImports = imports.sort();
+        const sortedImports = imports.sort(sortByName).map(specifier => specifier.text);
         const basePackage = importPath.replace('/grids/core', '');
-        newImports.push(`import { ${sortedImports.join(', ')} } from '${basePackage}/${entryPoint}';`);
+        newImports.push(`import ${typeModifier}{ ${sortedImports.join(', ')} } from '${basePackage}/${entryPoint}';`);
     }
     return {
         start: node.getStart(sourceFile),

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

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

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

@@ -0,0 +1,146 @@
+"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 = '21.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-52';
+    const filePath = '/testSrc/appPrefix/component/test.component.ts';
+    it('should move IgxGridGroupByAreaComponent from grids/core to grids/grid', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/grid';`);
+    }));
+    it('should split the moved export out, keeping the other exports in grids/core', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxColumnComponent, IgxGridGroupByAreaComponent, IgxCellTemplateDirective } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core';\n` +
+            `import { IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/grid';`);
+    }));
+    it('should preserve aliased imports', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxGridGroupByAreaComponent as GroupByArea } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxGridGroupByAreaComponent as GroupByArea } from 'igniteui-angular/grids/grid';`);
+    }));
+    it('should migrate imports from the licensed package', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxGridGroupByAreaComponent } from '@infragistics/igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxGridGroupByAreaComponent } from '@infragistics/igniteui-angular/grids/grid';`);
+    }));
+    it('should NOT modify grids/core imports that are not moved', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `import { IgxColumnComponent } from 'igniteui-angular/grids/core';`;
+        appTree.create(filePath, content);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath)).toEqual(content);
+    }));
+    it('should NOT modify IgxGridGroupByAreaComponent when imported from grids/grid', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `import { IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/grid';`;
+        appTree.create(filePath, content);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath)).toEqual(content);
+    }));
+    it('should preserve the type modifier of an import type declaration', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import type { IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import type { IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/grid';`);
+    }));
+    it('should preserve the type modifier on both sides of a split import type declaration', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import type { IgxColumnComponent, IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import type { IgxColumnComponent } from 'igniteui-angular/grids/core';\n` +
+            `import type { IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/grid';`);
+    }));
+    it('should preserve a per-specifier inline type modifier on the moved export', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { type IgxGridGroupByAreaComponent, IgxColumnComponent } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { IgxColumnComponent } from 'igniteui-angular/grids/core';\n` +
+            `import { type IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/grid';`);
+    }));
+    it('should preserve a per-specifier inline type modifier on a retained export', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { IgxGridGroupByAreaComponent, type CellType, IgxColumnComponent } from 'igniteui-angular/grids/core';`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { type CellType, IgxColumnComponent } from 'igniteui-angular/grids/core';\n` +
+            `import { IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/grid';`);
+    }));
+    it('should migrate a component file, leaving unrelated imports untouched', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(filePath, `import { Component, ViewChild } from '@angular/core';\n` +
+            `import { IgxColumnComponent, IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/core';\n` +
+            `import { IgxGridComponent } from 'igniteui-angular/grids/grid';\n` +
+            `import { DATA } from '../../data/localData';\n` +
+            `@Component({ selector: 'app-test', template: '' })\n` +
+            `export class TestComponent {\n` +
+            `    @ViewChild(IgxGridGroupByAreaComponent, { static: true })\n` +
+            `    public groupByArea: IgxGridGroupByAreaComponent;\n` +
+            `    public data = DATA;\n` +
+            `}`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(filePath))
+            .toEqual(`import { Component, ViewChild } from '@angular/core';\n` +
+            `import { IgxColumnComponent } from 'igniteui-angular/grids/core';\n` +
+            `import { IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/grid';\n` +
+            `import { IgxGridComponent } from 'igniteui-angular/grids/grid';\n` +
+            `import { DATA } from '../../data/localData';\n` +
+            `@Component({ selector: 'app-test', template: '' })\n` +
+            `export class TestComponent {\n` +
+            `    @ViewChild(IgxGridGroupByAreaComponent, { static: true })\n` +
+            `    public groupByArea: IgxGridGroupByAreaComponent;\n` +
+            `    public data = DATA;\n` +
+            `}`);
+    }));
+});

package/migrations/update-22_1_0_chip-outline/changes/theme-changes.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$focus-outline-color",
+      "replaceWith": "$focus-shadow-color",
+      "owner": "chip-theme",
+      "type": "property"
+    },
+    {
+      "name": "$focus-selected-outline-color",
+      "replaceWith": "$focus-selected-shadow-color",
+      "owner": "chip-theme",
+      "type": "property"
+    }
+  ]
+}

package/migrations/update-22_1_0_chip-outline/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from '@angular-devkit/schematics';
+declare const _default: () => Rule;
+export default _default;

package/migrations/update-22_1_0_chip-outline/index.js

@@ -0,0 +1,18 @@
+"use strict";
+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 UpdateChanges_1 = require("../common/UpdateChanges");
+const version = '22.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}`);
+    const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+});

package/migrations/update-22_1_0_chip-outline/index.spec.d.ts

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

package/migrations/update-22_1_0_chip-outline/index.spec.js

@@ -0,0 +1,68 @@
+"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-60';
+    it('should rename focus-outline-color and focus-selected-outline-color in chip-theme', () => __awaiter(void 0, void 0, void 0, function* () {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+        appTree.create(testFilePath, `$my-chip-theme: chip-theme(
+                $focus-outline-color: red,
+                $focus-selected-outline-color: blue
+            );`);
+        const tree = yield schematicRunner.runSchematic(migrationName, {}, appTree);
+        expect(tree.readContent(testFilePath)).toEqual(`$my-chip-theme: chip-theme(
+                $focus-shadow-color: red,
+                $focus-selected-shadow-color: blue
+            );`);
+    }));
+});

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

@@ -0,0 +1,2 @@
+import type { Rule } from '@angular-devkit/schematics';
+export default function migrate(): Rule;