Split all scss in separated files.

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">
+      <app-select [options]="serviceTypes" optionLabel="label" (onSelection)="onServiceTypeSelection($event)"></app-select>
-        <option *ngFor="let type of serviceTypes" [value]="type.value">
-          {{type.label}}
-        </option>
-      </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/modal/modal.component.ts

@@ -22,7 +22,9 @@ export class ModalComponent implements OnInit {
             if (!modalContentClass) {
                 this.displayed = false;
                 window.setTimeout(() => {
+                    if (!this.displayed) {
                         this.modalContent?.detach();
+                    }
                 }, 1000);
             } else {
                 this.displayed = true;

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

@@ -1,9 +1,14 @@
-<div class="container">
+<div class="dropdown">
-  <select #select>
+  <button #select class="secondary" type="button" (click)="_active = !_active" (focus)="onFocus()" (blur)="onBlur()">
-    <option>Option 1</option>
+    {{!_selectedOption ? 'Select an option' : _selectedOption.label}}
-    <option>Option 2</option>
+  </button>
-  </select>
   <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;
+@import '../../../../colors.scss';
-$btn-primary-background-bottom: #0073f7;
 
 $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;
+    height: 21px;
-    top: 3px;
     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);
+  }
 }

cerberus/src/components-styles/button.scss

@@ -0,0 +1,50 @@
+@import '../colors.scss';
+
+button {
+    // background-color: $blue;
+    background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom);
+    color: white;
+    border: solid 1px $btn-primary-background-bottom;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 5rem;
+    border-radius: .3rem;
+    padding: .15rem 1rem;
+    font-weight: 600;
+    margin: .2rem .5rem;
+  
+    &:active {
+      border-color: $btn-primary-active-border;
+      background-image: linear-gradient($btn-primary-active-background-top, $btn-primary-active-background-bottom);
+    }
+  
+    &.secondary {
+      background-image: none;
+      background-color: $btn-secondary-background;
+      border-color: $btn-secondary-border;
+      color: #222;
+      font-weight: 500;
+  
+      &:active {
+        background-color: $btn-secondary-active-background;
+        border-color: $btn-secondary-active-border;
+      }
+    }
+  
+    &.help {
+      border-radius: 10em;
+      padding: 0;
+      background-image: none;
+      background-color: #eeeeee;
+      color: #333;
+      border-color: #bbb;
+      min-width: min-content;
+      width: 1.5rem;
+      height: 1.5rem;
+  
+      &:hover {
+        background-color: #dddddd;
+      }
+    }
+  }

cerberus/src/components-styles/card.scss

@@ -0,0 +1,7 @@
+.card {
+    width: max-content;
+    padding: .5rem 1rem;
+    box-shadow: 0px 13px 28px 4px rgba(0,0,0,0.2);
+    border-radius: .4rem;
+    margin: 2rem;
+  }

cerberus/src/components-styles/components-styles.scss

@@ -0,0 +1,4 @@
+@import './button.scss';
+@import './card.scss';
+@import './form/form.scss';
+@import './icon.scss';

cerberus/src/components-styles/form/form-control.scss

