ngx-bootstrap 5.3.2 → 5.6.1

package/typeahead/fesm5/ngx-bootstrap-typeahead.js

@@ -1,12 +1,12 @@
 import { __values } from 'tslib';
-import { Component, Renderer2, ElementRef, ViewChild, ViewChildren, HostListener, Injectable, Directive, ChangeDetectorRef, ViewContainerRef, Input, Output, EventEmitter, NgModule } from '@angular/core';
+import { EventEmitter, Component, Renderer2, ElementRef, ChangeDetectorRef, Output, ViewChild, ViewChildren, HostListener, Injectable, Directive, ViewContainerRef, Input, NgModule } from '@angular/core';
 import { isBs3, Utils } from 'ngx-bootstrap/utils';
 import { PositioningService } from 'ngx-bootstrap/positioning';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import { take, tap, delay, debounceTime, switchMap, mergeMap, filter, toArray } from 'rxjs/operators';
 import { NgControl } from '@angular/forms';
 import { isObservable, from } from 'rxjs';
 import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
+import { debounceTime, switchMap, mergeMap, filter, toArray } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 
 /**
@@ -852,6 +852,14 @@ var TypeaheadOptions = /** @class */ (function () {
     }
     return TypeaheadOptions;
 }());
+if (false) {
+    /** @type {?} */
+    TypeaheadOptions.prototype.placement;
+    /** @type {?} */
+    TypeaheadOptions.prototype.animation;
+    /** @type {?} */
+    TypeaheadOptions.prototype.typeaheadRef;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -886,6 +894,39 @@ var TypeaheadMatch = /** @class */ (function () {
     };
     return TypeaheadMatch;
 }());
