2.0.2

added keyboard tab support
chore: housecleaning

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-tag-input",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kennyrulez/angular-tag-input"
@@ -43,7 +43,7 @@
     "zone.js": "^0.8.19"
   },
   "devDependencies": {
-    "@angular/cli": "~1.7.2",
+    "@angular/cli": "~1.7.3",
     "@angular/compiler-cli": "^5.2.0",
     "@angular/language-service": "^5.2.0",
     "@types/node": "^9.0.0",

publish.js

@@ -17,7 +17,7 @@ function createDeclarations() {
 function createPackageJson() {
     const packageJSON = {
         "name": "angular-tag-input",
-        "version": "2.0.1",
+        "version": "2.0.2",
         "description": "Angular 5+ library for chips",
         "main": "index.js",
         "scripts": {

src/app/app.component.html

@@ -1,20 +1,4 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<h1>Test</h1>
 
+<angular-tag-input placeholder="Aggiungi Autore" displayBy="completeName" [convertOutputToObject]="true" [addOnSpace]="false"
+  [addOnBlur]="false" [autocomplete]="true"></angular-tag-input>

src/app/app.component.ts

@@ -2,9 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'tag-input-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  templateUrl: './app.component.html'
 })
-export class AppComponent {
-  title = 'tag-input';
-}
+export class AppComponent { }

src/app/app.module.ts

@@ -1,16 +1,17 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
+import { TagInputModule } from './tag-input/tag-input.module';
 
 import { AppComponent } from './app.component';
 
-
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    TagInputModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/tag-input/components/tag-input-autocomplete/tag-input-autocomplete.component.ts

@@ -46,6 +46,7 @@ export class TagInputAutocompleteComponent implements OnChanges, OnDestroy, OnIn
   @Input() selectFirstItem = false;
   @Output() itemSelected: EventEmitter<string> = new EventEmitter<string>();
   @Output() enterPressed: EventEmitter<any> = new EventEmitter<any>();
+  @Output() tabPressed: EventEmitter<any> = new EventEmitter<any>();
   public selectedItemIndex: number = null;
   private keySubscription: Subscription;
   private get itemsCount(): number {
@@ -93,6 +94,11 @@ export class TagInputAutocompleteComponent implements OnChanges, OnDestroy, OnIn
             this.enterPressed.emit();
             break;
 
+          case KEYS.tab:
+            this.selectItem();
+            this.tabPressed.emit();
+            break;
+
           case KEYS.esc:
             break;
         }

src/app/tag-input/components/tag-input/tag-input.component.ts

@@ -60,6 +60,7 @@ export interface AutoCompleteItem {
           [selectFirstItem]="autocompleteSelectFirstItem"
           (itemSelected)="onAutocompleteSelect($event)"
           (enterPressed)="onAutocompleteEnter($event)">
+          (tabPressed)="onAutocompleteEnter($event)">
         </angular-tag-input-autocomplete>
       </div>
     </form>
@@ -104,6 +105,7 @@ export class TagInputComponent implements ControlValueAccessor, OnDestroy, OnIni
   @Input() addOnBlur = true;
   @Input() addOnComma = true;
   @Input() addOnEnter = true;
+  @Input() addOnTab = true;
   @Input() addOnPaste = true;
   @Input() addOnSpace = false;
   @Input() allowDuplicates = false;
@@ -197,6 +199,13 @@ export class TagInputComponent implements ControlValueAccessor, OnDestroy, OnIni
         }
         break;
 
+      case KEYS.tab:
+        if (this.addOnTab && !this.showAutocomplete()) {
+          this._addTags([this.inputValue]);
+          event.preventDefault();
+        }
+        break;
+
       case KEYS.comma:
         if (this.addOnComma) {
           this._addTags([this.inputValue]);
@@ -245,6 +254,12 @@ export class TagInputComponent implements ControlValueAccessor, OnDestroy, OnIni
     }
   }
 
+  onAutocompleteTab() {
+    if (this.addOnTab && this.showAutocomplete() && !this.autocompleteMustMatch) {
+      this._addTags([this.inputValue]);
+    }
+  }
+
   showAutocomplete(): boolean {
     return (
       this.autocomplete &&

src/app/tag-input/shared/tag-input-keys.ts

@@ -3,6 +3,7 @@ export const KEYS = {
     comma: 188,
     downArrow: 40,
     enter: 13,
+    tab: 9,
     esc: 27,
     space: 32,
     upArrow: 38

src/index.html

@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>AngularTagInput</title>
+  <title>Angular Tag Input</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
 </head>
 <body>
   <tag-input-root></tag-input-root>