Merge pull request #7745 from IgniteUI/nalipiev/drop-down-shadow-master

fix(drop-down): remove shadow when list is empty #3977

Author: Lipata

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss

@@ -17,6 +17,11 @@
         @extend %igx-drop-down__list !optional;
     }
 
+    @include e(list, $m: empty) {
+        @extend %igx-drop-down__list !optional;
+        @extend %igx-drop-down__list--empty !optional;
+    }
+
     @include e(list-scroll) {
         @extend %igx-drop-down__list-scroll !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -229,15 +229,15 @@
         border: --var($theme, 'border-width') solid --var($theme, 'border-color');
     }
 
+    %igx-drop-down__list--empty {
+        box-shadow: none;
+    }
+
     %igx-drop-down__list-scroll {
         overflow-y: auto;
         overflow-x: hidden;
         position: relative;
 
-        &:empty {
-            box-shadow: none;
-        }
-
         igx-input-group {
             margin-top: -16px !important;
         }

projects/igniteui-angular/src/lib/drop-down/drop-down.component.html

@@ -1,5 +1,10 @@
-<div class="igx-drop-down__list" igxToggle [style.width]="width"
-(onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()" (onAppended)="onToggleContentAppended()"
+<div [ngClass]="{
+    'igx-drop-down__list': items.length > 0,
+    'igx-drop-down__list--empty': items.length === 0 }"
+[style.width]="width"
+igxToggle
+(onAppended)="onToggleContentAppended()"
+(onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()"
 (onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
     <div class="igx-drop-down__list-scroll" #scrollContainer [attr.id]="this.listId" role="listbox"
     [style.height]="height"