+if (false) {
+    /** @type {?} */
+    TypeaheadMatch.prototype.value;
+    /** @type {?} */
+    TypeaheadMatch.prototype.item;
+    /**
+     * @type {?}
+     * @protected
+     */
+    TypeaheadMatch.prototype.header;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var TypeaheadOrder = /** @class */ (function () {
+    function TypeaheadOrder() {
+    }
+    return TypeaheadOrder;
+}());
+if (false) {
+    /**
+     * field for sorting
+     * @type {?}
+     */
+    TypeaheadOrder.prototype.field;
+    /**
+     * ordering direction, could be 'asc' or 'desc'
+     * @type {?}
+     */
+    TypeaheadOrder.prototype.direction;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -1018,14 +1059,20 @@ var typeaheadAnimation = trigger('typeaheadAnimation', [
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/** @type {?} */
+var nextWindowId = 0;
 var TypeaheadContainerComponent = /** @class */ (function () {
-    function TypeaheadContainerComponent(positionService, renderer, element) {
+    function TypeaheadContainerComponent(positionService, renderer, element, changeDetectorRef) {
+        var _this = this;
         this.positionService = positionService;
         this.renderer = renderer;
         this.element = element;
+        this.changeDetectorRef = changeDetectorRef;
+        // tslint:disable-next-line: no-output-rename
+        this.activeChangeEvent = new EventEmitter();
         this.isFocused = false;
-        this.visibility = 'hidden';
         this.height = 0;
+        this.popupId = "ngb-typeahead-" + nextWindowId++;
         this._matches = [];
         this.isScrolledIntoView = (/**
          * @param {?} elem
@@ -1042,6 +1089,19 @@ var TypeaheadContainerComponent = /** @class */ (function () {
             var elemBottom = elemTop + elem.offsetHeight;
             return ((elemBottom <= containerViewBottom) && (elemTop >= containerViewTop));
         });
+        this.renderer.setAttribute(this.element.nativeElement, 'id', this.popupId);
+        this.positionServiceSubscription = this.positionService.event$.subscribe((/**
+         * @return {?}
+         */
+        function () {
+            if (_this.isAnimated) {
+                _this.animationState = _this.isTopPosition ? 'animated-up' : 'animated-down';
+                _this.changeDetectorRef.detectChanges();
+                return;
+            }
+            _this.animationState = 'unanimated';
+            _this.changeDetectorRef.detectChanges();
+        }));
     }
     Object.defineProperty(TypeaheadContainerComponent.prototype, "isBs4", {
         get: /**
@@ -1053,6 +1113,23 @@ var TypeaheadContainerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(TypeaheadContainerComponent.prototype, "typeaheadTemplateMethods", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            /* tslint:disable:no-this-assignment */
+            /** @type {?} */
+            var _that = this;
+            return {
+                selectMatch: this.selectMatch.bind(_that),
+                selectActive: this.selectActive.bind(_that),
+                isActive: this.isActive.bind(_that)
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(TypeaheadContainerComponent.prototype, "active", {
         get: /**
          * @return {?}
@@ -1060,6 +1137,14 @@ var TypeaheadContainerComponent = /** @class */ (function () {
         function () {
             return this._active;
         },
+        set: /**
+         * @param {?} active
+         * @return {?}
+         */
+        function (active) {
+            this._active = active;
+            this.activeChanged();
+        },
         enumerable: true,
         configurable: true
     });
@@ -1080,26 +1165,6 @@ var TypeaheadContainerComponent = /** @class */ (function () {
                 modifiers: { flip: { enabled: this.adaptivePosition } },
                 allowedPositions: ['top', 'bottom']
             });
-            this.positionService.event$
-                .pipe(take(1), tap((/**
-             * @return {?}
-             */
-            function () {
-                _this.positionService.disable();
-                _this.visibility = _this.typeaheadScrollable ? 'hidden' : 'visible';
-                if (_this.isAnimated) {
-                    _this.animationState = _this.isTopPosition ? 'animated-up' : 'animated-down';
-                    return;
-                }
-                _this.positionService.enable();
-                _this.animationState = 'unanimated';
-            })), delay(parseInt(TYPEAHEAD_ANIMATION_TIMING, 10)))
-                .subscribe((/**
-             * @return {?}
-             */
-            function () {
-                _this.positionService.enable();
-            }));
             this._matches = value;
             this.needScrollbar = this.typeaheadScrollable && this.typeaheadOptionsInScrollableView < this.matches.length;
             if (this.typeaheadScrollable) {
@@ -1111,7 +1176,7 @@ var TypeaheadContainerComponent = /** @class */ (function () {
                 }));
             }
             if (this.typeaheadIsFirstItemActive && this._matches.length > 0) {
-                this._active = this._matches[0];
+                this.active = this._matches[0];
                 if (this._active.isHeader()) {
                     this.nextActiveMatch();
                 }
@@ -1127,7 +1192,7 @@ var TypeaheadContainerComponent = /** @class */ (function () {
                     this.selectActive(concurrency);
                     return;
                 }
-                this._active = null;
+                this.active = null;
             }
         },
         enumerable: true,
@@ -1235,6 +1300,17 @@ var TypeaheadContainerComponent = /** @class */ (function () {
             this.selectMatch(this._active);
         }
     };
+    /**
+     * @return {?}
+     */
+    TypeaheadContainerComponent.prototype.activeChanged = /**
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var index = this.matches.indexOf(this._active);
+        this.activeChangeEvent.emit(this.popupId + "-" + index);
+    };
     /**
      * @return {?}
      */
@@ -1244,7 +1320,7 @@ var TypeaheadContainerComponent = /** @class */ (function () {
     function () {
         /** @type {?} */
         var index = this.matches.indexOf(this._active);
-        this._active = this.matches[index - 1 < 0 ? this.matches.length - 1 : index - 1];
+        this.active = this.matches[index - 1 < 0 ? this.matches.length - 1 : index - 1];
         if (this._active.isHeader()) {
             this.prevActiveMatch();
         }
@@ -1261,7 +1337,7 @@ var TypeaheadContainerComponent = /** @class */ (function () {
     function () {
         /** @type {?} */
         var index = this.matches.indexOf(this._active);
-        this._active = this.matches[index + 1 > this.matches.length - 1 ? 0 : index + 1];
+        this.active = this.matches[index + 1 > this.matches.length - 1 ? 0 : index + 1];
         if (this._active.isHeader()) {
             this.nextActiveMatch();
         }
@@ -1279,7 +1355,7 @@ var TypeaheadContainerComponent = /** @class */ (function () {
      */
     function (value) {
         this.isFocused = true;
-        this._active = value;
+        this.active = value;
     };
     /**
      * @param {?} match
@@ -1350,7 +1426,7 @@ var TypeaheadContainerComponent = /** @class */ (function () {
      * @return {?}
      */
     function (value) {
-        return this._active === value;
+        return this.active === value;
     };
     /**
      * @param {?} value
@@ -1451,6 +1527,15 @@ var TypeaheadContainerComponent = /** @class */ (function () {
             }
         }
     };
+    /**
+     * @return {?}
+     */
+    TypeaheadContainerComponent.prototype.ngOnDestroy = /**
+     * @return {?}
+     */
+    function () {
+        this.positionServiceSubscription.unsubscribe();
+    };
     /**
      * @private
      * @return {?}
@@ -1476,14 +1561,15 @@ var TypeaheadContainerComponent = /** @class */ (function () {
     TypeaheadContainerComponent.decorators = [
         { type: Component, args: [{
                     selector: 'typeahead-container',
-                    template: "<!-- inject options list template -->\n<ng-template [ngTemplateOutlet]=\"optionsListTemplate || (isBs4 ? bs4Template : bs3Template)\"\n             [ngTemplateOutletContext]=\"{matches:matches, itemTemplate:itemTemplate, query:query}\"></ng-template>\n\n<!-- default options item template -->\n<ng-template #bsItemTemplate let-match=\"match\" let-query=\"query\"><span [innerHtml]=\"highlight(match, query)\"></span>\n</ng-template>\n\n<!-- Bootstrap 3 options list template -->\n<ng-template #bs3Template>\n  <ul class=\"dropdown-menu\"\n      #ulElement\n      [style.overflow-y]=\"needScrollbar ? 'scroll': 'auto'\"\n      [style.height]=\"needScrollbar ? guiHeight: 'auto'\">\n    <ng-template ngFor let-match let-i=\"index\" [ngForOf]=\"matches\">\n      <li #liElements *ngIf=\"match.isHeader()\" class=\"dropdown-header\">{{ match }}</li>\n      <li #liElements\n          *ngIf=\"!match.isHeader()\"\n          [@typeaheadAnimation]=\"animationState\"\n          [class.active]=\"isActive(match)\"\n          (mouseenter)=\"selectActive(match)\">\n\n        <a href=\"#\" (click)=\"selectMatch(match, $event)\" tabindex=\"-1\">\n          <ng-template [ngTemplateOutlet]=\"itemTemplate || bsItemTemplate\"\n                       [ngTemplateOutletContext]=\"{item:match.item, index:i, match:match, query:query}\"></ng-template>\n        </a>\n      </li>\n    </ng-template>\n  </ul>\n</ng-template>\n\n<!-- Bootstrap 4 options list template -->\n<ng-template #bs4Template>\n  <ng-template ngFor let-match let-i=\"index\" [ngForOf]=\"matches\">\n    <h6 *ngIf=\"match.isHeader()\" class=\"dropdown-header\">{{ match }}</h6>\n    <ng-template [ngIf]=\"!match.isHeader()\">\n      <button #liElements\n              [@typeaheadAnimation]=\"animationState\"\n              class=\"dropdown-item\"\n              (click)=\"selectMatch(match, $event)\"\n              (mouseenter)=\"selectActive(match)\"\n              [class.active]=\"isActive(match)\">\n        <ng-template [ngTemplateOutlet]=\"itemTemplate || bsItemTemplate\"\n                     [ngTemplateOutletContext]=\"{item:match.item, index:i, match:match, query:query}\"></ng-template>\n      </button>\n    </ng-template>\n  </ng-template>\n</ng-template>\n",
+                    template: "<!-- inject options list template -->\n<ng-template [ngTemplateOutlet]=\"optionsListTemplate || (isBs4 ? bs4Template : bs3Template)\"\n             [ngTemplateOutletContext]=\"{\n               matches: matches,\n               itemTemplate: itemTemplate || bsItemTemplate,\n               query: query,\n               $implicit: typeaheadTemplateMethods\n             }\">\n</ng-template>\n\n<!-- default options item template -->\n<ng-template #bsItemTemplate let-match=\"match\" let-query=\"query\">\n  <span [innerHtml]=\"highlight(match, query)\"></span>\n</ng-template>\n\n<!-- Bootstrap 3 options list template -->\n<ng-template #bs3Template>\n  <ul class=\"dropdown-menu\"\n      #ulElement\n      role=\"listbox\"\n      [style.overflow-y]=\"needScrollbar ? 'scroll': 'auto'\"\n      [style.height]=\"needScrollbar ? guiHeight: 'auto'\">\n    <ng-template ngFor let-match let-i=\"index\" [ngForOf]=\"matches\">\n      <li #liElements *ngIf=\"match.isHeader()\" class=\"dropdown-header\">{{ match }}</li>\n      <li #liElements\n          *ngIf=\"!match.isHeader()\"\n          [id]=\"popupId + '-' + i\"\n          role=\"option\"\n          [@typeaheadAnimation]=\"animationState\"\n          [class.active]=\"isActive(match)\"\n          (mouseenter)=\"selectActive(match)\">\n\n        <a href=\"#\" (click)=\"selectMatch(match, $event)\" tabindex=\"-1\">\n          <ng-template [ngTemplateOutlet]=\"itemTemplate || bsItemTemplate\"\n                       [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n          </ng-template>\n        </a>\n      </li>\n    </ng-template>\n  </ul>\n</ng-template>\n\n<!-- Bootstrap 4 options list template -->\n<ng-template #bs4Template>\n  <ng-template ngFor let-match let-i=\"index\" [ngForOf]=\"matches\">\n    <h6 *ngIf=\"match.isHeader()\" class=\"dropdown-header\">{{ match }}</h6>\n    <ng-template [ngIf]=\"!match.isHeader()\">\n      <button #liElements\n              [id]=\"popupId + '-' + i\"\n              role=\"option\"\n              [@typeaheadAnimation]=\"animationState\"\n              class=\"dropdown-item\"\n              (click)=\"selectMatch(match, $event)\"\n              (mouseenter)=\"selectActive(match)\"\n              [class.active]=\"isActive(match)\">\n        <ng-template [ngTemplateOutlet]=\"itemTemplate || bsItemTemplate\"\n                     [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n        </ng-template>\n      </button>\n    </ng-template>\n  </ng-template>\n</ng-template>\n",
                     host: {
                         class: 'dropdown open bottom',
                         '[class.dropdown-menu]': 'isBs4',
                         '[style.height]': "isBs4 && needScrollbar ? guiHeight: 'auto'",
-                        '[style.visibility]': "visibility",
+                        '[style.visibility]': "'inherit'",
                         '[class.dropup]': 'dropup',
-                        style: 'position: absolute;display: block;'
+                        style: 'position: absolute;display: block;',
+                        '[attr.role]': "isBs4 ? 'listbox' : null "
                     },
                     animations: [typeaheadAnimation],
                     styles: ["\n    :host.dropdown {\n      z-index: 1000;\n    }\n\n    :host.dropdown-menu, .dropdown-menu {\n      overflow-y: auto;\n      height: 100px;\n    }\n  "]
@@ -1493,15 +1579,91 @@ var TypeaheadContainerComponent = /** @class */ (function () {
     TypeaheadContainerComponent.ctorParameters = function () { return [
         { type: PositioningService },
         { type: Renderer2 },
-        { type: ElementRef }
+        { type: ElementRef },
+        { type: ChangeDetectorRef }
     ]; };
     TypeaheadContainerComponent.propDecorators = {
+        activeChangeEvent: [{ type: Output, args: ['activeChange',] }],
         ulElement: [{ type: ViewChild, args: ['ulElement', { static: false },] }],
         liElements: [{ type: ViewChildren, args: ['liElements',] }],
         focusLost: [{ type: HostListener, args: ['mouseleave',] }, { type: HostListener, args: ['blur',] }]
     };
     return TypeaheadContainerComponent;
 }());
+if (false) {
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.activeChangeEvent;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.parent;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.query;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.isFocused;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.top;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.left;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.display;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.placement;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.dropup;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.guiHeight;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.needScrollbar;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.animationState;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.positionServiceSubscription;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.height;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.popupId;
+    /**
+     * @type {?}
+     * @protected
+     */
+    TypeaheadContainerComponent.prototype._active;
+    /**
+     * @type {?}
+     * @protected
+     */
+    TypeaheadContainerComponent.prototype._matches;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadContainerComponent.prototype.ulElement;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadContainerComponent.prototype.liElements;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadContainerComponent.prototype.isScrolledIntoView;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadContainerComponent.prototype.positionService;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadContainerComponent.prototype.renderer;
+    /** @type {?} */
+    TypeaheadContainerComponent.prototype.element;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadContainerComponent.prototype.changeDetectorRef;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -1524,6 +1686,10 @@ var TypeaheadConfig = /** @class */ (function () {
          * used to hide results on blur
          */
         this.hideResultsOnBlur = true;
+        /**
+         * if true, typeahead will cancel async request on blur
+         */
+        this.cancelRequestOnFocusLost = false;
         /**
          * used to choose the first item in typeahead container
          */
@@ -1543,6 +1709,44 @@ var TypeaheadConfig = /** @class */ (function () {
     ];
     return TypeaheadConfig;
 }());
+if (false) {
+    /**
+     * sets use adaptive position
+     * @type {?}
+     */
+    TypeaheadConfig.prototype.adaptivePosition;
+    /**
+     * turn on/off animation
+     * @type {?}
+     */
+    TypeaheadConfig.prototype.isAnimated;
+    /**
+     * used to hide results on blur
+     * @type {?}
+     */
+    TypeaheadConfig.prototype.hideResultsOnBlur;
+    /**
+     * if true, typeahead will cancel async request on blur
+     * @type {?}
+     */
+    TypeaheadConfig.prototype.cancelRequestOnFocusLost;
+    /**
+     * used to choose the first item in typeahead container
+     * @type {?}
+     */
+    TypeaheadConfig.prototype.selectFirstItem;
+    /**
+     * used to active/inactive the first item in typeahead container
+     * @type {?}
+     */
+    TypeaheadConfig.prototype.isFirstItemActive;
+    /**
+     * used to choose set minimal no of characters that needs to
+     * be entered before typeahead kicks-in
+     * @type {?}
+     */
+    TypeaheadConfig.prototype.minLength;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -1565,7 +1769,7 @@ var TypeaheadDirective = /** @class */ (function () {
          */
         this.isAnimated = false;
         /**
-         * should be used only in case of typeahead attribute is array.
+         * should be used only in case of typeahead attribute is Observable of array.
          * If true - loading of options will be async, otherwise - sync.
          * true make sense if options array is large.
          */
@@ -1626,22 +1830,25 @@ var TypeaheadDirective = /** @class */ (function () {
         /**
          * fired when blur event occurs. returns the active item
          */
-        // tslint:disable-next-line:no-any
         this.typeaheadOnBlur = new EventEmitter();
         /**
          * This attribute indicates that the dropdown should be opened upwards
          */
         this.dropup = false;
+        this.isOpen = false;
+        this.list = 'list';
         this.isActiveItemChanged = false;
-        this.isTypeaheadOptionsListActive = false;
+        this.isFocused = false;
+        this.cancelRequestOnFocusLost = false;
         // tslint:disable-next-line:no-any
         this.keyUpEventEmitter = new EventEmitter();
-        this.placement = 'bottom-left';
+        this.placement = 'bottom left';
         this._subscriptions = [];
         this._typeahead = cis.createLoader(element, viewContainerRef, renderer)
             .provide({ provide: TypeaheadConfig, useValue: config });
         Object.assign(this, {
             typeaheadHideResultsOnBlur: config.hideResultsOnBlur,
+            typeaheadCancelRequestOnFocusLost: config.cancelRequestOnFocusLost,
             typeaheadSelectFirstItem: config.selectFirstItem,
             typeaheadIsFirstItemActive: config.isFirstItemActive,
             typeaheadMinLength: config.minLength,
@@ -1661,8 +1868,7 @@ var TypeaheadDirective = /** @class */ (function () {
             this.typeaheadMinLength === void 0 ? 1 : this.typeaheadMinLength;
         this.typeaheadWaitMs = this.typeaheadWaitMs || 0;
         // async should be false in case of array
-        if (this.typeaheadAsync === undefined &&
-            !(isObservable(this.typeahead))) {
+        if (this.typeaheadAsync === undefined && !(isObservable(this.typeahead))) {
             this.typeaheadAsync = false;
         }
         if (isObservable(this.typeahead)) {
@@ -1750,10 +1956,19 @@ var TypeaheadDirective = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        if (this.typeaheadMinLength === 0) {
-            this.typeaheadLoading.emit(true);
-            this.keyUpEventEmitter.emit(this.element.nativeElement.value || '');
-        }
+        var _this = this;
+        this.isFocused = true;
+        // add setTimeout to fix issue #5251
+        // to get and emit updated value if it's changed on focus
+        setTimeout((/**
+         * @return {?}
+         */
+        function () {
+            if (_this.typeaheadMinLength === 0) {
+                _this.typeaheadLoading.emit(true);
+                _this.keyUpEventEmitter.emit(_this.element.nativeElement.value || '');
+            }
+        }), 0);
     };
     /**
      * @return {?}
@@ -1762,9 +1977,13 @@ var TypeaheadDirective = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this.isFocused = false;
         if (this._container && !this._container.isFocused) {
             this.typeaheadOnBlur.emit(this._container.active);
         }
+        if (!this.container && this._matches.length === 0) {
+            this.typeaheadOnBlur.emit(new TypeaheadMatch(this.element.nativeElement.value, this.element.nativeElement.value, false));
+        }
     };
     /**
      * @param {?} event
@@ -1780,6 +1999,10 @@ var TypeaheadDirective = /** @class */ (function () {
             return;
         }
         /* tslint:disable-next-line: deprecation */
+        if (event.keyCode === 9 || event.key === 'Tab') {
+            this.onBlur();
+        }
+        /* tslint:disable-next-line: deprecation */
         if (event.keyCode === 9 || event.key === 'Tab' || event.keyCode === 13 || event.key === 'Enter') {
             event.preventDefault();
             if (this.typeaheadSelectFirstItem) {
@@ -1830,7 +2053,7 @@ var TypeaheadDirective = /** @class */ (function () {
         this._typeahead
             .attach(TypeaheadContainerComponent)
             .to(this.container)
-            .position({ attachment: (this.dropup ? 'top' : 'bottom') + " start" })
+            .position({ attachment: (this.dropup ? 'top' : 'bottom') + " left" })
             .show({
             typeaheadRef: this,
             placement: this.placement,
@@ -1864,6 +2087,15 @@ var TypeaheadDirective = /** @class */ (function () {
             : normalizedQuery;
         this._container.matches = this._matches;
         this.element.nativeElement.focus();
+        this._container.activeChangeEvent.subscribe((/**
+         * @param {?} activeId
+         * @return {?}
+         */
+        function (activeId) {
+            _this.activeDescendant = activeId;
+            _this.changeDetection.markForCheck();
+        }));
+        this.isOpen = true;
     };
     /**
      * @return {?}
@@ -1876,6 +2108,8 @@ var TypeaheadDirective = /** @class */ (function () {
             this._typeahead.hide();
             this._outsideClickListener();
             this._container = null;
+            this.isOpen = false;
+            this.changeDetection.markForCheck();
         }
     };
     /**
@@ -1960,8 +2194,7 @@ var TypeaheadDirective = /** @class */ (function () {
              * @return {?}
              */
             function (option) {
-                return (option &&
-                    _this.testMatch(_this.normalizeOption(option), normalizedQuery));
+                return option && _this.testMatch(_this.normalizeOption(option), normalizedQuery);
             })), toArray());
         })))
             .subscribe((/**
@@ -1972,16 +2205,12 @@ var TypeaheadDirective = /** @class */ (function () {
             _this.finalizeAsyncCall(matches);
         })));
     };
-    // tslint:disable-next-line:no-any
-    // tslint:disable-next-line:no-any
     /**
      * @protected
      * @param {?} option
      * @return {?}
      */
-    TypeaheadDirective.prototype.normalizeOption = 
-    // tslint:disable-next-line:no-any
-    /**
+    TypeaheadDirective.prototype.normalizeOption = /**
      * @protected
      * @param {?} option
      * @return {?}
@@ -2006,8 +2235,7 @@ var TypeaheadDirective = /** @class */ (function () {
      * @return {?}
      */
     function (value) {
-        // If singleWords, break model here to not be doing extra work on each
-        // iteration
+        // If singleWords, break model here to not be doing extra work on each iteration
         /** @type {?} */
         var normalizedQuery = (this.typeaheadLatinize
             ? latinize(value)
@@ -2063,6 +2291,9 @@ var TypeaheadDirective = /** @class */ (function () {
             this.hide();
             return;
         }
+        if (!this.isFocused && this.cancelRequestOnFocusLost) {
+            return;
+        }
         if (this._container) {
             // fix: remove usage of ngControl internals
             /** @type {?} */
@@ -2095,12 +2326,14 @@ var TypeaheadDirective = /** @class */ (function () {
         var _this = this;
         /** @type {?} */
         var limited = options.slice(0, this.typeaheadOptionsLimit);
+        /** @type {?} */
+        var sorted = !this.typeaheadOrderBy ? limited : this.orderMatches(limited);
         if (this.typeaheadGroupField) {
             /** @type {?} */
             var matches_1 = [];
             // extract all group names
             /** @type {?} */
-            var groups = limited
+            var groups = sorted
                 .map((/**
              * @param {?} option
              * @return {?}
@@ -2123,21 +2356,15 @@ var TypeaheadDirective = /** @class */ (function () {
                 // add group header to array of matches
                 matches_1.push(new TypeaheadMatch(group, group, true));
                 // add each item of group to array of matches
-                matches_1 = matches_1.concat(limited
-                    .filter((
-                // tslint:disable-next-line:no-any
-                // tslint:disable-next-line:no-any
-                /**
+                matches_1 = matches_1.concat(sorted
+                    .filter((/**
                  * @param {?} option
                  * @return {?}
                  */
                 function (option) {
                     return getValueFromObject(option, _this.typeaheadGroupField) === group;
                 }))
-                    .map((
-                // tslint:disable-next-line:no-any
-                // tslint:disable-next-line:no-any
-                /**
+                    .map((/**
                  * @param {?} option
                  * @return {?}
                  */
@@ -2148,7 +2375,7 @@ var TypeaheadDirective = /** @class */ (function () {
             this._matches = matches_1;
         }
         else {
-            this._matches = limited.map((
+            this._matches = sorted.map((
             // tslint:disable-next-line:no-any
             // tslint:disable-next-line:no-any
             /**
@@ -2160,6 +2387,61 @@ var TypeaheadDirective = /** @class */ (function () {
             }));
         }
     };
+    /**
+     * @protected
+     * @param {?} options
+     * @return {?}
+     */
+    TypeaheadDirective.prototype.orderMatches = /**
+     * @protected
+     * @param {?} options
+     * @return {?}
+     */
+    function (options) {
+        if (!options.length) {
+            return options;
+        }
+        if (this.typeaheadOrderBy !== null
+            && this.typeaheadOrderBy !== undefined
+            && typeof this.typeaheadOrderBy === 'object'
+            && Object.keys(this.typeaheadOrderBy).length === 0) {
+            // tslint:disable-next-line:no-console
+            console.error('Field and direction properties for typeaheadOrderBy have to be set according to documentation!');
+            return options;
+        }
+        var _a = this.typeaheadOrderBy, field = _a.field, direction = _a.direction;
+        if (!direction || !(direction === 'asc' || direction === 'desc')) {
+            // tslint:disable-next-line:no-console
+            console.error('typeaheadOrderBy direction has to equal "asc" or "desc". Please follow the documentation.');
+            return options;
+        }
+        if (typeof options[0] === 'string') {
+            return direction === 'asc' ? options.sort() : options.sort().reverse();
+        }
+        if (!field || typeof field !== 'string') {
+            // tslint:disable-next-line:no-console
+            console.error('typeaheadOrderBy field has to set according to the documentation.');
+            return options;
+        }
+        return options.sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        function (a, b) {
+            /** @type {?} */
+            var stringA = getValueFromObject(a, field);
+            /** @type {?} */
+            var stringB = getValueFromObject(b, field);
+            if (stringA < stringB) {
+                return direction === 'asc' ? -1 : 1;
+            }
+            if (stringA > stringB) {
+                return direction === 'asc' ? 1 : -1;
+            }
+            return 0;
+        }));
+    };
     /**
      * @protected
      * @return {?}
@@ -2172,7 +2454,16 @@ var TypeaheadDirective = /** @class */ (function () {
         return this._matches.length > 0;
     };
     TypeaheadDirective.decorators = [
-        { type: Directive, args: [{ selector: '[typeahead]', exportAs: 'bs-typeahead' },] }
+        { type: Directive, args: [{
+                    selector: '[typeahead]',
+                    exportAs: 'bs-typeahead',
+                    host: {
+                        '[attr.aria-activedescendant]': 'activeDescendant',
+                        '[attr.aria-aria-owns]': 'isOpen ? this._container.popupId : null',
+                        '[attr.aria-aria-expanded]': 'isOpen',
+                        '[attr.aria-autocomplete]': 'list'
+                    }
+                },] }
     ];
     /** @nocollapse */
     TypeaheadDirective.ctorParameters = function () { return [
@@ -2193,6 +2484,7 @@ var TypeaheadDirective = /** @class */ (function () {
         typeaheadOptionsLimit: [{ type: Input }],
         typeaheadOptionField: [{ type: Input }],
         typeaheadGroupField: [{ type: Input }],
+        typeaheadOrderBy: [{ type: Input }],
         typeaheadAsync: [{ type: Input }],
         typeaheadLatinize: [{ type: Input }],
         typeaheadSingleWords: [{ type: Input }],
@@ -2219,6 +2511,231 @@ var TypeaheadDirective = /** @class */ (function () {
     };
     return TypeaheadDirective;
 }());
+if (false) {
+    /**
+     * options source, can be Array of strings, objects or
+     * an Observable for external matching process
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeahead;
+    /**
+     * minimal no of characters that needs to be entered before
+     * typeahead kicks-in. When set to 0, typeahead shows on focus with full
+     * list of options (limited as normal by typeaheadOptionsLimit)
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadMinLength;
+    /**
+     * sets use adaptive position
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.adaptivePosition;
+    /**
+     * turn on/off animation
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.isAnimated;
+    /**
+     * minimal wait time after last character typed before typeahead kicks-in
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadWaitMs;
+    /**
+     * maximum length of options items list. The default value is 20
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadOptionsLimit;
+    /**
+     * when options source is an array of objects, the name of field
+     * that contains the options value, we use array item as option in case
+     * of this field is missing. Supports nested properties and methods.
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadOptionField;
+    /**
+     * when options source is an array of objects, the name of field that
+     * contains the group value, matches are grouped by this field when set.
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadGroupField;
+    /**
+     * Used to specify a custom order of matches. When options source is an array of objects
+     * a field for sorting has to be set up. In case of options source is an array of string,
+     * a field for sorting is absent. The ordering direction could be changed to ascending or descending.
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadOrderBy;
+    /**
+     * should be used only in case of typeahead attribute is Observable of array.
+     * If true - loading of options will be async, otherwise - sync.
+     * true make sense if options array is large.
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadAsync;
+    /**
+     * match latin symbols.
+     * If true the word súper would match super and vice versa.
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadLatinize;
+    /**
+     * Can be use to search words by inserting a single white space between each characters
+     *  for example 'C a l i f o r n i a' will match 'California'.
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadSingleWords;
+    /**
+     * should be used only in case typeaheadSingleWords attribute is true.
+     * Sets the word delimiter to break words. Defaults to space.
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadWordDelimiters;
+    /**
+     * should be used only in case typeaheadSingleWords attribute is true.
+     * Sets the word delimiter to match exact phrase.
+     * Defaults to simple and double quotes.
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadPhraseDelimiters;
+    /**
+     * used to specify a custom item template.
+     * Template variables exposed are called item and index;
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadItemTemplate;
+    /**
+     * used to specify a custom options list template.
+     * Template variables: matches, itemTemplate, query
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.optionsListTemplate;
+    /**
+     * specifies if typeahead is scrollable
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadScrollable;
+    /**
+     * specifies number of options to show in scroll view
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadOptionsInScrollableView;
+    /**
+     * used to hide result on blur
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadHideResultsOnBlur;
+    /**
+     * fired when an options list was opened and the user clicked Tab
+     * If a value equal true, it will be chosen first or active item in the list
+     * If value equal false, it will be chosen an active item in the list or nothing
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadSelectFirstItem;
+    /**
+     * makes active first item in a list
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadIsFirstItemActive;
+    /**
+     * fired when 'busy' state of this component was changed,
+     * fired on async mode only, returns boolean
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadLoading;
+    /**
+     * fired on every key event and returns true
+     * in case of matches are not detected
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadNoResults;
+    /**
+     * fired when option was selected, return object with data of this option
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadOnSelect;
+    /**
+     * fired when blur event occurs. returns the active item
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadOnBlur;
+    /**
+     * A selector specifying the element the typeahead should be appended to.
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.container;
+    /**
+     * This attribute indicates that the dropdown should be opened upwards
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.dropup;
+    /**
+     * if false don't focus the input element the typeahead directive is associated with on selection
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.activeDescendant;
+    /** @type {?} */
+    TypeaheadDirective.prototype.isOpen;
+    /** @type {?} */
+    TypeaheadDirective.prototype.list;
+    /** @type {?} */
+    TypeaheadDirective.prototype._container;
+    /** @type {?} */
+    TypeaheadDirective.prototype.isActiveItemChanged;
+    /** @type {?} */
+    TypeaheadDirective.prototype.isFocused;
+    /** @type {?} */
+    TypeaheadDirective.prototype.cancelRequestOnFocusLost;
+    /**
+     * @type {?}
+     * @protected
+     */
+    TypeaheadDirective.prototype.keyUpEventEmitter;
+    /**
+     * @type {?}
+     * @protected
+     */
+    TypeaheadDirective.prototype._matches;
+    /**
+     * @type {?}
+     * @protected
+     */
+    TypeaheadDirective.prototype.placement;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadDirective.prototype._typeahead;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadDirective.prototype._subscriptions;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadDirective.prototype._outsideClickListener;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadDirective.prototype.changeDetection;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadDirective.prototype.element;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadDirective.prototype.ngControl;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadDirective.prototype.renderer;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -2250,5 +2767,15 @@ var TypeaheadModule = /** @class */ (function () {
     return TypeaheadModule;
 }());
 
-export { TypeaheadConfig, TypeaheadContainerComponent, TypeaheadDirective, TypeaheadMatch, TypeaheadModule, TypeaheadOptions, escapeRegexp, getValueFromObject, latinMap, latinize, tokenize, typeaheadAnimation as ɵa };
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+
+export { TypeaheadConfig, TypeaheadContainerComponent, TypeaheadDirective, TypeaheadMatch, TypeaheadModule, TypeaheadOptions, TypeaheadOrder, escapeRegexp, getValueFromObject, latinMap, latinize, tokenize, typeaheadAnimation as ɵa };
 //# sourceMappingURL=ngx-bootstrap-typeahead.js.map