package.json

@@ -1,6 +1,6 @@
 {
   "name": "farmmaps-lib-app",
-  "version": "2.0.5",
+  "version": "2.0.4",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

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

@@ -1,11 +1,3 @@
-<div class="tags">
+<div class="tags">
-  <span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i
+  <span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i (click)="handleDeleteTag(tag)" class="fal 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"/>
-    (click)="handleDeleteTag(tag)" class="fal fa-times" aria-hidden="true"></i></span><input
+</div>
-  type="text" #tagInputElement
-  (blur)="handleBlur($event, false)"
-  (keyup)="handleKeyUp($event)"
-  [(ngModel)]="tag"
-  [ngbTypeahead]="findTag"
-  (selectItem)="handleSelect($event)"
-  placeholder="New tag"/>
-</div>

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

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