mdc-autocomplete
Version:
MdcAutocomplete in conjunction with MdcAutocompleteList and MdcAutocompleteListItem are a pack of angular components to provide an autocomplete functionality to Angular MDC web.
133 lines (132 loc) • 10.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Component, ViewChild, ContentChild, Output, EventEmitter, Input } from '@angular/core';
import { MdcTextField } from '@angular-mdc/web';
import { MdcAutocompleteList } from 'mdc-autocomplete-list';
// tslint:disable-next-line:component-class-suffix
export class MdcAutocomplete {
constructor() {
this.itemSelected = new EventEmitter();
this.label = '';
}
/**
* @return {?}
*/
get value() { return this._value; }
/**
* @param {?} val
* @return {?}
*/
set value(val) {
this._value = val;
this.autocompleteList.filter = val;
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.setNativeInputAtrributes();
this.autocompleteList.itemSelected.subscribe((itemValue) => {
this.selectedItemValue = itemValue;
this.value = itemValue.toString();
this.itemSelected.emit(itemValue);
this.autocompleteList.visible = false;
});
}
/**
* @param {?} event
* @return {?}
*/
onKeyDown(event) {
if (event.key === 'ArrowDown') {
this.autocompleteList.focusNextItem();
}
else if (event.key === 'ArrowUp') {
this.autocompleteList.focusPreviousItem();
}
else if (event.key === 'Enter') {
this.autocompleteList.selectFocusedItem();
}
}
/**
* @param {?} event
* @return {?}
*/
onKeyUp(event) {
if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Enter') {
this.onTextFieldChange();
}
}
/**
* @return {?}
*/
onTextFieldChange() {
this.autocompleteList.visible = true;
this.autocompleteList.filter = this.textField.value;
}
/**
* @param {?} focus
* @return {?}
*/
onFocus(focus) {
setTimeout(() => {
this.autocompleteList.visible = focus;
}, 100);
}
/**
* @return {?}
*/
setNativeInputAtrributes() {
/** @type {?} */
const nativeInput = this.textField.elementRef.nativeElement.querySelector('input');
nativeInput.autocomplete = 'off';
// @ts-ignore
nativeInput.autocorrect = 'off';
// @ts-ignore
nativeInput.autocapitalize = 'off';
}
}
MdcAutocomplete.decorators = [
{ type: Component, args: [{
selector: 'mdc-autocomplete',
template: `<div class="autocomplete">
<mdc-text-field #textField [(ngModel)]="value" [label]="label" (keydown)="onKeyDown($event)" (keyup)="onKeyUp($event)"
(click)="onFocus(true)" (focus)="onFocus(true)" (focusout)="onFocus(false)" (blur)="onFocus(false)"
autocomplete="off" autocorrect="off" autocapitalize="off">
</mdc-text-field>
<ng-content select="mdc-autocomplete-list"></ng-content>
</div>
`,
styles: [`.autocomplete{display:inline-block}`]
},] },
];
/** @nocollapse */
MdcAutocomplete.ctorParameters = () => [];
MdcAutocomplete.propDecorators = {
label: [{ type: Input }],
itemSelected: [{ type: Output }],
textField: [{ type: ViewChild, args: ['textField',] }],
autocompleteList: [{ type: ContentChild, args: [MdcAutocompleteList,] }]
};
if (false) {
/** @type {?} */
MdcAutocomplete.prototype.label;
/** @type {?} */
MdcAutocomplete.prototype.itemSelected;
/** @type {?} */
MdcAutocomplete.prototype.textField;
/** @type {?} */
MdcAutocomplete.prototype.autocompleteList;
/** @type {?} */
MdcAutocomplete.prototype._value;
/** @type {?} */
MdcAutocomplete.prototype.selectedItemValue;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL21kYy1hdXRvY29tcGxldGUvIiwic291cmNlcyI6WyJsaWIvYXV0b2NvbXBsZXRlL2F1dG9jb21wbGV0ZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsU0FBUyxFQUFFLFlBQVksRUFBb0IsTUFBTSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUgsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ2hELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBRTVEO0FBYUEsTUFBTTtJQWlCSjs0QkFkbUQsSUFBSSxZQUFZLEVBQUU7UUFlbkUsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7S0FDakI7Ozs7UUFWVSxLQUFLLEtBQWEsTUFBTSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7Ozs7O1FBQ3JDLEtBQUssQ0FBQyxHQUFXO1FBQzFCLElBQUksQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUFDO1FBQ2xCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUFDOzs7OztJQVNyQyxRQUFRO0tBQ1A7Ozs7SUFFRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLHdCQUF3QixFQUFFLENBQUM7UUFFaEMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsQ0FBQyxTQUFTLEVBQUUsRUFBRTtZQUN6RCxJQUFJLENBQUMsaUJBQWlCLEdBQUcsU0FBUyxDQUFDO1lBQ25DLElBQUksQ0FBQyxLQUFLLEdBQUcsU0FBUyxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ2xDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1lBQ2xDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1NBQ3ZDLENBQUMsQ0FBQztLQUNKOzs7OztJQUVELFNBQVMsQ0FBQyxLQUFvQjtRQUM1QixFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxLQUFLLFdBQVcsQ0FBQyxDQUFDLENBQUM7WUFDOUIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGFBQWEsRUFBRSxDQUFDO1NBQ3ZDO1FBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxHQUFHLEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQztZQUNuQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztTQUMzQztRQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxLQUFLLE9BQU8sQ0FBQyxDQUFDLENBQUM7WUFDakMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGlCQUFpQixFQUFFLENBQUM7U0FDM0M7S0FDRjs7Ozs7SUFDRCxPQUFPLENBQUMsS0FBb0I7UUFDMUIsRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLEdBQUcsS0FBSyxXQUFXLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxTQUFTLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxPQUFPLENBQUMsQ0FBQyxDQUFDO1lBQ2xGLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1NBQzFCO0tBQ0Y7Ozs7SUFFRCxpQkFBaUI7UUFDZixJQUFJLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNyQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDO0tBQ3JEOzs7OztJQUVELE9BQU8sQ0FBQyxLQUFjO1FBQ3BCLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztTQUN2QyxFQUFFLEdBQUcsQ0FBQyxDQUFDO0tBQ1Q7Ozs7SUFFTyx3QkFBd0I7O1FBQzlCLE1BQU0sV0FBVyxHQUFxQixJQUFJLENBQUMsU0FBUyxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3JHLFdBQVcsQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDOztRQUVqQyxXQUFXLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQzs7UUFFaEMsV0FBVyxDQUFDLGNBQWMsR0FBRyxLQUFLLENBQUM7Ozs7WUFoRnRDLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsa0JBQWtCO2dCQUM1QixRQUFRLEVBQUU7Ozs7Ozs7Q0FPWDtnQkFDQyxNQUFNLEVBQUUsQ0FBQyxxQ0FBcUMsQ0FBQzthQUNoRDs7Ozs7b0JBSUUsS0FBSzsyQkFDTCxNQUFNO3dCQUVOLFNBQVMsU0FBQyxXQUFXOytCQUNyQixZQUFZLFNBQUMsbUJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIFZpZXdDaGlsZCwgQ29udGVudENoaWxkLCBBZnRlckNvbnRlbnRJbml0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWRjVGV4dEZpZWxkIH0gZnJvbSAnQGFuZ3VsYXItbWRjL3dlYic7XHJcbmltcG9ydCB7IE1kY0F1dG9jb21wbGV0ZUxpc3QgfSBmcm9tICdtZGMtYXV0b2NvbXBsZXRlLWxpc3QnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdtZGMtYXV0b2NvbXBsZXRlJyxcclxuICB0ZW1wbGF0ZTogYDxkaXYgY2xhc3M9XCJhdXRvY29tcGxldGVcIj5cclxuICA8bWRjLXRleHQtZmllbGQgI3RleHRGaWVsZCBbKG5nTW9kZWwpXT1cInZhbHVlXCIgW2xhYmVsXT1cImxhYmVsXCIgKGtleWRvd24pPVwib25LZXlEb3duKCRldmVudClcIiAoa2V5dXApPVwib25LZXlVcCgkZXZlbnQpXCJcclxuICAoY2xpY2spPVwib25Gb2N1cyh0cnVlKVwiIChmb2N1cyk9XCJvbkZvY3VzKHRydWUpXCIgKGZvY3Vzb3V0KT1cIm9uRm9jdXMoZmFsc2UpXCIgKGJsdXIpPVwib25Gb2N1cyhmYWxzZSlcIlxyXG4gIGF1dG9jb21wbGV0ZT1cIm9mZlwiIGF1dG9jb3JyZWN0PVwib2ZmXCIgYXV0b2NhcGl0YWxpemU9XCJvZmZcIj5cclxuICA8L21kYy10ZXh0LWZpZWxkPlxyXG4gIDxuZy1jb250ZW50IHNlbGVjdD1cIm1kYy1hdXRvY29tcGxldGUtbGlzdFwiPjwvbmctY29udGVudD5cclxuPC9kaXY+XHJcbmAsXHJcbiAgc3R5bGVzOiBbYC5hdXRvY29tcGxldGV7ZGlzcGxheTppbmxpbmUtYmxvY2t9YF1cclxufSlcclxuLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOmNvbXBvbmVudC1jbGFzcy1zdWZmaXhcclxuZXhwb3J0IGNsYXNzIE1kY0F1dG9jb21wbGV0ZSBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJDb250ZW50SW5pdCB7XHJcblxyXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XHJcbiAgQE91dHB1dCgpIHB1YmxpYyBpdGVtU2VsZWN0ZWQ6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG5cclxuICBAVmlld0NoaWxkKCd0ZXh0RmllbGQnKSB0ZXh0RmllbGQ6IE1kY1RleHRGaWVsZDtcclxuICBAQ29udGVudENoaWxkKE1kY0F1dG9jb21wbGV0ZUxpc3QpIGF1dG9jb21wbGV0ZUxpc3Q6IE1kY0F1dG9jb21wbGV0ZUxpc3Q7XHJcblxyXG4gIF92YWx1ZTogc3RyaW5nO1xyXG4gIHB1YmxpYyBnZXQgdmFsdWUoKTogc3RyaW5nIHsgcmV0dXJuIHRoaXMuX3ZhbHVlOyB9XHJcbiAgcHVibGljIHNldCB2YWx1ZSh2YWw6IHN0cmluZykge1xyXG4gICAgdGhpcy5fdmFsdWUgPSB2YWw7XHJcbiAgICB0aGlzLmF1dG9jb21wbGV0ZUxpc3QuZmlsdGVyID0gdmFsO1xyXG4gIH1cclxuXHJcbiAgc2VsZWN0ZWRJdGVtVmFsdWU6IGFueTtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7XHJcbiAgICB0aGlzLmxhYmVsID0gJyc7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICB9XHJcblxyXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcclxuICAgIHRoaXMuc2V0TmF0aXZlSW5wdXRBdHJyaWJ1dGVzKCk7XHJcblxyXG4gICAgdGhpcy5hdXRvY29tcGxldGVMaXN0Lml0ZW1TZWxlY3RlZC5zdWJzY3JpYmUoKGl0ZW1WYWx1ZSkgPT4ge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkSXRlbVZhbHVlID0gaXRlbVZhbHVlO1xyXG4gICAgICB0aGlzLnZhbHVlID0gaXRlbVZhbHVlLnRvU3RyaW5nKCk7XHJcbiAgICAgIHRoaXMuaXRlbVNlbGVjdGVkLmVtaXQoaXRlbVZhbHVlKTtcclxuICAgICAgdGhpcy5hdXRvY29tcGxldGVMaXN0LnZpc2libGUgPSBmYWxzZTtcclxuICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgb25LZXlEb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XHJcbiAgICBpZiAoZXZlbnQua2V5ID09PSAnQXJyb3dEb3duJykge1xyXG4gICAgICB0aGlzLmF1dG9jb21wbGV0ZUxpc3QuZm9jdXNOZXh0SXRlbSgpO1xyXG4gICAgfSBlbHNlIGlmIChldmVudC5rZXkgPT09ICdBcnJvd1VwJykge1xyXG4gICAgICB0aGlzLmF1dG9jb21wbGV0ZUxpc3QuZm9jdXNQcmV2aW91c0l0ZW0oKTtcclxuICAgIH0gZWxzZSBpZiAoZXZlbnQua2V5ID09PSAnRW50ZXInKSB7XHJcbiAgICAgIHRoaXMuYXV0b2NvbXBsZXRlTGlzdC5zZWxlY3RGb2N1c2VkSXRlbSgpO1xyXG4gICAgfVxyXG4gIH1cclxuICBvbktleVVwKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XHJcbiAgICBpZiAoZXZlbnQua2V5ICE9PSAnQXJyb3dEb3duJyAmJiBldmVudC5rZXkgIT09ICdBcnJvd1VwJyAmJiBldmVudC5rZXkgIT09ICdFbnRlcicpIHtcclxuICAgICAgdGhpcy5vblRleHRGaWVsZENoYW5nZSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgb25UZXh0RmllbGRDaGFuZ2UoKSB7XHJcbiAgICB0aGlzLmF1dG9jb21wbGV0ZUxpc3QudmlzaWJsZSA9IHRydWU7XHJcbiAgICB0aGlzLmF1dG9jb21wbGV0ZUxpc3QuZmlsdGVyID0gdGhpcy50ZXh0RmllbGQudmFsdWU7XHJcbiAgfVxyXG5cclxuICBvbkZvY3VzKGZvY3VzOiBib29sZWFuKSB7XHJcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgdGhpcy5hdXRvY29tcGxldGVMaXN0LnZpc2libGUgPSBmb2N1cztcclxuICAgIH0sIDEwMCk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHNldE5hdGl2ZUlucHV0QXRycmlidXRlcygpIHtcclxuICAgIGNvbnN0IG5hdGl2ZUlucHV0OiBIVE1MSW5wdXRFbGVtZW50ID0gdGhpcy50ZXh0RmllbGQuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJ2lucHV0Jyk7XHJcbiAgICBuYXRpdmVJbnB1dC5hdXRvY29tcGxldGUgPSAnb2ZmJztcclxuICAgIC8vIEB0cy1pZ25vcmVcclxuICAgIG5hdGl2ZUlucHV0LmF1dG9jb3JyZWN0ID0gJ29mZic7XHJcbiAgICAvLyBAdHMtaWdub3JlXHJcbiAgICBuYXRpdmVJbnB1dC5hdXRvY2FwaXRhbGl6ZSA9ICdvZmYnO1xyXG4gIH1cclxufVxyXG4iXX0=