igniteui-angular 19.1.0-beta.3 → 19.1.0-beta.4

package/lib/core/styles/components/chip/_chip-theme.scss

@@ -504,7 +504,7 @@
         @if $variant == 'bootstrap' {
             color: contrast-color($color: 'success', $variant: 600);
         } @else {
-            color: contrast-color($color: 'success', $variant: if($variant = 'indigo', 900, 500));
+            color: contrast-color($color: 'success', $variant: if($variant == 'indigo', 900, 500));
         }
         background: color($color: 'success', $variant: 500);
         border-color: color($color: 'success', $variant: 500);
@@ -590,7 +590,7 @@
         @if $variant == 'bootstrap' {
             color: contrast-color($color: 'error', $variant: 600);
         } @else {
-            color: contrast-color($color: 'error', $variant: if($variant = 'indigo', 900, 500));
+            color: contrast-color($color: 'error', $variant: if($variant == 'indigo', 900, 500));
         }
         background: color($color: 'error', $variant: 500);
         border-color: color($color: 'error', $variant: 500);
@@ -698,9 +698,7 @@
 
     %igx-chip__prefix,
     %igx-chip__suffix {
-        @include ellipsis();
-
-        display: inline-block;
+        display: inline-flex;
         vertical-align: middle;
         max-width: $chip-max-width;
 

package/lib/core/styles/components/dialog/_dialog-theme.scss

@@ -117,20 +117,6 @@
 
     %igx-dialog-display {
         outline-style: none;
-
-        %advanced-filter {
-            box-shadow: none;
-            border: none;
-        }
-
-        %query-level-0 {
-            padding: 0;
-        }
-
-        %advanced-filter__header {
-            padding-block-start: 0;
-            padding-inline: 0;
-        }
     }
 
     %igx-dialog--hidden {

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

@@ -3215,11 +3215,6 @@
         }
 
         igx-query-builder {
-            //--igx-query-builder-background: #{var-get($theme, 'filtering-row-background')};
-            //--igx-query-builder-background-and: #{var-get($theme, 'filtering-background-and')};
-            //--igx-query-builder-background-and--focus: #{var-get($theme, 'filtering-background-and--focus')};
-            //--igx-query-builder-background-or: #{var-get($theme, 'filtering-background-or')};
-            //--igx-query-builder-background-or--focus: #{var-get($theme, 'filtering-background-or--focus')};
             box-shadow: none;
             border: none;
             border-radius: inherit;

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

@@ -110,6 +110,10 @@
         @include e(expression-item-ghost) {
             @extend %filter-tree__expression-item-ghost !optional;
         }
+	    
+	    @include e(expression-item-drop-ghost) {
+		    @extend %filter-tree__expression-drop-item-ghost !optional;
+	    }
 
         @include e(expression-column) {
             @extend %filter-tree__expression-column !optional;

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

@@ -225,27 +225,7 @@
         padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
         padding-block: if($variant != 'bootstrap', rem(24px), rem(16px)) rem(16px);
     }
-
-    %advanced-filter__title {
-        @if $variant == 'material' {
-            @include type-style('h6');
-        }
-
-        @if $variant == 'fluent' {
-            @include type-style('h6');
-        }
-
-        @if $variant == 'indigo' {
-            @include type-style('h5');
-        }
-
-        @if $variant == 'bootstrap' {
-            @include type-style('h5');
-        }
-
-        margin: 0;
-    }
-
+	
     %advanced-filter__main {
         display: grid;
         gap: rem(16px);
@@ -326,75 +306,105 @@
     %filter-tree__line--or {
         background: var-get($theme, 'color-expression-group-or');
     }
-
-    %filter-tree__button--and {
-        @if $variant == 'material' {
-            --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus-hover});
-            --focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
-            --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});
-            --background: transparent;
-        }
-
-        @if $variant == 'bootstrap' {
-            --shadow-color: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / .5);
-        }
-
-        --foreground: #{var-get($theme, 'color-expression-group-and')};
-        --focus-visible-foreground: #{var-get($theme, 'color-expression-group-and')};
-        --icon-color: #{var-get($theme, 'color-expression-group-and')};
-
-        @if $variant != 'bootstrap' {
-            --focus-foreground: #{var-get($theme, 'color-expression-group-and')};
-            --hover-foreground: #{var-get($theme, 'color-expression-group-and')};
-            --icon-color-hover: #{var-get($theme, 'color-expression-group-and')};
-            --focus-hover-foreground: #{var-get($theme, 'color-expression-group-and')};
-            --active-foreground: #{var-get($theme, 'color-expression-group-and')};
-        } @else {
-            $bootstrap-foreground-lightness: if($theme-variant == 'light', 34%, 78% );
-
-            --icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
-            --focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
-            --hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
-            --focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
-            --active-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
-        }
-    }
-
-    %filter-tree__button--or {
-        @if $variant == 'material' {
-            --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus-hover});
-            --focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
-            --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});
-            --background: transparent;
-        }
-
-        @if $variant == 'bootstrap' {
-            --shadow-color: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / .5);
-        }
-
-        --foreground: #{var-get($theme, 'color-expression-group-or')};
-        --focus-visible-foreground: #{var-get($theme, 'color-expression-group-or')};
-        --icon-color: #{var-get($theme, 'color-expression-group-or')};
-
-        @if $variant != 'bootstrap' {
-            --focus-foreground: #{var-get($theme, 'color-expression-group-or')};
-            --hover-foreground: #{var-get($theme, 'color-expression-group-or')};
-            --icon-color-hover: #{var-get($theme, 'color-expression-group-or')};
-            --focus-hover-foreground: #{var-get($theme, 'color-expression-group-or')};
-            --active-foreground: #{var-get($theme, 'color-expression-group-or')};
-        } @else {
-            $bootstrap-foreground-lightness: if($theme-variant == 'light', 14%, 47%);
-
-            --icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
-            --focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
-            --hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
-            --focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
-            --active-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
-        }
+	
+	%filter-tree__button--and {
+		&[igxButton='flat'] {
+			@if $variant == 'material' or $variant == 'indigo' {
+				--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus-hover});
+				--focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
+				--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});
+				--background: transparent;
+			}
+			
+			@if $variant == 'fluent' {
+				--background: transparent;
+				--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--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))};
+			}
+			
+			--foreground: #{var-get($theme, 'color-expression-group-and')};
+			--focus-visible-foreground: #{var-get($theme, 'color-expression-group-and')};
+			--icon-color: #{var-get($theme, 'color-expression-group-and')};
+			
+			@if $variant != 'bootstrap' {
+				--focus-foreground: #{var-get($theme, 'color-expression-group-and')};
+				--hover-foreground: #{var-get($theme, 'color-expression-group-and')};
+				--icon-color-hover: #{var-get($theme, 'color-expression-group-and')};
+				--focus-hover-foreground: #{var-get($theme, 'color-expression-group-and')};
+				--active-foreground: #{var-get($theme, 'color-expression-group-and')};
+			} @else {
+				$bootstrap-foreground-lightness: if($theme-variant == 'light', 34%, 78% );
+				
+				--focus-hover-background: transparent;
+				--focus-visible-background: transparent;
+				--focus-background: transparent;
+				--active-background: transparent;
+				--hover-background: transparent;
+				--background: transparent;
+				--shadow-color: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / .5);
+				
+				--icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
+				--focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
+				--hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
+				--focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
+				--active-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
+			}
+		}
+    }
+	
+	%filter-tree__button--or {
+		&[igxButton='flat'] {
+			@if $variant == 'material' or $variant == 'indigo' {
+				--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus-hover});
+				--focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
+				--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});
+				--background: transparent;
+			}
+			
+			@if $variant == 'fluent' {
+				--background: transparent;
+				--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--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))};
+			}
+			
+			--foreground: #{var-get($theme, 'color-expression-group-or')};
+			--focus-visible-foreground: #{var-get($theme, 'color-expression-group-or')};
+			--icon-color: #{var-get($theme, 'color-expression-group-or')};
+			
+			@if $variant != 'bootstrap' {
+				--focus-foreground: #{var-get($theme, 'color-expression-group-or')};
+				--hover-foreground: #{var-get($theme, 'color-expression-group-or')};
+				--icon-color-hover: #{var-get($theme, 'color-expression-group-or')};
+				--focus-hover-foreground: #{var-get($theme, 'color-expression-group-or')};
+				--active-foreground: #{var-get($theme, 'color-expression-group-or')};
+			} @else {
+				$bootstrap-foreground-lightness: if($theme-variant == 'light', 14%, 47%);
+				
+				--focus-hover-background: transparent;
+				--focus-visible-background: transparent;
+				--focus-background: transparent;
+				--active-background: transparent;
+				--hover-background: transparent;
+				--background: transparent;
+				--shadow-color: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / .5);
+				
+				--icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
+				--focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
+				--hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
+				--focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
+				--active-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
+			}
+		}
     }
 
     %filter-tree__expressions {
@@ -596,3 +606,19 @@
         }
     }
 }
