├── src
    ├── assets
    │   └── .gitkeep
    ├── app
    │   ├── routes
    │   │   ├── route2
    │   │   │   ├── route2.component.html
    │   │   │   └── route2.component.ts
    │   │   └── route1
    │   │   │   ├── route1.component.html
    │   │   │   └── route1.component.ts
    │   ├── app.component.html
    │   ├── ng-view
    │   │   ├── ng-view.component.html
    │   │   └── ng-view.component.ts
    │   ├── ng-holder
    │   │   ├── ng-holder.component.html
    │   │   └── ng-holder.component.ts
    │   ├── app.component.ts
    │   ├── app-routing.module.ts
    │   └── app.module.ts
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    ├── index.html
    ├── tslint.json
    ├── main.ts
    ├── browserslist
    ├── test.ts
    ├── karma.conf.js
    ├── polyfills.ts
    └── styles.css
├── demo.gif
├── demo2.gif
├── projects
    └── ng-auto-complete
    │   ├── ng-package.json
    │   ├── src
    │       ├── lib
    │       │   ├── classes
    │       │   │   ├── typing.ts
    │       │   │   ├── AutocompleteItem.ts
    │       │   │   └── AutocompleteGroup.ts
    │       │   ├── pipes
    │       │   │   ├── key-value.ts
    │       │   │   ├── pipes.module.ts
    │       │   │   └── highlight.ts
    │       │   ├── ng-auto-complete.module.ts
    │       │   ├── utils
    │       │   │   └── utils.ts
    │       │   ├── ng-auto-complete.component.ts
    │       │   ├── dropdown
    │       │   │   └── ng-dropdown.directive.ts
    │       │   └── completer
    │       │   │   └── completer.component.ts
    │       ├── public_api.ts
    │       └── test.ts
    │   ├── tsconfig.spec.json
    │   ├── tslint.json
    │   ├── package.json
    │   ├── tsconfig.lib.json
    │   └── karma.conf.js
├── e2e
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    └── tsconfig.e2e.json
├── .editorconfig
├── CONTRIBUTING.md
├── .gitignore
├── tsconfig.json
├── LICENSE
├── package.json
├── CODE_OF_CONDUCT.md
├── tslint.json
├── angular.json
└── README.md


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sengirab/ngAutocomplete/HEAD/demo.gif


--------------------------------------------------------------------------------
/demo2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sengirab/ngAutocomplete/HEAD/demo2.gif


--------------------------------------------------------------------------------
/src/app/routes/route2/route2.component.html:
--------------------------------------------------------------------------------
1 | <p>
2 |   route2 works!
3 | </p>
4 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sengirab/ngAutocomplete/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <a [routerLink]="['/']">ROUTE1</a>-<a [routerLink]="['/route2']">ROUTE2</a>
2 | 
3 | <router-outlet></router-outlet>
4 | 


--------------------------------------------------------------------------------
/src/app/ng-view/ng-view.component.html:
--------------------------------------------------------------------------------
1 | <hr />
2 | <button (click)="SetView()">VIEW!</button>
3 | <hr />
4 | 
5 | <div *ngIf="View">
6 |     <ng-content></ng-content>
7 | </div>


--------------------------------------------------------------------------------
/src/app/ng-holder/ng-holder.component.html:
--------------------------------------------------------------------------------
1 | <ng-auto-complete (selected)="Selected()" [classes]="['']"
2 |                  [group]="group" [key]="'group'"></ng-auto-complete>
3 | <div style="clear: both;"></div>
4 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |     selector: 'app-root',
 5 |     templateUrl: './app.component.html',
 6 | })
 7 | export class AppComponent {
 8 | 
 9 | }
