Merge branch 'aahmedov/fix-touched-ivalid-color-not-applied-#14900-18.1.x' of https://github.com/IgniteUI/igniteui-angular into aahmedov/fix-touched-ivalid-color-not-applied-#14900-18.1.x

Author: Zneeky

.vscode/launch.json

@@ -27,20 +27,13 @@
             // "cwd": "<absolute directory of the project, having an old version of igniteui-angular, on which the migrations are applied>",
             "cwd": "C:\\Users\\User\\Desktop\\ng_proj\\test_migrations",
             "args": [
-                "-r",
-
-                // you need to install ts-node for the test project
-                "ts-node/register",
-
                 // "<path/to/ng>", "g",
                 "${env:AppData}/npm/node_modules/@angular/cli/bin/ng", "g",
 
-                // "<../../relative/path/from/cwd/to>/igniteui-angular/projects/igniteui-angular/migrations/migration-collection.json:migration-<number>
-                "../../../../../work/git/igniteui-angular/projects/igniteui-angular/migrations/migration-collection.json:migration-24"
+                // "<../../relative/path/from/cwd/to>/igniteui-angular/dist/igniteui-angular/migrations/migration-collection.json:migration-<number>
+                "../../../../../work/git/igniteui-angular/dist/igniteui-angular/migrations/migration-collection.json:migration-23"
             ],
-            "env": {
-                "TS_NODE_PROJECT": "${workspaceFolder}/projects/igniteui-angular/migrations/tsconfig.json"
-            }
+            "preLaunchTask": "buildMigrations"
         },
         {
             "name": "Run schematics",

.vscode/tasks.json

@@ -0,0 +1,32 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "build:schematics",
+            "problemMatcher": [],
+            "label": "buildSchematics",
+            "detail": "Build schematics"
+        },
+        {
+            "type": "npm",
+            "script": "build:migrations -- --sourceMap",
+            "dependsOn": [
+                "buildSchematics"
+            ],
+            "problemMatcher": [],
+            "label": "buildMigrationsSourceMap",
+            "detail": "Build migrations with sourceMap for debugging"
+        },
+        {
+            "type": "shell",
+            "command": "node ./scripts/migrations-sourcemap-shift.mjs",
+            "dependsOn": [
+                "buildMigrationsSourceMap"
+            ],
+            "problemMatcher": [],
+            "label": "buildMigrations",
+            "detail": "Build migrations with sourceMap for debugging"
+        },
+    ]
+}

projects/igniteui-angular/migrations/common/ServerHost.ts

@@ -2,6 +2,7 @@ import type { Tree } from '@angular-devkit/schematics';
 import * as pathFs from 'path';
 import * as ts from 'typescript/lib/tsserverlibrary';
 import { CUSTOM_TS_PLUGIN_NAME, CUSTOM_TS_PLUGIN_PATH } from './tsUtils';
