igniteui-angular 21.2.0-rc.0 → 21.2.0-rc.1

package/lib/core/styles/components/grid/_grid-theme.scss

@@ -3,6 +3,8 @@
 @use '../../base' as *;
 @use './excel-filtering-theme' as *;
 @use 'igniteui-theming/sass/animations' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+@use './grid-theme-builder' as *;
 
 @mixin _filtering-scroll-mask($theme, $dir) {
     display: block;
@@ -20,6 +22,7 @@
 @mixin grid($theme) {
     @include css-vars($theme);
     @include scale-in-ver-center();
+    @include grid-theme-builder($theme);
 
     $variant: map.get($theme, '_meta', 'theme');
     $theme-variant: map.get($theme, '_meta', 'variant');
@@ -249,6 +252,7 @@
         igx-prefix,
         igx-suffix {
             background: transparent !important;
+            color: var(--ig-input-group-idle-text-color) !important;
             border-radius: 0 !important;
             padding-top: 0 !important;
             padding-bottom: 0 !important;
@@ -310,7 +314,7 @@
                 min-width: rem(140px);
 
                 @if $variant != 'fluent' {
-                    border: rem(1px) solid color($color: 'gray', $variant: 300);
+                    border: rem(1px) solid color-mix(in srgb, var(--_grid-accent-color, var(--ig-gray-300)) 70%, var(--_grid-background, var(--ig-gray-300)));
                 }
 
                 --size: calc(#{$filtering-row-height} - #{rem(8px)});
@@ -321,6 +325,7 @@
                 igx-prefix,
                 igx-suffix {
                     background: transparent;
+                    color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background));
                     border-radius: 0;
 
                     /* stylelint-disable-next-line */
@@ -367,13 +372,13 @@
 
                 &:hover{
                     color: var-get($theme, 'filtering-row-text-color');
-                    border-color: color($color: 'primary', $variant: 500);
+                    border-color: var(--_grid-accent-color, var(--ig-primary-500));
                 }
             }
 
             .igx-input-group--focused {
                 @if $variant != 'fluent' {
-                    border-color: color($color: 'primary', $variant: 500);
+                    border-color: var(--_grid-accent-color, var(--ig-primary-500));
                     border-width: rem(1px);
                 }
 
@@ -402,6 +407,7 @@
                 igx-prefix,
                 igx-suffix {
                     background: transparent !important;
+                    color: var(--_grid-foreground);
                     border-radius: 0;
                 }
             }
@@ -411,7 +417,7 @@
             }
 
             igx-prefix:focus {
-                color: color(map.get($theme, 'palette'), 'secondary');
+                color: var-get($theme, 'sorted-header-icon-color');
             }
 
             igx-suffix {
@@ -419,7 +425,7 @@
                     outline-style: none;
 
                     &:focus {
-                        color: color($color: 'secondary');
+                        color: var-get($theme, 'sorted-header-icon-color');
                     }
 
                     + igx-icon {
@@ -436,43 +442,43 @@
     igx-tree-grid {
         @if $variant == 'material' {
             @if $theme-variant == 'light' {
-                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
-                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 300)};
-                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
+                --ig-chip-disabled-text-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-500)) 50%, var(--_grid-background, var(--ig-gray-500)));
+                --ig-chip-disabled-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 12%, var(--_grid-background, var(--ig-gray-300)));
+                --ig-chip-disabled-border-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 24%, var(--_grid-background, var(--ig-gray-300)));
             }
             @if $theme-variant == 'dark' {
-                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
-                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
-                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+                --ig-chip-disabled-text-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 50%, var(--_grid-background, var(--ig-gray-300)));
+                --ig-chip-disabled-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 12%, var(--_grid-background, var(--ig-gray-200)));
+                --ig-chip-disabled-border-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 24%, var(--_grid-background, var(--ig-gray-200)));
             }
         }
 
         @if $variant == 'fluent' {
             @if $theme-variant == 'dark' {
-                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
-                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
-                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+                --ig-chip-disabled-text-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-400)) 50%, var(--_grid-background, var(--ig-gray-400)));
+                --ig-chip-disabled-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 12%, var(--_grid-background, var(--ig-gray-200)));
+                --ig-chip-disabled-border-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 24%, var(--_grid-background, var(--ig-gray-200)));
             }
         }
 
         @if $variant == 'bootstrap' {
             @if $theme-variant == 'dark' {
-                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
-                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
-                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+                --ig-chip-disabled-text-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-400)) 50%, var(--_grid-background, var(--ig-gray-400)));
+                --ig-chip-disabled-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 12%, var(--_grid-background, var(--ig-gray-200)));
+                --ig-chip-disabled-border-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 24%, var(--_grid-background, var(--ig-gray-200)));
             }
         }
 
         @if $variant == 'indigo' {
             @if $theme-variant == 'light' {
-                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
-                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
-                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
+                --ig-chip-disabled-text-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-500)) 50%, var(--_grid-background, var(--ig-gray-500)));
+                --ig-chip-disabled-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 12%, var(--_grid-background, var(--ig-gray-200)));
+                --ig-chip-disabled-border-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 24%, var(--_grid-background, var(--ig-gray-300)));
             }
             @if $theme-variant == 'dark' {
-                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
-                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
-                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+                --ig-chip-disabled-text-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 50%, var(--_grid-background, var(--ig-gray-300)));
+                --ig-chip-disabled-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 12%, var(--_grid-background, var(--ig-gray-200)));
+                --ig-chip-disabled-border-color: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-200)) 24%, var(--_grid-background, var(--ig-gray-200)));
             }
         }
     }
