fix: multi select icon mode style and some code refactoring

Author: itssharmasandeep

projects/components/src/multi-select/multi-select.component.scss

@@ -12,10 +12,6 @@
     border-radius: 6px;
   }
 
-  &.open {
-    background-color: $gray-2;
-  }
-
   .multi-select-container {
     width: 100%;
   }
@@ -33,11 +29,20 @@
     cursor: pointer;
     height: 34px;
 
+    &.open {
+      background-color: $gray-2;
+    }
+
     &.icon-mode {
       border: 1px solid transparent;
       border-radius: 64px;
       padding: 0 4px;
 
+      &.open {
+        background: $blue-2;
+        border-color: $blue-3;
+      }
+
       &:hover {
         color: $blue-5;
         background: $blue-1;
@@ -61,10 +66,10 @@
         margin-left: auto;
       }
     }
-  }
 
-  &:hover {
-    background-color: $gray-1;
+    &:hover {
+      background-color: $gray-1;
+    }
   }
 }
 

projects/components/src/multi-select/multi-select.component.ts

@@ -44,7 +44,7 @@ import { MultiSelectJustify } from './multi-select-justify';
           <div
             class="trigger-content"
             [style.justify-content]="this.justify"
-            [ngClass]="this.triggerLabelDisplayMode"
+            [ngClass]="[this.triggerLabelDisplayMode, this.popoverOpen ? 'open' : '']"
             #triggerContainer
           >
             <ht-icon *ngIf="this.icon" [icon]="this.icon" [size]="this.iconSize"> </ht-icon>

projects/components/src/select/select.component.scss

@@ -98,16 +98,17 @@
       margin-left: auto;
       color: $gray-7;
     }
+
+    &:hover {
+      background-color: $gray-1;
+      border-radius: 6px;
+    }
   }
 
   .icon-only {
     display: flex;
     align-items: center;
 
-    &.open {
-      background-color: transparent;
-    }
-
     .icon {
       padding: 6px;
       border: 1px solid white;
@@ -134,11 +135,6 @@
       color: $blue-5;
     }
   }
-
-  &:hover {
-    background-color: $gray-1;
-    border-radius: 6px;
-  }
 }
 
 .select-content {

projects/components/src/select/select.component.ts

@@ -64,7 +64,7 @@ import { SelectSize } from './select-size';
             <div
               *ngSwitchCase="'${SelectTriggerDisplayMode.Icon}'"
               class="trigger-content icon-only"
-              [ngClass]="[this.selected !== undefined ? 'selected' : '', this.popoverOpen ? 'open' : '']"
+              [ngClass]="{ selected: this.selected !== undefined, open: this.popoverOpen }"
             >
               <ht-icon
                 class="icon"