{"__symbolic":"module","version":4,"metadata":{"AutocompleteService":{"__symbolic":"interface"},"NgMatAutocompleteModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressBarModule","line":18,"character":4}],"declarations":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"ng-mat-autocomplete","template":"<mat-form-field class=\"input-container\" [floatLabel]=\"floatLabel\">\n  <input matInput\n         *ngIf=\"formControl\"\n         [formControl]=\"formControl\"\n         [name]=\"name\"\n         [matAutocomplete]=\"autocomplete\"\n         [placeholder]=\"placeholder\"\n         (keyup)=\"onKey($event)\"\n         (focus)=\"onFocus($event)\"\n         (blur)=\"onBlur($event)\"\n         #autocompleteInput\n  />\n  <input matInput\n         *ngIf=\"!formControl\"\n         [name]=\"name\"\n         [matAutocomplete]=\"autocomplete\"       \n         [placeholder]=\"placeholder\"\n         (keyup)=\"onKey($event)\"\n         (focus)=\"onFocus($event)\"\n         (blur)=\"onBlur($event)\"\n         #autocompleteInput\n  />\n  <button *ngIf=\"hasSearchButton\" #searchButton mat-button matPrefix mat-icon-button aria-label=\"Search\" (click)=\"search()\" type=\"button\">\n      <mat-icon class=\"search-icon\">search</mat-icon>\n  </button>\n  <button *ngIf=\"selectedOption || query\" mat-button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearValue()\" #clearButton type=\"button\">\n    <mat-icon class=\"clear-icon\">clear</mat-icon>\n  </button>\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"hasProgressBar && requestsInQueue > 0\"></mat-progress-bar>\n  <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                    [displayWith]=\"autocompleteDisplayFn()\"\n                    (optionSelected)=\"autocompleteSelected($event)\">\n    <mat-option *ngFor=\"let item of autocompleteList\" [value]=\"item\">\n      <ng-template [ngIf]=\"displayTemplate\">\n        <ng-container *ngTemplateOutlet=\"displayTemplate; context: {$implicit: item}\"></ng-container>\n      </ng-template>\n      <span *ngIf=\"!displayTemplate\">\n        {{viewItem(item)}}\n      </span>\n    </mat-option>\n    <mat-option *ngIf=\"query && noSuggestions\" disabled>\n      <span>Sorry, no suggestions were found</span>\n    </mat-option>\n    <mat-option *ngIf=\"query && noSuggestions && showAddNew\" [value]=\"query\" (click)=\"onCreateNew()\">\n      <mat-icon class=\"add-icon\">add</mat-icon> <span class=\"create-new\"> {{addNewText}} </span>\n    </mat-option>\n  </mat-autocomplete>\n  <mat-error>\n    {{ validationErrors && validationErrors.length > 0 ? validationErrors[0] : ''}}\n  </mat-error>\n</mat-form-field>\n\n","styles":[".input-container{width:100%}.search-icon{font-size:24px}.mat-progress-bar{position:absolute}.create-new{color:#27ae60}.add-icon{position:relative;color:#27ae60}"],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":63,"character":13},"useExisting":{"__symbolic":"reference","name":"ɵa"},"multi":true}]}]}],"members":{"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":3}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":3}}]}],"floatLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":3}}]}],"formControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":3}}]}],"doPrefetch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":3}}]}],"displayItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":3}}]}],"hasSearchButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3}}]}],"hasProgressBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":3}}]}],"minChars":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":3}}]}],"clearAfterSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":3}}]}],"showAddNew":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":3}}]}],"addNewText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":3}}]}],"isFocused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":3}}]}],"validationErrors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":3}}]}],"serviceParams":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":3}}]}],"displayItemFn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3}}]}],"displayTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3}}]}],"transformResult":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":132,"character":3}}]}],"optionSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":133,"character":3}}]}],"createNew":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":134,"character":3}}]}],"autocompleteInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":136,"character":3},"arguments":["autocompleteInput"]}]}],"autocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":137,"character":3},"arguments":["autocomplete"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"prefetch":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"fetch":[{"__symbolic":"method"}],"filterStoredItems":[{"__symbolic":"method"}],"autocompleteSelected":[{"__symbolic":"method"}],"autocompleteDisplayFn":[{"__symbolic":"method"}],"onKey":[{"__symbolic":"method"}],"onKeyCallback":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"viewItem":[{"__symbolic":"method"}],"clearValue":[{"__symbolic":"method"}],"onCreateNew":[{"__symbolic":"method"}],"isQueryEmpty":[{"__symbolic":"method"}],"isAutocompleteService":[{"__symbolic":"method"}],"saveReturnType":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}}},"origins":{"AutocompleteService":"./src/app/autocomplete/autocomplete.service","NgMatAutocompleteModule":"./src/app/autocomplete/autocomplete.module","ɵa":"./src/app/autocomplete/autocomplete.component"},"importAs":"@vguleaev/angular-material-autocomplete"}