angular-text-input-autocomplete
Version:
A angular 6+ directive for adding autocomplete functionality to text input elements, built around composability
141 lines (140 loc) • 12.5 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
var TextInputAutocompleteMenuComponent = /** @class */ (function () {
function TextInputAutocompleteMenuComponent() {
this.selectChoice = new Subject();
this.choiceLoading = false;
this.trackById = function (index, choice) {
return typeof choice.id !== 'undefined' ? choice.id : choice;
};
}
Object.defineProperty(TextInputAutocompleteMenuComponent.prototype, "choices", {
get: /**
* @return {?}
*/
function () {
return this._choices;
},
set: /**
* @param {?} choices
* @return {?}
*/
function (choices) {
this._choices = choices;
if (choices.indexOf(this.activeChoice) === -1 && choices.length > 0) {
this.activeChoice = choices[0];
}
},
enumerable: true,
configurable: true
});
/**
* @param {?} event
* @return {?}
*/
TextInputAutocompleteMenuComponent.prototype.onArrowDown = /**
* @param {?} event
* @return {?}
*/
function (event) {
event.preventDefault();
var /** @type {?} */ index = this.choices.indexOf(this.activeChoice);
if (this.choices[index + 1]) {
this.scrollToChoice(index + 1);
}
};
/**
* @param {?} event
* @return {?}
*/
TextInputAutocompleteMenuComponent.prototype.onArrowUp = /**
* @param {?} event
* @return {?}
*/
function (event) {
event.preventDefault();
var /** @type {?} */ index = this.choices.indexOf(this.activeChoice);
if (this.choices[index - 1]) {
this.scrollToChoice(index - 1);
}
};
/**
* @param {?} event
* @return {?}
*/
TextInputAutocompleteMenuComponent.prototype.onEnter = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.choices.indexOf(this.activeChoice) > -1) {
event.preventDefault();
this.selectChoice.next(this.activeChoice);
}
};
/**
* @param {?} index
* @return {?}
*/
TextInputAutocompleteMenuComponent.prototype.scrollToChoice = /**
* @param {?} index
* @return {?}
*/
function (index) {
this.activeChoice = this._choices[index];
if (this.dropdownMenuElement) {
var /** @type {?} */ ulPosition = this.dropdownMenuElement.nativeElement.getBoundingClientRect();
var /** @type {?} */ li = this.dropdownMenuElement.nativeElement.children[index];
var /** @type {?} */ liPosition = li.getBoundingClientRect();
if (liPosition.top < ulPosition.top ||
liPosition.bottom > ulPosition.bottom) {
li.scrollIntoView({
behavior: 'smooth',
block: 'nearest'
});
}
}
};
TextInputAutocompleteMenuComponent.decorators = [
{ type: Component, args: [{
selector: 'mwl-text-input-autocomplete-menu',
template: "\n <ul \n *ngIf=\"choices?.length > 0\"\n #dropdownMenu\n class=\"dropdown-menu\"\n [style.top.px]=\"position?.top\"\n [style.left.px]=\"position?.left\">\n <li\n *ngFor=\"let choice of choices; trackBy:trackById\"\n [class.active]=\"activeChoice === choice\">\n <a\n href=\"javascript:;\"\n (click)=\"selectChoice.next(choice)\">\n {{ choice }}\n </a>\n </li>\n </ul>\n ",
styles: [
"\n .dropdown-menu {\n display: block;\n max-height: 200px;\n overflow-y: auto;\n }\n "
]
},] },
];
TextInputAutocompleteMenuComponent.propDecorators = {
dropdownMenuElement: [{ type: ViewChild, args: ['dropdownMenu',] }],
onArrowDown: [{ type: HostListener, args: ['document:keydown.ArrowDown', ['$event'],] }],
onArrowUp: [{ type: HostListener, args: ['document:keydown.ArrowUp', ['$event'],] }],
onEnter: [{ type: HostListener, args: ['document:keydown.Enter', ['$event'],] }]
};
return TextInputAutocompleteMenuComponent;
}());
export { TextInputAutocompleteMenuComponent };
function TextInputAutocompleteMenuComponent_tsickle_Closure_declarations() {
/** @type {?} */
TextInputAutocompleteMenuComponent.prototype.dropdownMenuElement;
/** @type {?} */
TextInputAutocompleteMenuComponent.prototype.position;
/** @type {?} */
TextInputAutocompleteMenuComponent.prototype.selectChoice;
/** @type {?} */
TextInputAutocompleteMenuComponent.prototype.activeChoice;
/** @type {?} */
TextInputAutocompleteMenuComponent.prototype.searchText;
/** @type {?} */
TextInputAutocompleteMenuComponent.prototype.choiceLoadError;
/** @type {?} */
TextInputAutocompleteMenuComponent.prototype.choiceLoading;
/** @type {?} */
TextInputAutocompleteMenuComponent.prototype._choices;
/** @type {?} */
TextInputAutocompleteMenuComponent.prototype.trackById;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1pbnB1dC1hdXRvY29tcGxldGUtbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9hbmd1bGFyLXRleHQtaW5wdXQtYXV0b2NvbXBsZXRlLyIsInNvdXJjZXMiOlsidGV4dC1pbnB1dC1hdXRvY29tcGxldGUtbWVudS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0UsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7OzRCQW1DZCxJQUFJLE9BQU8sRUFBRTs2QkFJWixLQUFLO3lCQUVULFVBQUMsS0FBYSxFQUFFLE1BQVc7WUFDckMsT0FBQSxPQUFPLE1BQU0sQ0FBQyxFQUFFLEtBQUssV0FBVyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxNQUFNO1FBQXJELENBQXFEOztJQUV2RCxzQkFBSSx1REFBTzs7OztRQU9YO1lBQ0UsTUFBTSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7U0FDdEI7Ozs7O1FBVEQsVUFBWSxPQUFjO1lBQ3hCLElBQUksQ0FBQyxRQUFRLEdBQUcsT0FBTyxDQUFDO1lBQ3hCLEVBQUUsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQyxJQUFJLE9BQU8sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztnQkFDcEUsSUFBSSxDQUFDLFlBQVksR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUM7YUFDaEM7U0FDRjs7O09BQUE7Ozs7O0lBT0Qsd0RBQVc7Ozs7SUFEWCxVQUNZLEtBQW9CO1FBQzlCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN2QixxQkFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQ3RELEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUM1QixJQUFJLENBQUMsY0FBYyxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQztTQUNoQztLQUNGOzs7OztJQUdELHNEQUFTOzs7O0lBRFQsVUFDVSxLQUFvQjtRQUM1QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIscUJBQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUN0RCxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDNUIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUM7U0FDaEM7S0FDRjs7Ozs7SUFHRCxvREFBTzs7OztJQURQLFVBQ1EsS0FBb0I7UUFDMUIsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUNqRCxLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1NBQzNDO0tBQ0Y7Ozs7O0lBRU8sMkRBQWM7Ozs7Y0FBQyxLQUFhO1FBQ2xDLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUV6QyxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxDQUFDO1lBQzdCLHFCQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsbUJBQW1CLENBQUMsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUM7WUFDbEYscUJBQU0sRUFBRSxHQUFHLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ2xFLHFCQUFNLFVBQVUsR0FBRyxFQUFFLENBQUMscUJBQXFCLEVBQUUsQ0FBQztZQUU5QyxFQUFFLENBQUMsQ0FDRCxVQUFVLENBQUMsR0FBRyxHQUFHLFVBQVUsQ0FBQyxHQUFHO2dCQUMvQixVQUFVLENBQUMsTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUNqQyxDQUFDLENBQUMsQ0FBQztnQkFDRCxFQUFFLENBQUMsY0FBYyxDQUFDO29CQUNoQixRQUFRLEVBQUUsUUFBUTtvQkFDbEIsS0FBSyxFQUFFLFNBQVM7aUJBQ2pCLENBQUMsQ0FBQzthQUNKO1NBQ0Y7OztnQkFoR0osU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxrQ0FBa0M7b0JBQzVDLFFBQVEsRUFBRSxzZEFpQlQ7b0JBQ0QsTUFBTSxFQUFFO3dCQUNOLHlIQU1DO3FCQUNGO2lCQUNGOzs7c0NBRUUsU0FBUyxTQUFDLGNBQWM7OEJBc0J4QixZQUFZLFNBQUMsNEJBQTRCLEVBQUUsQ0FBQyxRQUFRLENBQUM7NEJBU3JELFlBQVksU0FBQywwQkFBMEIsRUFBRSxDQUFDLFFBQVEsQ0FBQzswQkFTbkQsWUFBWSxTQUFDLHdCQUF3QixFQUFFLENBQUMsUUFBUSxDQUFDOzs2Q0ExRXBEOztTQWlDYSxrQ0FBa0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEhvc3RMaXN0ZW5lciwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ213bC10ZXh0LWlucHV0LWF1dG9jb21wbGV0ZS1tZW51JyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8dWwgXG4gICAgICAqbmdJZj1cImNob2ljZXM/Lmxlbmd0aCA+IDBcIlxuICAgICAgI2Ryb3Bkb3duTWVudVxuICAgICAgY2xhc3M9XCJkcm9wZG93bi1tZW51XCJcbiAgICAgIFtzdHlsZS50b3AucHhdPVwicG9zaXRpb24/LnRvcFwiXG4gICAgICBbc3R5bGUubGVmdC5weF09XCJwb3NpdGlvbj8ubGVmdFwiPlxuICAgICAgPGxpXG4gICAgICAgICpuZ0Zvcj1cImxldCBjaG9pY2Ugb2YgY2hvaWNlczsgdHJhY2tCeTp0cmFja0J5SWRcIlxuICAgICAgICBbY2xhc3MuYWN0aXZlXT1cImFjdGl2ZUNob2ljZSA9PT0gY2hvaWNlXCI+XG4gICAgICAgIDxhXG4gICAgICAgICAgaHJlZj1cImphdmFzY3JpcHQ6O1wiXG4gICAgICAgICAgKGNsaWNrKT1cInNlbGVjdENob2ljZS5uZXh0KGNob2ljZSlcIj5cbiAgICAgICAgICB7eyBjaG9pY2UgfX1cbiAgICAgICAgPC9hPlxuICAgICAgPC9saT5cbiAgICA8L3VsPlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICAuZHJvcGRvd24tbWVudSB7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBtYXgtaGVpZ2h0OiAyMDBweDtcbiAgICAgICAgb3ZlcmZsb3cteTogYXV0bztcbiAgICAgIH1cbiAgICBgXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgVGV4dElucHV0QXV0b2NvbXBsZXRlTWVudUNvbXBvbmVudCB7XG4gIEBWaWV3Q2hpbGQoJ2Ryb3Bkb3duTWVudScpIGRyb3Bkb3duTWVudUVsZW1lbnQ6IEVsZW1lbnRSZWY8SFRNTFVMaXN0RWxlbWVudD47XG4gIHBvc2l0aW9uOiB7IHRvcDogbnVtYmVyOyBsZWZ0OiBudW1iZXIgfTtcbiAgc2VsZWN0Q2hvaWNlID0gbmV3IFN1YmplY3QoKTtcbiAgYWN0aXZlQ2hvaWNlOiBhbnk7XG4gIHNlYXJjaFRleHQ6IHN0cmluZztcbiAgY2hvaWNlTG9hZEVycm9yOiBhbnk7XG4gIGNob2ljZUxvYWRpbmcgPSBmYWxzZTtcbiAgcHJpdmF0ZSBfY2hvaWNlczogYW55W107XG4gIHRyYWNrQnlJZCA9IChpbmRleDogbnVtYmVyLCBjaG9pY2U6IGFueSkgPT5cbiAgICB0eXBlb2YgY2hvaWNlLmlkICE9PSAndW5kZWZpbmVkJyA/IGNob2ljZS5pZCA6IGNob2ljZTtcblxuICBzZXQgY2hvaWNlcyhjaG9pY2VzOiBhbnlbXSkge1xuICAgIHRoaXMuX2Nob2ljZXMgPSBjaG9pY2VzO1xuICAgIGlmIChjaG9pY2VzLmluZGV4T2YodGhpcy5hY3RpdmVDaG9pY2UpID09PSAtMSAmJiBjaG9pY2VzLmxlbmd0aCA+IDApIHtcbiAgICAgIHRoaXMuYWN0aXZlQ2hvaWNlID0gY2hvaWNlc1swXTtcbiAgICB9XG4gIH1cblxuICBnZXQgY2hvaWNlcygpIHtcbiAgICByZXR1cm4gdGhpcy5fY2hvaWNlcztcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmtleWRvd24uQXJyb3dEb3duJywgWyckZXZlbnQnXSlcbiAgb25BcnJvd0Rvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIGNvbnN0IGluZGV4ID0gdGhpcy5jaG9pY2VzLmluZGV4T2YodGhpcy5hY3RpdmVDaG9pY2UpO1xuICAgIGlmICh0aGlzLmNob2ljZXNbaW5kZXggKyAxXSkge1xuICAgICAgdGhpcy5zY3JvbGxUb0Nob2ljZShpbmRleCArIDEpO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmtleWRvd24uQXJyb3dVcCcsIFsnJGV2ZW50J10pXG4gIG9uQXJyb3dVcChldmVudDogS2V5Ym9hcmRFdmVudCkge1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgY29uc3QgaW5kZXggPSB0aGlzLmNob2ljZXMuaW5kZXhPZih0aGlzLmFjdGl2ZUNob2ljZSk7XG4gICAgaWYgKHRoaXMuY2hvaWNlc1tpbmRleCAtIDFdKSB7XG4gICAgICB0aGlzLnNjcm9sbFRvQ2hvaWNlKGluZGV4IC0gMSk7XG4gICAgfVxuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6a2V5ZG93bi5FbnRlcicsIFsnJGV2ZW50J10pXG4gIG9uRW50ZXIoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBpZiAodGhpcy5jaG9pY2VzLmluZGV4T2YodGhpcy5hY3RpdmVDaG9pY2UpID4gLTEpIHtcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICB0aGlzLnNlbGVjdENob2ljZS5uZXh0KHRoaXMuYWN0aXZlQ2hvaWNlKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIHNjcm9sbFRvQ2hvaWNlKGluZGV4OiBudW1iZXIpIHtcbiAgICB0aGlzLmFjdGl2ZUNob2ljZSA9IHRoaXMuX2Nob2ljZXNbaW5kZXhdO1xuXG4gICAgaWYgKHRoaXMuZHJvcGRvd25NZW51RWxlbWVudCkge1xuICAgICAgY29uc3QgdWxQb3NpdGlvbiA9IHRoaXMuZHJvcGRvd25NZW51RWxlbWVudC5uYXRpdmVFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICAgICAgY29uc3QgbGkgPSB0aGlzLmRyb3Bkb3duTWVudUVsZW1lbnQubmF0aXZlRWxlbWVudC5jaGlsZHJlbltpbmRleF07XG4gICAgICBjb25zdCBsaVBvc2l0aW9uID0gbGkuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cbiAgICAgIGlmIChcbiAgICAgICAgbGlQb3NpdGlvbi50b3AgPCB1bFBvc2l0aW9uLnRvcCB8fFxuICAgICAgICBsaVBvc2l0aW9uLmJvdHRvbSA+IHVsUG9zaXRpb24uYm90dG9tXG4gICAgICApIHtcbiAgICAgICAgbGkuc2Nyb2xsSW50b1ZpZXcoe1xuICAgICAgICAgIGJlaGF2aW9yOiAnc21vb3RoJyxcbiAgICAgICAgICBibG9jazogJ25lYXJlc3QnXG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuIl19