Fix select component.

cerberus/src/app/app.module.ts

@@ -11,6 +11,7 @@ import { ApplicationCardComponent } from './core/components/application-card/app
 import {MatTooltipModule} from '@angular/material/tooltip'; 
 import { AddApplicationButtonComponent } from './core/components/add-application-button/add-application-button.component';
 import { ModalComponent } from './core/components/modal/modal.component';
+import { SelectComponent } from './core/components/select/select.component';
 
 @NgModule({
   declarations: [
@@ -21,7 +22,8 @@ import { ModalComponent } from './core/components/modal/modal.component';
     StatusComponent,
     ApplicationCardComponent,
     AddApplicationButtonComponent,
-    ModalComponent
+    ModalComponent,
+    SelectComponent,
   ],
   imports: [
     RouterModule,

cerberus/src/app/applications/create-application/create-application.component.html

@@ -11,11 +11,7 @@
     </div>
     <div class="form-control">
       <label for="service-type">Type</label>
-      <select id="service-type" formControlName="serviceType" placeholder="Enter service type">
-        <option *ngFor="let type of serviceTypes" [value]="type.value">
-          {{type.label}}
-        </option>
-      </select>
+      <app-select [options]="serviceTypes" optionLabel="label" (onSelection)="onServiceTypeSelection($event)"></app-select>
     </div>
     <div class="form-control">
       <label for="image">Image</label>

cerberus/src/app/applications/create-application/create-application.component.ts

@@ -47,4 +47,9 @@ export class CreateApplicationComponent implements OnInit {
   onCancel(): void {
     this._modalService.close();
   }
+
+  onServiceTypeSelection(event: ReferentialData): void {
+    this.form.controls.serviceType.setValue(event.value);
+    console.log(event.value);
+  }
 }

cerberus/src/app/core/components/select/select.component.html

@@ -1,9 +1,14 @@
-<div class="container">
-  <select #select>
-    <option>Option 1</option>
-    <option>Option 2</option>
-  </select>
+<div class="dropdown">
+  <button #select class="secondary" type="button" (click)="_active = !_active" (focus)="onFocus()" (blur)="onBlur()">
+    {{!_selectedOption ? 'Select an option' : _selectedOption.label}}
+  </button>
   <div class="icon">
-    <mat-icon (click)="select.focus()">unfold_more</mat-icon>
+    <mat-icon (click)="onIconClick()">unfold_more</mat-icon>
   </div>
+
+  <ul class="{{_active ? 'show' : ''}}">
+    <li *ngFor="let option of options" (click)="setOption(option)">
+      {{option.label}}
+    </li>
+  </ul>
 </div>

cerberus/src/app/core/components/select/select.component.scss

@@ -1,16 +1,25 @@
-$btn-primary-background-top: #4ca4f6;
-$btn-primary-background-bottom: #0073f7;
+@import '../../../../colors.scss';
 
 $select-icon-radius: 4px;
 
-.container {
+.dropdown {
+  width: max-content;
   position: relative;
   display: flex;
-  justify-content: center;
   align-items: center;
+  width: 100%;
 
-  select {
+  button {
+    padding-right: 35px;
+    border: none;
+    margin: 0;
+    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
+    width: 100%;
+    justify-content: left;
 
+    &:focus {
+      outline: 2px solid $blue;
+    }
   }
 
   .icon {
@@ -20,20 +29,51 @@ $select-icon-radius: 4px;
     width: 1.5rem;
     background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom);
     color: white;
-    height: 23px;
-    top: 3px;
+    height: 21px;
     right: 0;
     border-radius: 0 $select-icon-radius $select-icon-radius 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     mat-icon {
       font-size: 19px;
       display: flex;
       justify-content: center;
       align-items: center;
+      padding-right: 2px;
 
       &:hover {
         cursor: default;
       }
     }
   }
+
+  ul {
+    position: absolute;
+    top: 24px;
+    background-color: #fff;
+    border-radius: 4px;
+    margin: 0;
+    padding: .3rem 0;
+    min-width: 150px;
+    border: 1px solid #eee;
+    display: none;
+    flex-direction: column;
+
+    &.show {
+      display: flex;
+    }
+
+    li {
+      list-style: none;
+      padding: .2rem 1rem;
+      
+      &:hover {
+        background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom);
+        color: white;
+        cursor: pointer;
+      }
+    }
+  }
 }

cerberus/src/app/core/components/select/select.component.ts

@@ -1,15 +1,65 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AbstractControl, FormControl } from '@angular/forms';
+
+export interface Option {
+  value: any;
+  label: string
+}
 
 @Component({
   selector: 'app-select',
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.scss']
 })
-export class SelectComponent implements OnInit {
+export class SelectComponent implements OnChanges {
+  _selectedOption?: Option;
+  _options: Option[] = []
+  _active: boolean = false;
+  private _disableBlurEffect: boolean = false;
+  @Input() formControl: any;
+  @Input() options?: any[];
+  @Input() optionLabel?: string;
+  @ViewChild('select', {static: true}) select?: ElementRef;
+  @ViewChild('selectIcon', {static: true}) selectIcon?: ElementRef;
+  @Output() onSelection: EventEmitter<any> = new EventEmitter();
 
-  constructor() { }
+  constructor(
 
-  ngOnInit(): void {
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.options?.length) {
+      this._options = this.options.map(option => ({
+        value: option,
+        label: typeof this.optionLabel === 'undefined' ? undefined : option[this.optionLabel]
+      } as Option));
+    }
   }
 
+  onIconClick(): void {
+    if (this.select) {
+      this.select.nativeElement.focus();
+      this.select.nativeElement.click();
+    }
+  }
+
+  setOption(selectedOption: Option): void {
+    this._selectedOption = selectedOption;
+    this._active = false;
+    this.select?.nativeElement?.focus();
+    this.onSelection.emit(this._selectedOption);
+  }
+
+  onFocus(): void {
+    this._disableBlurEffect = true;
+    window.setTimeout(() => this._disableBlurEffect = false, 150);
+  }
+
+  onBlur(): void {
+    window.setTimeout(() => {
+      if (!this._disableBlurEffect) {
+        this._active = false;
+      }
+    }, 150);
+  }
 }