Renamed prefixes in angular.json

projects/common/src/fm/components/tag-input/tag-input.component.html

@@ -0,0 +1,3 @@
+<div class="tags">
+  <span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i (click)="handleDeleteTag(tag)" class="fa fa-times" aria-hidden="true"></i></span><input type="text" #taginput (blur)="handleAddTag($event)" (keyup)="handleCheckAddTag($event)" [(ngModel)]="tag" [ngbTypeahead]="findTag" (selectItem)="handleSelect($event)" placeholder="New tag"/>
+</div>

projects/common/src/fm/components/tag-input/tag-input.component.scss

@@ -0,0 +1,16 @@
+.tag {
+  display:inline-block;
+  padding:0.5rem;
+  margin-bottom:0.5rem;
+  margin-top:0.5rem;
+  margin-right:1rem;
+}
+
+:host(tag-input) {
+  height: auto ;
+}
+
+input {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}

projects/common/src/fm/components/tag-input/tag-input.component.ts

@@ -0,0 +1,104 @@
+import { Component, Input, forwardRef,ElementRef,ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR,NgModel } from '@angular/forms';
+import { Observable,of } from 'rxjs';
+import { tap,catchError,debounceTime,distinctUntilChanged,switchMap } from 'rxjs/operators'
+import { TypeaheadService } from '../../services/typeahead.service';
+
+@Component({
+  selector: 'fm-tag-input',
+  templateUrl: 'tag-input.component.html',
+  styleUrls: ['tag-input.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TagInputComponent),
+      multi: true
+    }
+  ]
+})
+
+export class TagInputComponent implements ControlValueAccessor  {
+  @Input() tags: string[]
+  @ViewChild('taginput') tagInputElement: ElementRef;
+  public tag: string;
+  searching = false;
+  searchFailed = false;
+
+  constructor(private typeaheadService: TypeaheadService) {
+  }
+
+  tagExists(tag) {
+    if (tag.length == 0) return true;
+    for (let t of this.tags) {
+      if (t.toLowerCase() == tag.toLowerCase()) return true;
+    }
+    return false;
+  }
+
+  handleDeleteTag(tag) {
+    let tags = [];
+    for (let t of this.tags) {
+      if (t != tag) tags.push(t);
+    }
+    this.tags = tags;
+    this.propagateChange(tags);
+  }
+
+  handleAddTag(event) {
+    if (!this.tagExists(this.tag)) {
+      this.tags.push(this.tag);
+      this.propagateChange(this.tags);
+    }
+    this.tag = "";
+    this.tagInputElement.nativeElement.focus();
+  }
+
+  handleCheckAddTag(event: KeyboardEvent) {
+    if (event.keyCode == 188) {
+      let tag = this.tag.substr(0, this.tag.length - 1); // strip ,
+      if (!this.tagExists(tag)) {
+        this.tags.push(tag);
+        this.propagateChange(this.tags);
+      }
+      this.tag = "";
+    }
+  }
+
+  handleSelect(event) {
+    if (!this.tagExists(event.item)) {
+      this.tags.push(event.item);
+      this.propagateChange(this.tags);
+    }
+    event.preventDefault();
+    this.tag = "";
+  }
+
+  propagateChange = (_: any) => { };
+
+  registerOnChange(fn) {
+    this.propagateChange = fn;
+  }
+
+  findTag = (text$: Observable<string>) =>
+  text$.pipe(
+        debounceTime(200),
+        distinctUntilChanged(), 
+        tap(() => this.searching = true),
+        switchMap(term => term.length < 1 ? of([]) :
+           this.typeaheadService.getTagTypeaheadItems(term).pipe(
+            tap(() => this.searchFailed = false),
+            catchError(() => {
+                this.searchFailed = true;
+                return of([]);
+            }))
+         ),
+         tap(() => this.searching = false)
+  );
+
+  writeValue(value: any) {
+    this.tags = value;
+    this.tag = "";
+  }
+
+  registerOnTouched() { }
+}