autocomplete-entry - npm Package Compare versions

Comparing version 0.0.1 to 1.0.1

bundles/autocomplete-entry.umd.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
-    typeof define === 'function' && define.amd ? define('autocomplete-entry', ['exports', '@angular/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["autocomplete-entry"] = {}, global.ng.core));
-})(this, (function (exports, i0) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/material/form-field'), require('@angular/material/autocomplete'), require('@angular/material/core'), require('@angular/material/select'), require('@angular/common'), require('@angular/material/input')) :
+    typeof define === 'function' && define.amd ? define('autocomplete-entry', ['exports', '@angular/core', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/material/form-field', '@angular/material/autocomplete', '@angular/material/core', '@angular/material/select', '@angular/common', '@angular/material/input'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["autocomplete-entry"] = {}, global.ng.core, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.material.formField, global.ng.material.autocomplete, global.ng.material.core, global.ng.material.select, global.ng.common, global.ng.material.input));
+})(this, (function (exports, i0, i1, rxjs, operators, i2, i3, i4, i5, i6, i7) { 'use strict';
 
@@ -26,34 +26,108 @@ function _interopNamespace(e) {
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
 
-    var AutocompleteEntryService = /** @class */ (function () {
-        function AutocompleteEntryService() {
-        }
-        return AutocompleteEntryService;
-    }());
-    AutocompleteEntryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: AutocompleteEntryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    AutocompleteEntryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: AutocompleteEntryService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: AutocompleteEntryService, decorators: [{
-                type: i0.Injectable,
-                args: [{
-                        providedIn: 'root'
-                    }]
-            }], ctorParameters: function () { return []; } });
-
+    var INPUT_VALUE_ACCESSOR = {
+        provide: i1.NG_VALUE_ACCESSOR,
+        useExisting: i0.forwardRef(function () { return AutocompleteEntryComponent; }),
+        multi: true
+    };
     var AutocompleteEntryComponent = /** @class */ (function () {
-        function AutocompleteEntryComponent() {
+        function AutocompleteEntryComponent(fb) {
+            this.fb = fb;
+            this._data = rxjs.of([]);
+            this._disabled = false;
+            this.filteredOptions = rxjs.of([]);
+            this.autocomplete = false;
+            this.required = false;
+            this.style = '';
+            this.placeholder = '';
+            this.label = '';
+            this.selectedItem = this.fb.control([null]);
+            this.onChange = function (_) { };
+            this.onTouched = function () { };
         }
+        Object.defineProperty(AutocompleteEntryComponent.prototype, "data", {
+            get: function () {
+                return this._data;
+            },
+            set: function (value) {
+                this._data = (rxjs.isObservable(value)) ? value : rxjs.of(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AutocompleteEntryComponent.prototype, "disabled", {
+            get: function () {
+                return this._disabled;
+            },
+            set: function (value) {
+                this._disabled = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         AutocompleteEntryComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this.required)
+                this.selectedItem.setValidators(i1.Validators.required);
+            this.filteredOptions = this.selectedItem.valueChanges.pipe(operators.startWith(''), operators.mergeMap(function (findItem) { return _this.data.pipe(operators.map(function (items) { return items.filter(function (item) {
+                return (item === null || item === void 0 ? void 0 : item.toLowerCase().includes(findItem === null || findItem === void 0 ? void 0 : findItem.toLowerCase()));
+            }); })); }));
         };
+        AutocompleteEntryComponent.prototype.writeValue = function (value) {
+            this.selectedItem.patchValue(value);
+        };
+        AutocompleteEntryComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        AutocompleteEntryComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        AutocompleteEntryComponent.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        AutocompleteEntryComponent.prototype.onEnter = function (value) {
+            this.onChange(value);
+        };
+        AutocompleteEntryComponent.prototype.onSelected = function (option) {
+            this.onChange(option.source.value);
+        };
+        AutocompleteEntryComponent.prototype.onBlur = function (value) {
+            this.onChange(value);
+        };
         return AutocompleteEntryComponent;
     }());
-    AutocompleteEntryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: AutocompleteEntryComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AutocompleteEntryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: AutocompleteEntryComponent, selector: "lib-autocomplete-entry", ngImport: i0__namespace, template: "\n    <p>\n      autocomplete-entry works!\n    </p>\n  ", isInline: true });
+    AutocompleteEntryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: AutocompleteEntryComponent, deps: [{ token: i1__namespace.FormBuilder }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AutocompleteEntryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: AutocompleteEntryComponent, selector: "wav-autocomplete-entry", inputs: { data: "data", disabled: "disabled", autocomplete: "autocomplete", required: "required", appearance: "appearance", style: "style", placeholder: "placeholder", label: "label" }, providers: [INPUT_VALUE_ACCESSOR], ngImport: i0__namespace, template: "\n<div *ngIf=\"autocomplete\">\n  <mat-form-field [appearance]=\"appearance\" [style]=\"style\">\n\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n\n    <input type=\"text\"\n      matInput\n      #inputData\n      [placeholder]=\"placeholder\"\n      [formControl]=\"selectedItem\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"onEnter(inputData.value)\"\n      (blur)=\"onBlur(inputData.value)\"\n    >\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\"\n    >\n      <mat-option\n        *ngFor=\"let item of (filteredOptions | async)\"\n        [value]=\"item\"\n        (onSelectionChange)=\"onSelected($event)\"\n      >\n        {{item}}\n      </mat-option>\n\n    </mat-autocomplete>\n\n  </mat-form-field>\n</div>\n\n<div *ngIf=\"!autocomplete\">\n\n  <mat-form-field [appearance]=\"appearance\" [style]=\"style\">\n\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n\n    <mat-select>\n      <mat-option\n        *ngFor=\"let item of (filteredOptions | async)\"\n        [value]=\"item\"\n        (onSelectionChange)=\"onSelected($event)\"\n      >\n        {{item}}\n      </mat-option>\n    </mat-select>\n\n  </mat-form-field>\n\n</div>\n", styles: [""], components: [{ type: i2__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.MatLabel, selector: "mat-label" }, { type: i7__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i1__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3__namespace.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: AutocompleteEntryComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'lib-autocomplete-entry',
-                        template: "\n    <p>\n      autocomplete-entry works!\n    </p>\n  ",
-                        styles: []
+                        selector: 'wav-autocomplete-entry',
+                        templateUrl: './autocomplete-entry.component.html',
+                        styleUrls: ['./autocomplete-entry.component.scss'],
+                        providers: [INPUT_VALUE_ACCESSOR]
                     }]
-            }], ctorParameters: function () { return []; } });
+            }], ctorParameters: function () { return [{ type: i1__namespace.FormBuilder }]; }, propDecorators: { data: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], autocomplete: [{
+                    type: i0.Input
+                }], required: [{
+                    type: i0.Input
+                }], appearance: [{
+                    type: i0.Input
+                }], style: [{
+                    type: i0.Input
+                }], placeholder: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }] } });
 
