fix(query-builder): fix drop placeholder and keyboard ghost element styles

Author: desig9stein

projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-component.scss

@@ -107,12 +107,12 @@
             @extend %filter-tree__expression-item !optional;
         }
 
-        @include e(expression-item-ghost) {
+        @include e(expression-item-drop-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-item-keyboard-ghost) {
+		    @extend %filter-tree__expression-item-keyboard-ghost !optional;
 	    }
 
         @include e(expression-column) {

projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -480,18 +480,24 @@
 
 
     %filter-tree__expression-item-ghost {
-        &.igx-chip__item {
+        .igx-chip__item {
             @include type-style('body-2');
 
             --ig-body-2-text-transform: unset;
 
             padding-inline: rem(32px);
+	        
+	        color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900));
+	        border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300));
+	        background:  transparent;
         }
-
-        color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900));
-        border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300));
-        background:  transparent;
     }
+	
+	%filter-tree__expression-item-keyboard-ghost {
+		.igx-chip__item {
+			box-shadow: elevation(8);
+		}
+	}
 
     %filter-tree__expression-column {
         padding: 0 rem(8px);

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html

@@ -126,11 +126,11 @@
     <ng-template #operandTemplate let-expressionItem>
         @if (!expressionItem.inEditMode) {
             @if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){
-                <div class="igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost igx-filter-tree__expression-item-drop-ghost-placeholder">
-                <igx-chip [data]="expressionItem">
-                    {{this.resourceStrings.igx_query_builder_drop_ghost_text}}
-                </igx-chip>
-            </div>
+                <div class="igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost">
+                    <igx-chip [data]="expressionItem">
+                        {{this.resourceStrings.igx_query_builder_drop_ghost_text}}
+                    </igx-chip>
+                </div>
             } @else {
             <div
                 #dragRef
@@ -141,7 +141,7 @@
                 (dropped)="dragService.onDivDropped(expressionItem)"
                 [ngClass]="{
                     'igx-filter-tree__expression-item': true,
-                    'igx-filter-tree__expression-item-drop-ghost': expressionItem === dragService.dropGhostExpression
+                    'igx-filter-tree__expression-item-keyboard-ghost': expressionItem === dragService.dropGhostExpression
                   }"
                 (mouseenter)="expressionItem.hovered = true"
                 (mouseleave)="expressionItem.hovered = false"