+import { createRequire } from 'module';
 
 /**
  * Language server host is responsible for **most** of the FS operations / checks
@@ -11,6 +12,8 @@ export class ServerHost implements ts.server.ServerHost {
     public readonly args: string[];
     public readonly newLine: string;
     public readonly useCaseSensitiveFileNames: boolean;
+    /** Cached because Angular schematics encapsulation's customRequire doesn't provide `resolve` */
+    private nativeRequire = createRequire(__filename);
 
     constructor(private host: Tree) {
         this.args = ts.sys.args;
@@ -126,7 +129,7 @@ export class ServerHost implements ts.server.ServerHost {
                 moduleName = CUSTOM_TS_PLUGIN_PATH;
                 paths.push(__dirname);
             }
-            const modulePath = require.resolve(moduleName, { paths });
+            const modulePath = this.nativeRequire.resolve(moduleName, { paths });
             return {
                 module: require(modulePath),
                 error: undefined,

projects/igniteui-angular/migrations/common/UpdateChanges.ts

@@ -682,7 +682,7 @@ export class UpdateChanges {
         }
 
         // attempt to find a main tsconfig from workspace:
-        const wsProject = this.workspace.projects[0];
+        const wsProject = Object.values(this.workspace.projects)[0];
         // technically could be per-project, but assuming there's at least one main tsconfig for IDE support
         const projectConfig = wsProject.architect?.build?.options['tsConfig'];
 
@@ -847,8 +847,8 @@ export class UpdateChanges {
         for (const key of projectKeys) {
             const wsProject = this.workspace.projects[key];
             // intentionally compare against string values of the enum to avoid hard import
-            if (wsProject.projectType == "application" && wsProject.architect?.build?.options['main']) {
-                return wsProject.architect.build.options['main'];
+            if (wsProject.projectType == "application" && wsProject.architect?.build?.options) {
+                return wsProject.architect.build.options['browser'] || wsProject.architect.build.options['main'];
             } else if (wsProject.projectType == "library") {
                 // TODO: attempt to resolve from project ng-package.json or tsConfig
             }

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -98,7 +98,7 @@
         --size: #{rem(22px)};
         --_badge-size: var(--size);
 
-        display: flex;
+        display: inline-flex;
         justify-content: center;
         align-items: center;
         min-width: var(--_badge-size);
@@ -138,7 +138,7 @@
 
     %igx-badge-value {
         white-space: nowrap;
-        padding: $badge-value-padding;
+        padding-inline: $badge-value-padding;
     }
 
     %igx-badge--success {

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -146,6 +146,11 @@
         flex-wrap: wrap;
         align-self: flex-end;
         gap: rem(8px);
+
+        > a {
+            display: inline-flex;
+            align-items: center;
+        }
     }
 }
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -3093,8 +3093,11 @@
                 max-height: 100%;
             }
         }
-    }
 
+        %igx-grid__tr-pivot--row-area {
+            padding-bottom: rem(4px);
+        }
+    }
 
     %grid-thead--pivot {
         display: flex;

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss

@@ -158,6 +158,8 @@
         }
 
         @include mx(textarea-group, placeholder) {
+            @extend %form-group-placeholder !optional;
+
             @include e(notch) {
                 @extend %textarea-group-notch--focused !optional;
             }
@@ -178,6 +180,8 @@
         }
 
         @include mx(textarea-group, placeholder, border) {
+            @extend %form-group-placeholder !optional;
+
             @include e(notch) {
                 @extend %textarea-group-notch--focused !optional;
             }
@@ -212,6 +216,8 @@
         }
 
         @include m(placeholder) {
+            @extend %form-group-placeholder !optional;
+
             @include e(label) {
                 @extend %form-group-label--float !optional;
                 @extend %form-group-label--fixed !optional;
@@ -381,6 +387,8 @@
         }
 
         @include mx(box, textarea-group, placeholder) {
+            @extend %form-group-placeholder !optional;
+
             @include e(notch) {
                 @extend %form-group-notch--box-textarea !optional;
             }
@@ -460,6 +468,7 @@
 
         @include mx(border, placeholder) {
             @extend %form-group-label--placeholder-border !optional;
+            @extend %form-group-placeholder !optional;
 
             @include e(label) {
                 @extend %form-group-label--float-border !optional;
@@ -580,6 +589,8 @@
         }
 
         @include mx(fluent, placeholder) {
+            @extend %form-group-placeholder !optional;
+
             @include e(label) {
                 @extend %fluent-placeholder-label !optional;
             }

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -462,6 +462,18 @@
         }
     }
 
+    %form-group-placeholder {
+        %form-group-label {
+            transition: none !important;
+        }
+    }
+
+    %form-group-display:not(%form-group-display--filled) {
+        %form-group-label {
+            transition: all $transition-timing;
+        }
+    }
+
     %form-group-display--no-margin {
         margin-block-start: 0;
     }
@@ -883,7 +895,6 @@
         backface-visibility: hidden;
         will-change: transform;
         transform-origin: top left;
-        transition: all $transition-timing;
         margin-inline-start: pad-inline(0, rem(-2px), rem(-4px));
     }
 

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -202,7 +202,7 @@
     }
 
     %navdrawer-display-mini-pinned {
-        flex-basis: var(--igx-mini-nav-drawer-size, #{$item-mini-size});
+        flex-basis: calc(var(--igx-mini-nav-drawer-size, #{$item-mini-size}) + rem(1px));
     }
 
     %aside {
@@ -217,7 +217,7 @@
         inset-inline-start: 0;
         z-index: 999;
         transition: width, padding, transform;
-        transition-timing-function: $in-out-quad, $in-out-quad;
+        transition-timing-function: $in-out-quad;
         box-shadow: var-get($theme, 'shadow');
         padding: $aside-padding;
 
@@ -279,16 +279,23 @@
     }
 
     %aside--mini {
-        transition-duration: .2s, .2s;
+        transition-duration: .3s;
         width: var(--igx-nav-drawer-size--mini);
+        min-width: fit-content;
 
         %item {
             justify-content: center;
+            min-width: fit-content;
+
+            @if $variant == 'bootstrap' {
+                width: rem(56px);
+            }
 
             @if $variant == 'indigo' {
-                //max-width: rem(32px);
+                width: rem(32px);
+
                 // important is needed to override the typography margins
-                margin: rem(14px) auto !important;
+                margin: rem(4px) auto !important;
             }
 
             igx-icon {
@@ -298,15 +305,15 @@
     }
 
     %aside--normal {
-        transition-duration: .3s, .3s;
+        transition-duration: .3s;
         width: var(--igx-nav-drawer-size);
     }
 
     %overlay {
         opacity: 1;
         background: color(null, 'gray', 500, .54);
         transition: opacity, visibility;
-        transition-duration: .25s, .25s;
+        transition-duration: .3s, .3s;
         transition-timing-function: ease-in, step-start;
         transition-delay: 0s, 0s;
         position: absolute;