@@ -66,4 +140,16 @@ var AutocompleteEntryModule = /** @class */ (function () {
     AutocompleteEntryModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: AutocompleteEntryModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AutocompleteEntryModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: AutocompleteEntryModule, declarations: [AutocompleteEntryComponent], exports: [AutocompleteEntryComponent] });
-    AutocompleteEntryModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: AutocompleteEntryModule, imports: [[]] });
+    AutocompleteEntryModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: AutocompleteEntryModule, declarations: [AutocompleteEntryComponent], imports: [i6.CommonModule,
+            i2.MatFormFieldModule,
+            i7.MatInputModule,
+            i3.MatAutocompleteModule,
+            i1.ReactiveFormsModule,
+            i5.MatSelectModule], exports: [AutocompleteEntryComponent] });
+    AutocompleteEntryModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: AutocompleteEntryModule, imports: [[
+                i6.CommonModule,
+                i2.MatFormFieldModule,
+                i7.MatInputModule,
+                i3.MatAutocompleteModule,
+                i1.ReactiveFormsModule,
+                i5.MatSelectModule,
+            ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: AutocompleteEntryModule, decorators: [{
@@ -75,3 +161,10 @@ type: i0.NgModule,
                         ],
-                        imports: [],
+                        imports: [
+                            i6.CommonModule,
+                            i2.MatFormFieldModule,
+                            i7.MatInputModule,
+                            i3.MatAutocompleteModule,
+                            i1.ReactiveFormsModule,
+                            i5.MatSelectModule,
+                        ],
                         exports: [
@@ -93,3 +186,3 @@ AutocompleteEntryComponent
     exports.AutocompleteEntryModule = AutocompleteEntryModule;
-    exports.AutocompleteEntryService = AutocompleteEntryService;
+    exports.INPUT_VALUE_ACCESSOR = INPUT_VALUE_ACCESSOR;
 
@@ -96,0 +189,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

esm2015/lib/autocomplete-entry.component.js

@@ -1,26 +0,101 @@
-import { Component } from '@angular/core';
+import { Component, forwardRef, Input } from '@angular/core';
+import { NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { isObservable, of } from 'rxjs';
+import { map, mergeMap, startWith } from 'rxjs/operators';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@angular/material/form-field";
+import * as i3 from "@angular/material/autocomplete";
+import * as i4 from "@angular/material/core";
+import * as i5 from "@angular/material/select";
+import * as i6 from "@angular/common";
+import * as i7 from "@angular/material/input";
+export const INPUT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => AutocompleteEntryComponent),
+    multi: true
+};
 export class AutocompleteEntryComponent {
-    constructor() { }
+    constructor(fb) {
+        this.fb = fb;
+        this._data = of([]);
+        this._disabled = false;
+        this.filteredOptions = of([]);
+        this.autocomplete = false;
+        this.required = false;
+        this.style = '';
+        this.placeholder = '';
+        this.label = '';
+        this.selectedItem = this.fb.control([null]);
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+    }
+    set data(value) {
+        this._data = (isObservable(value)) ? value : of(value);
+    }
+    get data() {
+        return this._data;
+    }
+    set disabled(value) {
+        this._disabled = value;
+    }
+    get disabled() {
+        return this._disabled;
+    }
     ngOnInit() {
+        if (this.required)
+            this.selectedItem.setValidators(Validators.required);
+        this.filteredOptions = this.selectedItem.valueChanges.pipe(startWith(''), mergeMap(findItem => this.data.pipe(map(items => items.filter(item => {
+            return (item === null || item === void 0 ? void 0 : item.toLowerCase().includes(findItem === null || findItem === void 0 ? void 0 : findItem.toLowerCase()));
+        })))));
     }
+    writeValue(value) {
+        this.selectedItem.patchValue(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onEnter(value) {
+        this.onChange(value);
+    }
+    onSelected(option) {
+        this.onChange(option.source.value);
+    }
+    onBlur(value) {
+        this.onChange(value);
+    }
 }
-AutocompleteEntryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteEntryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: AutocompleteEntryComponent, selector: "lib-autocomplete-entry", ngImport: i0, template: `
-    <p>
-      autocomplete-entry works!
-    </p>
-  `, isInline: true });
+AutocompleteEntryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+AutocompleteEntryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: AutocompleteEntryComponent, selector: "wav-autocomplete-entry", inputs: { data: "data", disabled: "disabled", autocomplete: "autocomplete", required: "required", appearance: "appearance", style: "style", placeholder: "placeholder", label: "label" }, providers: [INPUT_VALUE_ACCESSOR], ngImport: i0, template: "\n<div *ngIf=\"autocomplete\">\n  <mat-form-field [appearance]=\"appearance\" [style]=\"style\">\n\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n\n    <input type=\"text\"\n      matInput\n      #inputData\n      [placeholder]=\"placeholder\"\n      [formControl]=\"selectedItem\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"onEnter(inputData.value)\"\n      (blur)=\"onBlur(inputData.value)\"\n    >\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\"\n    >\n      <mat-option\n        *ngFor=\"let item of (filteredOptions | async)\"\n        [value]=\"item\"\n        (onSelectionChange)=\"onSelected($event)\"\n      >\n        {{item}}\n      </mat-option>\n\n    </mat-autocomplete>\n\n  </mat-form-field>\n</div>\n\n<div *ngIf=\"!autocomplete\">\n\n  <mat-form-field [appearance]=\"appearance\" [style]=\"style\">\n\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n\n    <mat-select>\n      <mat-option\n        *ngFor=\"let item of (filteredOptions | async)\"\n        [value]=\"item\"\n        (onSelectionChange)=\"onSelected($event)\"\n      >\n        {{item}}\n      </mat-option>\n    </mat-select>\n\n  </mat-form-field>\n\n</div>\n", styles: [""], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'lib-autocomplete-entry',
-                    template: `
-    <p>
-      autocomplete-entry works!
-    </p>
-  `,
-                    styles: []
+                    selector: 'wav-autocomplete-entry',
+                    templateUrl: './autocomplete-entry.component.html',
+                    styleUrls: ['./autocomplete-entry.component.scss'],
+                    providers: [INPUT_VALUE_ACCESSOR]
                 }]
-        }], ctorParameters: function () { return []; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLWVudHJ5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2F1dG9jb21wbGV0ZS1lbnRyeS9zcmMvbGliL2F1dG9jb21wbGV0ZS1lbnRyeS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLGVBQWUsQ0FBQzs7QUFZbEQsTUFBTSxPQUFPLDBCQUEwQjtJQUVyQyxnQkFBZ0IsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQzs7d0hBTFUsMEJBQTBCOzRHQUExQiwwQkFBMEIsOERBUjNCOzs7O0dBSVQ7NEZBSVUsMEJBQTBCO2tCQVZ0QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx3QkFBd0I7b0JBQ2xDLFFBQVEsRUFBRTs7OztHQUlUO29CQUNELE1BQU0sRUFBRSxFQUNQO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWF1dG9jb21wbGV0ZS1lbnRyeScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPHA+XG4gICAgICBhdXRvY29tcGxldGUtZW50cnkgd29ya3MhXG4gICAgPC9wPlxuICBgLFxuICBzdHlsZXM6IFtcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBBdXRvY29tcGxldGVFbnRyeUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgfVxuXG59XG4iXX0=
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { data: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLWVudHJ5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2F1dG9jb21wbGV0ZS1lbnRyeS9zcmMvbGliL2F1dG9jb21wbGV0ZS1lbnRyeS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hdXRvY29tcGxldGUtZW50cnkvc3JjL2xpYi9hdXRvY29tcGxldGUtZW50cnkuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQWUsaUJBQWlCLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFNUUsT0FBTyxFQUFFLFlBQVksRUFBYyxFQUFFLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDcEQsT0FBTyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7Ozs7OztBQUUxRCxNQUFNLENBQUMsTUFBTSxvQkFBb0IsR0FBUTtJQUN2QyxPQUFPLEVBQUUsaUJBQWlCO0lBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsMEJBQTBCLENBQUM7SUFDekQsS0FBSyxFQUFFLElBQUk7Q0FDWixDQUFBO0FBUUQsTUFBTSxPQUFPLDBCQUEwQjtJQWtDckMsWUFDVSxFQUFlO1FBQWYsT0FBRSxHQUFGLEVBQUUsQ0FBYTtRQWpDekIsVUFBSyxHQUFzQixFQUFFLENBQUMsRUFBRSxDQUFDLENBQUE7UUFTakMsY0FBUyxHQUFHLEtBQUssQ0FBQTtRQVNqQixvQkFBZSxHQUFzQixFQUFFLENBQUMsRUFBRSxDQUFDLENBQUE7UUFFbEMsaUJBQVksR0FBRyxLQUFLLENBQUE7UUFDcEIsYUFBUSxHQUFHLEtBQUssQ0FBQTtRQUVoQixVQUFLLEdBQUcsRUFBRSxDQUFBO1FBQ1YsZ0JBQVcsR0FBRyxFQUFFLENBQUE7UUFDaEIsVUFBSyxHQUFHLEVBQUUsQ0FBQTtRQUVuQixpQkFBWSxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQTtRQVFwQyxJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsQ0FBTSxFQUFFLEVBQUUsR0FBRSxDQUFDLENBQUE7UUFDOUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUE7SUFDM0IsQ0FBQztJQXBDRCxJQUFhLElBQUksQ0FBQyxLQUFnQztRQUNoRCxJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxDQUFBO0lBQ3hELENBQUM7SUFFRCxJQUFJLElBQUk7UUFDTixPQUFPLElBQUksQ0FBQyxLQUFLLENBQUE7SUFDbkIsQ0FBQztJQUdELElBQWEsUUFBUSxDQUFDLEtBQWM7UUFDbEMsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUE7SUFDeEIsQ0FBQztJQUVELElBQUksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQTtJQUN2QixDQUFDO0lBdUJELFFBQVE7UUFFTixJQUFHLElBQUksQ0FBQyxRQUFRO1lBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxhQUFhLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFBO1FBRXRFLElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUN4RCxTQUFTLENBQUMsRUFBRSxDQUFDLEVBQ2IsUUFBUSxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQ2pDLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFDL0IsT0FBTyxDQUFDLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxXQUFXLEdBQUcsUUFBUSxDQUFDLFFBQVEsYUFBUixRQUFRLHVCQUFSLFFBQVEsQ0FBRSxXQUFXLEVBQUUsQ0FBQyxDQUFDLENBQUE7UUFDaEUsQ0FBQyxDQUFDLENBQUMsQ0FDSixDQUFDLENBQ0gsQ0FBQTtJQUVILENBQUM7SUFFRCxVQUFVLENBQUMsS0FBVTtRQUNuQixJQUFJLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUNyQyxDQUFDO0lBQ0QsZ0JBQWdCLENBQUMsRUFBb0I7UUFDbkMsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUE7SUFDcEIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQWM7UUFDOUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUE7SUFDckIsQ0FBQztJQUVELGdCQUFnQixDQUFDLFVBQW1CO1FBQ2xDLElBQUksQ0FBQyxRQUFRLEdBQUcsVUFBVSxDQUFBO0lBQzVCLENBQUM7SUFFRCxPQUFPLENBQUMsS0FBYTtRQUNuQixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFBO0lBQ3RCLENBQUM7SUFFRCxVQUFVLENBQUMsTUFBZ0M7UUFDekMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFBO0lBQ3BDLENBQUM7SUFFRCxNQUFNLENBQUMsS0FBYTtRQUNsQixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFBO0lBQ3RCLENBQUM7O3dIQWpGVSwwQkFBMEI7NEdBQTFCLDBCQUEwQiwyT0FGMUIsQ0FBQyxvQkFBb0IsQ0FBQywwQkNoQm5DLGlyQ0FpREE7NEZEL0JhLDBCQUEwQjtrQkFOdEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsd0JBQXdCO29CQUNsQyxXQUFXLEVBQUUscUNBQXFDO29CQUNsRCxTQUFTLEVBQUUsQ0FBQyxxQ0FBcUMsQ0FBQztvQkFDbEQsU0FBUyxFQUFFLENBQUMsb0JBQW9CLENBQUM7aUJBQ2xDO2tHQUljLElBQUk7c0JBQWhCLEtBQUs7Z0JBU08sUUFBUTtzQkFBcEIsS0FBSztnQkFVRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIGZvcndhcmRSZWYsIElucHV0LCBPbkluaXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybUJ1aWxkZXIsIE5HX1ZBTFVFX0FDQ0VTU09SLCBWYWxpZGF0b3JzIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgTWF0T3B0aW9uU2VsZWN0aW9uQ2hhbmdlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZSc7XG5pbXBvcnQgeyBpc09ic2VydmFibGUsIE9ic2VydmFibGUsIG9mIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBtYXAsIG1lcmdlTWFwLCBzdGFydFdpdGggfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbmV4cG9ydCBjb25zdCBJTlBVVF9WQUxVRV9BQ0NFU1NPUjogYW55ID0ge1xuICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQXV0b2NvbXBsZXRlRW50cnlDb21wb25lbnQpLFxuICBtdWx0aTogdHJ1ZVxufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd3YXYtYXV0b2NvbXBsZXRlLWVudHJ5JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2F1dG9jb21wbGV0ZS1lbnRyeS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2F1dG9jb21wbGV0ZS1lbnRyeS5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFtJTlBVVF9WQUxVRV9BQ0NFU1NPUl1cbn0pXG5leHBvcnQgY2xhc3MgQXV0b2NvbXBsZXRlRW50cnlDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIF9kYXRhOiBPYnNlcnZhYmxlPGFueVtdPiA9IG9mKFtdKVxuICBASW5wdXQoKSBzZXQgZGF0YSh2YWx1ZTogYW55W10gfCBPYnNlcnZhYmxlPGFueVtdPikge1xuICAgIHRoaXMuX2RhdGEgPSAoaXNPYnNlcnZhYmxlKHZhbHVlKSkgPyB2YWx1ZSA6IG9mKHZhbHVlKVxuICB9XG5cbiAgZ2V0IGRhdGEoKTogT2JzZXJ2YWJsZTxhbnlbXT4ge1xuICAgIHJldHVybiB0aGlzLl9kYXRhXG4gIH1cblxuICBfZGlzYWJsZWQgPSBmYWxzZVxuICBASW5wdXQoKSBzZXQgZGlzYWJsZWQodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9kaXNhYmxlZCA9IHZhbHVlXG4gIH1cblxuICBnZXQgZGlzYWJsZWQoKSB7XG4gICAgcmV0dXJuIHRoaXMuX2Rpc2FibGVkXG4gIH1cblxuICBmaWx0ZXJlZE9wdGlvbnM6IE9ic2VydmFibGU8YW55W10+ID0gb2YoW10pXG5cbiAgQElucHV0KCkgYXV0b2NvbXBsZXRlID0gZmFsc2VcbiAgQElucHV0KCkgcmVxdWlyZWQgPSBmYWxzZVxuICBASW5wdXQoKSBhcHBlYXJhbmNlOiBhbnlcbiAgQElucHV0KCkgc3R5bGUgPSAnJ1xuICBASW5wdXQoKSBwbGFjZWhvbGRlciA9ICcnXG4gIEBJbnB1dCgpIGxhYmVsID0gJydcblxuICBzZWxlY3RlZEl0ZW0gPSB0aGlzLmZiLmNvbnRyb2woW251bGxdKVxuXG4gIHByaXZhdGUgb25DaGFuZ2U6IEZ1bmN0aW9uXG4gIHByaXZhdGUgb25Ub3VjaGVkOiBGdW5jdGlvblxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZmI6IEZvcm1CdWlsZGVyLFxuICApIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gKF86IGFueSkgPT4ge31cbiAgICB0aGlzLm9uVG91Y2hlZCA9ICgpID0+IHt9XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcblxuICAgIGlmKHRoaXMucmVxdWlyZWQpIHRoaXMuc2VsZWN0ZWRJdGVtLnNldFZhbGlkYXRvcnMoVmFsaWRhdG9ycy5yZXF1aXJlZClcblxuICAgIHRoaXMuZmlsdGVyZWRPcHRpb25zID0gdGhpcy5zZWxlY3RlZEl0ZW0udmFsdWVDaGFuZ2VzLnBpcGUoXG4gICAgICBzdGFydFdpdGgoJycpLFxuICAgICAgbWVyZ2VNYXAoZmluZEl0ZW0gPT4gdGhpcy5kYXRhLnBpcGUoXG4gICAgICAgIG1hcChpdGVtcyA9PiBpdGVtcy5maWx0ZXIoaXRlbSA9PiB7XG4gICAgICAgICAgcmV0dXJuIChpdGVtPy50b0xvd2VyQ2FzZSgpLmluY2x1ZGVzKGZpbmRJdGVtPy50b0xvd2VyQ2FzZSgpKSlcbiAgICAgICAgfSkpLFxuICAgICAgKSksXG4gICAgKVxuXG4gIH1cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBhbnkpIHtcbiAgICB0aGlzLnNlbGVjdGVkSXRlbS5wYXRjaFZhbHVlKHZhbHVlKVxuICB9XG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IChfOiBhbnkpID0+IHZvaWQpIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm5cbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiAoKSA9PiB2b2lkKSB7XG4gICAgdGhpcy5vblRvdWNoZWQgPSBmblxuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKSB7XG4gICAgdGhpcy5kaXNhYmxlZCA9IGlzRGlzYWJsZWRcbiAgfVxuXG4gIG9uRW50ZXIodmFsdWU6IHN0cmluZykge1xuICAgIHRoaXMub25DaGFuZ2UodmFsdWUpXG4gIH1cblxuICBvblNlbGVjdGVkKG9wdGlvbjogTWF0T3B0aW9uU2VsZWN0aW9uQ2hhbmdlKSB7XG4gICAgdGhpcy5vbkNoYW5nZShvcHRpb24uc291cmNlLnZhbHVlKVxuICB9XG5cbiAgb25CbHVyKHZhbHVlOiBzdHJpbmcpIHtcbiAgICB0aGlzLm9uQ2hhbmdlKHZhbHVlKVxuICB9XG5cbn1cbiIsIlxuPGRpdiAqbmdJZj1cImF1dG9jb21wbGV0ZVwiPlxuICA8bWF0LWZvcm0tZmllbGQgW2FwcGVhcmFuY2VdPVwiYXBwZWFyYW5jZVwiIFtzdHlsZV09XCJzdHlsZVwiPlxuXG4gICAgPG1hdC1sYWJlbCAqbmdJZj1cImxhYmVsXCI+e3sgbGFiZWwgfX08L21hdC1sYWJlbD5cblxuICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiXG4gICAgICBtYXRJbnB1dFxuICAgICAgI2lucHV0RGF0YVxuICAgICAgW3BsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyXCJcbiAgICAgIFtmb3JtQ29udHJvbF09XCJzZWxlY3RlZEl0ZW1cIlxuICAgICAgW21hdEF1dG9jb21wbGV0ZV09XCJhdXRvXCJcbiAgICAgIChrZXl1cC5lbnRlcik9XCJvbkVudGVyKGlucHV0RGF0YS52YWx1ZSlcIlxuICAgICAgKGJsdXIpPVwib25CbHVyKGlucHV0RGF0YS52YWx1ZSlcIlxuICAgID5cbiAgICA8bWF0LWF1dG9jb21wbGV0ZSBhdXRvQWN0aXZlRmlyc3RPcHRpb24gI2F1dG89XCJtYXRBdXRvY29tcGxldGVcIlxuICAgID5cbiAgICAgIDxtYXQtb3B0aW9uXG4gICAgICAgICpuZ0Zvcj1cImxldCBpdGVtIG9mIChmaWx0ZXJlZE9wdGlvbnMgfCBhc3luYylcIlxuICAgICAgICBbdmFsdWVdPVwiaXRlbVwiXG4gICAgICAgIChvblNlbGVjdGlvbkNoYW5nZSk9XCJvblNlbGVjdGVkKCRldmVudClcIlxuICAgICAgPlxuICAgICAgICB7e2l0ZW19fVxuICAgICAgPC9tYXQtb3B0aW9uPlxuXG4gICAgPC9tYXQtYXV0b2NvbXBsZXRlPlxuXG4gIDwvbWF0LWZvcm0tZmllbGQ+XG48L2Rpdj5cblxuPGRpdiAqbmdJZj1cIiFhdXRvY29tcGxldGVcIj5cblxuICA8bWF0LWZvcm0tZmllbGQgW2FwcGVhcmFuY2VdPVwiYXBwZWFyYW5jZVwiIFtzdHlsZV09XCJzdHlsZVwiPlxuXG4gICAgPG1hdC1sYWJlbCAqbmdJZj1cImxhYmVsXCI+e3sgbGFiZWwgfX08L21hdC1sYWJlbD5cblxuICAgIDxtYXQtc2VsZWN0PlxuICAgICAgPG1hdC1vcHRpb25cbiAgICAgICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgKGZpbHRlcmVkT3B0aW9ucyB8IGFzeW5jKVwiXG4gICAgICAgIFt2YWx1ZV09XCJpdGVtXCJcbiAgICAgICAgKG9uU2VsZWN0aW9uQ2hhbmdlKT1cIm9uU2VsZWN0ZWQoJGV2ZW50KVwiXG4gICAgICA+XG4gICAgICAgIHt7aXRlbX19XG4gICAgICA8L21hdC1vcHRpb24+XG4gICAgPC9tYXQtc2VsZWN0PlxuXG4gIDwvbWF0LWZvcm0tZmllbGQ+XG5cbjwvZGl2PlxuIl19

esm2015/lib/autocomplete-entry.module.js

 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatSelectModule } from '@angular/material/select';
 import { AutocompleteEntryComponent } from './autocomplete-entry.component';
@@ -7,4 +13,16 @@ import * as i0 from "@angular/core";
 AutocompleteEntryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AutocompleteEntryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryModule, declarations: [AutocompleteEntryComponent], exports: [AutocompleteEntryComponent] });
-AutocompleteEntryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryModule, imports: [[]] });
+AutocompleteEntryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryModule, declarations: [AutocompleteEntryComponent], imports: [CommonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatAutocompleteModule,
+        ReactiveFormsModule,
+        MatSelectModule], exports: [AutocompleteEntryComponent] });
+AutocompleteEntryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryModule, imports: [[
+            CommonModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatAutocompleteModule,
+            ReactiveFormsModule,
+            MatSelectModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryModule, decorators: [{
@@ -16,3 +34,10 @@ type: NgModule,
                     ],
-                    imports: [],
+                    imports: [
+                        CommonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatAutocompleteModule,
+                        ReactiveFormsModule,
+                        MatSelectModule,
+                    ],
                     exports: [
@@ -23,2 +48,2 @@ AutocompleteEntryComponent
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLWVudHJ5Lm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2F1dG9jb21wbGV0ZS1lbnRyeS9zcmMvbGliL2F1dG9jb21wbGV0ZS1lbnRyeS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7QUFjNUUsTUFBTSxPQUFPLHVCQUF1Qjs7cUhBQXZCLHVCQUF1QjtzSEFBdkIsdUJBQXVCLGlCQVJoQywwQkFBMEIsYUFLMUIsMEJBQTBCO3NIQUdqQix1QkFBdUIsWUFOekIsRUFDUjs0RkFLVSx1QkFBdUI7a0JBVm5DLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLDBCQUEwQjtxQkFDM0I7b0JBQ0QsT0FBTyxFQUFFLEVBQ1I7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLDBCQUEwQjtxQkFDM0I7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQXV0b2NvbXBsZXRlRW50cnlDb21wb25lbnQgfSBmcm9tICcuL2F1dG9jb21wbGV0ZS1lbnRyeS5jb21wb25lbnQnO1xuXG5cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgQXV0b2NvbXBsZXRlRW50cnlDb21wb25lbnRcbiAgXSxcbiAgaW1wb3J0czogW1xuICBdLFxuICBleHBvcnRzOiBbXG4gICAgQXV0b2NvbXBsZXRlRW50cnlDb21wb25lbnRcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBBdXRvY29tcGxldGVFbnRyeU1vZHVsZSB7IH1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLWVudHJ5Lm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2F1dG9jb21wbGV0ZS1lbnRyeS9zcmMvbGliL2F1dG9jb21wbGV0ZS1lbnRyeS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDckQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUUzRCxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7QUFtQjVFLE1BQU0sT0FBTyx1QkFBdUI7O3FIQUF2Qix1QkFBdUI7c0hBQXZCLHVCQUF1QixpQkFkaEMsMEJBQTBCLGFBRzFCLFlBQVk7UUFDWixrQkFBa0I7UUFDbEIsY0FBYztRQUNkLHFCQUFxQjtRQUNyQixtQkFBbUI7UUFDbkIsZUFBZSxhQUdmLDBCQUEwQjtzSEFHakIsdUJBQXVCLFlBWnpCO1lBQ1AsWUFBWTtZQUNaLGtCQUFrQjtZQUNsQixjQUFjO1lBQ2QscUJBQXFCO1lBQ3JCLG1CQUFtQjtZQUNuQixlQUFlO1NBQ2hCOzRGQUtVLHVCQUF1QjtrQkFoQm5DLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLDBCQUEwQjtxQkFDM0I7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osa0JBQWtCO3dCQUNsQixjQUFjO3dCQUNkLHFCQUFxQjt3QkFDckIsbUJBQW1CO3dCQUNuQixlQUFlO3FCQUNoQjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsMEJBQTBCO3FCQUMzQjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbIlxuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbmltcG9ydCB7IFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBNYXRGb3JtRmllbGRNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9mb3JtLWZpZWxkJztcbmltcG9ydCB7IE1hdElucHV0TW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaW5wdXQnO1xuaW1wb3J0IHsgTWF0QXV0b2NvbXBsZXRlTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYXV0b2NvbXBsZXRlJztcbmltcG9ydCB7IE1hdFNlbGVjdE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3NlbGVjdCc7XG5cbmltcG9ydCB7IEF1dG9jb21wbGV0ZUVudHJ5Q29tcG9uZW50IH0gZnJvbSAnLi9hdXRvY29tcGxldGUtZW50cnkuY29tcG9uZW50JztcblxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBBdXRvY29tcGxldGVFbnRyeUNvbXBvbmVudFxuICBdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIE1hdEZvcm1GaWVsZE1vZHVsZSxcbiAgICBNYXRJbnB1dE1vZHVsZSxcbiAgICBNYXRBdXRvY29tcGxldGVNb2R1bGUsXG4gICAgUmVhY3RpdmVGb3Jtc01vZHVsZSxcbiAgICBNYXRTZWxlY3RNb2R1bGUsXG4gIF0sXG4gIGV4cG9ydHM6IFtcbiAgICBBdXRvY29tcGxldGVFbnRyeUNvbXBvbmVudFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIEF1dG9jb21wbGV0ZUVudHJ5TW9kdWxlIHsgfVxuIl19

esm2015/public-api.js

 /*
  * Public API Surface of autocomplete-entry
  */
-export * from './lib/autocomplete-entry.service';
 export * from './lib/autocomplete-entry.component';
 export * from './lib/autocomplete-entry.module';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2F1dG9jb21wbGV0ZS1lbnRyeS9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyxvQ0FBb0MsQ0FBQztBQUNuRCxjQUFjLGlDQUFpQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBhdXRvY29tcGxldGUtZW50cnlcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9hdXRvY29tcGxldGUtZW50cnkuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9hdXRvY29tcGxldGUtZW50cnkuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2F1dG9jb21wbGV0ZS1lbnRyeS5tb2R1bGUnO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2F1dG9jb21wbGV0ZS1lbnRyeS9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsb0NBQW9DLENBQUM7QUFDbkQsY0FBYyxpQ0FBaUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgYXV0b2NvbXBsZXRlLWVudHJ5XG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvYXV0b2NvbXBsZXRlLWVudHJ5LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9hdXRvY29tcGxldGUtZW50cnkubW9kdWxlJztcbiJdfQ==

fesm2015/autocomplete-entry.js

 import * as i0 from '@angular/core';
-import { Injectable, Component, NgModule } from '@angular/core';
+import { forwardRef, Component, Input, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, Validators, ReactiveFormsModule } from '@angular/forms';
+import { of, isObservable } from 'rxjs';
+import { startWith, mergeMap, map } from 'rxjs/operators';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i4 from '@angular/material/core';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i7 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 
-class AutocompleteEntryService {
-    constructor() { }
-}
-AutocompleteEntryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AutocompleteEntryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
-
+const INPUT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => AutocompleteEntryComponent),
+    multi: true
+};
 class AutocompleteEntryComponent {
-    constructor() { }
+    constructor(fb) {
+        this.fb = fb;
+        this._data = of([]);
+        this._disabled = false;
+        this.filteredOptions = of([]);
+        this.autocomplete = false;
+        this.required = false;
+        this.style = '';
+        this.placeholder = '';
+        this.label = '';
+        this.selectedItem = this.fb.control([null]);
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+    }
+    set data(value) {
+        this._data = (isObservable(value)) ? value : of(value);
+    }
+    get data() {
+        return this._data;
+    }
+    set disabled(value) {
+        this._disabled = value;
+    }
+    get disabled() {
+        return this._disabled;
+    }
     ngOnInit() {
+        if (this.required)
+            this.selectedItem.setValidators(Validators.required);
+        this.filteredOptions = this.selectedItem.valueChanges.pipe(startWith(''), mergeMap(findItem => this.data.pipe(map(items => items.filter(item => {
+            return (item === null || item === void 0 ? void 0 : item.toLowerCase().includes(findItem === null || findItem === void 0 ? void 0 : findItem.toLowerCase()));
+        })))));
     }
+    writeValue(value) {
+        this.selectedItem.patchValue(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onEnter(value) {
+        this.onChange(value);
+    }
+    onSelected(option) {
+        this.onChange(option.source.value);
+    }
+    onBlur(value) {
+        this.onChange(value);
+    }
 }
-AutocompleteEntryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteEntryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: AutocompleteEntryComponent, selector: "lib-autocomplete-entry", ngImport: i0, template: `
-    <p>
-      autocomplete-entry works!
-    </p>
-  `, isInline: true });
+AutocompleteEntryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+AutocompleteEntryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: AutocompleteEntryComponent, selector: "wav-autocomplete-entry", inputs: { data: "data", disabled: "disabled", autocomplete: "autocomplete", required: "required", appearance: "appearance", style: "style", placeholder: "placeholder", label: "label" }, providers: [INPUT_VALUE_ACCESSOR], ngImport: i0, template: "\n<div *ngIf=\"autocomplete\">\n  <mat-form-field [appearance]=\"appearance\" [style]=\"style\">\n\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n\n    <input type=\"text\"\n      matInput\n      #inputData\n      [placeholder]=\"placeholder\"\n      [formControl]=\"selectedItem\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"onEnter(inputData.value)\"\n      (blur)=\"onBlur(inputData.value)\"\n    >\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\"\n    >\n      <mat-option\n        *ngFor=\"let item of (filteredOptions | async)\"\n        [value]=\"item\"\n        (onSelectionChange)=\"onSelected($event)\"\n      >\n        {{item}}\n      </mat-option>\n\n    </mat-autocomplete>\n\n  </mat-form-field>\n</div>\n\n<div *ngIf=\"!autocomplete\">\n\n  <mat-form-field [appearance]=\"appearance\" [style]=\"style\">\n\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n\n    <mat-select>\n      <mat-option\n        *ngFor=\"let item of (filteredOptions | async)\"\n        [value]=\"item\"\n        (onSelectionChange)=\"onSelected($event)\"\n      >\n        {{item}}\n      </mat-option>\n    </mat-select>\n\n  </mat-form-field>\n\n</div>\n", styles: [""], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'lib-autocomplete-entry',
-                    template: `
-    <p>
-      autocomplete-entry works!
-    </p>
-  `,
-                    styles: []
+                    selector: 'wav-autocomplete-entry',
+                    templateUrl: './autocomplete-entry.component.html',
+                    styleUrls: ['./autocomplete-entry.component.scss'],
+                    providers: [INPUT_VALUE_ACCESSOR]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { data: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
 
@@ -43,4 +111,16 @@ class AutocompleteEntryModule {
 AutocompleteEntryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AutocompleteEntryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryModule, declarations: [AutocompleteEntryComponent], exports: [AutocompleteEntryComponent] });
-AutocompleteEntryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryModule, imports: [[]] });
+AutocompleteEntryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryModule, declarations: [AutocompleteEntryComponent], imports: [CommonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatAutocompleteModule,
+        ReactiveFormsModule,
+        MatSelectModule], exports: [AutocompleteEntryComponent] });
+AutocompleteEntryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryModule, imports: [[
+            CommonModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatAutocompleteModule,
+            ReactiveFormsModule,
+            MatSelectModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: AutocompleteEntryModule, decorators: [{
@@ -52,3 +132,10 @@ type: NgModule,
                     ],
-                    imports: [],
+                    imports: [
+                        CommonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatAutocompleteModule,
+                        ReactiveFormsModule,
+                        MatSelectModule,
+                    ],
                     exports: [
@@ -68,3 +155,3 @@ AutocompleteEntryComponent
 
-export { AutocompleteEntryComponent, AutocompleteEntryModule, AutocompleteEntryService };
+export { AutocompleteEntryComponent, AutocompleteEntryModule, INPUT_VALUE_ACCESSOR };
 //# sourceMappingURL=autocomplete-entry.js.map

lib/autocomplete-entry.component.d.ts

 import { OnInit } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { MatOptionSelectionChange } from '@angular/material/core';
+import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
+export declare const INPUT_VALUE_ACCESSOR: any;
 export declare class AutocompleteEntryComponent implements OnInit {
-    constructor();
+    private fb;
+    _data: Observable<any[]>;
+    set data(value: any[] | Observable<any[]>);
+    get data(): Observable<any[]>;
+    _disabled: boolean;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    filteredOptions: Observable<any[]>;
+    autocomplete: boolean;
+    required: boolean;
+    appearance: any;
+    style: string;
+    placeholder: string;
+    label: string;
+    selectedItem: import("@angular/forms").FormControl;
+    private onChange;
+    private onTouched;
+    constructor(fb: FormBuilder);
     ngOnInit(): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: (_: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    onEnter(value: string): void;
+    onSelected(option: MatOptionSelectionChange): void;
+    onBlur(value: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteEntryComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteEntryComponent, "lib-autocomplete-entry", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteEntryComponent, "wav-autocomplete-entry", never, { "data": "data"; "disabled": "disabled"; "autocomplete": "autocomplete"; "required": "required"; "appearance": "appearance"; "style": "style"; "placeholder": "placeholder"; "label": "label"; }, {}, never, never>;
 }

lib/autocomplete-entry.module.d.ts

 import * as i0 from "@angular/core";
 import * as i1 from "./autocomplete-entry.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/form-field";
+import * as i4 from "@angular/material/input";
+import * as i5 from "@angular/material/autocomplete";
+import * as i6 from "@angular/forms";
+import * as i7 from "@angular/material/select";
 export declare class AutocompleteEntryModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteEntryModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AutocompleteEntryModule, [typeof i1.AutocompleteEntryComponent], never, [typeof i1.AutocompleteEntryComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AutocompleteEntryModule, [typeof i1.AutocompleteEntryComponent], [typeof i2.CommonModule, typeof i3.MatFormFieldModule, typeof i4.MatInputModule, typeof i5.MatAutocompleteModule, typeof i6.ReactiveFormsModule, typeof i7.MatSelectModule], [typeof i1.AutocompleteEntryComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AutocompleteEntryModule>;
 }

package.json

 {
   "name": "autocomplete-entry",
-  "version": "0.0.1",
+  "version": "1.0.1",
+  "description": "This Angular Component (Module) allows you to have an autocomplete or select menu. You can provide an array of objects or an Observable array of objects",
+  "author": "Mike Boni <[e-mail]> (http://wavecoders.ca)",
+  "license": "ISC",
+  "keywords": [
+    "angular",
+    "autocomplete",
+    "material",
+    "menu",
+    "selection",
+    "dropdown"
+  ],
+  "homepage": "https://wavecoders.ca",
   "peerDependencies": {
@@ -5,0 +17,0 @@ "@angular/common": "^12.2.0",

public-api.d.ts

@@ -1,3 +0,2 @@
-export * from './lib/autocomplete-entry.service';
 export * from './lib/autocomplete-entry.component';
 export * from './lib/autocomplete-entry.module';

README.md

 # AutocompleteEntry
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
+This Angular Module (Component) allows you to have an autocomplete or select menu. You can provide an array of objects or an Observable array of objects. This formControl will return the selected or entered item. Blur and Enter also have been implemented. 
 
-## Code scaffolding
+![image](https://github.com/wavecoders/npm/raw/master/projects/color-selection/?raw=true)
 
-Run `ng generate component component-name --project autocomplete-entry` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project autocomplete-entry`.
-> Note: Don't forget to add `--project autocomplete-entry` or else it will be added to the default project in your `angular.json` file. 
+## Installation
+```
+npm install autocomplete-entry
+```
 
-## Build
+## Scaffolding
 
-Run `ng build autocomplete-entry` to build the project. The build artifacts will be stored in the `dist/` directory.
+Import the module into your project under imports
 
-## Publishing
+```
+imports: [
+    BrowserModule,
+    AppRoutingModule,
+    AutocompleteEntryModule
+  ],
+```
 
-After building your library with `ng build autocomplete-entry`, go to the dist folder `cd dist/autocomplete-entry` and run `npm publish`.
+## Use
 
-## Running unit tests
+To use in your component, use the following tag
 
-Run `ng test autocomplete-entry` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```
+<app-autocomplete-selection></app-autocomplete-selection>
+```
 
-## Further help
+## Inputs
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+### Standard inputs
+
+>data STRING[] Data for autocomplete               STRING[] | Observable
+>autocomplete  TRUE - Auto Filter Complete Entry 
+               FALSE - Standard Dropdown Menu      BOOLEAN
+>placeholder   inside label for the input field    STRING
+>label         label for the fiels                 STRING
+
+### Optional
+
+>required        Add validation for required       BOOLEAN
+>appearance      Input Field Appearance            STRING (outline, filled)
+>style           Styles for input field            STRING - ex: width:400px; color:red
+
+Here is an example
+```
+<wav-autocomplete-selection
+  formControlName="country"
+  [data]="countries"
+  [autocomplete]="true"
+  [placeholder]="'Canada'"
+  [label]="'Country'"
+></wav-autocomplete-selection>
+```
+
+Here is an example with 2 autocomplete types and different options. 
+The button will display in the console the selection whether its entered or selected.
+```
+<div [formGroup]="autoForm" style="padding: 24px;">
+
+  <wav-autocomplete-selection
+    formControlName="country1"
+    [data]="countries"
+    [autocomplete]="true"
+    [required]="true"
+    [appearance]="'outline'"
+    [style]="'width:400px; color:red'"
+    [placeholder]="'Canada'"
+    [label]="'Country'"
+  ></wav-autocomplete-selection>
+
+  <wav-autocomplete-selection
+    formControlName="country2"
+    [data]="countries"
+    [autocomplete]="false"
+    [required]="false"
+    [appearance]="'outline'"
+    [style]="'width:400px; color:red'"
+    [placeholder]="'Canada'"
+    [label]="'Country'"
+  ></wav-autocomplete-selection>
+
+  <button mat-button (click)="onSubmit()">Submit</button>
+
+</div>
+```
+
+In the component we define the menu's contents and define the form
+```
+countries = ['Canada', 'United States', 'Russia', 'China']
+country = ''
+
+autoForm = this.fb.group({
+  country1: [null], country2: [null]
+})
+
+```
+The onSubmit action connectd to the button click event
+```
+onSubmit() {
+  this.autoForm.markAllAsTouched()
+  if(this.autoForm.valid) console.log('valid:',this.autoForm.value)
+  console.log(this.autoForm.value, this.autoForm.valid)
+}
+```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66759

increased by188.1%

Number of low license alerts

0

decreased by-100%

Lines of code

577

increased by136.48%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

109

increased by336%

Worsened metrics

Number of package files

14

decreased by-12.5%

Number of low supply chain risk alerts

4

increased by300%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes