From c4eeae7d40366c1ef00d35abed72f82e0bbfbeab Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <itssharmasandeep@Sandeeps-MacBook-Pro.local>
Date: Wed, 31 Mar 2021 12:14:38 +0530
Subject: [PATCH 1/5] fix : Adding hovet behaviour for select

---
 .../menu-dropdown.component.scss              |  9 +++++++
 .../menu-dropdown/menu-dropdown.component.ts  |  6 ++++-
 .../multi-select/multi-select.component.scss  |  8 +++++++
 .../multi-select/multi-select.component.ts    |  5 ++++
 .../src/select/select.component.scss          | 24 +++++++++++++++++++
 .../components/src/select/select.component.ts | 12 ++++++++--
 6 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/projects/components/src/menu-dropdown/menu-dropdown.component.scss b/projects/components/src/menu-dropdown/menu-dropdown.component.scss
index 8d4d70656..2b3b41b77 100644
--- a/projects/components/src/menu-dropdown/menu-dropdown.component.scss
+++ b/projects/components/src/menu-dropdown/menu-dropdown.component.scss
@@ -23,6 +23,15 @@
   .trigger-label:not(:last-child) {
     margin-right: 8px;
   }
+
+  &:hover {
+    background-color: $gray-1;
+    border-radius: 50%;
+  }
+
+  &.labeled:hover {
+    border-radius: 6px;
+  } 
 }
 
 .dropdown-content {
diff --git a/projects/components/src/menu-dropdown/menu-dropdown.component.ts b/projects/components/src/menu-dropdown/menu-dropdown.component.ts
index 56bd9ebe6..d21c7bba0 100644
--- a/projects/components/src/menu-dropdown/menu-dropdown.component.ts
+++ b/projects/components/src/menu-dropdown/menu-dropdown.component.ts
@@ -11,7 +11,7 @@ import { MenuItemComponent } from './menu-item/menu-item.component';
     <ht-event-blocker event="click" [enabled]="true">
       <ht-popover [closeOnClick]="true" [disabled]="this.disabled">
         <ht-popover-trigger>
-          <div class="trigger-content" [ngClass]="{ disabled: this.disabled }">
+          <div class="trigger-content" [ngClass]="{ disabled: this.disabled, labeled: this.isLabeled }">
             <ht-label *ngIf="this.label" class="trigger-label" [label]="this.label"> </ht-label>
             <ht-icon *ngIf="this.icon" class="trigger-icon" [icon]="this.icon" size="${IconSize.Small}"></ht-icon>
           </div>
@@ -35,6 +35,10 @@ export class MenuDropdownComponent {
   @Input()
   public disabled: boolean = false;
 
+  get isLabeled () {
+    return this.label && this.label !== '';
+  }
+
   @ContentChildren(MenuItemComponent)
   public items?: QueryList<MenuItemComponent>;
 }
diff --git a/projects/components/src/multi-select/multi-select.component.scss b/projects/components/src/multi-select/multi-select.component.scss
index 9d96f07d0..0f756791b 100644
--- a/projects/components/src/multi-select/multi-select.component.scss
+++ b/projects/components/src/multi-select/multi-select.component.scss
@@ -12,6 +12,10 @@
     border-radius: 6px;
   }
 
+  &.open {
+    background-color: $gray-2;
+  }
+
   .multi-select-container {
     width: 100%;
   }
@@ -58,6 +62,10 @@
       }
     }
   }
+
+  &:hover {
+    background-color: $gray-1;
+  }
 }
 
 .multi-select-content {
diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts
index dba4f1ef5..31d137431 100644
--- a/projects/components/src/multi-select/multi-select.component.ts
+++ b/projects/components/src/multi-select/multi-select.component.ts
@@ -29,6 +29,7 @@ import { MultiSelectJustify } from './multi-select-justify';
       class="multi-select"
       [ngClass]="[
         this.size,
+        this.isSelected ? 'selected' : '',
         this.showBorder ? 'border' : '',
         this.disabled ? 'disabled' : '',
         this.popoverOpen ? 'open' : ''
@@ -201,6 +202,10 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
     return this.selected !== undefined && this.selected.filter(value => value === item.value).length > 0;
   }
 
+  get isSelected() {
+    return this.selected && this.selected.length > 0
+  }
+
   private setSelection(selected: V[]): void {
     this.selected = selected;
     this.setTriggerLabel();
diff --git a/projects/components/src/select/select.component.scss b/projects/components/src/select/select.component.scss
index 0b2296747..edc890368 100644
--- a/projects/components/src/select/select.component.scss
+++ b/projects/components/src/select/select.component.scss
@@ -31,6 +31,11 @@
     height: 100%;
   }
 
