ngx-bootstrap 5.3.2 → 5.6.1

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

@@ -1,11 +1,11 @@
-import { Component, Renderer2, ElementRef, ViewChild, ViewChildren, HostListener, Injectable, EventEmitter, Directive, ChangeDetectorRef, ViewContainerRef, Input, Output, 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';
 
 /**
@@ -853,6 +853,14 @@ class TypeaheadOptions {
         Object.assign(this, options);
     }
 }
+if (false) {
+    /** @type {?} */
+    TypeaheadOptions.prototype.placement;
+    /** @type {?} */
+    TypeaheadOptions.prototype.animation;
+    /** @type {?} */
+    TypeaheadOptions.prototype.typeaheadRef;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -883,6 +891,36 @@ class TypeaheadMatch {
         return this.value;
     }
 }
+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
+ */
+class 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
@@ -1002,19 +1040,25 @@ const typeaheadAnimation = trigger('typeaheadAnimation', [
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/** @type {?} */
+let nextWindowId = 0;
 class TypeaheadContainerComponent {
     /**
      * @param {?} positionService
      * @param {?} renderer
      * @param {?} element
+     * @param {?} changeDetectorRef
      */
-    constructor(positionService, renderer, element) {
+    constructor(positionService, renderer, element, changeDetectorRef) {
         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
@@ -1031,6 +1075,19 @@ class TypeaheadContainerComponent {
             const 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 {?}
+         */
+        () => {
+            if (this.isAnimated) {
+                this.animationState = this.isTopPosition ? 'animated-up' : 'animated-down';
+                this.changeDetectorRef.detectChanges();
+                return;
+            }
+            this.animationState = 'unanimated';
+            this.changeDetectorRef.detectChanges();
+        }));
     }
     /**
      * @return {?}
@@ -1038,12 +1095,33 @@ class TypeaheadContainerComponent {
     get isBs4() {
         return !isBs3();
     }
+    /**
+     * @return {?}
+     */
+    get typeaheadTemplateMethods() {
+        /* tslint:disable:no-this-assignment */
+        /** @type {?} */
+        const _that = this;
+        return {
+            selectMatch: this.selectMatch.bind(_that),
+            selectActive: this.selectActive.bind(_that),
+            isActive: this.isActive.bind(_that)
+        };
+    }
     /**
      * @return {?}
      */
     get active() {
         return this._active;
     }
+    /**
+     * @param {?} active
+     * @return {?}
+     */
+    set active(active) {
+        this._active = active;
+        this.activeChanged();
+    }
     /**
      * @return {?}
      */
@@ -1059,26 +1137,6 @@ class TypeaheadContainerComponent {
             modifiers: { flip: { enabled: this.adaptivePosition } },
             allowedPositions: ['top', 'bottom']
         });
-        this.positionService.event$
-            .pipe(take(1), tap((/**
-         * @return {?}
-         */
-        () => {
-            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 {?}
-         */
-        () => {
-            this.positionService.enable();
-        }));
         this._matches = value;
         this.needScrollbar = this.typeaheadScrollable && this.typeaheadOptionsInScrollableView < this.matches.length;
         if (this.typeaheadScrollable) {
@@ -1090,7 +1148,7 @@ class TypeaheadContainerComponent {
             }));
         }
         if (this.typeaheadIsFirstItemActive && this._matches.length > 0) {
-            this._active = this._matches[0];
+            this.active = this._matches[0];
             if (this._active.isHeader()) {
                 this.nextActiveMatch();
             }
@@ -1106,7 +1164,7 @@ class TypeaheadContainerComponent {
                 this.selectActive(concurrency);
                 return;
             }
-            this._active = null;
+            this.active = null;
         }
     }
     /**
@@ -1171,13 +1229,21 @@ class TypeaheadContainerComponent {
             this.selectMatch(this._active);
         }
     }
+    /**
+     * @return {?}
+     */
+    activeChanged() {
+        /** @type {?} */
+        const index = this.matches.indexOf(this._active);
+        this.activeChangeEvent.emit(`${this.popupId}-${index}`);
+    }
     /**
      * @return {?}
      */
     prevActiveMatch() {
         /** @type {?} */
         const 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();
         }
@@ -1191,7 +1257,7 @@ class TypeaheadContainerComponent {
     nextActiveMatch() {
         /** @type {?} */
         const 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();
         }
@@ -1205,7 +1271,7 @@ class TypeaheadContainerComponent {
      */
     selectActive(value) {
         this.isFocused = true;
-        this._active = value;
+        this.active = value;
     }
     /**
      * @param {?} match
@@ -1264,7 +1330,7 @@ class TypeaheadContainerComponent {
      * @return {?}
      */
     isActive(value) {
-        return this._active === value;
+        return this.active === value;
     }
     /**
      * @param {?} value
@@ -1347,6 +1413,12 @@ class TypeaheadContainerComponent {
             }
         }
     }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        this.positionServiceSubscription.unsubscribe();
+    }
     /**
      * @private
      * @return {?}
@@ -1365,14 +1437,15 @@ class TypeaheadContainerComponent {
 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: [`
@@ -1391,13 +1464,89 @@ TypeaheadContainerComponent.decorators = [
 TypeaheadContainerComponent.ctorParameters = () => [
     { 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',] }]
 };
+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
@@ -1420,6 +1569,10 @@ class TypeaheadConfig {
          * 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
          */
@@ -1438,6 +1591,44 @@ class TypeaheadConfig {
 TypeaheadConfig.decorators = [
     { type: Injectable }
 ];
+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
@@ -1469,7 +1660,7 @@ class TypeaheadDirective {
          */
         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.
          */
@@ -1530,22 +1721,25 @@ class TypeaheadDirective {
         /**
          * 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,
@@ -1562,8 +1756,7 @@ class TypeaheadDirective {
             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)) {
@@ -1640,18 +1833,30 @@ class TypeaheadDirective {
      * @return {?}
      */
     onFocus() {
-        if (this.typeaheadMinLength === 0) {
-            this.typeaheadLoading.emit(true);
-            this.keyUpEventEmitter.emit(this.element.nativeElement.value || '');
-        }
+        this.isFocused = true;
+        // add setTimeout to fix issue #5251
+        // to get and emit updated value if it's changed on focus
+        setTimeout((/**
+         * @return {?}
+         */
+        () => {
+            if (this.typeaheadMinLength === 0) {
+                this.typeaheadLoading.emit(true);
+                this.keyUpEventEmitter.emit(this.element.nativeElement.value || '');
+            }
+        }), 0);
     }
     /**
      * @return {?}
      */
     onBlur() {
+        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
@@ -1663,6 +1868,10 @@ class TypeaheadDirective {
             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) {
@@ -1701,7 +1910,7 @@ class TypeaheadDirective {
         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,
@@ -1735,6 +1944,15 @@ class TypeaheadDirective {
             : normalizedQuery;
         this._container.matches = this._matches;
         this.element.nativeElement.focus();
+        this._container.activeChangeEvent.subscribe((/**
+         * @param {?} activeId
+         * @return {?}
+         */
+        (activeId) => {
+            this.activeDescendant = activeId;
+            this.changeDetection.markForCheck();
+        }));
+        this.isOpen = true;
     }
     /**
      * @return {?}
@@ -1744,6 +1962,8 @@ class TypeaheadDirective {
             this._typeahead.hide();
             this._outsideClickListener();
             this._container = null;
+            this.isOpen = false;
+            this.changeDetection.markForCheck();
         }
     }
     /**
@@ -1801,8 +2021,7 @@ class TypeaheadDirective {
              * @return {?}
              */
             (option) => {
-                return (option &&
-                    this.testMatch(this.normalizeOption(option), normalizedQuery));
+                return option && this.testMatch(this.normalizeOption(option), normalizedQuery);
             })), toArray());
         })))
             .subscribe((/**
@@ -1813,7 +2032,6 @@ class TypeaheadDirective {
             this.finalizeAsyncCall(matches);
         })));
     }
-    // tslint:disable-next-line:no-any
     /**
      * @protected
      * @param {?} option
@@ -1834,8 +2052,7 @@ class TypeaheadDirective {
      * @return {?}
      */
     normalizeQuery(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 {?} */
         let normalizedQuery = (this.typeaheadLatinize
             ? latinize(value)
@@ -1880,6 +2097,9 @@ class TypeaheadDirective {
             this.hide();
             return;
         }
+        if (!this.isFocused && this.cancelRequestOnFocusLost) {
+            return;
+        }
         if (this._container) {
             // fix: remove usage of ngControl internals
             /** @type {?} */
@@ -1906,12 +2126,14 @@ class TypeaheadDirective {
     prepareMatches(options) {
         /** @type {?} */
         const limited = options.slice(0, this.typeaheadOptionsLimit);
+        /** @type {?} */
+        const sorted = !this.typeaheadOrderBy ? limited : this.orderMatches(limited);
         if (this.typeaheadGroupField) {
             /** @type {?} */
             let matches = [];
             // extract all group names
             /** @type {?} */
-            const groups = limited
+            const groups = sorted
                 .map((/**
              * @param {?} option
              * @return {?}
@@ -1932,17 +2154,13 @@ class TypeaheadDirective {
                 // add group header to array of matches
                 matches.push(new TypeaheadMatch(group, group, true));
                 // add each item of group to array of matches
-                matches = matches.concat(limited
-                    .filter((
-                // tslint:disable-next-line:no-any
-                /**
+                matches = matches.concat(sorted
+                    .filter((/**
                  * @param {?} option
                  * @return {?}
                  */
                 (option) => getValueFromObject(option, this.typeaheadGroupField) === group))
-                    .map((
-                // tslint:disable-next-line:no-any
-                /**
+                    .map((/**
                  * @param {?} option
                  * @return {?}
                  */
@@ -1951,7 +2169,7 @@ class TypeaheadDirective {
             this._matches = matches;
         }
         else {
-            this._matches = limited.map((
+            this._matches = sorted.map((
             // tslint:disable-next-line:no-any
             /**
              * @param {?} option
@@ -1960,6 +2178,56 @@ class TypeaheadDirective {
             (option) => new TypeaheadMatch(option, getValueFromObject(option, this.typeaheadOptionField))));
         }
     }
+    /**
+     * @protected
+     * @param {?} options
+     * @return {?}
+     */
+    orderMatches(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;
+        }
+        const { field, direction } = this.typeaheadOrderBy;
+        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 {?}
+         */
+        (a, b) => {
+            /** @type {?} */
+            const stringA = getValueFromObject(a, field);
+            /** @type {?} */
+            const stringB = getValueFromObject(b, field);
+            if (stringA < stringB) {
+                return direction === 'asc' ? -1 : 1;
+            }
+            if (stringA > stringB) {
+                return direction === 'asc' ? 1 : -1;
+            }
+            return 0;
+        }));
+    }
     /**
      * @protected
      * @return {?}
@@ -1969,7 +2237,16 @@ class TypeaheadDirective {
     }
 }
 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 = () => [
@@ -1990,6 +2267,7 @@ TypeaheadDirective.propDecorators = {
     typeaheadOptionsLimit: [{ type: Input }],
     typeaheadOptionField: [{ type: Input }],
     typeaheadGroupField: [{ type: Input }],
+    typeaheadOrderBy: [{ type: Input }],
     typeaheadAsync: [{ type: Input }],
     typeaheadLatinize: [{ type: Input }],
     typeaheadSingleWords: [{ type: Input }],
@@ -2014,6 +2292,231 @@ TypeaheadDirective.propDecorators = {
     onBlur: [{ type: HostListener, args: ['blur',] }],
     onKeydown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
 };
+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
@@ -2039,5 +2542,15 @@ TypeaheadModule.decorators = [
             },] }
 ];
 
-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