feat: initial implementation

Author: Matt Lewis

README.md

@@ -29,15 +29,23 @@ Install through npm:
 npm install --save angular-text-input-autocomplete
 ```
 
+For older browsers you will need the `keyboardevent-key-polyfill` polyfill:
+```
+npm install --save keyboardevent-key-polyfill
+```
+
 Then include in your apps module:
 
 ```typescript
+import { polyfill as keyboardEventKeyPolyfill } from 'keyboardevent-key-polyfill';
 import { NgModule } from '@angular/core';
 import { TextInputAutocompleteModule } from 'angular-text-input-autocomplete';
 
+keyboardEventKeyPolyfill();
+
 @NgModule({
   imports: [
-    TextInputAutocompleteModule.forRoot()
+    TextInputAutocompleteModule
   ]
 })
 export class MyModule {}
@@ -48,9 +56,32 @@ Finally use in one of your apps components:
 import { Component } from '@angular/core';
 
 @Component({
-  template: '<hello-world></hello-world>'
+  selector: 'mwl-demo-app',
+  template: `
+    <mwl-text-input-autocomplete-container>
+      <textarea
+        placeholder="Type @ to search..."
+        class="form-control"
+        rows="5"
+        [(ngModel)]="formControlValue"
+        mwlTextInputAutocomplete
+        [findChoices]="findChoices"
+        [getChoiceLabel]="getChoiceLabel">
+      </textarea>
+    </mwl-text-input-autocomplete-container>
+  `
 })
-export class MyComponent {}
+export class DemoComponent {
+  formControlValue = '';
+
+  findChoices(searchText: string) {
+    return ['John', 'Jane', 'Jonny'].filter(item => item.toLowerCase().includes(searchText.toLowerCase()));
+  }
+
+  getChoiceLabel(choice: string) {
+    return `@${choice} `;
+  }
+}
 ```
 
 You may also find it useful to view the [demo source](https://github.com/mattlewis92/angular-text-input-autocomplete/blob/master/demo/demo.component.ts).
@@ -67,6 +98,9 @@ You may also find it useful to view the [demo source](https://github.com/mattlew
 All documentation is auto-generated from the source via [compodoc](https://compodoc.github.io/compodoc/) and can be viewed here:
 https://mattlewis92.github.io/angular-text-input-autocomplete/docs/
 
+## Related
+[angular-text-input-highlight](https://github.com/mattlewis92/angular-text-input-highlight) - a component for highlighting parts of a textarea
+
 ## Development
 
 ### Prepare your environment

custom-typings.d.ts

@@ -3,4 +3,6 @@ declare module 'webpack-angular-externals';
 declare module 'webpack-rxjs-externals';
 declare module 'webpack-config-utils';
 declare module 'offline-plugin';
-declare module '@mattlewis92/webpack-karma-die-hard';
+declare module '@mattlewis92/webpack-karma-die-hard';
+declare module 'textarea-caret';
+declare module 'keyboardevent-key-polyfill';

demo/demo.component.ts

@@ -1,7 +1,55 @@
 import { Component } from '@angular/core';
 
+// generated from http://listofrandomnames.com/index.cfm?textarea
+const names = [
+  'Reda Marriott',
+  'Cleta Cheatwood',
+  'Penney Fortman',
+  'Andy Mary',
+  'Lilia Ricci',
+  'Simonne Horne',
+  'Marquis Macgillivray',
+  'Ettie Koester',
+  'Lovie Mero',
+  'Gretta Ripley',
+  'Jutta Casteel',
+  'Donita Looby',
+  'Patrice Guillotte',
+  'Kirstin Sever',
+  'Ezra Tremper',
+  'Darell Monnier',
+  'Elvira Balser',
+  'Noriko Kluge',
+  'Zulema Shake',
+  'Kary Schreck'
+];
+
 @Component({
   selector: 'mwl-demo-app',
-  template: '<mwl-hello-world></mwl-hello-world>'
+  template: `
+    <mwl-text-input-autocomplete-container>
+      <textarea
+        placeholder="Type @ to search..."
+        class="form-control"
+        rows="5"
+        [(ngModel)]="formControlValue"
+        mwlTextInputAutocomplete
+        [findChoices]="findChoices"
+        [getChoiceLabel]="getChoiceLabel">
+      </textarea>
+    </mwl-text-input-autocomplete-container>
+  `
 })
-export class DemoComponent {}
+export class DemoComponent {
+  formControlValue = '';
+
+  findChoices(searchText: string) {
+    return names
+      .filter(item => item.toLowerCase().includes(searchText.toLowerCase()))
+      .slice(0, 5);
+  }
+
+  getChoiceLabel(choice: string) {
+    return `@${choice} `;
+  }
+}

demo/demo.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { TextInputAutocompleteModule } from '../src';
 import { DemoComponent } from './demo.component';
 
 @NgModule({
   declarations: [DemoComponent],
-  imports: [BrowserModule, TextInputAutocompleteModule.forRoot()],
+  imports: [BrowserModule, TextInputAutocompleteModule, FormsModule],
   bootstrap: [DemoComponent]
 })
 export class DemoModule {}

demo/entry.ts

@@ -15,10 +15,14 @@ import 'core-js/es6/set';
 import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
+import { polyfill as keyboardEventKeyPolyfill } from 'keyboardevent-key-polyfill';
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DemoModule } from './demo.module';
 
+// required for older browsers
+keyboardEventKeyPolyfill();
+
 declare const ENV: string;
 if (ENV === 'production') {
   const { install } = require('offline-plugin/runtime'); // tslint:disable-line

package-lock.json

@@ -64,6 +64,7 @@
     "@angular/compiler": "^4.0.0",
     "@angular/compiler-cli": "^4.0.0",
     "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.4.4",
     "@angular/language-service": "^4.0.0",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
@@ -99,6 +100,7 @@
     "karma-mocha-reporter": "^2.2.3",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.1",
+    "keyboardevent-key-polyfill": "^1.1.0",
     "lint-staged": "^4.0.2",
     "mocha": "^4.0.1",
     "offline-plugin": "^4.8.3",
@@ -122,5 +124,8 @@
   },
   "peerDependencies": {
     "@angular/core": ">=4.0.0 <6.0.0"
+  },
+  "dependencies": {
+    "textarea-caret": "^3.0.2"
   }
 }

package.json

@@ -1 +1,4 @@
 export * from './text-input-autocomplete.module';
+export {
+  TextInputAutocompleteMenuComponent
+} from './text-input-autocomplete-menu.component';

src/hello-world.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'mwl-text-input-autocomplete-container',
+  styles: [
+    `
+    :host {
+      position: relative;
+      display: block;
+    }
+  `
+  ],
+  template: '<ng-content></ng-content>'
+})
+export class TextInputAutocompleteContainerComponent {}