+  &.open {
+    background-color: $gray-2;
+    border-radius: 6px;
+  }
+
   &.border {
     &.group-right {
       border-radius: 0 2px 2px 0;
@@ -99,6 +104,10 @@
     display: flex;
     align-items: center;
 
+    &.open {
+      background-color: transparent;
+    }
+
     .icon {
       padding: 6px;
       border: 1px solid white;
@@ -111,10 +120,25 @@
       }
     }
 
+    &.open {
+      background-color: white;
+
+      .icon {
+        background: $blue-2;
+        border: 1px solid $blue-3;
+        border-radius: 50%;
+      }
+    }
+
     &.selected {
       color: $blue-5;
     }
   }
+
+  &:hover {
+    background-color: $gray-1;
+    border-radius: 6px;
+  }
 }
 
 .select-content {
diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts
index 30d6c24b6..b0d37c234 100644
--- a/projects/components/src/select/select.component.ts
+++ b/projects/components/src/select/select.component.ts
@@ -35,7 +35,8 @@ import { SelectSize } from './select-size';
         this.groupPosition,
         selected ? selected.style.toString() : '',
         this.showBorder ? 'border' : '',
-        this.disabled ? 'disabled' : ''
+        this.disabled ? 'disabled' : '',
+        this.popoverOpen ? 'open' : ''
       ]"
       *htLetAsync="this.selected$ as selected"
     >
@@ -43,6 +44,8 @@ import { SelectSize } from './select-size';
         [disabled]="this.disabled"
         [closeOnClick]="true"
         class="select-container"
+        (popoverOpen) = "this.popoverOpen = true"
+        (popoverClose) = "this.popoverOpen = false"
         [ngSwitch]="this.triggerDisplayMode"
       >
         <ht-popover-trigger>
@@ -61,7 +64,10 @@ import { SelectSize } from './select-size';
             <div
               *ngSwitchCase="'${SelectTriggerDisplayMode.Icon}'"
               class="trigger-content icon-only"
-              [ngClass]="this.selected !== undefined ? 'selected' : ''"
+              [ngClass]="[
+                this.selected !== undefined ? 'selected' : '',
+                this.popoverOpen ? 'open' : ''
+              ]"
             >
               <ht-icon
                 class="icon"
@@ -168,6 +174,8 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
 
   public topControlItems$?: Observable<SelectControlOptionComponent<V>[]>;
 