10 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3 |   "dest": "../../dist/ng-auto-complete",
4 |   "lib": {
5 |     "entryFile": "src/public_api.ts"
6 |   }
7 | }


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "exclude": [
 8 |     "test.ts",
 9 |     "**/*.spec.ts"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/lib/classes/typing.ts:
--------------------------------------------------------------------------------
1 | import {AutocompleteGroup} from "./AutocompleteGroup";
2 | import {AutocompleteItem} from "./AutocompleteItem";
3 | 
4 | export interface SelectedAutocompleteItem {
5 |     group: AutocompleteGroup;
6 |     item: AutocompleteItem
7 | }


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 4
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/src/app/routes/route2/route2.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | 
 3 | @Component({
 4 |     selector: 'app-route2',
 5 |     templateUrl: './route2.component.html',
 6 | })
 7 | export class Route2Component implements OnInit {
 8 | 
 9 |     constructor() {
10 |     }
11 | 
12 |     ngOnInit() {
13 |     }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "test.ts",
12 |     "polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "**/*.spec.ts",
16 |     "**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts"
12 |   ],
13 |   "include": [
14 |     "**/*.spec.ts",
15 |     "**/*.d.ts"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>NgAutoCompleteApp</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('workspace-project App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to ng-auto-complete-app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "app",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "app",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "ng",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "ng",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 
14 | 


--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | #
 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
 6 | 
 7 | > 0.5%
 8 | last 2 versions
 9 | Firefox ESR
10 | not dead
11 | not IE 9-11


--------------------------------------------------------------------------------
/projects/ng-auto-complete/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "ng-auto-complete",
 3 |     "version": "5.0.3",
 4 |     "homepage": "https://github.com/sengirab/ngAutocomplete",
 5 |     "url": "https://github.com/sengirab/ngAutocomplete/issues",
 6 |     "email": "benjaminbloot@gmail.com",
 7 |     "license": "(MIT OR Apache-2.0)",
 8 |     "peerDependencies": {
 9 |         "@angular/common": "^7.1.1",
10 |         "@angular/core": "^7.1.1"
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/lib/pipes/key-value.ts:
--------------------------------------------------------------------------------
 1 | import { Pipe, PipeTransform } from '@angular/core';
 2 | 
 3 | @Pipe({
 4 |     name: 'keys'
 5 | })
 6 | export class KeyValuePipe implements PipeTransform {
 7 | 
 8 |     transform(value: any, args?: any): any {
 9 |         let keys = [];
10 |         for (let key in value) {
11 |             if (value.hasOwnProperty(key)) {
12 |                 keys.push(key);
13 |             }
14 |         }
15 | 
16 |         return keys;
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | ### Do you like to code?
 4 | 
 5 | - Fork & clone 
 6 | - npm install
 7 | - ng serve
 8 | - git checkout -b my-new-feature
 9 | - component lives in src/app/ng-autocomplete/*
10 | - Submit a pull request
11 | 
12 | ### Do you like organizing?
13 | - Link to duplicate issues, and suggest new issue labels, to keep things organized
14 | - Go through open issues and suggest closing old ones.
15 | - Ask clarifying questions on recently opened issues to move the discussion forward
16 | 


--------------------------------------------------------------------------------
/src/app/ng-view/ng-view.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |     selector: 'app-ng-view',
 5 |     templateUrl: './ng-view.component.html'
 6 | })
 7 | export class NgViewComponent implements OnInit {
 8 |     View: boolean = false;
 9 | 
10 | 
11 |     constructor() {
12 |     }
13 | 
14 |     /**
15 |      *
16 |      */
17 |     ngOnInit() {
18 |     }
19 | 
20 |     /**
21 |      *
22 |      * @constructor
23 |      */
24 |     SetView() {
25 |         this.View =! this.View;
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/public_api.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Public API Surface of ng-auto-complete
 3 |  */
 4 | 
 5 | export * from './lib/ng-auto-complete.component';
 6 | export * from './lib/completer/completer.component';
 7 | export * from './lib/ng-auto-complete.module';
 8 | export * from './lib/pipes/pipes.module';
 9 | export * from './lib/pipes/highlight';
10 | export * from './lib/pipes/key-value';
11 | export * from './lib/classes/AutocompleteItem';
12 | export * from './lib/classes/AutocompleteGroup';
13 | export * from './lib/classes/typing';
14 | export * from './lib/utils/utils';
15 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/lib/pipes/pipes.module.ts:
--------------------------------------------------------------------------------
 1 | import { ModuleWithProviders, NgModule } from '@angular/core';
 2 | import { HighlightPipe } from './highlight';
 3 | import { KeyValuePipe } from './key-value';
 4 | 
 5 | @NgModule({
 6 |     imports     : [],
 7 |     declarations: [ HighlightPipe, KeyValuePipe ],
 8 |     exports     : [ HighlightPipe, KeyValuePipe ],
 9 | })
10 | export class PipeModule {
11 | 
12 |     static forRoot(): ModuleWithProviders<PipeModule> {
13 |         return {
14 |             ngModule : PipeModule,
15 |             providers: [],
16 |         };
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 | 
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 | 
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 | 
36 | # e2e
37 | /e2e/*.js
38 | /e2e/*.map
39 | 
40 | # System Files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "importHelpers": true,
 6 |     "outDir": "./dist/out-tsc",
 7 |     "sourceMap": true,
 8 |     "declaration": false,
 9 |     "module": "es2015",
10 |     "moduleResolution": "node",
11 |     "emitDecoratorMetadata": true,
12 |     "experimentalDecorators": true,
13 |     "target": "es5",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2017",
19 |       "dom"
20 |     ],
21 |     "paths": {
22 |       "ng-auto-complete": [
23 |         "dist/ng-auto-complete"
24 |       ],
25 |       "ng-auto-complete/*": [
26 |         "dist/ng-auto-complete/*"
27 |       ]
28 |     }
29 |   }
30 | }


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {RouterModule, Routes} from '@angular/router';
 3 | import {Route1Component} from './routes/route1/route1.component';
 4 | import {Route2Component} from './routes/route2/route2.component';
 5 | 
 6 | const routes: Routes = [
 7 |     {
 8 |         path: '',
 9 |         children: [
10 |             {
11 |                 path: '',
12 |                 component: Route1Component
13 |             },
14 |             {
15 |                 path: 'route2',
16 |                 component: Route2Component
17 |             }
18 |         ]
19 |     }
20 | ];
21 | 
22 | @NgModule({
23 |     imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
24 |     exports: [RouterModule]
25 | })
26 | export class AppRoutingModule {
27 | }
28 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'core-js/es7/reflect';
 4 | import 'zone.js/dist/zone';
 5 | import 'zone.js/dist/zone-testing';
 6 | import { getTestBed } from '@angular/core/testing';
 7 | import {
 8 |   BrowserDynamicTestingModule,
 9 |   platformBrowserDynamicTesting
10 | } from '@angular/platform-browser-dynamic/testing';
11 | 
12 | declare const require: any;
13 | 
14 | // First, initialize the Angular testing environment.
15 | getTestBed().initTestEnvironment(
16 |   BrowserDynamicTestingModule,
17 |   platformBrowserDynamicTesting()
18 | );
19 | // Then we find all the tests.
20 | const context = require.context('./', true, /\.spec\.ts$/);
21 | // And load the modules.
22 | context.keys().map(context);
23 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/lib/ng-auto-complete.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {NgAutoCompleteComponent} from './ng-auto-complete.component';
 3 | import {CommonModule} from '@angular/common';
 4 | import {FormsModule} from '@angular/forms';
 5 | import {CompleterComponent} from './completer/completer.component';
 6 | import {NgDropdownDirective} from './dropdown/ng-dropdown.directive';
 7 | import {PipeModule} from './pipes/pipes.module';
 8 | 
 9 | @NgModule({
10 |     imports: [
11 |         CommonModule,
12 |         FormsModule,
13 |         PipeModule.forRoot()
14 |     ],
15 |     exports: [
16 |         NgAutoCompleteComponent,
17 |         CompleterComponent,
18 |     ],
19 |     declarations: [
20 |         NgAutoCompleteComponent,
21 |         CompleterComponent,
22 |         NgDropdownDirective
23 |     ]
24 | })
25 | export class NgAutoCompleteModule {
26 | }
27 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/tsconfig.lib.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/lib",
 5 |     "target": "es2015",
 6 |     "module": "es2015",
 7 |     "moduleResolution": "node",
 8 |     "declaration": true,
 9 |     "sourceMap": true,
10 |     "inlineSources": true,
11 |     "emitDecoratorMetadata": true,
12 |     "experimentalDecorators": true,
13 |     "importHelpers": true,
14 |     "types": [],
15 |     "lib": [
16 |       "dom",
17 |       "es2015"
18 |     ]
19 |   },
20 |   "angularCompilerOptions": {
21 |     "annotateForClosureCompiler": true,
22 |     "skipTemplateCodegen": true,
23 |     "strictMetadataEmit": true,
24 |     "fullTemplateTypeCheck": true,
25 |     "strictInjectionParameters": true,
26 |     "enableResourceInlining": true,
27 |     "enableIvy": false
28 |   },
29 |   "exclude": [
30 |     "src/test.ts",
31 |     "**/*.spec.ts"
32 |   ]
33 | }
34 | 


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };


--------------------------------------------------------------------------------
/projects/ng-auto-complete/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../../coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 sengirab
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {BrowserModule} from '@angular/platform-browser';
 2 | import {NgModule} from '@angular/core';
 3 | import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 4 | 
 5 | import {AppComponent} from './app.component';
 6 | import {NgAutoCompleteModule} from 'ng-auto-complete';
 7 | import {NgViewComponent} from './ng-view/ng-view.component';
 8 | import {NgHolderComponent} from './ng-holder/ng-holder.component';
 9 | import {AppRoutingModule} from './app-routing.module';
10 | import {Route1Component} from './routes/route1/route1.component';
11 | import {Route2Component} from './routes/route2/route2.component';
12 | import { HttpClient, HttpClientModule } from '@angular/common/http';
13 | 
14 | @NgModule({
15 |     declarations: [
16 |         AppComponent,
17 |         NgViewComponent,
18 |         NgHolderComponent,
19 |         Route1Component,
20 |         Route2Component
21 |     ],
22 |     imports: [
23 |         BrowserModule,
24 |         FormsModule,
25 |         HttpClientModule,
26 |         NgAutoCompleteModule,
27 |         ReactiveFormsModule,
28 |         AppRoutingModule
29 |     ],
30 |     providers: [HttpClient],
31 |     bootstrap: [AppComponent]
32 | })
33 | export class AppModule {
34 | }
35 | 


--------------------------------------------------------------------------------
/src/app/ng-holder/ng-holder.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit, ViewChild} from '@angular/core';
 2 | import {CreateNewAutocompleteGroup, NgAutoCompleteComponent} from 'ng-auto-complete';
 3 | 
 4 | @Component({
 5 |     selector: 'app-ng-holder',
 6 |     templateUrl: './ng-holder.component.html'
 7 | })
 8 | export class NgHolderComponent implements OnInit {
 9 |     @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
10 | 
11 |     public group = [
12 |         CreateNewAutocompleteGroup(
13 |             'Search / choose in / from list',
14 |             'group',
15 |             [
16 |                 {title: 'Option 4', id: '1'},
17 |                 {title: 'Option 5', id: 2},
18 |                 {title: 'Option 6', id: '3'},
19 |                 {title: 'Option 7', id: 4},
20 |                 {title: 'Option 8', id: '5'},
21 |                 {title: 'Option 9', id: 6},
22 |             ],
23 |             {titleKey: 'title', childrenKey: null},
24 |             ''
25 |         )
26 |     ];
27 | 
28 |     constructor() {
29 |     }
30 | 
31 |     /**
32 |      *
33 |      */
34 |     ngOnInit() {
35 |         this.completer.SelectItem('group', 5);
36 |     }
37 | 
38 |     /**
39 |      *
40 |      * @constructor
41 |      */
42 |     Selected() {
43 |     }
44 | }
45 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/lib/pipes/highlight.ts:
--------------------------------------------------------------------------------
 1 | import { Pipe, PipeTransform } from '@angular/core';
 2 | 
 3 | @Pipe({
 4 |     name: 'highlight'
 5 | })
 6 | export class HighlightPipe implements PipeTransform {
 7 | 
 8 |     transform(text: string, search: string): string {
 9 |         if (search.length > 0) {
10 |             return this.Strip(text).replace(new RegExp(`${this.EscapeMatch(search)}`, 'gi'), (match: string) => {
11 |                 return `<span class="dropdown-item-highlight">${match}</span>`;
12 |             });
13 |         } else {
14 |             return text;
15 |         }
16 |     }
17 | 
18 |     EscapeMatch(match: string) {
19 |         const entityMap = {
20 |             '&': '\\&',
21 |             '<': '\\<',
22 |             '>': '\\>',
23 |             '/': '\\/',
24 |             '=': '\\=',
25 |             '+': '\\+',
26 |             '-': '\\-',
27 |             '#': '\\#',
28 |             '!': '\\!',
29 |             '@': '\\@',
30 |             '$': '\\$',
31 |             '%': '\\%',
32 |             '^': '\\^',
33 |             '*': '\\*',
34 |             '(': '\\(',
35 |             ')': '\\)',
36 |         };
37 | 
38 |         return String(match).replace(/[&<>"'`=+\/]/g, function (s) {
39 |             return entityMap[s];
40 |         });
41 |     }
42 | 
43 |     Strip(str_in: String = '') {
44 |         return str_in.replace(/<[^>]*>/g, '');
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/app/routes/route1/route1.component.html:
--------------------------------------------------------------------------------
 1 | <!--<div>-->
 2 | <!--<ng-autocomplete (selected)="Selected($event)" [classes]="['fifty']"-->
 3 | <!--[group]="group1" [key]="'group1'"></ng-autocomplete>-->
 4 | <!--<div style="clear: both;"></div>-->
 5 | <!--</div>-->
 6 | 
 7 | <!--<div>-->
 8 | <!--<ng-autocomplete (selected)="Selected($event)" [classes]="['fifty']"-->
 9 | <!--[group]="group2" [key]="'group2'"></ng-autocomplete>-->
10 | <!--<div style="clear: both;"></div>-->
11 | <!--</div>-->
12 | 
13 | <!--<div>-->
14 | <!--<button (click)="SetValues()">SET</button>-->
15 | <!--<ng-autocomplete (selected)="Selected($event)" [classes]="['']"-->
16 | <!--[group]="group3" [key]="'group3'"></ng-autocomplete>-->
17 | <!--<div style="clear: both;"></div>-->
18 | <!--</div>-->
19 | 
20 | <!--<div>-->
21 | <!--<ng-autocomplete (selected)="Selected($event)" [classes]="['']"-->
22 | <!--[group]="group4" [key]="'group4'"></ng-autocomplete>-->
23 | <!--<div style="clear: both;"></div>-->
24 | <!--</div>-->
25 | 
26 | <div>
27 |     <ng-auto-complete (selected)="Selected($event)"
28 |                       (no-result)="NoResult($event)"
29 |                       [classes]="['']"
30 |                       [group]="groupStress1" [key]="'items1'"></ng-auto-complete>
31 |     <div style="clear: both;"></div>
32 | </div>
33 | 
34 | <ng-template #dropdownValue let-value let-hightlight="highlight">
35 |     <div [innerHTML]="hightlight"></div>
36 | </ng-template>
37 | 
38 | <ng-template #placeholderValue let-value>
39 |     {{value.title}}
40 | </ng-template>
41 | 
42 | <ng-template #noResults let-value>
43 |     Hey, you searched for: {{value}}. But there are no results!
44 | </ng-template>
45 | 
46 | <!--<div>-->
47 | <!--<app-ng-view>-->
48 | <!--<app-ng-holder></app-ng-holder>-->
49 | <!--</app-ng-view>-->
50 | <!--</div>-->
51 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/lib/classes/AutocompleteItem.ts:
--------------------------------------------------------------------------------
 1 | export interface StrippedAutocompleteGroup {
 2 |     group: { key: string };
 3 |     item: AutocompleteItem;
 4 | }
 5 | 
 6 | export class AutocompleteItem {
 7 |     title: string;
 8 |     id?: string | number;
 9 |     children: any[];
10 |     original: any;
11 |     className: string;
12 | 
13 |     constructor(title: string, id: string | number, className: string, original: any) {
14 |         this.title = title;
15 |         this.id = id;
16 |         this.className = className;
17 |         this.original = original;
18 |     }
19 | }
20 | 
21 | /**
22 |  *
23 |  */
24 | export function SearchableAutoCompleteItems(items: { id?: string | number; [value: string]: any }[], titleKey: string, childrenKey: string | null = null): { [value: string]: AutocompleteItem } {
25 |     return items.reduce(function (r, i) {
26 |         const t = SearchableAutoCompleteString(i[titleKey], i.id);
27 | 
28 |         if (typeof r[t] === 'undefined') {
29 |             r[t] = TransformToAutocompleteItem(i, titleKey, childrenKey);
30 |         }
31 | 
32 |         return r;
33 |     }, {});
34 | }
35 | 
36 | /**
37 |  *
38 |  */
39 | export function SearchableAutoCompleteString(key: string, id: string | number) {
40 |     return `${key.replace(/ /g, '_')}_id_${String(id)}`;
41 | }
42 | 
43 | /**
44 |  *
45 |  */
46 | export function ComparableAutoCompleteString(str: string) {
47 |     return str.replace(/_/g, ' ');
48 | }
49 | 
50 | /**
51 |  * object must have an ID
52 |  */
53 | 
54 | export function TransformToAutocompleteItem(object: { id?: string | number; [value: string]: any, className?: string }, titleKey: string, childrenKey: string | null = null) {
55 |     const item = new AutocompleteItem(object[titleKey], object.id, object.className, object);
56 | 
57 |     /**
58 |      * if there are children, add these.
59 |      */
60 |     if (childrenKey !== null) {
61 |         item.children = object[childrenKey];
62 |     }
63 | 
64 |     return item;
65 | }
66 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-auto-complete-app",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e",
11 |     "build_lib": "ng build ng-auto-complete",
12 |     "copy-license": "cp ./LICENSE ./dist/ng-auto-complete",
13 |     "copy-readme": "cp ./README.md ./dist/ng-auto-complete",
14 |     "copy-files": "npm run copy-license && npm run copy-readme",
15 |     "npm_pack": "cd dist/ng-auto-complete && npm pack",
16 |     "package": "npm run build_lib && npm run copy-files && npm run npm_pack"
17 |   },
18 |   "private": true,
19 |   "dependencies": {
20 |     "@angular/animations": "^11.2.13",
21 |     "@angular/common": "^11.2.13",
22 |     "@angular/compiler": "^11.2.13",
23 |     "@angular/core": "^11.2.13",
24 |     "@angular/forms": "^11.2.13",
25 |     "@angular/platform-browser": "^11.2.13",
26 |     "@angular/platform-browser-dynamic": "^11.2.13",
27 |     "@angular/platform-server": "^11.2.13",
28 |     "@angular/router": "^11.2.13",
29 |     "core-js": "^3.12.0",
30 |     "rxjs": "^6.6.7",
31 |     "rxjs-compat": "^6.3.3",
32 |     "zone.js": "^0.11.4"
33 |   },
34 |   "devDependencies": {
35 |     "@angular-devkit/build-angular": "^0.1102.12",
36 |     "@angular-devkit/build-ng-packagr": "^0.1002.0",
37 |     "@angular/cli": "^11.2.12",
38 |     "@angular/compiler-cli": "^11.2.13",
39 |     "@angular/language-service": "^11.2.13",
40 |     "@types/jasmine": "^3.3.0",
41 |     "@types/jasminewd2": "~2.0.3",
42 |     "@types/node": "^10.12.10",
43 |     "codelyzer": "^6.0.2",
44 |     "jasmine-core": "^3.3.0",
45 |     "jasmine-spec-reporter": "^4.2.1",
46 |     "karma": "^3.1.1",
47 |     "karma-chrome-launcher": "^2.2.0",
48 |     "karma-cli": "^1.0.1",
49 |     "karma-coverage-istanbul-reporter": "~2.0.1",
50 |     "karma-jasmine": "^2.0.1",
51 |     "karma-jasmine-html-reporter": "^1.4.0",
52 |     "ng-packagr": "^11.2.4",
53 |     "protractor": "^5.4.1",
54 |     "rxjs-tslint": "^0.1.6",
55 |     "ts-node": "~7.0.0",
56 |     "tsickle": "^0.39.1",
57 |     "tslib": "^2.2.0",
58 |     "tslint": "^5.11.0",
59 |     "typescript": "4.1.5"
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
 6 | 
 7 | ## Our Standards
 8 | 
 9 | Examples of behavior that contributes to creating a positive environment include:
10 | 
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 | 
17 | Examples of unacceptable behavior by participants include:
18 | 
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 | 
25 | ## Our Responsibilities
26 | 
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 | 
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 | 
31 | ## Scope
32 | 
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 | 
35 | ## Enforcement
36 | 
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at benjamin@codebridge.nl. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 | 
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 | 
41 | ## Attribution
42 | 
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 | 
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/lib/utils/utils.ts:
--------------------------------------------------------------------------------
 1 | import { AutocompleteItem } from '../classes/AutocompleteItem';
 2 | 
 3 | const UsedCodeList = {
 4 |     ArrowDown:      40,
 5 |     ArrowUp:        38,
 6 |     Enter:          13,
 7 |     Escape:         27,
 8 |     Tab:            9,
 9 |     MetaLeft:       91,
10 |     AltLeft:        18,
11 |     ControlLeft:    17,
12 |     ShiftLeft:      16,
13 |     ArrowLeft:      37,
14 |     ArrowRight:     39,
15 |     MetaRight:      93,
16 |     AltRight:       18
17 | };
18 | 
19 | export interface GroupNoResult {
20 |     group: {key: string};
21 |     query: string;
22 | }
23 | 
24 | /**
25 |  *
26 |  */
27 | export function ReturnStringArrayByID(array: { id: string | number, [value: string]: any }[]) {
28 |     return array.reduce((result, item) => {
29 |         result.push(item.id.toString());
30 | 
31 |         return result
32 |     }, [])
33 | }
34 | 
35 | /**
36 |  *
37 |  */
38 | export function FilterRemovals(removals: string[], list: AutocompleteItem[]) {
39 |     return list.filter((item) => {
40 |         return removals.indexOf(item.id.toString()) <= -1;
41 |     });
42 | }
43 | 
44 | /**
45 |  *
46 |  */
47 | export function IsMobileOrTablet() {
48 |     let isMobile = false;
49 |     if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
50 |         || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) {
51 |         isMobile = true;
52 |     }
53 | 
54 |     return isMobile
55 | }
56 | 
57 | export function NotUsedKey(code: string) {
58 |     return typeof UsedCodeList[code] === 'undefined';
59 | }
60 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 | 
43 | 
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | 
47 | 
48 | 
49 | /**
50 |  * Web Animations `@angular/platform-browser/animations`
51 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
52 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
53 |  **/
54 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
55 | 
56 | /**
57 |  * By default, zone.js will patch all possible macroTask and DomEvents
58 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
59 |  */
60 | 
61 |  // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
62 |  // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
63 |  // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
64 | 
65 |  /*
66 |  * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
67 |  * with the following flag, it will bypass `zone.js` patch for IE/Edge
68 |  */
69 | // (window as any).__Zone_enable_cross_context_check = true;
70 | 
71 | /***************************************************************************************************
72 |  * Zone JS is required by default for Angular itself.
73 |  */
74 | import 'zone.js/dist/zone';  // Included with Angular CLI.
75 | 
76 | 
77 | 
78 | /***************************************************************************************************
79 |  * APPLICATION IMPORTS
80 |  */
81 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx"
 22 |     ],
 23 |     "import-spacing": true,
 24 |     "indent": [
 25 |       true,
 26 |       "spaces"
 27 |     ],
 28 |     "interface-over-type-literal": true,
 29 |     "label-position": true,
 30 |     "max-line-length": [
 31 |       true,
 32 |       140
 33 |     ],
 34 |     "member-access": false,
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-arg": true,
 47 |     "no-bitwise": true,
 48 |     "no-console": [
 49 |       true,
 50 |       "debug",
 51 |       "info",
 52 |       "time",
 53 |       "timeEnd",
 54 |       "trace"
 55 |     ],
 56 |     "no-construct": true,
 57 |     "no-debugger": true,
 58 |     "no-duplicate-super": true,
 59 |     "no-empty": false,
 60 |     "no-empty-interface": true,
 61 |     "no-eval": true,
 62 |     "no-inferrable-types": [
 63 |       true,
 64 |       "ignore-params"
 65 |     ],
 66 |     "no-misused-new": true,
 67 |     "no-non-null-assertion": true,
 68 |     "no-redundant-jsdoc": false,
 69 |     "no-shadowed-variable": true,
 70 |     "no-string-literal": false,
 71 |     "no-string-throw": true,
 72 |     "no-switch-case-fall-through": true,
 73 |     "no-trailing-whitespace": true,
 74 |     "no-unnecessary-initializer": true,
 75 |     "no-unused-expression": true,
 76 |     "no-use-before-declare": true,
 77 |     "no-var-keyword": true,
 78 |     "object-literal-sort-keys": false,
 79 |     "one-line": [
 80 |       true,
 81 |       "check-open-brace",
 82 |       "check-catch",
 83 |       "check-else",
 84 |       "check-whitespace"
 85 |     ],
 86 |     "prefer-const": true,
 87 |     "quotemark": [
 88 |       true,
 89 |       "single"
 90 |     ],
 91 |     "radix": true,
 92 |     "semicolon": [
 93 |       true,
 94 |       "always"
 95 |     ],
 96 |     "triple-equals": [
 97 |       true,
 98 |       "allow-null-check"
 99 |     ],
100 |     "typedef-whitespace": [
101 |       true,
102 |       {
103 |         "call-signature": "nospace",
104 |         "index-signature": "nospace",
105 |         "parameter": "nospace",
106 |         "property-declaration": "nospace",
107 |         "variable-declaration": "nospace"
108 |       }
109 |     ],
110 |     "unified-signatures": true,
111 |     "variable-name": false,
112 |     "whitespace": [
113 |       true,
114 |       "check-branch",
115 |       "check-decl",
116 |       "check-operator",
117 |       "check-separator",
118 |       "check-type"
119 |     ],
120 |     "no-output-on-prefix": true,
121 |     "use-input-property-decorator": true,
122 |     "use-output-property-decorator": true,
123 |     "use-host-property-decorator": true,
124 |     "no-input-rename": true,
125 |     "no-output-rename": true,
126 |     "use-life-cycle-interface": true,
127 |     "use-pipe-transform-interface": true,
128 |     "component-class-suffix": true,
129 |     "directive-class-suffix": true
130 |   }
131 | }
132 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/lib/classes/AutocompleteGroup.ts:
--------------------------------------------------------------------------------
  1 | import { AutocompleteItem, SearchableAutoCompleteItems } from './AutocompleteItem';
  2 | import { TemplateRef } from '@angular/core';
  3 | 
  4 | export class AutocompleteGroup {
  5 |     initialValue: { [value: string]: AutocompleteItem };
  6 | 
  7 |     key: string;
  8 |     keys: { titleKey: string, childrenKey: string | null };
  9 |     value: { [value: string]: AutocompleteItem };
 10 |     remove: string[];
 11 |     placeholder: string;
 12 |     parent: string;
 13 |     completion: boolean;
 14 |     searchLength: number;
 15 |     async: (str: string) => Promise<{ id: string | number; [value: string]: any }[]> = null;
 16 | 
 17 |     // Templates
 18 |     noResults: TemplateRef<any>;
 19 |     dropdownValue: TemplateRef<any>;
 20 |     placeholderValue: TemplateRef<any>;
 21 | 
 22 |     private removals: string[] = [];
 23 |     private _copy: { [value: string]: AutocompleteItem };
 24 | 
 25 |     constructor() {
 26 |     }
 27 | 
 28 |     /**
 29 |      *
 30 |      */
 31 |     SetNewValue(value: { id: string | number; [value: string]: any }[], titleKey: string) {
 32 |         const values = SearchableAutoCompleteItems(value, titleKey);
 33 |         this.SetCopy(values);
 34 | 
 35 |         /**
 36 |          *
 37 |          */
 38 |         this.value = this.FilterRemovals(this.removals, values);
 39 |     }
 40 | 
 41 |     /**
 42 |      *
 43 |      */
 44 |     Removables(ids: string[]) {
 45 |         this.removals = ids;
 46 | 
 47 |         /**
 48 |          *
 49 |          */
 50 |         this.value = this.FilterRemovals(this.removals, this._copy);
 51 |     }
 52 | 
 53 |     /**
 54 |      *
 55 |      */
 56 |     InitialValue() {
 57 |         this.value = this.FilterRemovals(this.removals, this.initialValue);
 58 | 
 59 |         /**
 60 |          *
 61 |          */
 62 |         this.SetCopy(this.initialValue);
 63 |     }
 64 | 
 65 |     /**
 66 |      *
 67 |      */
 68 |     SetCopy(values: { [value: string]: AutocompleteItem }) {
 69 |         this._copy = Object.assign([], values);
 70 |     }
 71 | 
 72 |     /**
 73 |      *
 74 |      */
 75 |     SetValues(value: { id?: string | number; [value: string]: any }[]) {
 76 |         this.value = SearchableAutoCompleteItems(value, this.keys.titleKey, this.keys.childrenKey);
 77 | 
 78 |         /**
 79 |          *
 80 |          */
 81 |         this.initialValue = Object.assign({}, this.value);
 82 |         this.SetCopy(Object.assign({}, this.value));
 83 |     }
 84 | 
 85 |     /**
 86 |      *
 87 |      */
 88 |     FilterRemovals(removals: any[], value: { [value: string]: AutocompleteItem }): { [value: string]: AutocompleteItem } {
 89 |         let filtered = Object.assign({}, value);
 90 | 
 91 |         let key, keys = [];
 92 |         for (key in filtered) {
 93 |             if (filtered.hasOwnProperty(key)) {
 94 |                 removals.forEach((id) => {
 95 |                     // Comparable string and ID
 96 |                     let f = `_id_${String(id)}`;
 97 |                     let c = key.substring(key.indexOf(f), key.length);
 98 | 
 99 |                     if (f === c) {
100 |                         keys.push(key);
101 |                     }
102 |                 })
103 |             }
104 |         }
105 | 
106 |         keys.forEach((k) => {
107 |             delete filtered[k];
108 |         });
109 | 
110 |         return filtered;
111 |     }
112 | }
113 | 
114 | /**
115 |  *
116 |  */
117 | export function CreateNewAutocompleteGroup<T>(placeholder: string, key: string, value: { id?: string | number; [value: string]: any }[], keys: { titleKey: string, childrenKey: string | null }, parent: string = '', completion: boolean = true, searchLength: number = 2): AutocompleteGroup {
118 |     const group = new AutocompleteGroup();
119 | 
120 |     group.key = key;
121 |     group.keys = keys;
122 |     group.placeholder = placeholder;
123 |     group.parent = parent;
124 |     group.completion = completion;
125 |     group.searchLength = searchLength;
126 | 
127 |     /**
128 |      * Initial value needed, if we empty search box or want to clear it, it needs to be reset.
129 |      * Setting copy, used if user wants to remove values (by id.). This _ list gets filtered.
130 |      */
131 |     group.SetValues(value);
132 | 
133 |     return group;
134 | }
135 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "cli": {
  4 |     "analytics": "6a89b4cc-88fe-4bb3-90b4-a863ca1e38cf"
  5 |   },
  6 |   "version": 1,
  7 |   "newProjectRoot": "projects",
  8 |   "projects": {
  9 |     "ng-auto-complete-app": {
 10 |       "root": "",
 11 |       "sourceRoot": "src",
 12 |       "projectType": "application",
 13 |       "prefix": "app",
 14 |       "schematics": {},
 15 |       "targets": {
 16 |         "build": {
 17 |           "builder": "@angular-devkit/build-angular:browser",
 18 |           "options": {
 19 |             "outputPath": "dist/ng-auto-complete-app",
 20 |             "index": "src/index.html",
 21 |             "main": "src/main.ts",
 22 |             "polyfills": "src/polyfills.ts",
 23 |             "tsConfig": "src/tsconfig.app.json",
 24 |             "assets": [
 25 |               "src/favicon.ico",
 26 |               "src/assets"
 27 |             ],
 28 |             "styles": [
 29 |               "src/styles.css"
 30 |             ],
 31 |             "scripts": []
 32 |           },
 33 |           "configurations": {
 34 |             "production": {
 35 |               "fileReplacements": [
 36 |                 {
 37 |                   "replace": "src/environments/environment.ts",
 38 |                   "with": "src/environments/environment.prod.ts"
 39 |                 }
 40 |               ],
 41 |               "optimization": true,
 42 |               "outputHashing": "all",
 43 |               "sourceMap": false,
 44 |               "extractCss": true,
 45 |               "namedChunks": false,
 46 |               "aot": true,
 47 |               "extractLicenses": true,
 48 |               "vendorChunk": false,
 49 |               "buildOptimizer": true
 50 |             }
 51 |           }
 52 |         },
 53 |         "serve": {
 54 |           "builder": "@angular-devkit/build-angular:dev-server",
 55 |           "options": {
 56 |             "browserTarget": "ng-auto-complete-app:build"
 57 |           },
 58 |           "configurations": {
 59 |             "production": {
 60 |               "browserTarget": "ng-auto-complete-app:build:production"
 61 |             }
 62 |           }
 63 |         },
 64 |         "extract-i18n": {
 65 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 66 |           "options": {
 67 |             "browserTarget": "ng-auto-complete-app:build"
 68 |           }
 69 |         },
 70 |         "test": {
 71 |           "builder": "@angular-devkit/build-angular:karma",
 72 |           "options": {
 73 |             "main": "src/test.ts",
 74 |             "polyfills": "src/polyfills.ts",
 75 |             "tsConfig": "src/tsconfig.spec.json",
 76 |             "karmaConfig": "src/karma.conf.js",
 77 |             "styles": [
 78 |               "src/styles.css"
 79 |             ],
 80 |             "scripts": [],
 81 |             "assets": [
 82 |               "src/favicon.ico",
 83 |               "src/assets"
 84 |             ]
 85 |           }
 86 |         },
 87 |         "lint": {
 88 |           "builder": "@angular-devkit/build-angular:tslint",
 89 |           "options": {
 90 |             "tsConfig": [
 91 |               "src/tsconfig.app.json",
 92 |               "src/tsconfig.spec.json"
 93 |             ],
 94 |             "exclude": [
 95 |               "**/node_modules/**"
 96 |             ]
 97 |           }
 98 |         }
 99 |       }
100 |     },
101 |     "ng-auto-complete-app-e2e": {
102 |       "root": "e2e/",
103 |       "projectType": "application",
104 |       "targets": {
105 |         "e2e": {
106 |           "builder": "@angular-devkit/build-angular:protractor",
107 |           "options": {
108 |             "protractorConfig": "e2e/protractor.conf.js",
109 |             "devServerTarget": "ng-auto-complete-app:serve"
110 |           },
111 |           "configurations": {
112 |             "production": {
113 |               "devServerTarget": "ng-auto-complete-app:serve:production"
114 |             }
115 |           }
116 |         },
117 |         "lint": {
118 |           "builder": "@angular-devkit/build-angular:tslint",
119 |           "options": {
120 |             "tsConfig": "e2e/tsconfig.e2e.json",
121 |             "exclude": [
122 |               "**/node_modules/**"
123 |             ]
124 |           }
125 |         }
126 |       }
127 |     },
128 |     "ng-auto-complete": {
129 |       "root": "projects/ng-auto-complete",
130 |       "sourceRoot": "projects/ng-auto-complete/src",
131 |       "projectType": "library",
132 |       "prefix": "ng",
133 |       "targets": {
134 |         "build": {
135 |           "builder": "@angular-devkit/build-ng-packagr:build",
136 |           "options": {
137 |             "tsConfig": "projects/ng-auto-complete/tsconfig.lib.json",
138 |             "project": "projects/ng-auto-complete/ng-package.json"
139 |           }
140 |         },
141 |         "test": {
142 |           "builder": "@angular-devkit/build-angular:karma",
143 |           "options": {
144 |             "main": "projects/ng-auto-complete/src/test.ts",
145 |             "tsConfig": "projects/ng-auto-complete/tsconfig.spec.json",
146 |             "karmaConfig": "projects/ng-auto-complete/karma.conf.js"
147 |           }
148 |         },
149 |         "lint": {
150 |           "builder": "@angular-devkit/build-angular:tslint",
151 |           "options": {
152 |             "tsConfig": [
153 |               "projects/ng-auto-complete/tsconfig.lib.json",
154 |               "projects/ng-auto-complete/tsconfig.spec.json"
155 |             ],
156 |             "exclude": [
157 |               "**/node_modules/**"
158 |             ]
159 |           }
160 |         }
161 |       }
162 |     }
163 |   },
164 |   "defaultProject": "ng-auto-complete-app"
165 | }


--------------------------------------------------------------------------------
/src/app/routes/route1/route1.component.ts:
--------------------------------------------------------------------------------
  1 | import {AfterViewInit, Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
  2 | import {CreateNewAutocompleteGroup, GroupNoResult, NgAutoCompleteComponent, SelectedAutocompleteItem} from 'ng-auto-complete';
  3 | 
  4 | 
  5 | @Component({
  6 |     selector: 'app-route1',
  7 |     templateUrl: './route1.component.html',
  8 | })
  9 | export class Route1Component implements OnInit, AfterViewInit {
 10 |     // @ViewChildren(NgAutoCompleteComponent) public completers: QueryList<NgAutoCompleteComponent>;
 11 |     @ViewChild(NgAutoCompleteComponent, { static: true }) public completer: NgAutoCompleteComponent;
 12 | 
 13 |     @ViewChild('placeholderValue') placeholderValue: TemplateRef<any>;
 14 |     @ViewChild('dropdownValue') dropdownValue: TemplateRef<any>;
 15 |     @ViewChild('noResults') noResults: TemplateRef<any>;
 16 | 
 17 |     _removables = [];
 18 | 
 19 |     // public group1 = [
 20 |     //     CreateNewAutocompleteGroup(
 21 |     //         'Search / choose in / from list',
 22 |     //         'parent',
 23 |     //         [
 24 |     //             {
 25 |     //                 title: 'Option 1', id: '1', children: [
 26 |     //                 {title: 'Option 4', id: '1'},
 27 |     //                 {title: 'Option 5', id: '2'},
 28 |     //                 {title: 'Option 6', id: '3'},
 29 |     //             ]
 30 |     //             },
 31 |     //             {
 32 |     //                 title: 'Option 2', id: '2', children: [
 33 |     //                 {title: 'Option 7', id: '1'},
 34 |     //                 {title: 'Option 8', id: '2'},
 35 |     //                 {title: 'Option 9', id: '3'},
 36 |     //             ]
 37 |     //             },
 38 |     //             {
 39 |     //                 title: 'Option 3', id: '3', children: [
 40 |     //                 {title: 'Option 10', id: '1'},
 41 |     //                 {title: 'Option 11', id: '2'},
 42 |     //                 {title: 'Option 12', id: '3'},
 43 |     //             ]
 44 |     //             },
 45 |     //         ],
 46 |     //         {titleKey: 'title', childrenKey: 'children'}
 47 |     //     ),
 48 |     //     CreateNewAutocompleteGroup(
 49 |     //         'Search / choose in / from list',
 50 |     //         'child',
 51 |     //         [
 52 |     //             {title: 'Option 4', id: '1'},
 53 |     //             {title: 'Option 5', id: '2'},
 54 |     //             {title: 'Option 6', id: '3'},
 55 |     //             {title: 'Option 7', id: '4'},
 56 |     //             {title: 'Option 8', id: '5'},
 57 |     //             {title: 'Option 9', id: '6'},
 58 |     //         ],
 59 |     //         {titleKey: 'title', childrenKey: null},
 60 |     //         'parent',
 61 |     //     ),
 62 |     // ];
 63 | 
 64 |     // public group2 = [
 65 |     //     CreateNewAutocompleteGroup(
 66 |     //         'Search / choose in / from list',
 67 |     //         'normal',
 68 |     //         [
 69 |     //             {title: 'Option 4', id: '1'},
 70 |     //             {title: 'Option 5', id: '2'},
 71 |     //             {title: 'Option 6', id: '3'},
 72 |     //             {title: 'Option 7', id: '4'},
 73 |     //             {title: 'Option 8', id: '5'},
 74 |     //             {title: 'Option 9', id: '6'},
 75 |     //         ],
 76 |     //         {titleKey: 'title', childrenKey: null},
 77 |     //         ''
 78 |     //     ),
 79 |     //     CreateNewAutocompleteGroup(
 80 |     //         'Search / choose in / from list',
 81 |     //         'disabled.',
 82 |     //         [
 83 |     //             {title: 'Option 4', id: '1'},
 84 |     //             {title: 'Option 5', id: '2'},
 85 |     //             {title: 'Option 6', id: '3'},
 86 |     //             {title: 'Option 7', id: '4'},
 87 |     //             {title: 'Option 8', id: '5'},
 88 |     //             {title: 'Option 9', id: '6'},
 89 |     //         ],
 90 |     //         {titleKey: 'title', childrenKey: null},
 91 |     //         '',
 92 |     //         false
 93 |     //     ),
 94 |     // ];
 95 | 
 96 |     // public group3 = [
 97 |     //     CreateNewAutocompleteGroup(
 98 |     //         'Search / choose in / from list',
 99 |     //         'late',
100 |     //         [],
101 |     //         {titleKey: 'title', childrenKey: null},
102 |     //         ''
103 |     //     )
104 |     // ];
105 | 
106 |     public groupStress1 = [
107 |         CreateNewAutocompleteGroup(
108 |             'Search / choose in / from list',
109 |             'items1',
110 |             [],
111 |             {titleKey: 'title', childrenKey: null},
112 |             '',
113 |             true,
114 |         )
115 |     ];
116 | 
117 |     // public group4 = [
118 |     //     CreateNewAutocompleteGroup(
119 |     //         'Search / choose in / from list',
120 |     //         'remove',
121 |     //         [
122 |     //             {title: 'Option 4', id: '1'},
123 |     //             {title: 'Option 5', id: 2},
124 |     //             {title: 'Option 6', id: '3'},
125 |     //             {title: 'Option 7', id: 4},
126 |     //             {title: 'Option 8', id: '5'},
127 |     //             {title: 'Option 9', id: 6},
128 |     //         ],
129 |     //         {titleKey: 'title', childrenKey: null},
130 |     //         ''
131 |     //     )
132 |     // ];
133 | 
134 |     /**
135 |      *
136 |      * @returns {Array}
137 |      * @constructor
138 |      */
139 |     FillArray() {
140 |         let arr = [];
141 |         for (let i = 0; i < 50; i++) {
142 |             arr.push({title: `Option ${i} Lorem ipsum dolor sit amet, consectetur adipiscing elit.`, id: i});
143 |         }
144 | 
145 |         return arr;
146 |     }
147 | 
148 |     /**
149 |      *
150 |      * @param {GroupNoResult} group
151 |      * @constructor
152 |      */
153 |     NoResult(group: GroupNoResult) {
154 |         console.log('NO RESULT', group);
155 |     }
156 | 
157 |     constructor() {
158 | 
159 |     }
160 | 
161 |     ngOnInit() {
162 |         const async = (str: string) => {
163 |             return <Promise<any[]>>new Promise((resolve, reject) => {
164 |                 setTimeout(() => {
165 |                     resolve([
166 |                         {
167 |                             id: 0,
168 |                             title: `Test case 1 ${str}`
169 |                         },
170 |                         {
171 |                             id: 1,
172 |                             title: `Test case 2 ${str}`
173 |                         },
174 |                         {
175 |                             id: 2,
176 |                             title: `Test case 3 ${str}`
177 |                         }
178 |                     ]);
179 |                 }, 2000);
180 |             });
181 |         };
182 | 
183 |         this.completer.SetAsync('items1', async);
184 | 
185 |         this.completer.SelectItem('items1', '5');
186 | 
187 |         this.completer.SetTemplate('items1', 'dropdownValue', this.dropdownValue);
188 |         this.completer.SetTemplate('items1', 'noResults', this.noResults);
189 |         this.completer.SetTemplate('items1', 'placeholderValue', this.placeholderValue);
190 |     }
191 | 
192 |     /**
193 |      *
194 |      */
195 |     ngAfterViewInit() {
196 |         console.log();
197 |     }
198 | 
199 |     /**
200 |      *
201 |      * @param item
202 |      * @constructor
203 |      */
204 |     Selected(item: SelectedAutocompleteItem) {
205 |         console.log('its actually saying its selected', item);
206 |     }
207 | 
208 |     /**
209 |      *
210 |      * @param item
211 |      * @constructor
212 |      */
213 |     RemoveSelected(item: SelectedAutocompleteItem) {
214 |         if (item.item !== null) {
215 |             this._removables.push(item.item);
216 |         }
217 | 
218 |         this.completer.RemovableValues('items1', this._removables);
219 |     }
220 | 
221 |     /**
222 |      *
223 |      * @constructor
224 |      */
225 |     SetValues() {
226 |         // const component = NgAutocompleteComponent.FindCompleter('group3', this.completers);
227 | 
228 |         this.completer.SetValues(
229 |             'late',
230 |             [
231 |                 {title: 'Option 4', id: '1'},
232 |                 {title: 'Option 5', id: '2'},
233 |                 {title: 'Option 6', id: '3'},
234 |                 {title: 'Option 7', id: '4'},
235 |                 {title: 'Option 8', id: '5'},
236 |                 {title: 'Option 9', id: '6'},
237 |             ]
238 |         );
239 |     }
240 | }
241 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/lib/ng-auto-complete.component.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |     AfterViewChecked,
  3 |     ChangeDetectorRef,
  4 |     Component,
  5 |     ElementRef,
  6 |     EventEmitter,
  7 |     Input,
  8 |     OnInit,
  9 |     Output,
 10 |     QueryList,
 11 |     SimpleChanges,
 12 |     TemplateRef,
 13 |     ViewChild,
 14 |     ViewChildren
 15 | } from '@angular/core';
 16 | import {AutocompleteGroup} from './classes/AutocompleteGroup';
 17 | import {SelectedAutocompleteItem} from './classes/typing';
 18 | import {CompleterComponent} from './completer/completer.component';
 19 | import {GroupNoResult, ReturnStringArrayByID} from './utils/utils';
 20 | import {Subject} from 'rxjs';
 21 | 
 22 | @Component({
 23 |     selector: 'ng-auto-complete',
 24 |     template: `
 25 |         <div #init style="display: none;"><span class="after-view-init"></span></div>
 26 |         <ng-completer [ngClass]="classes" *ngFor="let item of group" (cleared)="InputCleared($event)"
 27 |                       (no-result)="NoResult($event)"
 28 |                       (selected)="ListenToSelected($event)"
 29 |                       [group]="item"></ng-completer>
 30 |     `,
 31 | })
 32 | export class NgAutoCompleteComponent implements OnInit, AfterViewChecked {
 33 |     @ViewChildren(CompleterComponent) public completers: QueryList<CompleterComponent>;
 34 |     @ViewChild('init', { static: true }) public init: ElementRef;
 35 | 
 36 |     @Output() public selected: EventEmitter<SelectedAutocompleteItem> = new EventEmitter<SelectedAutocompleteItem>();
 37 |     // tslint:disable-next-line:no-output-rename
 38 |     @Output('no-result') public noResult: EventEmitter<GroupNoResult> = new EventEmitter<GroupNoResult>();
 39 | 
 40 |     @Input() public group: AutocompleteGroup[] = [];
 41 |     @Input() public key  = '';
 42 |     @Input() public classes: string[] = [];
 43 | 
 44 |     _viewHasBeenInit = false;
 45 |     _viewInitSubject: Subject<boolean> = new Subject<boolean>();
 46 | 
 47 |     constructor(private cdr: ChangeDetectorRef) {
 48 |     }
 49 | 
 50 | 
 51 |     // =======================================================================//
 52 |     // ! Static (utils)                                                       //
 53 |     // =======================================================================//
 54 | 
 55 |     /**
 56 |      *
 57 |      */
 58 |     static FindCompleter(key: string, list: QueryList<NgAutoCompleteComponent>): NgAutoCompleteComponent {
 59 |         const completer = list.filter((c: NgAutoCompleteComponent) => {
 60 |             return key === c.key;
 61 |         });
 62 | 
 63 |         if (typeof completer[0] !== 'undefined') {
 64 |             return completer[0];
 65 |         }
 66 | 
 67 |         return null;
 68 |     }
 69 | 
 70 |     /**
 71 |      *
 72 |      */
 73 |     ngOnInit() {
 74 |     }
 75 | 
 76 |     /**
 77 |      *
 78 |      */
 79 |     ngAfterViewChecked() {
 80 |         if (!this._viewHasBeenInit) {
 81 |             const el = this.init.nativeElement.querySelector('.after-view-init');
 82 | 
 83 |             if (window.getComputedStyle(el).length > 0) {
 84 |                 this._viewHasBeenInit = true;
 85 |                 this._viewInitSubject.next(true);
 86 |             }
 87 |         }
 88 |     }
 89 | 
 90 |     /**
 91 |      *
 92 |      */
 93 |     ListenToSelected(selected: SelectedAutocompleteItem) {
 94 |         this.selected.emit(selected);
 95 | 
 96 |         /**
 97 |          *
 98 |          */
 99 |         this.SetChildren(selected);
100 |     }
101 | 
102 |     /**
103 |      *
104 |      */
105 |     NoResult(group: GroupNoResult) {
106 |         this.noResult.emit(group);
107 |     }
108 | 
109 |     /**
110 |      *
111 |      */
112 |     InputCleared(key: string) {
113 |         this.group.forEach((group) => {
114 |             if (group.key === key || group.parent === key) {
115 |                 this.ResetInput(group.key);
116 |             }
117 |         });
118 | 
119 |         /**
120 |          * Items may have changed, need to te re-set list in completer components.
121 |          */
122 |         this.TriggerChange();
123 |     }
124 | 
125 |     /**
126 |      *
127 |      */
128 |     SetChildren(selected: SelectedAutocompleteItem) {
129 |         this.group.forEach((item) => {
130 | 
131 |             if (item.parent === selected.group.key) {
132 |                 this.ResetInput(item.key);
133 | 
134 |                 /**
135 |                  *
136 |                  */
137 |                 if (selected.item !== null && typeof selected.item.children !== 'undefined') {
138 |                     item.SetNewValue(selected.item.children, selected.group.keys.titleKey);
139 |                 }
140 |             }
141 |         });
142 | 
143 |         /**
144 |          * Items may have changed, need to te re-set list in completer components.
145 |          */
146 |         this.TriggerChange();
147 |     }
148 | 
149 |     /**
150 |      *
151 |      */
152 |     TriggerChange() {
153 |         this.completers.forEach((completer) => {
154 |             completer.SetItems();
155 |         });
156 |     }
157 | 
158 |     // =======================================================================//
159 |     // ! Utils                                                                //
160 |     // =======================================================================//
161 | 
162 |     /**
163 |      *
164 |      */
165 |     GetInput(key: string): CompleterComponent {
166 |         return this.completers.reduce((result, completer) => {
167 |             if (completer.group.key === key) {
168 |                 result = completer;
169 |             }
170 | 
171 |             return result;
172 |         }, <CompleterComponent>{});
173 |     }
174 | 
175 |     /**
176 |      *
177 |      */
178 |     SubscribeInput(key: string, f: (completer: CompleterComponent) => void) {
179 |         if (this._viewHasBeenInit) {
180 |             const completer = this.GetInput(key);
181 | 
182 |             /**
183 |              *
184 |              */
185 |             f(completer);
186 |             return;
187 |         }
188 | 
189 |         this._viewInitSubject.subscribe((_bool) => {
190 |             const completer = this.GetInput(key);
191 |             setTimeout(() => {
192 |                 f(completer);
193 |             });
194 | 
195 |             this._viewInitSubject.unsubscribe();
196 |         });
197 |     }
198 | 
199 |     /**
200 |      *
201 |      */
202 |     ResetInput(key: string) {
203 |         this.SubscribeInput(
204 |             key,
205 |             (completer) => {
206 |                 completer.ClearValue();
207 |             }
208 |         );
209 |     }
210 | 
211 |     /**
212 |      *
213 |      */
214 |     SetValues(key: string, values: { id?: string | number; [value: string]: any }[]) {
215 |         this.SubscribeInput(
216 |             key,
217 |             (completer) => {
218 |                 completer.group.SetValues(values);
219 | 
220 |                 /**
221 |                  * Items may have changed, need to te re-set list in completer components.
222 |                  */
223 |                 this.TriggerChange();
224 |             }
225 |         );
226 |     }
227 | 
228 |     /**
229 |      *
230 |      */
231 |     SetTemplate(key: string, type: 'noResults' | 'placeholderValue' | 'dropdownValue', template: TemplateRef<any>) {
232 |         this.SubscribeInput(
233 |             key,
234 |             (completer) => {
235 |                 completer.group[type] = template;
236 | 
237 |                 /**
238 |                  * Items may have changed, need to te re-set list in completer components.
239 |                  */
240 |                 this.TriggerChange();
241 |             }
242 |         );
243 |     }
244 | 
245 |     /**
246 |      *
247 |      */
248 |     SetAsync(key: string, promise: (str: string) => Promise<{ id: string | number; [value: string]: any }[]>) {
249 |         this.SubscribeInput(
250 |             key,
251 |             (completer) => {
252 |                 completer.group.async = promise;
253 | 
254 |                 /**
255 |                  * Items may have changed, need to te re-set list in completer components.
256 |                  */
257 |                 this.TriggerChange();
258 |             }
259 |         );
260 |     }
261 | 
262 |     /**
263 |      *
264 |      */
265 |     SetEnable(key: string) {
266 |         this.SubscribeInput(
267 |             key,
268 |             (completer) => {
269 |                 completer._disabled = false;
270 | 
271 |                 /**
272 |                  * Items may have changed, need to te re-set list in completer components.
273 |                  */
274 |                 this.TriggerChange();
275 |             }
276 |         );
277 |     }
278 | 
279 |     /**
280 |      *
281 |      */
282 |     SetDisable(key: string) {
283 |         this.SubscribeInput(
284 |             key,
285 |             (completer) => {
286 |                 completer._disabled = true;
287 | 
288 |                 /**
289 |                  * Items may have changed, need to te re-set list in completer components.
290 |                  */
291 |                 this.TriggerChange();
292 |             }
293 |         );
294 |     }
295 | 
296 |     /**
297 |      *
298 |      */
299 |     SelectItem(key: string, id: string | number) {
300 |         this.SubscribeInput(
301 |             key,
302 |             (completer) => {
303 |                 Object.keys(completer._items).forEach((k) => {
304 |                     const f = `_id_${String(id)}`;
305 |                     const c = k.substring(k.indexOf(f), k.length);
306 | 
307 |                     if (f === c) {
308 |                         completer.SelectItem(completer._items[k]);
309 |                     }
310 |                 });
311 | 
312 |             }
313 |         );
314 |     }
315 | 
316 |     /**
317 |      *
318 |      */
319 |     RemovableValues(key: string, ids: { id: string | number, [value: string]: any }[]) {
320 |         this.SubscribeInput(
321 |             key,
322 |             (completer) => {
323 |                 completer.group.Removables(ReturnStringArrayByID(ids));
324 | 
325 |                 /**
326 |                  * Items may have changed, need to te re-set list in completer components.
327 |                  */
328 |                 this.TriggerChange();
329 |             }
330 |         );
331 |     }
332 | 
333 |     /**
334 |      *
335 |      */
336 |     ResetInputs() {
337 |         this.group.forEach((item) => {
338 |             this.ResetInput(item.key);
339 |         });
340 |     }
341 | }
342 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in
  9 |  *    IE on Windows Phone and in iOS.
 10 |  */
 11 | 
 12 | * {
 13 |     box-sizing: border-box;
 14 | }
 15 | 
 16 | html {
 17 |     line-height: 1.15; /* 1 */
 18 |     -ms-text-size-adjust: 100%; /* 2 */
 19 |     -webkit-text-size-adjust: 100%; /* 2 */
 20 | }
 21 | 
 22 | /* Sections
 23 |    ========================================================================== */
 24 | 
 25 | /**
 26 |  * Remove the margin in all browsers (opinionated).
 27 |  */
 28 | 
 29 | body {
 30 |     margin: 0;
 31 | }
 32 | 
 33 | /**
 34 |  * Add the correct display in IE 9-.
 35 |  */
 36 | 
 37 | article,
 38 | aside,
 39 | footer,
 40 | header,
 41 | nav,
 42 | section {
 43 |     display: block;
 44 | }
 45 | 
 46 | /**
 47 |  * Correct the font size and margin on `h1` elements within `section` and
 48 |  * `article` contexts in Chrome, Firefox, and Safari.
 49 |  */
 50 | 
 51 | h1 {
 52 |     font-size: 2em;
 53 |     margin: 0.67em 0;
 54 | }
 55 | 
 56 | /* Grouping content
 57 |    ========================================================================== */
 58 | 
 59 | /**
 60 |  * Add the correct display in IE 9-.
 61 |  * 1. Add the correct display in IE.
 62 |  */
 63 | 
 64 | figcaption,
 65 | figure,
 66 | main { /* 1 */
 67 |     display: block;
 68 | }
 69 | 
 70 | /**
 71 |  * Add the correct margin in IE 8.
 72 |  */
 73 | 
 74 | figure {
 75 |     margin: 1em 40px;
 76 | }
 77 | 
 78 | /**
 79 |  * 1. Add the correct box sizing in Firefox.
 80 |  * 2. Show the overflow in Edge and IE.
 81 |  */
 82 | 
 83 | hr {
 84 |     box-sizing: content-box; /* 1 */
 85 |     height: 0; /* 1 */
 86 |     overflow: visible; /* 2 */
 87 | }
 88 | 
 89 | /**
 90 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 91 |  * 2. Correct the odd `em` font sizing in all browsers.
 92 |  */
 93 | 
 94 | pre {
 95 |     font-family: monospace, monospace; /* 1 */
 96 |     font-size: 1em; /* 2 */
 97 | }
 98 | 
 99 | /* Text-level semantics
100 |    ========================================================================== */
101 | 
102 | /**
103 |  * 1. Remove the gray background on active links in IE 10.
104 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
105 |  */
106 | 
107 | a {
108 |     background-color: transparent; /* 1 */
109 |     -webkit-text-decoration-skip: objects; /* 2 */
110 | }
111 | 
112 | /**
113 |  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
114 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
115 |  */
116 | 
117 | abbr[title] {
118 |     border-bottom: none; /* 1 */
119 |     text-decoration: underline; /* 2 */
120 |     text-decoration: underline dotted; /* 2 */
121 | }
122 | 
123 | /**
124 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
125 |  */
126 | 
127 | b,
128 | strong {
129 |     font-weight: inherit;
130 | }
131 | 
132 | /**
133 |  * Add the correct font weight in Chrome, Edge, and Safari.
134 |  */
135 | 
136 | b,
137 | strong {
138 |     font-weight: bolder;
139 | }
140 | 
141 | /**
142 |  * 1. Correct the inheritance and scaling of font size in all browsers.
143 |  * 2. Correct the odd `em` font sizing in all browsers.
144 |  */
145 | 
146 | code,
147 | kbd,
148 | samp {
149 |     font-family: monospace, monospace; /* 1 */
150 |     font-size: 1em; /* 2 */
151 | }
152 | 
153 | /**
154 |  * Add the correct font style in Android 4.3-.
155 |  */
156 | 
157 | dfn {
158 |     font-style: italic;
159 | }
160 | 
161 | /**
162 |  * Add the correct background and color in IE 9-.
163 |  */
164 | 
165 | mark {
166 |     background-color: #ff0;
167 |     color: #000;
168 | }
169 | 
170 | /**
171 |  * Add the correct font size in all browsers.
172 |  */
173 | 
174 | small {
175 |     font-size: 80%;
176 | }
177 | 
178 | /**
179 |  * Prevent `sub` and `sup` elements from affecting the line height in
180 |  * all browsers.
181 |  */
182 | 
183 | sub,
184 | sup {
185 |     font-size: 75%;
186 |     line-height: 0;
187 |     position: relative;
188 |     vertical-align: baseline;
189 | }
190 | 
191 | sub {
192 |     bottom: -0.25em;
193 | }
194 | 
195 | sup {
196 |     top: -0.5em;
197 | }
198 | 
199 | /* Embedded content
200 |    ========================================================================== */
201 | 
202 | /**
203 |  * Add the correct display in IE 9-.
204 |  */
205 | 
206 | audio,
207 | video {
208 |     display: inline-block;
209 | }
210 | 
211 | /**
212 |  * Add the correct display in iOS 4-7.
213 |  */
214 | 
215 | audio:not([controls]) {
216 |     display: none;
217 |     height: 0;
218 | }
219 | 
220 | /**
221 |  * Remove the border on images inside links in IE 10-.
222 |  */
223 | 
224 | img {
225 |     border-style: none;
226 | }
227 | 
228 | /**
229 |  * Hide the overflow in IE.
230 |  */
231 | 
232 | svg:not(:root) {
233 |     overflow: hidden;
234 | }
235 | 
236 | /* Forms
237 |    ========================================================================== */
238 | 
239 | /**
240 |  * 1. Change the font styles in all browsers (opinionated).
241 |  * 2. Remove the margin in Firefox and Safari.
242 |  */
243 | 
244 | button,
245 | input,
246 | optgroup,
247 | select,
248 | textarea {
249 |     font-family: sans-serif; /* 1 */
250 |     font-size: 100%; /* 1 */
251 |     line-height: 1.15; /* 1 */
252 |     margin: 0; /* 2 */
253 | }
254 | 
255 | /**
256 |  * Show the overflow in IE.
257 |  * 1. Show the overflow in Edge.
258 |  */
259 | 
260 | button,
261 | input { /* 1 */
262 |     overflow: visible;
263 | }
264 | 
265 | /**
266 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
267 |  * 1. Remove the inheritance of text transform in Firefox.
268 |  */
269 | 
270 | button,
271 | select { /* 1 */
272 |     text-transform: none;
273 | }
274 | 
275 | /**
276 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
277 |  *    controls in Android 4.
278 |  * 2. Correct the inability to style clickable types in iOS and Safari.
279 |  */
280 | 
281 | button,
282 | html [type="button"], /* 1 */
283 | [type="reset"],
284 | [type="submit"] {
285 |     -webkit-appearance: button; /* 2 */
286 | }
287 | 
288 | /**
289 |  * Remove the inner border and padding in Firefox.
290 |  */
291 | 
292 | button::-moz-focus-inner,
293 | [type="button"]::-moz-focus-inner,
294 | [type="reset"]::-moz-focus-inner,
295 | [type="submit"]::-moz-focus-inner {
296 |     border-style: none;
297 |     padding: 0;
298 | }
299 | 
300 | /**
301 |  * Restore the focus styles unset by the previous rule.
302 |  */
303 | 
304 | button:-moz-focusring,
305 | [type="button"]:-moz-focusring,
306 | [type="reset"]:-moz-focusring,
307 | [type="submit"]:-moz-focusring {
308 |     outline: 1px dotted ButtonText;
309 | }
310 | 
311 | /**
312 |  * Correct the padding in Firefox.
313 |  */
314 | 
315 | fieldset {
316 |     padding: 0.35em 0.75em 0.625em;
317 | }
318 | 
319 | /**
320 |  * 1. Correct the text wrapping in Edge and IE.
321 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
322 |  * 3. Remove the padding so developers are not caught out when they zero out
323 |  *    `fieldset` elements in all browsers.
324 |  */
325 | 
326 | legend {
327 |     box-sizing: border-box; /* 1 */
328 |     color: inherit; /* 2 */
329 |     display: table; /* 1 */
330 |     max-width: 100%; /* 1 */
331 |     padding: 0; /* 3 */
332 |     white-space: normal; /* 1 */
333 | }
334 | 
335 | /**
336 |  * 1. Add the correct display in IE 9-.
337 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
338 |  */
339 | 
340 | progress {
341 |     display: inline-block; /* 1 */
342 |     vertical-align: baseline; /* 2 */
343 | }
344 | 
345 | /**
346 |  * Remove the default vertical scrollbar in IE.
347 |  */
348 | 
349 | textarea {
350 |     overflow: auto;
351 | }
352 | 
353 | /**
354 |  * 1. Add the correct box sizing in IE 10-.
355 |  * 2. Remove the padding in IE 10-.
356 |  */
357 | 
358 | [type="checkbox"],
359 | [type="radio"] {
360 |     box-sizing: border-box; /* 1 */
361 |     padding: 0; /* 2 */
362 | }
363 | 
364 | /**
365 |  * Correct the cursor style of increment and decrement buttons in Chrome.
366 |  */
367 | 
368 | [type="number"]::-webkit-inner-spin-button,
369 | [type="number"]::-webkit-outer-spin-button {
370 |     height: auto;
371 | }
372 | 
373 | /**
374 |  * 1. Correct the odd appearance in Chrome and Safari.
375 |  * 2. Correct the outline style in Safari.
376 |  */
377 | 
378 | [type="search"] {
379 |     -webkit-appearance: textfield; /* 1 */
380 |     outline-offset: -2px; /* 2 */
381 | }
382 | 
383 | /**
384 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
385 |  */
386 | 
387 | [type="search"]::-webkit-search-cancel-button,
388 | [type="search"]::-webkit-search-decoration {
389 |     -webkit-appearance: none;
390 | }
391 | 
392 | /**
393 |  * 1. Correct the inability to style clickable types in iOS and Safari.
394 |  * 2. Change font properties to `inherit` in Safari.
395 |  */
396 | 
397 | ::-webkit-file-upload-button {
398 |     -webkit-appearance: button; /* 1 */
399 |     font: inherit; /* 2 */
400 | }
401 | 
402 | /* Interactive
403 |    ========================================================================== */
404 | 
405 | /*
406 |  * Add the correct display in IE 9-.
407 |  * 1. Add the correct display in Edge, IE, and Firefox.
408 |  */
409 | 
410 | details, /* 1 */
411 | menu {
412 |     display: block;
413 | }
414 | 
415 | /*
416 |  * Add the correct display in all browsers.
417 |  */
418 | 
419 | summary {
420 |     display: list-item;
421 | }
422 | 
423 | /* Scripting
424 |    ========================================================================== */
425 | 
426 | /**
427 |  * Add the correct display in IE 9-.
428 |  */
429 | 
430 | canvas {
431 |     display: inline-block;
432 | }
433 | 
434 | /**
435 |  * Add the correct display in IE.
436 |  */
437 | 
438 | template {
439 |     display: none;
440 | }
441 | 
442 | /* Hidden
443 |    ========================================================================== */
444 | 
445 | /**
446 |  * Add the correct display in IE 10-.
447 |  */
448 | 
449 | body {
450 |     height: 5000px;
451 | }
452 | 
453 | [hidden] {
454 |     display: none;
455 | }
456 | 
457 | .fifty {
458 |     width: 50%;
459 |     float: left;
460 | }
461 | 
462 | .ng-autocomplete-dropdown {
463 |     position: relative;
464 |     margin-top: 25px;
465 |     height: 200px;
466 | }
467 | .ng-autocomplete-dropdown .ng-autocomplete-inputs {
468 |     position: relative;
469 | }
470 | .ng-autocomplete-dropdown .ng-autocomplete-inputs input {
471 |     width: 100%;
472 |     padding: 6px 20px;
473 |     font-family: Arial;
474 |     font-weight: normal;
475 |     outline: none !important;
476 |     font-size: 15px;
477 |     height: 56px;
478 |     border: 1px solid #e0e0e0;
479 | }
480 | 
481 | .ng-autocomplete-dropdown .ng-autocomplete-placeholder {
482 |     position: absolute;
483 |     margin: 3px;
484 |     background-color: #fff;
485 |     padding: 17px 18px;
486 |     font-family: Arial;
487 |     font-weight: normal;
488 |     font-size: 15px;
489 |     width: calc(100% - 4px);
490 | }
491 | .ng-autocomplete-dropdown .ng-dropdown {
492 |     display: none;
493 |     border: 1px solid #e0e0e0;
494 |     z-index: 99999;
495 |     max-height: 280px;
496 |     overflow-x: hidden;
497 |     position: absolute;
498 |     width: 100%;
499 | }
500 | .ng-autocomplete-dropdown .ng-dropdown.open {
501 |     display: block;
502 | }
503 | .ng-autocomplete-dropdown .ng-dropdown .dropdown-item {
504 |     width: 100%;
505 |     cursor: pointer;
506 |     padding: 18px 20px;
507 |     font-family: Arial;
508 |     font-weight: normal;
509 |     font-size: 15px;
510 |     height: 56px;
511 |     background-color: #ffffff;
512 | }
513 | .ng-autocomplete-dropdown .ng-dropdown .dropdown-item:nth-child(odd) {
514 |     background-color: #efefef;
515 | }
516 | .ng-autocomplete-dropdown .ng-dropdown .dropdown-item.active {
517 |     background-color: #0099cc;
518 |     color: #fff !important;
519 | }
520 | 
521 | .ng-autocomplete-dropdown .ng-dropdown .dropdown-item .dropdown-item-highlight {
522 |     font-weight: bold;
523 | }
524 | 
525 | .ng-autocomplete-dropdown-icon {
526 |     display: block;
527 |     width: 56px;
528 |     text-align: center;
529 |     position: absolute;
530 |     top: 0;
531 |     bottom: 0;
532 |     right: 0;
533 |     border-left: 1px solid #e0e0e0;
534 |     cursor: pointer;
535 |     z-index: 999;
536 |     font-size: 12px;
537 |     color: #758694;
538 |     padding: 21px 0;
539 | 
540 | }
541 | 
542 | .ng-autocomplete-dropdown-icon:after {
543 |     content: '';
544 |     display: block;
545 |     width: 0;
546 |     height: 0;
547 |     border-left: 7px solid transparent;
548 |     border-right: 7px solid transparent;
549 |     border-top: 7px solid #000;
550 |     position: absolute;
551 |     right: 21px;
552 |     z-index: 999;
553 |     top: 24px;
554 | }
555 | 
556 | .ng-autocomplete-dropdown-icon.open:after {
557 |     transform: rotate(180deg);
558 | }
559 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/lib/dropdown/ng-dropdown.directive.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |     ChangeDetectorRef,
  3 |     Directive,
  4 |     ElementRef,
  5 |     EventEmitter,
  6 |     HostBinding,
  7 |     HostListener,
  8 |     Input,
  9 |     OnChanges,
 10 |     OnDestroy,
 11 |     OnInit,
 12 |     Output,
 13 |     SimpleChanges
 14 | } from '@angular/core';
 15 | import {IsMobileOrTablet} from '../utils/utils';
 16 | 
 17 | @Directive({
 18 |     selector: '[ngDropdown]'
 19 | })
 20 | export class NgDropdownDirective implements OnChanges, OnInit, OnDestroy {
 21 |     @Input() public list: any[] = [];
 22 |     @Input() public active: any = null;
 23 | 
 24 |     @Input() public input: HTMLElement = null;
 25 |     @Input() public element: Element = null;
 26 | 
 27 |     @Input() public key  = '';
 28 |     @Input() public completion  = true;
 29 | 
 30 |     @Output() public hover: EventEmitter<any> = new EventEmitter<any>();
 31 |     @Output() public selected: EventEmitter<any> = new EventEmitter<any>();
 32 |     @Output() public closed: EventEmitter<any> = new EventEmitter<any>();
 33 | 
 34 |     _open  = false;
 35 |     _list: { active: boolean, [value: string]: any }[] = [];
 36 |     _class  = '';
 37 | 
 38 |     private inputKeydownBind = this.inputKeydown.bind(this);
 39 |     private mouseoverListenerBind = this.mouseoverListener.bind(this);
 40 |     private documentKeydownBind = this.documentKeydown.bind(this);
 41 | 
 42 |     constructor(public _eref: ElementRef, private cdr: ChangeDetectorRef) {
 43 |     }
 44 | 
 45 |     /**
 46 |      *
 47 |      */
 48 |     ngOnInit() {
 49 |         this._class = `dr-item-${this.key}-`;
 50 | 
 51 |         if (!IsMobileOrTablet()) {
 52 |             this._eref.nativeElement.addEventListener('mouseover', this.mouseoverListenerBind);
 53 |         }
 54 | 
 55 |         /**
 56 |          *
 57 |          */
 58 |         this.PrepareList();
 59 |     }
 60 | 
 61 |     /**
 62 |      *
 63 |      */
 64 |     ngOnChanges(changes: SimpleChanges) {
 65 |         if (typeof changes['active'] !== 'undefined' && !changes['active'].firstChange) {
 66 |             this.PrepareList();
 67 |         }
 68 |         if (typeof changes['list'] !== 'undefined') {
 69 |             this.list = changes['list'].currentValue;
 70 | 
 71 |             /**
 72 |              *
 73 |              */
 74 |             this.PrepareList();
 75 |         }
 76 |     }
 77 | 
 78 |     /**
 79 |      *
 80 |      */
 81 |     keyDown(event: KeyboardEvent) {
 82 |         event.stopImmediatePropagation();
 83 |         event.stopPropagation();
 84 | 
 85 |         /**
 86 |          *
 87 |          */
 88 |         switch (event.code) {
 89 |             case 'ArrowDown':
 90 |                 this.Open();
 91 | 
 92 |                 /**
 93 |                  *
 94 |                  */
 95 |                 this.SetActive(this.FindActive() + 1);
 96 |                 this.DropdownFocusAreaDown();
 97 | 
 98 |                 event.preventDefault();
 99 |                 break;
100 |             case 'ArrowUp':
101 |                 this.Open();
102 | 
103 |                 /**
104 |                  *
105 |                  */
106 |                 this.SetActive(this.FindActive() - 1);
107 |                 this.DropdownFocusAreaUp();
108 | 
109 |                 event.preventDefault();
110 |                 break;
111 |             case 'Enter':
112 |                 this.EmitSelected();
113 |                 this.Close(null, true);
114 | 
115 |                 if (this.RefExists()) {
116 |                     this.input.blur();
117 |                 }
118 | 
119 |                 event.preventDefault();
120 |                 break;
121 |             case 'Escape':
122 |                 this.Close(null, true);
123 | 
124 |                 if (this.RefExists()) {
125 |                     this.input.blur();
126 |                 }
127 | 
128 |                 event.preventDefault();
129 |                 break;
130 |             case 'Tab':
131 |                 if (!event.shiftKey) {
132 |                     this.EmitSelected();
133 |                 }
134 | 
135 |                 this.Close(null, true);
136 |                 break;
137 |             default:
138 |                 return;
139 |         }
140 |     }
141 | 
142 |     /**
143 |      *
144 |      */
145 |     OnMouseOver(event: MouseEvent) {
146 |         // Mouse didn't actually move, so no logic needed.
147 |         if (event.movementX === 0 && event.movementY === 0) {
148 |             return;
149 |         }
150 | 
151 |         /**
152 |          *
153 |          */
154 |         const el: any = event.target || event.srcElement;
155 |         if (el.id.length > 0 && el.id.includes(this._class)) {
156 |             this.SetActive(Number(el.id.slice(this._class.length, el.id.length)));
157 |         }
158 |     }
159 | 
160 |     /**
161 |      *
162 |      */
163 |     EmitSelected() {
164 |         if (this.FindActive() > -1) {
165 |             this.selected.emit(this._list[this.FindActive()].key);
166 |         }
167 |     }
168 | 
169 |     /**
170 |      *
171 |      */
172 |     DropdownFocusAreaDown() {
173 |         const scroll = this._eref.nativeElement.offsetHeight + this._eref.nativeElement.scrollTop;
174 | 
175 |         /**
176 |          *
177 |          */
178 |         if ((this.GetElement(this.FindActive()).offsetTop + this.GetElement(this.FindActive()).offsetHeight) > scroll) {
179 |             // tslint:disable-next-line:max-line-length
180 |             this._eref.nativeElement.scrollTop = this.GetElement(this.FindActive()).offsetTop - (this._eref.nativeElement.offsetHeight - this.GetElement(this.FindActive()).offsetHeight);
181 |         }
182 |     }
183 | 
184 |     /**
185 |      *
186 |      */
187 |     DropdownFocusAreaUp() {
188 |         const scroll = this._eref.nativeElement.scrollTop;
189 | 
190 |         /**
191 |          *
192 |          */
193 |         if (this.GetElement(this.FindActive()).offsetTop < scroll && scroll > 0) {
194 |             this._eref.nativeElement.scrollTop = this.GetElement(this.FindActive()).offsetTop;
195 |         }
196 |     }
197 | 
198 |     // =======================================================================//
199 |     // ! Bindings                                                             //
200 |     // =======================================================================//
201 | 
202 |     /**
203 |      *
204 |      */
205 |     @HostBinding('class.open')
206 |     get opened() {
207 |         return this._open;
208 |     }
209 | 
210 | 
211 |     // =======================================================================//
212 |     // ! Listeners                                                            //
213 |     // =======================================================================//
214 | 
215 |     /**
216 |      *
217 |      */
218 |     @HostListener('document:click', ['$event'])
219 |     Close(event, force: boolean = false) {
220 |         if (!this._open) {
221 |             return;
222 |         }
223 | 
224 |         const close = () => {
225 |             this._open = false;
226 | 
227 |             /**
228 |              * Emit NULL so listening components know what to do.
229 |              */
230 |             this.RemoveListeners();
231 |             this.ClearActive();
232 |             this.hover.emit(null);
233 |             this.closed.emit();
234 |             this.cdr.detectChanges();
235 |         };
236 | 
237 |         if (force) {
238 |             close();
239 |             return;
240 |         }
241 | 
242 |         if ((this._open && (!this.element.contains(event.target)))) {
243 |             close();
244 |         }
245 |     }
246 | 
247 |     /**
248 |      *
249 |      */
250 |     private inputKeydown(event: KeyboardEvent) {
251 |         this.keyDown(event);
252 |     }
253 | 
254 | 
255 |     /**
256 |      *
257 |      */
258 |     private documentKeydown(event: KeyboardEvent) {
259 |         this.keyDown(event);
260 |     }
261 | 
262 | 
263 |     /**
264 |      *
265 |      */
266 |     private mouseoverListener(event: MouseEvent) {
267 |         this.OnMouseOver(event);
268 |     }
269 | 
270 | 
271 | 
272 |     // =======================================================================//
273 |     // ! Utils                                                                //
274 |     // =======================================================================//
275 | 
276 |     /**
277 |      *
278 |      */
279 |     RegisterListeners() {
280 |         if (this.RefExists()) {
281 |             this.input.addEventListener('keydown', this.inputKeydownBind);
282 |         }
283 | 
284 |         if (!this.completion) {
285 |             document.addEventListener('keydown', this.documentKeydownBind);
286 |         }
287 |     }
288 | 
289 |     /**
290 |      *
291 |      */
292 |     RemoveListeners() {
293 |         if (this.RefExists()) {
294 |             this.input.removeEventListener('keydown', this.inputKeydownBind);
295 |         }
296 | 
297 |         if (!this.completion) {
298 |             document.removeEventListener('keydown', this.documentKeydownBind);
299 |         }
300 | 
301 |         if (!IsMobileOrTablet()) {
302 |             this._eref.nativeElement.removeEventListener('mouseover', this.mouseoverListenerBind);
303 |         }
304 |     }
305 | 
306 |     /**
307 |      *
308 |      */
309 |     Open() {
310 |         setTimeout(() => {
311 |             if (!this._open && !this._eref.nativeElement.classList.contains('is-initial-empty')) {
312 |                 this.RegisterListeners();
313 | 
314 |                 this._open = true;
315 |                 this.PrepareList();
316 | 
317 |                 /**
318 |                  *
319 |                  */
320 |                 if (this.FindActive() < 0) {
321 |                     this._eref.nativeElement.scrollTop = 0;
322 |                 } else {
323 |                     this._eref.nativeElement.scrollTop = this.GetElement(this.FindActive()).offsetHeight * this.FindActive();
324 |                 }
325 | 
326 |                 this.cdr.detectChanges();
327 |             }
328 |         }, 0);
329 |     }
330 | 
331 |     /**
332 |      *
333 |      */
334 |     RefExists() {
335 |         return typeof this.input !== 'undefined';
336 |     }
337 | 
338 |     /**
339 |      *
340 |      */
341 |     FindActive(): number {
342 |         return this._list.reduce((result, item, index) => {
343 |             if (item.active) {
344 |                 result = index;
345 |             }
346 | 
347 |             return result;
348 |         }, -1);
349 |     }
350 | 
351 |     /**
352 |      *
353 |      */
354 |     SetActive(index: number) {
355 |         if (index > this._list.length - 1 || index < 0) {
356 |             return;
357 |         }
358 | 
359 |         /**
360 |          *
361 |          */
362 |         this.ClearActive();
363 | 
364 |         this._list[index].active = true;
365 |         this.hover.emit(this._list[index].key);
366 |         /**
367 |          *
368 |          */
369 |         this.GetElement(index).classList.add('active');
370 |     }
371 | 
372 |     /**
373 |      *
374 |      */
375 |     GetElement(index: number) {
376 |         return this._eref.nativeElement.children[index];
377 |     }
378 | 
379 |     /**
380 |      *
381 |      */
382 |     ClearActive(): void {
383 |         this._list.forEach((item, index) => {
384 |             item.active = false;
385 | 
386 |             /**
387 |              *
388 |              */
389 |             this.GetElement(index).classList.remove('active');
390 |         });
391 |     }
392 | 
393 |     /**
394 |      *
395 |      */
396 |     PrepareList() {
397 |         this._list = Object.keys(this.list).map((key) => {
398 |             return {
399 |                 key,
400 |                 active: this.ActiveItem(key)
401 |             };
402 |         });
403 | 
404 |         /**
405 |          *
406 |          */
407 |         this.PrepareChildrenList();
408 |     }
409 | 
410 |     /**
411 |      *
412 |      */
413 |     ActiveItem(item: any) {
414 |         return this.active !== null && item === this.active;
415 |     }
416 | 
417 |     /**
418 |      *
419 |      */
420 |     DetermineActiveClass() {
421 |         this._list.forEach((item, index) => {
422 |             if (typeof this.GetElement(index) === 'undefined') {
423 |                 return;
424 |             }
425 | 
426 |             /**
427 |              *
428 |              */
429 |             this.GetElement(index).classList.remove('active');
430 |             if (item.active) {
431 |                 this.GetElement(index).classList.add('active');
432 |             }
433 |         });
434 |     }
435 | 
436 |     /**
437 |      *
438 |      */
439 |     PrepareChildrenList() {
440 |         const list = this._eref.nativeElement.children;
441 | 
442 |         setTimeout(() => {
443 |             for (let i = 0; i < list.length; i++) {
444 |                 list[i].id = this._class + i;
445 |             }
446 |         }, 0);
447 | 
448 |         /**
449 |          *
450 |          */
451 |         this.DetermineActiveClass();
452 | 
453 |     }
454 | 
455 |     /**
456 |      *
457 |      */
458 |     DeReference(object: { active: boolean, [value: string]: any }) {
459 |         const {item} = object;
460 | 
461 |         /**
462 |          *
463 |          */
464 |         return Object.assign({}, {...item});
465 |     }
466 | 
467 |     /**
468 |      *
469 |      */
470 |     ngOnDestroy() {
471 |         this.RemoveListeners();
472 |     }
473 | }
474 | 


--------------------------------------------------------------------------------
/projects/ng-auto-complete/src/lib/completer/completer.component.ts:
--------------------------------------------------------------------------------
  1 | import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
  2 | import {
  3 |     ChangeDetectionStrategy,
  4 |     ChangeDetectorRef,
  5 |     Component,
  6 |     EventEmitter,
  7 |     Input,
  8 |     NgZone,
  9 |     OnInit,
 10 |     Output,
 11 |     ViewChild
 12 | } from '@angular/core';
 13 | import { AutocompleteGroup } from '../classes/AutocompleteGroup';
 14 | import {
 15 |     AutocompleteItem,
 16 |     ComparableAutoCompleteString,
 17 |     SearchableAutoCompleteString,
 18 |     StrippedAutocompleteGroup
 19 | } from '../classes/AutocompleteItem';
 20 | import { NgDropdownDirective } from '../dropdown/ng-dropdown.directive';
 21 | import { GroupNoResult } from '../utils/utils';
 22 | import { Observable, of, Subject } from 'rxjs';
 23 | 
 24 | @Component({
 25 |     selector       : 'ng-completer',
 26 |     template       : `
 27 |         <div #element class="ng-autocomplete-dropdown"
 28 |              [ngClass]="{'open': dropdown._open, 'is-loading': _DOM.isLoading, 'is-async': group.async !== null}">
 29 | 
 30 |             <!--GROUP: {{group.key}}-->
 31 | 
 32 |             <div class="ng-autocomplete-inputs" (click)="RegisterClick()"
 33 |                  [ngClass]="{'completion-off': !group.completion}">
 34 |                 <span class="ng-autocomplete-placeholder"
 35 |                       *ngIf="_DOM.placeholder">
 36 |                   <ng-container *ngIf="group.placeholderValue">
 37 |                       <ng-template *ngTemplateOutlet="group.placeholderValue; context: {$implicit: _DOM.placeholder}"></ng-template>
 38 |                   </ng-container>
 39 |                   <ng-template [ngIf]="!group.placeholderValue">
 40 |                       {{_DOM.placeholder.title}}
 41 |                   </ng-template>
 42 |                 </span>
 43 |                 <input #input type="text" [placeholder]="group.placeholder" name="completer" [ngModel]="_completer"
 44 |                        (ngModelChange)="_change.next($event);"
 45 |                        [value]="_completer"
 46 |                        [tabIndex]="_disabled ? -1 : 0"
 47 |                        autocomplete="new-password"
 48 |                        (focus)="OpenDropdown()" class="ng-autocomplete-input">
 49 | 
 50 |                 <span [ngClass]="{'open': dropdown._open}" class="ng-autocomplete-dropdown-icon"
 51 |                       (click)="DropdownArray()"></span>
 52 |             </div>
 53 | 
 54 |             <div class="ng-dropdown" ngDropdown [list]="_items" [element]="element" [input]="input"
 55 |                  [ngClass]="{'is-initial-empty': _DOM.empty}"
 56 |                  [active]="_DOM.selected" [key]="group.key"
 57 |                  [completion]="group.completion"
 58 |                  (hover)="OnHoverDropdownItem($event)"
 59 |                  (selected)="SelectItem($event)"
 60 |                  (closed)="OnInputBlurred()"
 61 |             >
 62 |                 <div *ngIf="_DOM.notFound && group.noResults" class="dropdown-item no-results">
 63 |                     <ng-container *ngIf="group.noResults">
 64 |                         <ng-template *ngTemplateOutlet="group.noResults; context: {$implicit: _completer}"></ng-template>
 65 |                     </ng-container>
 66 |                 </div>
 67 | 
 68 |                 <div class="dropdown-item" *ngFor="let item of _items | keys; let i = index"
 69 |                      (click)="SelectItem(_items[item])" [ngClass]="_items[item].className">
 70 |                     <ng-container *ngIf="group.dropdownValue">
 71 |                         <ng-template
 72 |                             *ngTemplateOutlet="group.dropdownValue; context: {$implicit: _items[item], highlight: _items[item].title | highlight:_highlight}"></ng-template>
 73 |                     </ng-container>
 74 | 
 75 |                     <div *ngIf="!group.dropdownValue" [innerHTML]="_items[item].title | highlight:_highlight"></div>
 76 |                 </div>
 77 |             </div>
 78 |         </div>`,
 79 |     styles: [`
 80 |         .ng-autocomplete-inputs {
 81 |             position: relative;
 82 |         }
 83 | 
 84 |         .ng-autocomplete-inputs input[type=text]::-ms-clear,
 85 |         .ng-autocomplete-inputs input[type=text]::-ms-reveal {
 86 |             display: none;
 87 |             width: 0;
 88 |             height: 0;
 89 |         }
 90 | 
 91 |         .ng-autocomplete-inputs.completion-off {
 92 |             cursor: pointer;
 93 |         }
 94 | 
 95 |         .ng-autocomplete-inputs.completion-off input {
 96 |             pointer-events: none;
 97 |         }
 98 | 
 99 |         .ng-autocomplete-placeholder {
100 |             pointer-events: none;
101 |         }
102 | 
103 |         .ng-autocomplete-dropdown-icon {
104 | 
105 |         }
106 | 
107 |         .ng-autocomplete-dropdown .ng-dropdown {
108 |             display: none;
109 |         }
110 | 
111 |         .ng-autocomplete-dropdown .ng-dropdown.is-empty {
112 |             display: none;
113 |         }
114 | 
115 |         .ng-autocomplete-dropdown .ng-dropdown.open {
116 |             display: block;
117 |         }
118 |     `],
119 | })
120 | export class CompleterComponent implements OnInit {
121 |     @ViewChild(NgDropdownDirective, { static: true }) public dropdown: NgDropdownDirective;
122 | 
123 |     @Output() public cleared: EventEmitter<string>                     = new EventEmitter<string>();
124 |     @Output() public selected: EventEmitter<StrippedAutocompleteGroup> = new EventEmitter<StrippedAutocompleteGroup>();
125 |     // tslint:disable-next-line:no-output-rename
126 |     @Output('no-result') public noResult: EventEmitter<GroupNoResult>  = new EventEmitter<GroupNoResult>();
127 | 
128 |     @Input() public group: AutocompleteGroup = <AutocompleteGroup>{};
129 | 
130 |     _change: Subject<string>                      = new Subject<string>();
131 |     _items: { [value: string]: AutocompleteItem } = {};
132 |     _completer                                    = '';
133 |     _highlight                                    = '';
134 |     _disabled                                     = false;
135 | 
136 |     _DOM = {
137 |         notFound   : <boolean>false,
138 |         empty      : <boolean>false,
139 |         placeholder: <AutocompleteItem>null,
140 |         selected   : <string>'',
141 |         isLoading  : <boolean>false
142 | 
143 |     };
144 | 
145 |     asyncObservable = new Subject();
146 | 
147 |     constructor(private _zone: NgZone, private cdr: ChangeDetectorRef) {
148 |     }
149 | 
150 |     /**
151 |      *
152 |      */
153 |     ngOnInit() {
154 |         this._change.pipe(
155 |             debounceTime(300),
156 |             distinctUntilChanged(),
157 |             switchMap((value: string) => {
158 |                 if (this.group.async !== null) {
159 |                     return this.RunAsyncFunction(value).pipe(switchMap((res) => {
160 |                         if (res !== null) {
161 |                             this.ListenToAsyncFunction(res.value, res.values);
162 |                         }
163 |                         return of(true);
164 |                     }));
165 |                 } else {
166 |                     this.OnModelChange(value);
167 |                     return of(true);
168 |                 }
169 |             })
170 |         )
171 |             .subscribe();
172 | 
173 |         this.SetItems();
174 |     }
175 | 
176 |     /**
177 |      * Only used when completion is off.
178 |      */
179 |     RegisterClick() {
180 |         if (!this.group.completion) {
181 |             this.SwitchDropdownState();
182 |         }
183 |     }
184 | 
185 |     /**
186 |      *
187 |      */
188 |     DropdownArray() {
189 |         if (this.group.completion) {
190 |             this.SwitchDropdownState();
191 |         }
192 |     }
193 | 
194 |     /**
195 |      *
196 |      */
197 |     SwitchDropdownState() {
198 |         if (this.dropdown._open) {
199 |             this.CloseDropdown();
200 |             return;
201 |         }
202 | 
203 |         /**
204 |          *
205 |          */
206 |         this.OpenDropdown();
207 |     }
208 | 
209 |     /**
210 |      *
211 |      */
212 |     CloseDropdown() {
213 |         this.dropdown._open = false;
214 | 
215 |         /**
216 |          *
217 |          */
218 |         this._DOM.placeholder = null;
219 |     }
220 | 
221 |     /**
222 |      *
223 |      */
224 |     OpenDropdown() {
225 |         this.dropdown.Open();
226 | 
227 |         /**
228 |          *
229 |          */
230 |         this._DOM.placeholder = null;
231 |     }
232 | 
233 |     /**
234 |      *
235 |      */
236 |     SetItems() {
237 |         this._items = this.group.value;
238 |         this.IsInitialEmpty();
239 |     }
240 | 
241 |     /**
242 |      *
243 |      */
244 |     SelectItem(item: AutocompleteItem | string) {
245 |         let i: AutocompleteItem;
246 |         if (typeof item === 'string') {
247 |             i                  = this._items[item];
248 |             this._DOM.selected = item;
249 |         } else {
250 |             i                  = item;
251 |             this._DOM.selected = SearchableAutoCompleteString(item.title, item.id);
252 |         }
253 | 
254 |         this._completer = i.title;
255 |         this._highlight = '';
256 | 
257 |         this.dropdown.Close(null, true);
258 |         this.selected.emit({ group: { key: this.group.key }, item: i });
259 |     }
260 | 
261 |     ListenToAsyncFunction(value: string, values: {id: string | number, [p: string]: any}[]) {
262 |         this.group.SetNewValue(values, this.group.keys.titleKey);
263 | 
264 |         this._DOM.isLoading = false;
265 | 
266 |         this._items = this.group.value;
267 |         this.EmptySearch(this._items, value);
268 | 
269 |         // User has typed something now, results could be shown. We need to remove the "is-initial-empty" class.
270 |         this.IsInitialEmpty();
271 |         this.dropdown.Open();
272 |     }
273 | 
274 |     /**
275 |      *
276 |      */
277 |     RunAsyncFunction(value: string): Observable<{value: string, values: {id: string | number, [p: string]: any}[]}> {
278 |         this._completer = value;
279 |         this._highlight = value;
280 | 
281 |         this._DOM.selected = null;
282 | 
283 |         if (value.length === 0) {
284 |             this.group.InitialValue();
285 |             this.ClearModel();
286 | 
287 |             this.dropdown.Close('', true);
288 |             return of(null);
289 |         } else if (value.length > this.group.searchLength) {
290 |             this._DOM.isLoading = true;
291 | 
292 |             return new Observable((observer) => {
293 |                 this.group.async(value).then(values => {
294 |                     observer.next({value, values});
295 |                 });
296 |             });
297 |         }
298 |     }
299 | 
300 |     /**
301 |      *
302 |      */
303 |     OnModelChange(value: string) {
304 |         this._completer = value;
305 |         this._highlight = value;
306 | 
307 |         this._DOM.selected = null;
308 | 
309 |         if (value.length === 0) {
310 |             this.ClearModel();
311 |         } else if (value.length > this.group.searchLength) {
312 |             this.CompareItemsAndSet(value);
313 |         }
314 |     }
315 | 
316 |     /**
317 |      *
318 |      */
319 |     ClearModel() {
320 |         this._DOM.selected = null;
321 |         this._DOM.notFound = false;
322 | 
323 |         this.cleared.emit(this.group.key);
324 |     }
325 | 
326 |     /**
327 |      *
328 |      */
329 |     CompareItemsAndSet(value: string) {
330 |         const obj = {};
331 |         for (const key in this.group.value) {
332 |             if (ComparableAutoCompleteString(key).toLowerCase().indexOf(value.toLowerCase()) > -1) {
333 |                 obj[key] = this.group.value[key];
334 |             }
335 |         }
336 | 
337 |         this._items = obj;
338 |         this.EmptySearch(this._items, value);
339 | 
340 |         // User has typed something now, results could be shown. We need to remove the "is-initial-empty" class.
341 |         this.IsInitialEmpty();
342 |         this.dropdown.Open();
343 |     }
344 | 
345 |     /**
346 |      *
347 |      */
348 |     OnInputBlurred() {
349 |         if (!this.HasChosenValue()) {
350 |             /**
351 |              * Let component know completer input has been cleared -
352 |              * this function shows the list again, also resets children, if chosen.
353 |              */
354 |             this.OnModelChange('');
355 |         }
356 |     }
357 | 
358 |     /**
359 |      *
360 |      */
361 |     OnHoverDropdownItem(item: AutocompleteItem | string) {
362 |         if (typeof item === 'string') {
363 |             this._DOM.placeholder = this._items[item];
364 |             return;
365 |         }
366 |         if (item == null) {
367 |             this._DOM.placeholder = null;
368 |             return;
369 |         }
370 | 
371 |         this._DOM.placeholder = item;
372 |     }
373 | 
374 |     // =======================================================================//
375 |     // ! Utils                                                                //
376 |     // =======================================================================//
377 | 
378 |     IsInitialEmpty() {
379 |         if (Object.keys(this._items).length === 0 && this._completer.length === 0) {
380 |             this._DOM.empty = true;
381 |             return;
382 |         }
383 | 
384 |         this._DOM.empty = false;
385 |     }
386 | 
387 |     /**
388 |      *
389 |      */
390 |     HasChosenValue(): boolean {
391 |         return this._DOM.selected !== null;
392 |     }
393 | 
394 |     /**
395 |      *
396 |      */
397 |     EmptySearch(obj: Object, query: string) {
398 |         if (Object.keys(obj).length > 0) {
399 |             this._DOM.notFound = false;
400 |             return;
401 |         }
402 | 
403 |         this._DOM.notFound = true;
404 |         this.noResult.emit({ group: { key: this.group.key }, query: query });
405 |     }
406 | 
407 |     /**
408 |      *
409 |      */
410 |     ClearValue() {
411 |         this._completer    = '';
412 |         this._DOM.selected = null;
413 | 
414 |         this.group.InitialValue();
415 |         this.IsInitialEmpty();
416 |         /**
417 |          *
418 |          */
419 |         this.selected.emit({ group: { key: this.group.key }, item: null });
420 |     }
421 | }
422 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # NgAutoComplete / Example
  2 | Light-weight autocomplete component for Angular.
  3 | 
  4 | [![Code Climate](https://codeclimate.com/github/sengirab/ngAutocomplete/badges/gpa.svg)](https://codeclimate.com/github/sengirab/ngAutocomplete)
  5 | [![npm version](https://badge.fury.io/js/ng-auto-complete.svg)](https://badge.fury.io/js/ng-auto-complete)
  6 | 
  7 | 
  8 | https://github.com/sengirab/ngAutocomplete
  9 | 
 10 | ![](https://raw.githubusercontent.com/sengirab/ngAutocomplete/master/demo.gif)
 11 | 
 12 | # Installation
 13 | 
 14 | `npm i ng-auto-complete --save`
 15 | 
 16 | # Styling !Important
 17 | First thing to note, i've created this package to be as simple as possible. That's why i don't include any styling,
 18 | this is so you could style it the way you want it.
 19 | 
 20 | If you like the styling i did for the example .gif shown above, you can copy it from [here.](https://github.com/sengirab/ngAutocomplete/blob/master/src/styles.css)
 21 | ### Classes
 22 | - .ng-autocomplete-dropdown (.open .is-loading .is-async)
 23 | - .ng-autocomplete-inputs
 24 | - .ng-autocomplete-input
 25 | - .ng-autocomplete-placeholder
 26 | - .ng-autocomplete-dropdown-icon (.open)
 27 | - .ng-dropdown (.open .is-initial-empty)
 28 | - .dropdown-item (.active)
 29 | 
 30 | 
 31 | # Responses !Important
 32 | #### Response when selected
 33 | ```json
 34 | "{group: AutocompleteGroup, item: AutocompleteItem}"
 35 | ```
 36 | #### Response when cleared
 37 | ```json
 38 | "{group: AutocompleteGroup, item: null}"
 39 | ```
 40 | Note that when calling completer.ResetInput('completer'), this will clear the input. This means that the
 41 | completer will emit `{group: AutocompleteGroup, item: null}`. If your listening to this within your component
 42 | keep in mind that each clear the item will be null
 43 | 
 44 | The input will also emit "null" when the input reaches a length of `<= 0`.
 45 | 
 46 | 
 47 | # Usage
 48 | 
 49 | #### app.module.ts
 50 | ```typescript
 51 | import {BrowserModule} from "@angular/platform-browser";
 52 | import {NgModule} from "@angular/core";
 53 | import {FormsModule} from "@angular/forms";
 54 | import {HttpModule} from "@angular/http";
 55 | 
 56 | import {AppComponent} from "./app.component";
 57 | import {NgAutoCompleteModule} from "ng-auto-complete";
 58 | 
 59 | @NgModule({
 60 |     declarations: [
 61 |         AppComponent
 62 |     ],
 63 |     imports: [
 64 |         BrowserModule,
 65 |         FormsModule,
 66 |         HttpModule,
 67 |         NgAutoCompleteModule
 68 |     ],
 69 |     providers: [],
 70 |     bootstrap: [AppComponent]
 71 | })
 72 | export class AppModule {
 73 | }
 74 | ```
 75 | 
 76 | #### app.component.ts
 77 | ```typescript
 78 | import {Component, ViewChild} from "@angular/core";
 79 | import {CreateNewAutocompleteGroup, SelectedAutocompleteItem, NgAutoCompleteComponent} from "ng-auto-complete";
 80 | 
 81 | @Component({
 82 |     selector: 'app-root',
 83 |     templateUrl: './app.component.html',
 84 | })
 85 | export class AppComponent {
 86 |     @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
 87 |     
 88 |     public group = [
 89 |         CreateNewAutocompleteGroup(
 90 |             'Search / choose in / from list',
 91 |             'completer',
 92 |             [
 93 |                 {title: 'Option 1', id: '1'},
 94 |                 {title: 'Option 2', id: '2'},
 95 |                 {title: 'Option 3', id: '3'},
 96 |                 {title: 'Option 4', id: '4'},
 97 |                 {title: 'Option 5', id: '5'},
 98 |             ],
 99 |             {titleKey: 'title', childrenKey: null}
100 |         ),
101 |     ];
102 | 
103 |     constructor() {
104 | 
105 |     }
106 | 
107 |     /**
108 |      *
109 |      * @param item
110 |      * @constructor
111 |      */
112 |     Selected(item: SelectedAutocompleteItem) {
113 |         console.log(item);
114 |     }
115 | }
116 | 
117 | ```
118 | 
119 | #### app.component.html
120 | ```html
121 | <ng-autocomplete (selected)="Selected($event)" [classes]="['']" [group]="group"></ng-autocomplete>
122 | ```
123 | 
124 | # Remove selected values
125 | ```typescript
126 | public selected: any[] = [];
127 | 
128 | Selected(item: SelectedAutocompleteItem) {
129 |     this.selected.push(item.item);
130 | 
131 |     /**
132 |      * Remove selected values from list,
133 |      * selected value must be of type: {id: string(based on GUID's), [value: string]: any}[]
134 |      */
135 |     this.completer.RemovableValues('completer', this.selected)
136 | }
137 | ```
138 | 
139 | # Turn off completion
140 | In some cases you may want to disable auto completion. e.g you want a html select element.
141 | ### Example
142 | ![](https://raw.githubusercontent.com/sengirab/ngAutocomplete/master/demo2.gif)
143 | ### Usage
144 | ```typescript    
145 | public group = [
146 |     CreateNewAutocompleteGroup(
147 |         'Search / choose in / from list',
148 |         'completer',
149 |         [
150 |             {title: 'Option 1', id: '1'},
151 |             {title: 'Option 2', id: '2'},
152 |             {title: 'Option 3', id: '3'},
153 |             {title: 'Option 4', id: '4'},
154 |             {title: 'Option 5', id: '5'},
155 |         ],
156 |         {titleKey: 'title', childrenKey: null},
157 |         '',
158 |         false
159 |     )
160 | ];
161 | ```
162 | 
163 | # With children
164 | ### Usage
165 | ```typescript
166 | public group = [
167 |     CreateNewAutocompleteGroup(
168 |         'Search / choose in / from list',
169 |         'completer_one',
170 |         [
171 |             {
172 |                 title: 'Option 1', id: '1',
173 |                 children: [
174 |                     {title: 'Option 1', id: '1'},
175 |                     {title: 'Option 2', id: '2'}
176 |                 ]
177 |             },
178 |             {
179 |                 title: 'Option 2', id: '2',
180 |                 children: [
181 |                     {title: 'Option 3', id: '3'},
182 |                     {title: 'Option 4', id: '4'}
183 |                 ]
184 |             },
185 |             {
186 |                 title: 'Option 3', id: '3',
187 |                 children: [
188 |                     {title: 'Option 5', id: '5'},
189 |                     {title: 'Option 6', id: '6'}
190 |                 ]
191 |             },
192 |         ],
193 |         {titleKey: 'title', childrenKey: 'children'},
194 |         ''
195 |     ),
196 |     CreateNewAutocompleteGroup(
197 |         'Search / choose in / from list',
198 |         'completer_two',
199 |         [
200 |             {title: 'Option 1', id: '1'},
201 |             {title: 'Option 2', id: '2'},
202 |             {title: 'Option 3', id: '3'},
203 |             {title: 'Option 4', id: '4'},
204 |             {title: 'Option 5', id: '5'},
205 |             {title: 'Option 6', id: '6'},
206 |         ],
207 |         {titleKey: 'title', childrenKey: null},
208 |         'completer_one'
209 |     )
210 | ];
211 | ```
212 | 
213 | # Within a form
214 | 
215 | ### Usage:
216 | ```typescript
217 | import {Component, OnInit, ViewChild} from "@angular/core";
218 | import {FormArray, FormBuilder, FormGroup} from "@angular/forms";
219 | import {CreateNewAutocompleteGroup, SelectedAutocompleteItem, NgAutoCompleteComponent} from "ng-auto-complete";
220 | 
221 | @Component({
222 |     selector: 'app-root',
223 |     templateUrl: './app.component.html',
224 | })
225 | export class AppComponent implements OnInit {
226 |     @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
227 |     
228 |     public form: FormGroup;
229 |     public group = [
230 |         CreateNewAutocompleteGroup(
231 |             'Search / choose in / from list',
232 |             'completer',
233 |             [
234 |                 {title: 'Option 1', id: '1'},
235 |                 {title: 'Option 2', id: '2'},
236 |                 {title: 'Option 3', id: '3'},
237 |                 {title: 'Option 4', id: '4'},
238 |                 {title: 'Option 5', id: '5'},
239 |             ],
240 |             {titleKey: 'title', childrenKey: null}
241 |         ),
242 |     ];
243 | 
244 |     constructor(private _fb: FormBuilder) {
245 | 
246 |     }
247 |     
248 |     /**
249 |      *
250 |      */
251 |     ngOnInit() {
252 |         this.form = this._fb.group({
253 |             items: new FormArray([])
254 |         });
255 |     }
256 | 
257 |     /**
258 |      *
259 |      * @param item
260 |      * @constructor
261 |      */
262 |     Selected(item: SelectedAutocompleteItem) {
263 |         this.form.controls['items'] = this._fb.array([...this.form.controls['items'].value, item.original]);
264 |        
265 |         console.log(item);
266 |     }
267 | }
268 | ```
269 | 
270 | # Changelog - (Read before updating.)
271 | ## [4.1.9]
272 | - Internal fixes & performance improvements.
273 | ## [4.1.6]
274 | - I.E fixes
275 | ## [4.1.5]
276 | - New functions
277 |     - SetEnable(key: string)
278 |     - SetDisable(key: string)
279 | ## [4.1.4]
280 | - ExpressionChangedAfterItHasBeenCheckedError
281 |     - Fixed this error in a previous version, this ends up in propagating the error, this isn't user friendly.
282 |     - Since i must check something in the `ngAfterViewChecked` there is no escaping this error unless setTimeout is used (which i did now).
283 | ## [4.1.2]
284 | - Internal changes
285 |     - The way how the first value was selected is changed. Package used to wait until view was checked, this was checked
286 |     periodically via a interval. Now a subject has been created to emit this value to all their subscribers.
287 | - BREAKING:
288 |     - `FindInput` function has been removed.
289 | ## [4.0.2] - [4.0.1] - [4.0.0]
290 | - Updates regarding angular 7
291 | ## [3.1.0]
292 | ### Important. Breaking changes!
293 | - NgAutocompleteComponent renamed to NgAutoCompleteComponent
294 | - Very big changes internally. Stopped using rollup to create my npm package.
295 |     - Using angular libraries now instead.
296 | ## [3.0.0] - 2018-09-14.
297 | - Updated to newest version of angular.
298 | ## [2.10.5] - 2018-06-07
299 | - Fixed an maximum callstack exceeded bug.
300 | ## [2.10.3] / [2.10.4] - 2018-06-06
301 | - Added searchLength to options when create an autocomplete group, it configures when to fire a search. The number given is the amount of characters in the input.
302 | ## [2.10.2] - 2018-05-15.
303 | - Removed dropdown it's own comparison when using Async. Assuming the user will probably filter the results.
304 | ## [2.10.1] - 2018-05-14.
305 | - Added new classes to wrong element.
306 | ## [2.10.0] - 2018-05-14.
307 | - Changes to behaviour of the dropdown (mainly for async).
308 |   - Dropdown now only opens when there's a default value at start. It will stay closed until it has a list to show. -- Represented by the class: is-initial-empty.
309 |   - Dropdown now has a loading class; is-loading.
310 |   - Internal changes to keep the new code compatible with new behaviour.
311 | ## [2.9.12] - 2018-05-11.
312 | ### New Functionality.
313 | - Support for async functions.
314 |   - Useful for when you want to use your own API to return results.
315 |   ```typescript
316 |   @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
317 | 
318 |   const async = (str: string) => {
319 |       return new Promise((resolve) => {
320 |           setTimeout(() => {
321 |               resolve([
322 |                   {
323 |                       id: 0,
324 |                       title: `Test case 1 ${str}`
325 |                   },
326 |                   {
327 |                       id: 1,
328 |                       title: `Test case 2 ${str}`
329 |                   },
330 |                   {
331 |                       id: 2,
332 |                       title: `Test case 3 ${str}`
333 |                   }
334 |               ])
335 |           }, 2000)
336 |       });
337 |   };
338 | 
339 |   this.completer.SetAsync('completer', async);
340 |   ```
341 | ## [2.8.12] - 2018-05-09.
342 | ### New Functionality.
343 | - Created new functions to add custom ng-templates.
344 |   - Every ng template receives a context that's equal to an AutocompleteItem type. Except for the dropdownValue, this receives a hightlight too. see example
345 |   - template parameter must be of type: dropdownValue | placeholderValue | noResults
346 |    ```typescript
347 |     @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
348 | 
349 |     @ViewChild('dropdownValue') dropdownValue: TemplateRef<any>;
350 |     @ViewChild('placeholderValue') placeholderValue: TemplateRef<any>;
351 |     @ViewChild('noResults') noResults: TemplateRef<any>;
352 | 
353 |     this.completer.SetTemplate('completer', 'dropdownValue', this.dropdownValue);
354 |     this.completer.SetTemplate('completer', 'noResults', this.noResults);
355 |     this.completer.SetTemplate('completer', 'placeholderValue', this.placeholderValue);
356 |     ```
357 |     ```html
358 |     <ng-template #dropdownValue let-value let-hightlight="highlight">
359 |         <div [innerHTML]="hightlight"></div>
360 |     </ng-template>
361 |   
362 |     <ng-template #placeholderValue let-value>
363 |         {{value.title}}
364 |     </ng-template>
365 |     
366 |     <ng-template #noResults let-value>
367 |       Hey, you searched for: {{value}}. But there are no results!
368 |     </ng-template>
369 |     ```
370 | ## [2.7.12] - 2017-11-08.
371 | - Big performance refactor.
372 |     - Instead of using arrays, now uses objects. Search by object key.
373 | - New @output, (no-results) emits GroupNoResult.
374 | ## [1.5.12], [1.6.12], [1.7.12] - 2017-08-29.
375 | - A lot of internal changes & bugfixes.
376 | - In some cases when the a view has a hidden ng-content, that shows if an expression evaluates to true and 
377 |   a completer function has been used e.g(`SelectItem('completer', 5)`) it would give an error; completer view is not
378 |   initialized. 
379 |   - Functions that are called before the completer view has been initialized are now queued to be fired when the view
380 |     is actually initialized.
381 | ## [1.4.12] - 2017-08-02.
382 | - Added tab to submit events. (not preventing default, so still goes to the next input, if there's one).
383 | - Added better support for navigating with arrows. Dropdown list now navigates to the selected item if the items exceed 
384 | the dropdown its given height.
385 | - Internal code cleanup.
386 | ## [1.3.12] - 2017-07-21.
387 | - Mobile update: Remove mouseover when mobile. This prevents the user from needing to double tap the options.
388 | ## [1.3.11] - 2017-07-21.
389 | ### Styling
390 | - Some internal styling has changed.
391 |     - When completer is turned of, input used to be disabled. This doesn't work on all browsers. Input now get
392 |     `pointer-events: none;`
393 | - Browser compatibility.
394 | ### Fixes
395 | - Value has to be set on input (equal to ngModel).
396 |     - This created an issue on safari, when an item was selected, the placeholder didn't go away.
397 |     
398 | 
399 | ## [1.3.9] - 2017-07-20.
400 | ### Styling
401 | - There's a new element `span.ng-autocomplete-dropdown-icon` this replaces the dropdown icon i did with css only.
402 | ### Other changes
403 | - Increase of internal performance.
404 | - Had some issues with Element refs. #fixed.
405 | ## [1.2.8] - 2017-07-15.
406 | ### New Functionality.
407 | - It's now possible to instantiate CreateNewAutocompleteGroup with an empty array and set its value later. This can be useful
408 | when you're waiting for an async task to complete.
409 |      ```
410 |         const component = NgAutoCompleteComponent.FindCompleter('completer', this.completers);
411 |         component.SetValues(
412 |             'late', // <-- NOTE: this is the key of the input. You can call this what you want.
413 |             [
414 |                 {title: 'Option 4', id: '1'},
415 |                 {title: 'Option 5', id: '2'},
416 |                 {title: 'Option 6', id: '3'},
417 |                 {title: 'Option 7', id: '4'},
418 |                 {title: 'Option 8', id: '5'},
419 |                 {title: 'Option 9', id: '6'},
420 |             ]
421 |         )
422 |      ```
423 | 
424 | - Created new pipe to highlight search query. class `dropdown-item-highlight`
425 | ### Changes
426 | - CreateNewAutocompleteGroup now accepts {id:string|number}, before only {id:string}
427 | - Some small changes.
428 | ## [1.1.6] - 2017-07-12.
429 | - KeyEvents now preventDefault
430 | - Close dropdown on tab.
431 | - Open dropdown on focus - was only on click.
432 | - Updated README.md.
433 | 
434 | ## [1.1.5] - 2017-07-12.
435 | - Maintain active option when input is blurred - also for disabled completion inputs now.
436 | - Updated README.md.
437 | 
438 | ## [1.1.4] - 2017-07-12.
439 | - Maintain active option when input is blurred.
440 | - Updated README.md.
441 | 
442 | ## [1.1.3] - 2017-07-12.
443 | - Updated README.md.
444 | 
445 | ## [1.1.2] - 2017-07-11.
446 | - Fixed an issue; when selecting a option from a completer that is parent, active child option didn't reset.
447 | - Updated README.md.
448 | 
449 | ## [1.1.1] - 2017-07-11.
450 | ### New Functionality.
451 | - SelectItem(key: string, id: string)
452 |     - NgAutoCompleteComponent function - Set value manual, by id. This can be useful when the list is loaded
453 |     but there's a value set in the database. When the data is fetched from server, this method can be used.
454 |     ```typescript
455 |       @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
456 |       this.completer.SelectItem('completer', '1');
457 |     ```
458 |     ### Or if multiple completers in component.
459 |     
460 |     ```typescript
461 |       @ViewChildren(NgAutoCompleteComponent) public completers: QueryList<NgAutoCompleteComponent>;
462 | 
463 |       const completer = NgAutoCompleteComponent.FindCompleter('group1', this.completers);
464 |       completer.SelectItem('completer', '1');
465 |     ```
466 |     
467 | ## [1.0.1] - 2017-07-11.
468 | - Only groups with parents did a reset when the input reached a length <= 0. Now all inputs do, input with parents still get set to initial value.
469 | 
470 | ## [1.0.0] - 2017-07-11. Releasing since it's being used.
471 | ### Renamed Functions.
472 | 
473 | - ResetCompleters to ResetInputs.
474 | - ResetCompleter to ResetInput.
475 | - FindCompleter to FindInput.
476 | - TriggerChangeCompleters to TriggerChange.
477 | 
478 | ### New Functionality.
479 | - <ng-autocomplete [key]="'group1'"></ng-autocomplete> - Added key on component.
480 | - static FindCompleter usage (NgAutoCompleteComponent.FindCompleter()) (not to be confused with the old FindCompleter, now FindInput)
481 |     - (key: string, list: QueryList<NgAutoCompleteComponent>): NgAutoCompleteComponent. This can be useful when you have multiple ng-autocomplete components
482 |     in one component. Note that this  can only be used when the view has been init.
483 | 
484 | # NgAutoCompleteComponent Functions
485 | 
486 | ### Note:
487 | 
488 | <p>I have made all NgAutoCompleteComponent and CompleterComponent functions public, so you could do a lot more than i'll show you<p>
489 | <p>I've documented the functions of which i think their useful:<p>
490 | 
491 | ### Usage
492 | ```typescript
493 | @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
494 | ```
495 | 
496 | | Function | Description |
497 | | :---         |     :---:      |
498 | | FindCompleter((key: string, list: QueryList<NgAutoCompleteComponent>)) (Static function) | Finds completer |
499 | | ResetInputs()   | Resets all rendered completer inputs |
500 | | FindInput(key: string)     | Find completer input by assigned key |
501 | | RemovableValues(key: string, list: {id: string or number, [value: string]: any}[]) | Remove options from rendered list (by id) |
502 | | SelectItem(key: string, id: string or number) | e.g set an initial value on the completers input |
503 | | SetValues(key: string, {id: string or number, [value: string]: any}[]) | Sets values for the input. Useful in async situations.|
504 | 
505 | 
506 | # CompleterComponent Functions
507 | 
508 | ### Usage
509 | ```typescript
510 | @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
511 | public input = this.completer.FindInput('completer');
512 | ```
513 | 
514 | | Function | Description |
515 | | :---         |     :---:      |
516 | | ClearValue()   | Clears found completer's input. |
517 | 
518 | # Contributing
519 | 
520 | ### Do you like to code?
521 | 
522 | - Fork & clone 
523 | - npm install
524 | - ng serve
525 | - git checkout -b my-new-feature
526 | - component lives in src/app/ng-autocomplete/*
527 | - Submit a pull request
528 | 
529 | ### Do you like organizing?
530 | - Link to duplicate issues, and suggest new issue labels, to keep things organized
531 | - Go through open issues and suggest closing old ones.
532 | - Ask clarifying questions on recently opened issues to move the discussion forward
533 | 


--------------------------------------------------------------------------------