@@ -892,12 +898,14 @@
         &%igx-grid__tr--ghost {
             background: var-get($theme, 'row-ghost-background');
             color: var-get($theme, 'row-drag-color');
+            outline: rem(1px) solid var-get($theme, 'row-ghost-border-color');
             z-index: 10002;
 
             @include css-vars((
                 name: 'igx-grid-row',
                 row-ghost-background: map.get($theme, 'row-ghost-background'),
-                row-drag-color: map.get($theme, 'row-drag-color')
+                row-drag-color: map.get($theme, 'row-drag-color'),
+                row-ghost-border-color: map.get($theme, 'row-ghost-border-color')
             ));
         }
     }
@@ -1009,17 +1017,13 @@
         }
 
         %igx-icon--error {
-            @if $variant == 'indigo' or $theme-variant == 'dark' {
-                color: color($color: 'gray', $variant: 500);
-            } @else {
-                color: color($color: 'gray', $variant: 600);
-            }
+            color: var-get($theme, 'grouparea-color');
         }
     }
 
     %igx-grid__td--bool-true {
         %igx-icon--success {
-            color: color($color: 'gray', $variant: 700);
+            color: var-get($theme, 'drop-area-text-color');
         }
     }
 
@@ -1372,6 +1376,7 @@
     }
 
     %igx-grid__tr--merged {
+        border-bottom: 0;
         border-block-end: 0;
     }
 
@@ -1814,7 +1819,7 @@
     }
 
     %grid-summaries--body {
-        --summaries-patch-background: var(--ig-gray-100);
+        --summaries-patch-background: color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-100)) 12%, var(--_grid-background, var(--ig-gray-100)));
 
         border-bottom: rem(1px) dashed var-get($theme, 'row-border-color');
         background-color: var-get($theme, 'summaries-patch-background');
@@ -2686,14 +2691,7 @@
     @include excel-filtering($theme);
 
     %advanced-filtering-dialog {
-	    @if $variant == 'indigo' {
-		    $light-variant: contrast-color($color: 'gray', $variant: 900);
-		    $dark-variant: color($color: 'gray', $variant: 50);
-		    background: if($theme-variant == 'light', $light-variant,  $dark-variant);
-	    } @else {
-		    background: color($color: 'surface', $variant: 500);
-	    }
-
+	    background: var-get($theme, 'filtering-dialog-background');
         box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24));
 
         @if $variant == 'material' or $variant == 'bootstrap' {

package/lib/core/styles/components/input/_input-group-theme.scss

@@ -259,7 +259,7 @@
     }
 
     %form-group-display--filled {
-        color: var-get($theme, 'input-prefix-color--filled');
+        color: var-get($theme, 'filled-text-color');
 
         igx-prefix,
         [igxPrefix] {

package/lib/core/styles/components/progress/circular/_circular-theme.scss

@@ -157,7 +157,7 @@
 
     %inner {
         stroke-width: var(--stroke-thickness);
-        stroke: var-get($theme, 'base-circle-color');
+        stroke: var-get($theme, 'track-color');
     }
 
     %outer {

package/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -257,11 +257,11 @@
 
 			@if $variant == 'fluent' {
 				--background: transparent;
-				--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover});
 				--focus-visible-background: transparent;
-				--focus-background: transparent;
-				--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
-				--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--focus-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
+				--active-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
+				--hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover});
 			}
 
 			--foreground: #{var-get($theme, 'color-expression-group-and')};
@@ -307,11 +307,11 @@
 
 			@if $variant == 'fluent' {
 				--background: transparent;
-				--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover});
 				--focus-visible-background: transparent;
-				--focus-background: transparent;
-				--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
-				--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--focus-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
+				--active-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
+				--hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover});
 			}
 
 			--foreground: #{var-get($theme, 'color-expression-group-or')};

package/lib/core/styles/components/select/_select-theme.scss

@@ -49,7 +49,7 @@
     .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
         @if $variant == 'material' {
             %igx-select__toggle-button {
-                background: var-get($theme, 'toggle-button-background-focus--border');
+                background: var-get($theme, 'toggle-button-background');
             }
         }
     }

package/migrations/common/ServerHost.js

@@ -1,8 +1,41 @@
 "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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ServerHost = void 0;
-const pathFs = require("path");
-const ts = require("typescript/lib/tsserverlibrary");
+const pathFs = __importStar(require("path"));
+const ts = __importStar(require("typescript/lib/tsserverlibrary"));
 const tsUtils_1 = require("./tsUtils");
 const module_1 = require("module");
 /**

package/migrations/common/UpdateChanges.js

@@ -3,12 +3,45 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BindingType = exports.UpdateChanges = exports.InputPropertyType = void 0;
-const fs = require("fs");
-const path = require("path");
-const ts = require("typescript");
-const tss = require("typescript/lib/tsserverlibrary");
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const ts = __importStar(require("typescript"));
+const tss = __importStar(require("typescript/lib/tsserverlibrary"));
 const schema_1 = require("./schema");
 const tsUtils_1 = require("./tsUtils");
 const util_1 = require("./util");

package/migrations/common/tsLogger.js

@@ -1,7 +1,40 @@
 "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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Logger = void 0;
-const ts = require("typescript/lib/tsserverlibrary");
+const ts = __importStar(require("typescript/lib/tsserverlibrary"));
 class Logger {
     constructor(traceToConsole, level) {
         this.traceToConsole = traceToConsole;

package/migrations/common/tsUtils.js

@@ -1,8 +1,41 @@
 "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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isMemberIgniteUI = exports.getTypeDefinitionAtPosition = exports.createProjectService = exports.getLanguageService = exports.findMatches = exports.getRenamePositions = exports.igNamedImportFilter = exports.getImportModulePositions = exports.getIdentifierPositions = exports.MemberInfo = exports.isIgniteuiImport = exports.CUSTOM_TS_PLUGIN_NAME = exports.CUSTOM_TS_PLUGIN_PATH = exports.NG_CORE_PACKAGE_NAME = exports.NG_LANG_SERVICE_PACKAGE_NAME = exports.IG_LICENSED_PACKAGE_NAME = exports.IG_PACKAGE_NAME = void 0;
-const ts = require("typescript");
-const tss = require("typescript/lib/tsserverlibrary");
+const ts = __importStar(require("typescript"));
+const tss = __importStar(require("typescript/lib/tsserverlibrary"));
 const util_1 = require("./util");
 const tsLogger_1 = require("./tsLogger");
 exports.IG_PACKAGE_NAME = 'igniteui-angular';

package/migrations/common/util.d.ts

@@ -1,6 +1,6 @@
 import type { SchematicContext, Tree } from '@angular-devkit/schematics';
 import type { WorkspaceSchema, WorkspaceProject } from '@schematics/angular/utility/workspace-models';
-import type { Attribute, Element, HtmlParser, HtmlTagDefinition, Node } from '@angular/compiler';
+import type { Attribute, Element, HtmlParser, HtmlTagDefinition, Node } from '@angular/compiler' with { "resolution-mode": "import" };
 export declare const getProjectPaths: (config: WorkspaceSchema) => string[];
 export declare const getWorkspacePath: (host: Tree) => string;
 export declare const getWorkspace: (host: Tree) => WorkspaceSchema;

package/migrations/common/util.js

@@ -1,8 +1,41 @@
 "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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stringifyAttributes = exports.makeNgIf = exports.serializeNodes = exports.flatten = exports.getSourceOffset = exports.getAttribute = exports.hasAttribute = exports.findElementNodes = exports.parseFile = exports.FileChange = exports.tryUninstallPackage = exports.tryInstallPackage = exports.getPackageVersion = exports.canResolvePackage = exports.getPackageManager = exports.supports = exports.replaceMatch = exports.escapeRegExp = exports.getProjects = exports.getWorkspace = exports.getWorkspacePath = exports.getProjectPaths = void 0;
 const core_1 = require("@angular-devkit/core");
-const path = require("path");
+const path = __importStar(require("path"));
 const child_process_1 = require("child_process");
 const configPaths = ['/.angular.json', '/angular.json'];
 const getProjectPaths = (config) => {

package/migrations/migration-collection.json

@@ -279,6 +279,11 @@
             "factory": "./update-21_1_0_add-agent-skills",
             "recommended": true,
             "optional": true
+        },
+        "migration-55": {
+            "version": "21.2.0",
+            "description": "Updates Ignite UI for Angular from v21.1.x to v21.2.0",
+            "factory": "./update-21_2_0"
         }
     }
 }

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

@@ -11,12 +11,11 @@ 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_js_1 = require("igniteui-angular/migrations/common/import-helper.js");
 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}`);
-    const { HtmlParser, getHtmlTagDefinition } = yield (0, import_helper_js_1.nativeImport)('@angular/compiler');
+    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+    const { HtmlParser, getHtmlTagDefinition } = yield import('@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.d.ts

@@ -1,4 +1,4 @@
 import type { Rule } from '@angular-devkit/schematics';
-import { Options } from '../../schematics/interfaces/options';
+import type { Options } from '../../schematics/interfaces/options';
 declare const _default: (options: Options) => Rule;
 export default _default;

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

@@ -11,12 +11,11 @@ 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_js_1 = require("igniteui-angular/migrations/common/import-helper.js");
 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}`);
-    const { HtmlParser } = yield (0, import_helper_js_1.nativeImport)('@angular/compiler');
+    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+    const { HtmlParser } = yield import('@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,13 +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_js_1 = require("igniteui-angular/migrations/common/import-helper.js");
 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}`);
-    const { HtmlParser, getHtmlTagDefinition } = yield (0, import_helper_js_1.nativeImport)('@angular/compiler');
+    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+    const { HtmlParser, getHtmlTagDefinition } = yield import('@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,8 +11,6 @@ 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_js_1 = require("igniteui-angular/migrations/common/import-helper.js");
 const version = '13.0.0';
 exports.default = (options) => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
@@ -28,7 +26,8 @@ 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'];
-    const { HtmlParser } = yield (0, import_helper_js_1.nativeImport)('@angular/compiler');
+    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+    const { HtmlParser } = yield import('@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,14 +9,13 @@ 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_js_1 = require("igniteui-angular/migrations/common/import-helper.js");
 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}`);
-    const { HtmlParser } = yield (0, import_helper_js_1.nativeImport)('@angular/compiler');
+    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+    const { HtmlParser } = yield import('@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]'];