+  public popoverOpen: boolean = false;
+
   public get justifyClass(): string {
     if (this.justify !== undefined) {
       return this.justify;

From 8d89661bc98a6c87e7798f087b49911efead7ae6 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Wed, 31 Mar 2021 14:22:34 +0530
Subject: [PATCH 2/5] fix: lint errors

---
 .../components/src/menu-dropdown/menu-dropdown.component.ts | 6 +-----
 .../components/src/multi-select/multi-select.component.ts   | 5 -----
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/projects/components/src/menu-dropdown/menu-dropdown.component.ts b/projects/components/src/menu-dropdown/menu-dropdown.component.ts
index d21c7bba0..b9177f8bb 100644
--- a/projects/components/src/menu-dropdown/menu-dropdown.component.ts
+++ b/projects/components/src/menu-dropdown/menu-dropdown.component.ts
@@ -11,7 +11,7 @@ import { MenuItemComponent } from './menu-item/menu-item.component';
     <ht-event-blocker event="click" [enabled]="true">
       <ht-popover [closeOnClick]="true" [disabled]="this.disabled">
         <ht-popover-trigger>
-          <div class="trigger-content" [ngClass]="{ disabled: this.disabled, labeled: this.isLabeled }">
+          <div class="trigger-content" [ngClass]="{ disabled: this.disabled, labeled: !!this.label }">
             <ht-label *ngIf="this.label" class="trigger-label" [label]="this.label"> </ht-label>
             <ht-icon *ngIf="this.icon" class="trigger-icon" [icon]="this.icon" size="${IconSize.Small}"></ht-icon>
           </div>
@@ -35,10 +35,6 @@ export class MenuDropdownComponent {
   @Input()
   public disabled: boolean = false;
 
-  get isLabeled () {
-    return this.label && this.label !== '';
-  }
-
   @ContentChildren(MenuItemComponent)
   public items?: QueryList<MenuItemComponent>;
 }
diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts
index 7bedcc131..494a8d8e1 100644
--- a/projects/components/src/multi-select/multi-select.component.ts
+++ b/projects/components/src/multi-select/multi-select.component.ts
@@ -29,7 +29,6 @@ import { MultiSelectJustify } from './multi-select-justify';
       class="multi-select"
       [ngClass]="[
         this.size,
-        this.isSelected ? 'selected' : '',
         this.showBorder ? 'border' : '',
         this.disabled ? 'disabled' : '',
         this.popoverOpen ? 'open' : ''
@@ -211,10 +210,6 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
     return this.selected !== undefined && this.selected.filter(value => value === item.value).length > 0;
   }
 
-  get isSelected() {
-    return this.selected && this.selected.length > 0
-  }
-
   private setSelection(selected: V[]): void {
     this.selected = selected;
     this.setTriggerLabel();

From cf1432357117d952b4eef2e79c28331237d4a5bc Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Wed, 31 Mar 2021 14:59:11 +0530
Subject: [PATCH 3/5] fix: change hovere color for menu dropdown

---
 .../components/src/menu-dropdown/menu-dropdown.component.scss   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/components/src/menu-dropdown/menu-dropdown.component.scss b/projects/components/src/menu-dropdown/menu-dropdown.component.scss
index 2b3b41b77..05ac7f7ac 100644
--- a/projects/components/src/menu-dropdown/menu-dropdown.component.scss
+++ b/projects/components/src/menu-dropdown/menu-dropdown.component.scss
@@ -25,7 +25,7 @@
   }
 
   &:hover {
-    background-color: $gray-1;
+    background-color: $gray-2;
     border-radius: 50%;
   }
 

From f6e3bb69c5ca0469d680d71bbe970d5e6ef4af0c Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Wed, 31 Mar 2021 15:11:06 +0530
Subject: [PATCH 4/5] fix: prettier errors

---
 .../src/menu-dropdown/menu-dropdown.component.scss       | 2 +-
 projects/components/src/select/select.component.ts       | 9 +++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/projects/components/src/menu-dropdown/menu-dropdown.component.scss b/projects/components/src/menu-dropdown/menu-dropdown.component.scss
index 05ac7f7ac..eda7cf8e2 100644
--- a/projects/components/src/menu-dropdown/menu-dropdown.component.scss
+++ b/projects/components/src/menu-dropdown/menu-dropdown.component.scss
@@ -31,7 +31,7 @@
 
   &.labeled:hover {
     border-radius: 6px;
-  } 
+  }
 }
 
 .dropdown-content {
diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts
index b0d37c234..37ebc3c3f 100644
--- a/projects/components/src/select/select.component.ts
+++ b/projects/components/src/select/select.component.ts
@@ -44,8 +44,8 @@ import { SelectSize } from './select-size';
         [disabled]="this.disabled"
         [closeOnClick]="true"
         class="select-container"
-        (popoverOpen) = "this.popoverOpen = true"
-        (popoverClose) = "this.popoverOpen = false"
+        (popoverOpen)="this.popoverOpen = true"
+        (popoverClose)="this.popoverOpen = false"
         [ngSwitch]="this.triggerDisplayMode"
       >
         <ht-popover-trigger>
@@ -64,10 +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]="[this.selected !== undefined ? 'selected' : '', this.popoverOpen ? 'open' : '']"
             >
               <ht-icon
                 class="icon"

From 9d77269239948e11d5a36ecabe2d30e67ef759ba Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Wed, 31 Mar 2021 19:06:56 +0530
Subject: [PATCH 5/5] fix: multi select icon mode style and some code
 refactoring

---
 .../multi-select/multi-select.component.scss  | 19 ++++++++++++-------
 .../multi-select/multi-select.component.ts    |  2 +-
 .../src/select/select.component.scss          | 14 +++++---------
 .../components/src/select/select.component.ts |  2 +-
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/projects/components/src/multi-select/multi-select.component.scss b/projects/components/src/multi-select/multi-select.component.scss
index deb9e518e..93d399954 100644
--- a/projects/components/src/multi-select/multi-select.component.scss
+++ b/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;
+    }
   }
 }
 
diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts
index 494a8d8e1..4a0cca551 100644
--- a/projects/components/src/multi-select/multi-select.component.ts
+++ b/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>
diff --git a/projects/components/src/select/select.component.scss b/projects/components/src/select/select.component.scss
index edc890368..a4fdd39a7 100644
--- a/projects/components/src/select/select.component.scss
+++ b/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 {
diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts
index 37ebc3c3f..fe3f48f4c 100644
--- a/projects/components/src/select/select.component.ts
+++ b/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"