igniteui-angular 18.2.0-beta.0 → 18.2.0-beta.1

package/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 {
@@ -213,11 +213,11 @@
         background: var-get($theme, 'background');
         top: 0;
         bottom: 0;
-        min-width: var(--igx-nav-drawer-size);
+        width: var(--igx-nav-drawer-size);
         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,11 +279,13 @@
     }
 
     %aside--mini {
-        transition-duration: .2s, .2s;
-        min-width: var(--igx-nav-drawer-size--mini);
+        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);
@@ -303,7 +305,7 @@
     }
 
     %aside--normal {
-        transition-duration: .3s, .3s;
+        transition-duration: .3s;
         width: var(--igx-nav-drawer-size);
     }
 
@@ -311,7 +313,7 @@
         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;

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

@@ -24,6 +24,10 @@
             @extend %advanced-filter__header !optional;
         }
 
+        @include e(title) {
+            @extend %advanced-filter__title !optional;
+        }
+
         @include e(main) {
             @extend %advanced-filter__main !optional;
         }

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

@@ -143,11 +143,8 @@
             }
 
             %advanced-filter__main {
-                padding: pad-inline(
-                    map.get($vertical-space, 'compact'),
-                    map.get($vertical-space, 'cosy'),
-                    map.get($vertical-space, 'comfortable')
-                );
+                padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+                padding-block: pad-block(rem(16px));
             }
         }
     }