+
+/// Adds typography styles for the igx-query-builder component.
+/// Uses the 'h6' category from the typographic scale.
+/// @group typography
+/// @param {Map} $categories [(title: 'h6')] - The categories from the typographic scale used for type styles.
+@mixin query-builder-typography(
+	$categories: (title: 'h6')
+) {
+	$title: map.get($categories, 'title');
+	
+	%advanced-filter__title {
+		@include type-style($title) {
+			margin: 0;
+		}
+	}
+}

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

@@ -32,6 +32,7 @@
 @use '../components/tooltip/tooltip-theme' as *;
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
+@use '../components/query-builder/query-builder-theme' as *;
 
 @mixin typography($type-scale) {
     @include badge-typography();
@@ -113,4 +114,7 @@
     @include label-typography($categories: (
         label: 'body-1'
     ));
+	@include query-builder-typography($categories: (
+		title: 'h5'
+	));
 }

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

@@ -31,6 +31,7 @@
 @use '../components/tooltip/tooltip-theme' as *;
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
+@use '../components/query-builder/query-builder-theme' as *;
 
 @mixin typography() {
     @include badge-typography();
@@ -119,4 +120,5 @@
     @include label-typography($categories: (
         label: 'subtitle-2'
     ));
+	@include query-builder-typography();
 }

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

