[HIT-413] fix select menus

libs/shared/src/lib/components/controls/reference-data-select/reference-data-select.component.ts

@@ -1,4 +1,5 @@
 import {
+  AfterContentInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
@@ -55,7 +56,10 @@ const ITEMS_PER_PAGE = 10;
     },
   ],
 })
-export class ReferenceDataSelectComponent extends GraphQLSelectComponent {
+export class ReferenceDataSelectComponent
+  extends GraphQLSelectComponent
+  implements AfterContentInit
+{
   /**
    * Shared reference data select component.
    * Extends graphql select component.
@@ -85,6 +89,15 @@ export class ReferenceDataSelectComponent extends GraphQLSelectComponent {
     });
   }
 
+  ngAfterContentInit(): void {
+    // Apply correct background color to select
+    const selectButtons =
+      this.elementRef.nativeElement.getElementsByTagName('button');
+    if (selectButtons) {
+      this.renderer.addClass(selectButtons[0], 'bg-light-50');
+    }
+  }
+
   /**
    * Override GraphQLSelectComponent onOpenSelect to only load query when
    * select menu is open for the first time.

libs/shared/src/lib/components/controls/resource-select/resource-select.component.ts

@@ -1,4 +1,5 @@
 import {
+  AfterContentInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
@@ -55,7 +56,10 @@ const ITEMS_PER_PAGE = 10;
     },
   ],
 })
-export class ResourceSelectComponent extends GraphQLSelectComponent {
+export class ResourceSelectComponent
+  extends GraphQLSelectComponent
+  implements AfterContentInit
+{
   /**
    * Shared resource select component.
    * Extends graphql select component.
@@ -85,6 +89,15 @@ export class ResourceSelectComponent extends GraphQLSelectComponent {
     });
   }
 
+  ngAfterContentInit(): void {
+    // Apply correct background color to select
+    const selectButtons =
+      this.elementRef.nativeElement.getElementsByTagName('button');
+    if (selectButtons) {
+      this.renderer.addClass(selectButtons[0], 'bg-light-50');
+    }
+  }
+
   /**
    * Override GraphQLSelectComponent onOpenSelect to only load query when
    * select menu is open for the first time.

libs/shared/src/lib/components/ui/aggregation-builder/pipeline/field-dropdown/field-dropdown.component.html

@@ -1,4 +1,4 @@
-<div uiFormFieldDirective [defaultMargin]="false" class="flex-1 w-44">
+<div uiFormFieldDirective [defaultMargin]="false" class="flex-1 w-44" customBackground="bg-light-50">
   <label>{{ label || 'common.field.one' | translate }}</label>
   <ui-select-menu [formControl]="fieldControl" #menu>
     <ui-select-option *ngIf="nullable">{{

libs/shared/src/lib/components/widgets/chart-settings/tab-main/tab-main.component.html

@@ -5,7 +5,7 @@ <h2>{{ 'common.general' | translate }}</h2>
     <input formControlName="title" type="string" />
   </div>
   <ng-container formGroupName="chart">
-    <div uiFormFieldDirective>
+    <div uiFormFieldDirective customBackground="bg-light-50">
       <label>{{ 'components.widget.settings.chart.type' | translate }}</label>
       <ng-template #chartTemplate let-type>
         <img class="chart-icon" [src]="type?.icon" />{{
@@ -30,7 +30,7 @@ <h2>{{ 'common.general' | translate }}</h2>
   </ng-container>
   <div class="flex-1 flex-col">
     <!-- Reference data selection  -->
-    <div uiFormFieldDirective class="flex-1" *ngIf="!formGroup.value.resource">
+    <div uiFormFieldDirective class="flex-1" *ngIf="!formGroup.value.resource" customBackground="bg-light-50">
       <label>{{ 'models.referenceData.select' | translate }}</label>
       <shared-reference-data-select
         formControlName="referenceData"
@@ -57,6 +57,7 @@ <h2>{{ 'common.general' | translate }}</h2>
       uiFormFieldDirective
       class="flex-1"
       *ngIf="!formGroup.value.referenceData"
+      customBackground="bg-light-50"
     >
       <label>{{ 'models.resource.select' | translate }}</label>
       <shared-resource-select
@@ -78,7 +79,7 @@ <h2>{{ 'common.general' | translate }}</h2>
   <ng-container *ngIf="resource || referenceData">
     <!-- Aggregation -->
     <ng-container *ngIf="formGroup.value.chart.aggregationId">
-      <div *ngIf="aggregation" uiFormFieldDirective>
+      <div *ngIf="aggregation" uiFormFieldDirective customBackground="bg-light-50">
         <label>{{ 'common.aggregation.one' | translate }}</label>
         <ui-select-menu [disabled]="true" [value]="aggregation.name">
           <ui-select-option [value]="aggregation.name">{{
@@ -104,7 +105,7 @@ <h2>{{ 'common.general' | translate }}</h2>
       </div>
       <!-- GraphQL variable mapping for reference data graphql-->
       <shared-graphql-variables-mapping
-        class="mb-1"
+        class="mb-1 "
         *ngIf="referenceData && referenceData.type === 'graphql'"
         [referenceData]="referenceData"
         [control]="$any(formGroup.get('referenceDataVariableMapping'))"

libs/ui/src/lib/form-wrapper/form-wrapper.directive.ts

@@ -39,6 +39,9 @@ export class FormWrapperDirective
    * Set default margin for separation in the current form field
    */
   @Input() defaultMargin = true;
+  /** Set custom background */
+  @Input() customBackground!: string;
+
   // === GET THE ELEMENTS ON WHICH SUFFIX/PREFIX ARE APPLIED ===
   /** Get all suffix directives */
   @ContentChildren(SuffixDirective)
@@ -153,8 +156,8 @@ export class FormWrapperDirective
     'bg-light-50',
     'border-0',
     'rounded-lg',
-    'px-3',
     'font-medium',
+    'px-3',
   ] as const;
   /** Select button classes to remove */
   private selectButtonRemove = [
@@ -335,8 +338,23 @@ export class FormWrapperDirective
     // Remove right padding for select
     if (this.currentSelectElement || this.currentGraphQLSelectComponent) {
       this.renderer.removeClass(this.beyondLabelContainer, 'px-2');
-      this.renderer.addClass(this.beyondLabelContainer, 'pl-2');
       this.renderer.addClass(this.beyondLabelContainer, 'bg-white');
+      if (this.customBackground) {
+        this.renderer.removeClass(this.beyondLabelContainer, 'bg-white');
+        if (
+          this.currentSelectElement &&
+          this.currentSelectElement.nativeElement
+        ) {
+          const selectButton =
+            this.currentSelectElement.nativeElement.querySelector('button');
+          this.renderer.addClass(
+            this.beyondLabelContainer,
+            this.customBackground
+          );
+          this.renderer.addClass(selectButton, this.customBackground);
+        }
+      }
+      this.renderer.removeClass(this.beyondLabelContainer, 'px-3');
     }
 
     if (this.currentInputElement && !this.dateWrapperElement) {