@@ -174,13 +171,10 @@
     }
 
     %advanced-filter__header {
-        @if $variant != 'indigo' {
-            @include type-style('h6');
-        } @else {
-            @include type-style('h5');
-
-            border-top-left-radius: border-radius(rem(10px));
-            border-top-right-radius: border-radius(rem(10px));
+        @if $variant == 'bootstrap' {
+            > * {
+                margin-bottom: rem(0) !important;
+            }
         }
 
         display: flex;
@@ -193,6 +187,10 @@
         border-block-end: rem(1px) solid var-get($theme, 'header-border');
     }
 
+    %advanced-filter__title {
+        @include type-style(if($variant != 'indigo', 'h6', 'h5'));
+    }
+
     %advanced-filter__main {
         display: flex;
         overflow: auto;
@@ -284,13 +282,10 @@
         display: flex;
         align-items: center;
         width: 100%;
-        gap: $gap;
+        gap: if($variant != 'indigo', $gap, rem(8px));
         position: relative;
 
         > igx-chip {
-            @container style(--ig-size: 1) {
-                --ig-size: 2;
-            }
 
             @if $variant != 'indigo' {
                 .igx-chip__item {
@@ -298,10 +293,14 @@
                 }
             }
 
-            .igx-filter-tree__expression-column {
+            %filter-tree__expression-column {
                 padding-inline: pad-inline(rem(3px), rem(6px), rem(8px));
             }
 
+            %filter-tree__expression-condition {
+                padding-inline-start: pad-inline(rem(3px), rem(6px), rem(8px));
+            }
+
             igx-prefix {
                 display: flex;
             }
@@ -318,7 +317,11 @@
 
     %filter-tree__expression-actions {
         display: inline-flex;
-        gap: $gap;
+        gap: if($variant != 'indigo', $gap, rem(8px));
+
+        span {
+            display: inline-flex;
+        }
 
         igx-icon {
             cursor: pointer;
@@ -333,7 +336,7 @@
     }
 
     %filter-tree__expression-condition {
-        opacity: .7;
+        opacity: if($variant != 'indigo', .6, .8);
     }
 
     %filter-tree__buttons {
@@ -345,14 +348,19 @@
 
     %filter-tree__inputs {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
+        align-items: flex-end;
         gap: rem(8px);
+        width: 100%;
 
         igx-input-group {
             --ig-size: 1;
         }
 
+        > * {
+            max-width: rem(300px);
+            width: 100%;
+        }
+
         &:empty {
             display: none !important;
         }
@@ -362,6 +370,7 @@
         display: flex;
         gap: $gap;
         align-items: center;
+        width: auto;
 
         [igxIconButton] {
             transition: none;
@@ -379,18 +388,16 @@
         display: inline-flex;
         align-items: center;
         font-size: rem(12px);
-
-        @if $variant == 'indigo' {
-            font-weight: 400;
-        }
+        line-height: rem(16px);
+        font-weight: 400;
 
         &::before {
             content: '';
             width: rem(24px);
             height: rem(24px);
             background: white;
-            border-radius: $border-radius;
             margin-inline-end: rem(8px);
+            border-radius: if($variant != 'indigo', $border-radius, #{rem(4px)});
         }
 
         + %filter-legend__item {
@@ -493,7 +500,7 @@
                 color: contrast-color(null, 'gray', 50, .6);
             }
         } @else {
-            color: color(null, 'gray', 600);
+            color: color(null, 'gray', 500);
         }
     }
 

package/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -188,7 +188,8 @@
         border-color: $border-color,
         border-radius: $border-radius,
         _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
+            variant: map.get($schema, '_meta', 'theme'),
+            theme-variant: map.get($schema, '_meta', 'variant')
         )),
     ));
 }
@@ -205,6 +206,7 @@
     $not-bootstrap-theme: $variant != 'bootstrap';
     $bootstrap-theme: $variant == 'bootstrap';
     $indigo-theme: $variant == 'indigo';
+    $theme-variant: map.get($theme, '_meta', 'theme-variant');
 
     $item-min-width: rem(90px);
     $item-max-width: rem(360px);
@@ -228,9 +230,12 @@
     %tabs-header-item-inner,
     %tabs-header-content {
         display: flex;
+        align-items: center;
     }
 
     %tabs-display {
+        --nav-btn-border-color: #{var-get($theme, 'border-color')};
+
         display: flex;
         flex-direction: column;
         overflow: hidden;
@@ -240,8 +245,21 @@
         overflow: hidden;
         flex: 0 0 auto;
         background: var-get($theme, 'item-background');
-        min-height: rem(42px);
         z-index: 1;
+
+        @if $indigo-theme {
+            [igxIconButton='flat'].igx-button--focused {
+                box-shadow: none;
+
+                &::after {
+                    border: rem(3px) solid var(--nav-btn-border-color);
+
+                    @if $theme-variant == 'dark' {
+                        border-color: contrast-color($color: 'gray', $variant: 50, $opacity: .2);
+                    }
+                }
+            }
+        }
     }
 
     %tabs-header-content {
@@ -286,6 +304,10 @@
         background: var-get($theme, 'button-background');
         color: var-get($theme, 'button-color');
         outline: 0;
+        align-self: stretch;
+        height: auto;
+        transition: none;
+        border-radius: border-radius(0);
 
         &:hover {
             background: var-get($theme, 'button-hover-background');
@@ -294,7 +316,10 @@
 
         &:focus {
             outline: 0;
-            background: var-get($theme, 'button-hover-background');
+
+            @if $variant != 'indigo' {
+                background: var-get($theme, 'button-hover-background');
+            }
         }
 
         &::-moz-focus-inner {
@@ -304,12 +329,27 @@
 
         &:disabled {
             color: var-get($theme, 'button-disabled-color');
+            cursor: default;
+            pointer-events: none;
         }
 
         &--none {
             display: none;
         }
 
+        @if $indigo-theme {
+            min-width: rem(40px);
+            width: rem(40px);
+
+            &::after {
+                content: '';
+                position: absolute;
+                pointer-events: none;
+                width: 100%;
+                height: 100%;
+                border-bottom: rem(1px) solid var(--nav-btn-border-color);
+            }
+        }
 
         @include ripple($button-ripple-theme);
         @include css-vars($button-ripple-theme);
@@ -327,7 +367,7 @@
 
     %tabs-header-item {
         > * {
-            margin-inline-start: rem(12px);
+            margin-inline-start: rem(if($variant != 'indigo', 12px, 8px));
 
             &:first-child {
                 margin-inline-start: 0;
@@ -338,6 +378,7 @@
         align-items: center;
         min-width: $item-min-width;
         max-width: $item-max-width;
+        min-height: #{if($variant == 'indigo', rem(40px), rem(42px))};
         word-wrap: break-word;
         // Flex basis & shrink are Needed for IE11
         flex-basis: auto;
@@ -355,16 +396,6 @@
             color: var-get($theme, 'item-icon-color');
         }
 
-        @if $bootstrap-theme {
-            padding-block: rem(12px);
-            border-start-start-radius: var-get($theme, 'border-radius');
-            border-start-end-radius: var-get($theme, 'border-radius');
-        }
-
-        @if $indigo-theme {
-            border-bottom: rem(1px) solid var-get($theme, 'border-color');
-        }
-
         &::-moz-focus-inner {
             border: 0;
         }
@@ -392,6 +423,7 @@
         }
 
         @if $bootstrap-theme {
+            padding-block: rem(12px);
             border-start-start-radius: var-get($theme, 'border-radius');
             border-start-end-radius: var-get($theme, 'border-radius');
         }
@@ -407,13 +439,18 @@
         }
 
         @if $indigo-theme {
-            border-top: transparent;
-            border-inline: transparent;
+            border-top: rem(1px) solid transparent;
+            border-inline: none;
 
             &:hover,
             &:focus {
-                border-top: transparent;
-                border-inline: transparent;
+                border-top: rem(1px) solid transparent;
+                border-inline: none;
+                border-bottom: rem(1px) solid var-get($theme, 'border-color');
+            }
+
+            igx-icon {
+                --ig-size: 2;
             }
         }
 
@@ -459,6 +496,18 @@
                 box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
             }
         }
+
+        @if $indigo-theme {
+            &:hover,
+            &:focus-visible {
+                background: var-get($theme, 'item-hover-background');
+                color: var-get($theme, 'item-hover-color');
+
+                igx-icon {
+                    color: var-get($theme, 'item-hover-icon-color');
+                }
+            }
+        }
     }
 
     %tabs-header-item:focus,
@@ -516,9 +565,14 @@
         min-width: $item-min-width;
         background: var-get($theme, 'indicator-color');
         transition: transform .3s $tabs-animation-function, width .2s $tabs-animation-function;
+
         @if $bootstrap-theme {
             display: none;
         }
+
+        @if $indigo-theme {
+            height: rem(3px);
+        }
     }
 
     %tabs-panels {

package/lib/core/styles/components/tree/_tree-theme.scss

@@ -240,9 +240,7 @@
         }
 
         igx-icon {
-            @if $variant == 'indigo' {
-                --component-size: 2;
-            }
+            --component-size: #{if($variant == 'indigo', 2, 3)};
         }
 
         [dir='rtl'] & {

package/lib/core/styles/typography/_indigo.scss

@@ -102,7 +102,9 @@
     @include switch-typography($categories: (
         label: 'body-2'
     ));
-    @include tabs-typography();
+    @include tabs-typography($categories: (
+        label: 'subtitle-2',
+    ));
     @include time-picker-typography($categories: (
         header-time-period: 'subtitle-1',
         header-hour: 'h5',

package/lib/data-operations/filtering-expression.interface.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="node" />
 import { IFilteringOperation } from './filtering-condition';
-import { Serializable } from 'node:child_process';
 import { IExpressionTree } from './filtering-expressions-tree';
 export declare enum FilteringLogic {
     And = 0,
@@ -12,8 +10,8 @@ export declare enum FilteringLogic {
 export declare interface IFilteringExpression {
     fieldName: string;
     condition?: IFilteringOperation;
-    conditionName: string;
-    searchVal?: Serializable;
+    conditionName?: string;
+    searchVal?: any;
     searchTree?: IExpressionTree;
     ignoreCase?: boolean;
 }

package/migrations/common/ServerHost.d.ts

@@ -6,10 +6,12 @@ import * as ts from 'typescript/lib/tsserverlibrary';
  * Angular's Ivy LS sometimes bypasses these, calling path methods instead of tsLsHost operations
  */
 export declare class ServerHost implements ts.server.ServerHost {
-    private host;
+    host: Tree;
     readonly args: string[];
     readonly newLine: string;
     readonly useCaseSensitiveFileNames: boolean;
+    /** Cached because Angular schematics encapsulation's customRequire doesn't provide `resolve` */
+    private nativeRequire;
     constructor(host: Tree);
     /**
      * Read a file's content from the Virtual Tree

package/migrations/common/ServerHost.js

@@ -4,6 +4,7 @@ exports.ServerHost = void 0;
 const pathFs = require("path");
 const ts = require("typescript/lib/tsserverlibrary");
 const tsUtils_1 = require("./tsUtils");
+const module_1 = require("module");
 /**
  * Language server host is responsible for **most** of the FS operations / checks
  * Angular's Ivy LS sometimes bypasses these, calling path methods instead of tsLsHost operations
@@ -11,6 +12,8 @@ const tsUtils_1 = require("./tsUtils");
 class ServerHost {
     constructor(host) {
         this.host = host;
+        /** Cached because Angular schematics encapsulation's customRequire doesn't provide `resolve` */
+        this.nativeRequire = (0, module_1.createRequire)(__filename);
         this.args = ts.sys.args;
         this.newLine = ts.sys.newLine;
         this.useCaseSensitiveFileNames = ts.sys.useCaseSensitiveFileNames;
@@ -112,7 +115,7 @@ class ServerHost {
                 moduleName = tsUtils_1.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,

package/migrations/common/UpdateChanges.d.ts

@@ -18,12 +18,11 @@ export declare class UpdateChanges {
     private host;
     private context?;
     protected tsconfigPath: string;
-    protected _projectService: tss.server.ProjectService;
     _shouldInvokeLS: boolean;
     get shouldInvokeLS(): boolean;
     set shouldInvokeLS(val: boolean);
     get projectService(): tss.server.ProjectService;
-    protected serverHost: ServerHost;
+    protected get serverHost(): ServerHost;
     protected workspace: WorkspaceSchema;
     protected sourcePaths: string[];
     protected classChanges: ClassChanges;
@@ -91,6 +90,12 @@ export declare class UpdateChanges {
     private updateTsFiles;
     private updateMembers;
     private getDefaultProjectForFile;
+    /**
+     * Force Angular service to compile project on initial load w/ configured project
+     * otherwise if the first compilation occurs on an HTML file the project won't have proper refs
+     * and no actual angular metadata will be resolved for the rest of the migration
+     */
+    private configureForAngularLS;
     private getWorkspaceProjectEntryPath;
 }
 export declare enum BindingType {

package/migrations/common/UpdateChanges.js

@@ -12,7 +12,7 @@ const tss = require("typescript/lib/tsserverlibrary");
 const schema_1 = require("./schema");
 const tsUtils_1 = require("./tsUtils");
 const util_1 = require("./util");
-const ServerHost_1 = require("./ServerHost");
+const project_service_container_1 = require("./project-service-container");
 const TSCONFIG_PATH = 'tsconfig.json';
 var InputPropertyType;
 (function (InputPropertyType) {
@@ -33,31 +33,15 @@ class UpdateChanges {
         this._shouldInvokeLS = val;
     }
     get projectService() {
-        if (!this._projectService) {
-            this._projectService = (0, tsUtils_1.createProjectService)(this.serverHost);
-            // Force Angular service to compile project on initial load w/ configure project
-            // otherwise if the first compilation occurs on an HTML file the project won't have proper refs
-            // and no actual angular metadata will be resolved for the rest of the migration
-            // TODO: this patter/issue might be obsolete; if so, should be safe to return _projectService directly
-            const mainRelPath = this.getWorkspaceProjectEntryPath();
-            if (!mainRelPath) {
-                return null;
-            }
-            // patch TSConfig so it includes angularOptions.strictTemplates
-            // ivy ls requires this in order to function properly on templates
-            this.patchTsConfig();
-            const mainAbsPath = path.resolve(this._projectService.currentDirectory, mainRelPath);
-            const scriptInfo = this._projectService.getOrCreateScriptInfoForNormalizedPath(tss.server.toNormalizedPath(mainAbsPath), false);
-            this._projectService.openClientFile(scriptInfo.fileName);
-            try {
-                const project = this._projectService.findProject(scriptInfo.containingProjects[0].getProjectName());
-                project.getLanguageService().getSemanticDiagnostics(mainAbsPath);
-            }
-            catch (err) {
-                this.context.logger.warn("An error occurred during TypeScript project service setup. Some migrations relying on language services might not be applied.");
-            }
+        const projectService = project_service_container_1.serviceContainer.projectService;
+        if (!project_service_container_1.serviceContainer.configured) {
+            this.configureForAngularLS(projectService);
+            project_service_container_1.serviceContainer.configured = true;
         }
-        return this._projectService;
+        return projectService;
+    }
+    get serverHost() {
+        return project_service_container_1.serviceContainer.serverHost;
     }
     get templateFiles() {
         if (!this._templateFiles.length) {
@@ -132,7 +116,8 @@ class UpdateChanges {
         this.themeChanges = this.loadConfig('theme-changes.json');
         this.importsChanges = this.loadConfig('imports.json');
         this.membersChanges = this.loadConfig('members.json');
-        this.serverHost = new ServerHost_1.ServerHost(this.host);
+        // update LS server host with the schematics tree:
+        this.serverHost.host = this.host;
     }
     /** Apply configured changes to the Host Tree */
     applyChanges() {
@@ -588,7 +573,7 @@ class UpdateChanges {
             return;
         }
         // 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 = (_b = (_a = wsProject.architect) === null || _a === void 0 ? void 0 : _a.build) === null || _b === void 0 ? void 0 : _b.options['tsConfig'];
         if (!projectConfig || !this.host.exists(projectConfig)) {
@@ -731,6 +716,31 @@ class UpdateChanges {
         project.addMissingFileRoot(scriptInfo.fileName);
         return project;
     }
+    /**
+     * Force Angular service to compile project on initial load w/ configured project
+     * otherwise if the first compilation occurs on an HTML file the project won't have proper refs
+     * and no actual angular metadata will be resolved for the rest of the migration
+     */
+    configureForAngularLS(projectService) {
+        // TODO: this pattern/issue might be obsolete
+        const mainRelPath = this.getWorkspaceProjectEntryPath();
+        if (!mainRelPath) {
+            return;
+        }
+        // patch TSConfig so it includes angularOptions.strictTemplates
+        // ivy ls requires this in order to function properly on templates
+        this.patchTsConfig();
+        const mainAbsPath = path.resolve(projectService.currentDirectory, mainRelPath);
+        const scriptInfo = projectService.getOrCreateScriptInfoForNormalizedPath(tss.server.toNormalizedPath(mainAbsPath), false);
+        projectService.openClientFile(scriptInfo.fileName);
+        try {
+            const project = projectService.findProject(scriptInfo.containingProjects[0].getProjectName());
+            project.getLanguageService().getSemanticDiagnostics(mainAbsPath);
+        }
+        catch (err) {
+            this.context.logger.warn("An error occurred during TypeScript project service setup. Some migrations relying on language services might not be applied.");
+        }
+    }
     getWorkspaceProjectEntryPath() {
         var _a, _b;
         const projectKeys = Object.keys(this.workspace.projects);
@@ -742,8 +752,8 @@ 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" && ((_b = (_a = wsProject.architect) === null || _a === void 0 ? void 0 : _a.build) === null || _b === void 0 ? void 0 : _b.options['main'])) {
-                return wsProject.architect.build.options['main'];
+            if (wsProject.projectType == "application" && ((_b = (_a = wsProject.architect) === null || _a === void 0 ? void 0 : _a.build) === null || _b === void 0 ? void 0 : _b.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

package/migrations/common/project-service-container.d.ts

@@ -0,0 +1,11 @@
+import * as tss from 'typescript/lib/tsserverlibrary';
+import { ServerHost } from './ServerHost';
+export declare class ProjectServiceContainer {
+    private _serverHost;
+    private _projectService;
+    /** Indicates additional config adjustments after init have been made */
+    configured: boolean;
+    get serverHost(): ServerHost;
+    get projectService(): tss.server.ProjectService;
+}
+export declare const serviceContainer: ProjectServiceContainer;

package/migrations/common/project-service-container.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serviceContainer = exports.ProjectServiceContainer = void 0;
+const tsUtils_1 = require("./tsUtils");
+const ServerHost_1 = require("./ServerHost");
+class ProjectServiceContainer {
+    constructor() {
+        /** Indicates additional config adjustments after init have been made */
+        this.configured = false;
+    }
+    get serverHost() {
+        if (!this._serverHost) {
+            this._serverHost = new ServerHost_1.ServerHost(null);
+        }
+        return this._serverHost;
+    }
+    get projectService() {
+        if (!this._projectService) {
+            this._projectService = (0, tsUtils_1.createProjectService)(this.serverHost);
+        }
+        return this._projectService;
+    }
+}
+exports.ProjectServiceContainer = ProjectServiceContainer;
+exports.serviceContainer = new ProjectServiceContainer();