@@ -31,6 +31,7 @@
 @use '../components/tooltip/tooltip-theme' as *;
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
+@use '../components/query-builder/query-builder-theme' as *;
 
 @mixin typography($type-scale) {
     @include badge-typography($categories: (
@@ -125,4 +126,7 @@
     @include label-typography($categories: (
         label: 'caption'
     ));
+	@include query-builder-typography($categories: (
+		title: 'h5'
+	));
 }

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

@@ -31,6 +31,7 @@
 @use '../components/tooltip/tooltip-theme' as *;
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
+@use '../components/query-builder/query-builder-theme' as *;
 
 @mixin typography() {
     @include badge-typography();
@@ -66,4 +67,5 @@
     @include tooltip-typography();
     @include tree-typography();
     @include label-typography();
+	@include query-builder-typography();
 }

package/lib/query-builder/query-builder-drag.service.d.ts

@@ -27,7 +27,6 @@ export declare class IgxQueryBuilderDragService {
     private get mainExpressionTree();
     onMoveStart(sourceDragElement: HTMLElement, sourceExpressionItem: ExpressionItem, isKeyboardDrag: boolean): void;
     onMoveEnd(): void;
-    onDivEnter(targetDragElement: HTMLElement, targetExpressionItem: ExpressionItem): void;
     onChipEnter(targetDragElement: HTMLElement, targetExpressionItem: ExpressionItem): void;
     onDivOver(targetDragElement: HTMLElement, targetExpressionItem: ExpressionItem): void;
     onChipOver(targetDragElement: HTMLElement): void;

package/lib/query-builder/query-builder-tree.component.d.ts

@@ -360,7 +360,6 @@ export declare class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDe
     onChipRemove(expressionItem: ExpressionItem): void;
     private focusChipAfterDrag;
     dragService: IgxQueryBuilderDragService;
-    canBeDragged(): boolean;
     /**
      * @hidden @internal
      */
@@ -470,7 +469,7 @@ export declare class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDe
     isInEditMode(): boolean;
     onInEditModeChanged(expressionItem: ExpressionOperandItem): void;
     getExpressionTreeCopy(expressionTree: IExpressionTree, shouldAssignInnerQueryExprTree?: boolean): IExpressionTree;
-    onSelectAllClicked(_event: any): void;
+    onSelectAllClicked(): void;
     onReturnFieldSelectChanging(event: IComboSelectionChangingEventArgs | ISelectionEventArgs): void;
     initExpressionTree(selectedEntityName: string, selectedReturnFields: string[]): void;
     getSearchValueTemplateContext(defaultSearchValueTemplate: any): any;

package/lib/query-builder/query-builder.common.d.ts

@@ -39,6 +39,7 @@ export declare class ExpressionOperandItem extends ExpressionItem {
  */
 export declare const QueryBuilderSelectors: {
     DRAG_INDICATOR: string;
+    CHIP_GHOST: string;
     DROP_DOWN_LIST_SCROLL: string;
     DROP_DOWN_ITEM_DISABLED: string;
     FILTER_TREE: string;

package/lib/query-builder/query-builder.component.d.ts

@@ -89,7 +89,7 @@ export declare class IgxQueryBuilderComponent implements OnDestroy {
      *  <igx-query-builder (expressionTreeChange)='onExpressionTreeChange()'></igx-query-builder>
      * ```
      */
-    expressionTreeChange: EventEmitter<any>;
+    expressionTreeChange: EventEmitter<IExpressionTree>;
     /**
      * @hidden @internal
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "19.1.0-beta.3",
+  "version": "19.1.0-beta.4",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -73,7 +73,7 @@
     "tslib": "^2.3.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
-    "igniteui-theming": "v14.5.0-beta.4",
+    "igniteui-theming": "^15.0.0",
     "@igniteui/material-icons-extended": "^3.1.0"
   },
   "peerDependencies": {