feat: adding new display view (#864)

Co-authored-by: Patricio Albizu <[email protected]>

Author: palbizu

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

@@ -72,6 +72,20 @@
       border-radius: 6px;
     }
 
+    &.menu-with-background {
+      background-color: $gray-1;
+      padding-top: 1px;
+      border-radius: 4px;
+
+      .trigger-label {
+        @include body-1-medium($gray-9);
+      }
+
+      .trigger-icon {
+        padding-top: 1px;
+      }
+    }
+
     &.justify-left {
       justify-content: flex-start;
     }

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

@@ -75,6 +75,15 @@ import { SelectSize } from './select-size';
               >
               </ht-icon>
             </div>
+            <div
+              *ngSwitchCase="'${SelectTriggerDisplayMode.MenuWithBackground}'"
+              class="trigger-content menu-with-background"
+              [ngClass]="[this.justifyClass]"
+            >
+              <ht-label class="trigger-label" [label]="selected?.selectedLabel || selected?.label || this.placeholder">
+              </ht-label>
+              <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.Small}"> </ht-icon>
+            </div>
           </div>
         </ht-popover-trigger>
         <ht-popover-content>
@@ -240,5 +249,6 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
 
 export const enum SelectTriggerDisplayMode {
   MenuWithBorder = 'menu-with-border',
+  MenuWithBackground = 'menu-with-background',
   Icon = 'icon'
 }