@@ -0,0 +1,19 @@
+.form-control {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem 0;
+  
+    & > * {
+      display: flex;
+      flex: 1 0;
+    }
+  
+    & > input, select {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    app-select {
+      width: 100%;
+    }
+  }

cerberus/src/components-styles/form/form.scss

@@ -0,0 +1,4 @@
+@import './form-control.scss';
+@import './label.scss';
+@import './input.scss';
+@import './select.scss';

cerberus/src/components-styles/form/input.scss

@@ -0,0 +1,29 @@
+@import '../../colors.scss';
+
+input {
+  margin: 0 .5rem;
+  border: none;
+  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
+  padding: .2rem .5rem;
+  border-radius: .2rem;
+
+  &:focus {
+    outline: 2px solid $blue;
+  }
+}
+
+.iconed-input {
+  display: flex;
+  position: relative;
+  align-items: center;
+
+  input {
+    padding-left: 2rem;
+  }
+
+  mat-icon {
+    color: $gray-icon-secondary;
+    position: absolute;
+    left: 1rem;
+  }
+}

cerberus/src/components-styles/form/label.scss

@@ -0,0 +1,4 @@
+label {
+    margin-bottom: .2rem;
+    font-weight: 500;
+}

cerberus/src/components-styles/form/select.scss

@@ -0,0 +1,30 @@
+$font-size: 14px;
+
+select {
+    // A reset of styles, including removing the default dropdown arrow
+    appearance: none;
+    // Additional resets for further consistency
+    border: none;
+    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
+    color: #333;
+    border-radius: .3rem;
+    padding: .15rem .5rem;
+    font-weight: 600;
+    margin: .2rem .5rem;
+    font-size: $font-size;
+  
+    &::-ms-expand {
+      display: none;
+    }
+
+    &:focus {
+        outline: 2px solid $blue;
+    }
+}
+
+.select {
+    display: grid;
+    grid-template-areas: "select";
+    align-items: center;
+}
+  

cerberus/src/components-styles/icon.scss

@@ -0,0 +1,8 @@
+
+mat-icon.mat-icon {
+    display: flex;
+    align-items: center;
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+}

cerberus/src/styles.scss

@@ -1,14 +1,20 @@
 @import './colors.scss';
+@import './components-styles/components-styles.scss';
 
 /* You can add global styles to this file, and also import other style files */
 @font-face {
   font-family: helvetica;
-  src: url(assets/fonts/Helvetica.ttf);
+  src: url(/assets/fonts/Helvetica.ttf);
 }
 
 $font-size: 14px;
 
+html, body {
+  height: 100%;
+}
 body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
   font-size: $font-size;
   font-family: helvetica;
 
@@ -22,120 +28,6 @@ body {
   }
 }
 
-button {
-  // background-color: $blue;
-  background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom);
-  color: white;
-  border: solid 1px $btn-primary-background-bottom;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 5rem;
-  border-radius: .3rem;
-  padding: .15rem 1rem;
-  font-weight: 600;
-  margin: .2rem .5rem;
-
-  &:active {
-    border-color: $btn-primary-active-border;
-    background-image: linear-gradient($btn-primary-active-background-top, $btn-primary-active-background-bottom);
-  }
-
-  &.secondary {
-    background-image: none;
-    background-color: $btn-secondary-background;
-    border-color: $btn-secondary-border;
-    color: #222;
-    font-weight: 500;
-
-    &:active {
-      background-color: $btn-secondary-active-background;
-      border-color: $btn-secondary-active-border;
-    }
-  }
-
-  &.help {
-    border-radius: 10em;
-    padding: 0;
-    background-image: none;
-    background-color: #eeeeee;
-    color: #333;
-    border-color: #bbb;
-    min-width: min-content;
-    width: 1.5rem;
-    height: 1.5rem;
-
-    &:hover {
-      background-color: #dddddd;
-    }
-  }
-}
-
-div.card {
-  width: max-content;
-  padding: .5rem 1rem;
-  box-shadow: 0px 13px 28px 4px rgba(0,0,0,0.2);
-  border-radius: .4rem;
-  margin: 2rem;
-}
-
-.form-control {
-  display: flex;
-  flex-direction: column;
-  margin: 1rem 0;
-
-  & > * {
-    display: flex;
-    flex: 1 0;
-  }
-
-  & > input, select {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-label {
-  margin-bottom: .2rem;
-  font-weight: 500;
-}
-
-input {
-  margin: 0 .5rem;
-  border: none;
-  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
-  padding: .2rem .5rem;
-  border-radius: .2rem;
-
-  &:focus {
-    outline: 2px solid $blue;
-  }
-}
-
-select {
-  // A reset of styles, including removing the default dropdown arrow
-  appearance: none;
-  // Additional resets for further consistency
-  border: none;
-  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
-  color: #333;
-  border-radius: .3rem;
-  padding: .15rem .5rem;
-  font-weight: 600;
-  margin: .2rem .5rem;
-  font-size: $font-size;
-
-  &::-ms-expand {
-    display: none;
-  }
-}
-
-.select {
-  display: grid;
-  grid-template-areas: "select";
-  align-items: center;
-}
-
 
 // Utilitary classes
 .max-width {
@@ -159,35 +51,3 @@ div.row {
     flex: 1 0;
   }
 }
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
-
-
-mat-icon.mat-icon {
-  display: flex;
-  align-items: center;
-  width: 18px;
-  height: 18px;
-}
-
-
-.iconed-input {
-  display: flex;
-  position: relative;
-  align-items: center;
-
-  input {
-    padding-left: 2rem;
-  }
-
-  mat-icon {
-    color: $gray-icon-secondary;
-    position: absolute;
-    left: 1rem;
-  }
-}
-
-mat-icon.mat-icon {
-  font-size: 18px;
-}