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

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,22 +317,19 @@
 
     %filter-tree__expression-actions {
         display: inline-flex;
-        gap: $gap;
+        gap: if($variant != 'indigo', $gap, rem(8px));
 
-        igx-icon {
-            cursor: pointer;
-            color: color(null, 'gray', 500);
-            outline-style: none;
-
-            &:hover,
-            &:focus {
-                color: color(null, 'gray', 800);
-            }
+        span {
+            display: inline-flex;
         }
+
+        %igx-icon-button-display {
+            --size: #{sizable(rem(20px), rem(24px), if($variant != 'indigo', rem(32px), rem(28px)))}
+        };
     }
 
     %filter-tree__expression-condition {
-        opacity: .7;
+        opacity: if($variant != 'indigo', .6, .8);
     }
 
     %filter-tree__buttons {
@@ -345,14 +341,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 +363,7 @@
         display: flex;
         gap: $gap;
         align-items: center;
+        width: auto;
 
         [igxIconButton] {
             transition: none;
@@ -379,18 +381,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 {
@@ -461,8 +461,9 @@
 
     %filter-con-menu__close-btn {
         position: absolute;
-        top: rem(-18px);
-        inset-inline-end: rem(-18px);
+        top: 0;
+        inset-inline-start: 100%;
+        transform: translate(-50%, -50%);
         background-color: var-get($theme, 'background');
         border: rem(1px) solid color(null, 'gray', 200);
 
@@ -493,7 +494,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/lib/data-operations/filtering-expressions-tree.d.ts

@@ -54,7 +54,7 @@ export declare class FilteringExpressionsTree implements IFilteringExpressionsTr
     /**
      * Sets/gets the field name of the column where the filtering expression is placed.
      * ```typescript
-     *  gridExpressionTree.fieldName = 'Column Field';
+     * gridExpressionTree.fieldName = 'Column Field';
      * ```
      * ```typescript
      * let columnField = expressionTree.fieldName;
@@ -66,7 +66,7 @@ export declare class FilteringExpressionsTree implements IFilteringExpressionsTr
     /**
      * Sets/gets the type of the filtering expressions tree.
      * ```typescript
-     *  gridExpressionTree.type = FilteringExpressionsTree.Advanced;
+     * gridExpressionTree.type = FilteringExpressionsTree.Advanced;
      * ```
      * ```typescript
      * let type = expressionTree.type;
@@ -75,7 +75,29 @@ export declare class FilteringExpressionsTree implements IFilteringExpressionsTr
      * @memberof FilteringExpressionsTree
      */
     type?: FilteringExpressionsTreeType;
+    /**
+     * Sets/gets the entity.
+     * ```typescript
+     * gridExpressionsTree.entity = 'Entity A';
+     * ```
+     * ```typescript
+     * let entity = gridExpressionsTree.entity;
+     * ```
+     *
+     * @memberof FilteringExpressionsTree
+     */
     entity?: string;
+    /**
+     * Sets/gets the return fields.
+     * ```typescript
+     * gridExpressionsTree.returnFields = ['Column Field 1', 'Column Field 2'];
+     * ```
+     * ```typescript
+     * let returnFields = gridExpressionsTree.returnFields;
+     * ```
+     *
+     * @memberof FilteringExpressionsTree
+     */
     returnFields?: string[];
     constructor(operator: FilteringLogic, fieldName?: string, entity?: string, returnFields?: string[]);
     /**

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 {