3 files changed, 58 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-forms/select/select-custom-input.component.html b/client/src/app/shared/shared-forms/select/select-custom-input.component.html
new file mode 100644
index 000000000..84fa15c3d
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-custom-input.component.html
@@ -0,0 +1,14 @@
+<ng-select
+  [(ngModel)]="selectedId"
+  (ngModelChange)="onModelChange()"
+  [bindLabel]="bindLabel"
+  [bindValue]="bindValue"
+  [clearable]="clearable"
+  [searchable]="searchable"
+>
+  <ng-option *ngFor="let item of items" [value]="item.id">
+    {{ channel.label }}
+  </ng-option>
+
+  <ng-content></ng-content>
+</ng-select>
diff --git a/client/src/app/shared/shared-forms/select/select-custom-input.component.scss b/client/src/app/shared/shared-forms/select/select-custom-input.component.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-custom-input.component.scss
diff --git a/client/src/app/shared/shared-forms/select/select-custom-input.component.ts b/client/src/app/shared/shared-forms/select/select-custom-input.component.ts
new file mode 100644
index 000000000..ba6fef8ad
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-custom-input.component.ts
@@ -0,0 +1,44 @@
+import { Component, forwardRef, Input } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+
+@Component({
+  selector: 'my-select-custom-input',
+  styleUrls: [ './select-custom-input.component.scss' ],
+  templateUrl: './select-custom-input.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SelectCustomInputComponent),
+      multi: true
+    }
+  ]
+})
+export class SelectCustomInputComponent implements ControlValueAccessor {
+  @Input() items: any[] = []
+
+  selectedId: number
+
+  // ng-select options
+  bindLabel = 'label'
+  bindValue = 'id'
+  clearable = false
+  searchable = false
+
+  propagateChange = (_: any) => { /* empty */ }
+
+  writeValue (id: number) {
+    this.selectedId = id
+  }
+
+  registerOnChange (fn: (_: any) => void) {
+    this.propagateChange = fn
+  }
+
+  registerOnTouched () {
+    // Unused
+  }
+
+  onModelChange () {
+    this.propagateChange(this.selectedId)
+  }
+}