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.
157 lines (156 loc) • 12 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';
var MdcAutocomplete = /** @class */ (function () {
function MdcAutocomplete() {
this.itemSelected = new EventEmitter();
this.label = '';
}
Object.defineProperty(MdcAutocomplete.prototype, "value", {
get: /**
* @return {?}
*/
function () { return this._value; },
set: /**
* @param {?} val
* @return {?}
*/
function (val) {
this._value = val;
this.autocompleteList.filter = val;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcAutocomplete.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @return {?}
*/
MdcAutocomplete.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this.setNativeInputAtrributes();
this.autocompleteList.itemSelected.subscribe(function (itemValue) {
_this.selectedItemValue = itemValue;
_this.value = itemValue.toString();
_this.itemSelected.emit(itemValue);
_this.autocompleteList.visible = false;
});
};
/**
* @param {?} event
* @return {?}
*/
MdcAutocomplete.prototype.onKeyDown = /**
* @param {?} event
* @return {?}
*/
function (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 {?}
*/
MdcAutocomplete.prototype.onKeyUp = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Enter') {
this.onTextFieldChange();
}
};
/**
* @return {?}
*/
MdcAutocomplete.prototype.onTextFieldChange = /**
* @return {?}
*/
function () {
this.autocompleteList.visible = true;
this.autocompleteList.filter = this.textField.value;
};
/**
* @param {?} focus
* @return {?}
*/
MdcAutocomplete.prototype.onFocus = /**
* @param {?} focus
* @return {?}
*/
function (focus) {
var _this = this;
setTimeout(function () {
_this.autocompleteList.visible = focus;
}, 100);
};
/**
* @return {?}
*/
MdcAutocomplete.prototype.setNativeInputAtrributes = /**
* @return {?}
*/
function () {
/** @type {?} */
var 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\">\n <mdc-text-field #textField [(ngModel)]=\"value\" [label]=\"label\" (keydown)=\"onKeyDown($event)\" (keyup)=\"onKeyUp($event)\"\n (click)=\"onFocus(true)\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\" (blur)=\"onFocus(false)\"\n autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\">\n </mdc-text-field>\n <ng-content select=\"mdc-autocomplete-list\"></ng-content>\n</div>\n",
styles: [".autocomplete{display:inline-block}"]
},] },
];
/** @nocollapse */
MdcAutocomplete.ctorParameters = function () { return []; };
MdcAutocomplete.propDecorators = {
label: [{ type: Input }],
itemSelected: [{ type: Output }],
textField: [{ type: ViewChild, args: ['textField',] }],
autocompleteList: [{ type: ContentChild, args: [MdcAutocompleteList,] }]
};
return MdcAutocomplete;
}());
export { MdcAutocomplete };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL21kYy1hdXRvY29tcGxldGUvIiwic291cmNlcyI6WyJsaWIvYXV0b2NvbXBsZXRlL2F1dG9jb21wbGV0ZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsU0FBUyxFQUFFLFlBQVksRUFBb0IsTUFBTSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUgsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ2hELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDOztJQWdDMUQ7NEJBZG1ELElBQUksWUFBWSxFQUFFO1FBZW5FLElBQUksQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO0tBQ2pCOzBCQVZVLGtDQUFLOzs7O3NCQUFhLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDOzs7OztrQkFDL0IsR0FBVztZQUMxQixJQUFJLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQztZQUNsQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQzs7Ozs7Ozs7SUFTckMsa0NBQVE7OztJQUFSO0tBQ0M7Ozs7SUFFRCw0Q0FBa0I7OztJQUFsQjtRQUFBLGlCQVNDO1FBUkMsSUFBSSxDQUFDLHdCQUF3QixFQUFFLENBQUM7UUFFaEMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsVUFBQyxTQUFTO1lBQ3JELEtBQUksQ0FBQyxpQkFBaUIsR0FBRyxTQUFTLENBQUM7WUFDbkMsS0FBSSxDQUFDLEtBQUssR0FBRyxTQUFTLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDbEMsS0FBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7WUFDbEMsS0FBSSxDQUFDLGdCQUFnQixDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7U0FDdkMsQ0FBQyxDQUFDO0tBQ0o7Ozs7O0lBRUQsbUNBQVM7Ozs7SUFBVCxVQUFVLEtBQW9CO1FBQzVCLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxHQUFHLEtBQUssV0FBVyxDQUFDLENBQUMsQ0FBQztZQUM5QixJQUFJLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxFQUFFLENBQUM7U0FDdkM7UUFBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLEdBQUcsS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDO1lBQ25DLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1NBQzNDO1FBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxHQUFHLEtBQUssT0FBTyxDQUFDLENBQUMsQ0FBQztZQUNqQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztTQUMzQztLQUNGOzs7OztJQUNELGlDQUFPOzs7O0lBQVAsVUFBUSxLQUFvQjtRQUMxQixFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxLQUFLLFdBQVcsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLFNBQVMsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLE9BQU8sQ0FBQyxDQUFDLENBQUM7WUFDbEYsSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7U0FDMUI7S0FDRjs7OztJQUVELDJDQUFpQjs7O0lBQWpCO1FBQ0UsSUFBSSxDQUFDLGdCQUFnQixDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7UUFDckMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQztLQUNyRDs7Ozs7SUFFRCxpQ0FBTzs7OztJQUFQLFVBQVEsS0FBYztRQUF0QixpQkFJQztRQUhDLFVBQVUsQ0FBQztZQUNULEtBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1NBQ3ZDLEVBQUUsR0FBRyxDQUFDLENBQUM7S0FDVDs7OztJQUVPLGtEQUF3Qjs7Ozs7UUFDOUIsSUFBTSxXQUFXLEdBQXFCLElBQUksQ0FBQyxTQUFTLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDckcsV0FBVyxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7O1FBRWpDLFdBQVcsQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDOztRQUVoQyxXQUFXLENBQUMsY0FBYyxHQUFHLEtBQUssQ0FBQzs7O2dCQWhGdEMsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxrQkFBa0I7b0JBQzVCLFFBQVEsRUFBRSxnYkFPWDtvQkFDQyxNQUFNLEVBQUUsQ0FBQyxxQ0FBcUMsQ0FBQztpQkFDaEQ7Ozs7O3dCQUlFLEtBQUs7K0JBQ0wsTUFBTTs0QkFFTixTQUFTLFNBQUMsV0FBVzttQ0FDckIsWUFBWSxTQUFDLG1CQUFtQjs7MEJBdkJuQzs7U0FpQmEsZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBWaWV3Q2hpbGQsIENvbnRlbnRDaGlsZCwgQWZ0ZXJDb250ZW50SW5pdCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE1kY1RleHRGaWVsZCB9IGZyb20gJ0Bhbmd1bGFyLW1kYy93ZWInO1xyXG5pbXBvcnQgeyBNZGNBdXRvY29tcGxldGVMaXN0IH0gZnJvbSAnbWRjLWF1dG9jb21wbGV0ZS1saXN0JztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbWRjLWF1dG9jb21wbGV0ZScsXHJcbiAgdGVtcGxhdGU6IGA8ZGl2IGNsYXNzPVwiYXV0b2NvbXBsZXRlXCI+XHJcbiAgPG1kYy10ZXh0LWZpZWxkICN0ZXh0RmllbGQgWyhuZ01vZGVsKV09XCJ2YWx1ZVwiIFtsYWJlbF09XCJsYWJlbFwiIChrZXlkb3duKT1cIm9uS2V5RG93bigkZXZlbnQpXCIgKGtleXVwKT1cIm9uS2V5VXAoJGV2ZW50KVwiXHJcbiAgKGNsaWNrKT1cIm9uRm9jdXModHJ1ZSlcIiAoZm9jdXMpPVwib25Gb2N1cyh0cnVlKVwiIChmb2N1c291dCk9XCJvbkZvY3VzKGZhbHNlKVwiIChibHVyKT1cIm9uRm9jdXMoZmFsc2UpXCJcclxuICBhdXRvY29tcGxldGU9XCJvZmZcIiBhdXRvY29ycmVjdD1cIm9mZlwiIGF1dG9jYXBpdGFsaXplPVwib2ZmXCI+XHJcbiAgPC9tZGMtdGV4dC1maWVsZD5cclxuICA8bmctY29udGVudCBzZWxlY3Q9XCJtZGMtYXV0b2NvbXBsZXRlLWxpc3RcIj48L25nLWNvbnRlbnQ+XHJcbjwvZGl2PlxyXG5gLFxyXG4gIHN0eWxlczogW2AuYXV0b2NvbXBsZXRle2Rpc3BsYXk6aW5saW5lLWJsb2NrfWBdXHJcbn0pXHJcbi8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTpjb21wb25lbnQtY2xhc3Mtc3VmZml4XHJcbmV4cG9ydCBjbGFzcyBNZGNBdXRvY29tcGxldGUgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyQ29udGVudEluaXQge1xyXG5cclxuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nO1xyXG4gIEBPdXRwdXQoKSBwdWJsaWMgaXRlbVNlbGVjdGVkOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgQFZpZXdDaGlsZCgndGV4dEZpZWxkJykgdGV4dEZpZWxkOiBNZGNUZXh0RmllbGQ7XHJcbiAgQENvbnRlbnRDaGlsZChNZGNBdXRvY29tcGxldGVMaXN0KSBhdXRvY29tcGxldGVMaXN0OiBNZGNBdXRvY29tcGxldGVMaXN0O1xyXG5cclxuICBfdmFsdWU6IHN0cmluZztcclxuICBwdWJsaWMgZ2V0IHZhbHVlKCk6IHN0cmluZyB7IHJldHVybiB0aGlzLl92YWx1ZTsgfVxyXG4gIHB1YmxpYyBzZXQgdmFsdWUodmFsOiBzdHJpbmcpIHtcclxuICAgIHRoaXMuX3ZhbHVlID0gdmFsO1xyXG4gICAgdGhpcy5hdXRvY29tcGxldGVMaXN0LmZpbHRlciA9IHZhbDtcclxuICB9XHJcblxyXG4gIHNlbGVjdGVkSXRlbVZhbHVlOiBhbnk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgdGhpcy5sYWJlbCA9ICcnO1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XHJcbiAgICB0aGlzLnNldE5hdGl2ZUlucHV0QXRycmlidXRlcygpO1xyXG5cclxuICAgIHRoaXMuYXV0b2NvbXBsZXRlTGlzdC5pdGVtU2VsZWN0ZWQuc3Vic2NyaWJlKChpdGVtVmFsdWUpID0+IHtcclxuICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1WYWx1ZSA9IGl0ZW1WYWx1ZTtcclxuICAgICAgdGhpcy52YWx1ZSA9IGl0ZW1WYWx1ZS50b1N0cmluZygpO1xyXG4gICAgICB0aGlzLml0ZW1TZWxlY3RlZC5lbWl0KGl0ZW1WYWx1ZSk7XHJcbiAgICAgIHRoaXMuYXV0b2NvbXBsZXRlTGlzdC52aXNpYmxlID0gZmFsc2U7XHJcbiAgICB9KTtcclxuICB9XHJcblxyXG4gIG9uS2V5RG93bihldmVudDogS2V5Ym9hcmRFdmVudCkge1xyXG4gICAgaWYgKGV2ZW50LmtleSA9PT0gJ0Fycm93RG93bicpIHtcclxuICAgICAgdGhpcy5hdXRvY29tcGxldGVMaXN0LmZvY3VzTmV4dEl0ZW0oKTtcclxuICAgIH0gZWxzZSBpZiAoZXZlbnQua2V5ID09PSAnQXJyb3dVcCcpIHtcclxuICAgICAgdGhpcy5hdXRvY29tcGxldGVMaXN0LmZvY3VzUHJldmlvdXNJdGVtKCk7XHJcbiAgICB9IGVsc2UgaWYgKGV2ZW50LmtleSA9PT0gJ0VudGVyJykge1xyXG4gICAgICB0aGlzLmF1dG9jb21wbGV0ZUxpc3Quc2VsZWN0Rm9jdXNlZEl0ZW0oKTtcclxuICAgIH1cclxuICB9XHJcbiAgb25LZXlVcChldmVudDogS2V5Ym9hcmRFdmVudCkge1xyXG4gICAgaWYgKGV2ZW50LmtleSAhPT0gJ0Fycm93RG93bicgJiYgZXZlbnQua2V5ICE9PSAnQXJyb3dVcCcgJiYgZXZlbnQua2V5ICE9PSAnRW50ZXInKSB7XHJcbiAgICAgIHRoaXMub25UZXh0RmllbGRDaGFuZ2UoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIG9uVGV4dEZpZWxkQ2hhbmdlKCkge1xyXG4gICAgdGhpcy5hdXRvY29tcGxldGVMaXN0LnZpc2libGUgPSB0cnVlO1xyXG4gICAgdGhpcy5hdXRvY29tcGxldGVMaXN0LmZpbHRlciA9IHRoaXMudGV4dEZpZWxkLnZhbHVlO1xyXG4gIH1cclxuXHJcbiAgb25Gb2N1cyhmb2N1czogYm9vbGVhbikge1xyXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XHJcbiAgICAgIHRoaXMuYXV0b2NvbXBsZXRlTGlzdC52aXNpYmxlID0gZm9jdXM7XHJcbiAgICB9LCAxMDApO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBzZXROYXRpdmVJbnB1dEF0cnJpYnV0ZXMoKSB7XHJcbiAgICBjb25zdCBuYXRpdmVJbnB1dDogSFRNTElucHV0RWxlbWVudCA9IHRoaXMudGV4dEZpZWxkLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCdpbnB1dCcpO1xyXG4gICAgbmF0aXZlSW5wdXQuYXV0b2NvbXBsZXRlID0gJ29mZic7XHJcbiAgICAvLyBAdHMtaWdub3JlXHJcbiAgICBuYXRpdmVJbnB1dC5hdXRvY29ycmVjdCA9ICdvZmYnO1xyXG4gICAgLy8gQHRzLWlnbm9yZVxyXG4gICAgbmF0aXZlSW5wdXQuYXV0b2NhcGl0YWxpemUgPSAnb2ZmJztcclxuICB9XHJcbn1cclxuIl19