ngx-bootstrap 5.3.2 → 5.6.1

package/typeahead/bundles/ngx-bootstrap-typeahead.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('ngx-bootstrap/utils'), require('ngx-bootstrap/positioning'), require('@angular/animations'), require('rxjs/operators'), require('@angular/forms'), require('rxjs'), require('ngx-bootstrap/component-loader'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('ngx-bootstrap/typeahead', ['exports', '@angular/core', 'ngx-bootstrap/utils', 'ngx-bootstrap/positioning', '@angular/animations', 'rxjs/operators', '@angular/forms', 'rxjs', 'ngx-bootstrap/component-loader', '@angular/common'], factory) :
-    (global = global || self, factory((global['ngx-bootstrap'] = global['ngx-bootstrap'] || {}, global['ngx-bootstrap'].typeahead = {}), global.ng.core, global.utils, global.positioning, global.ng.animations, global.rxjs.operators, global.ng.forms, global.rxjs, global.componentLoader, global.ng.common));
-}(this, function (exports, core, utils, positioning, animations, operators, forms, rxjs, componentLoader, common) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('ngx-bootstrap/utils'), require('ngx-bootstrap/positioning'), require('@angular/animations'), require('@angular/forms'), require('rxjs'), require('ngx-bootstrap/component-loader'), require('rxjs/operators'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('ngx-bootstrap/typeahead', ['exports', '@angular/core', 'ngx-bootstrap/utils', 'ngx-bootstrap/positioning', '@angular/animations', '@angular/forms', 'rxjs', 'ngx-bootstrap/component-loader', 'rxjs/operators', '@angular/common'], factory) :
+    (global = global || self, factory((global['ngx-bootstrap'] = global['ngx-bootstrap'] || {}, global['ngx-bootstrap'].typeahead = {}), global.ng.core, global.utils, global.positioning, global.ng.animations, global.ng.forms, global.rxjs, global.componentLoader, global.rxjs.operators, global.ng.common));
+}(this, (function (exports, core, utils, positioning, animations, forms, rxjs, componentLoader, operators, common) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation. All rights reserved.
@@ -18,6 +18,97 @@
     See the Apache Version 2.0 License for specific language governing permissions
     and limitations under the License.
     ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+                t[p[i]] = s[p[i]];
+        return t;
+    }
+
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); }
+    }
+
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+    }
+
+    function __awaiter(thisArg, _arguments, P, generator) {
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f) throw new TypeError("Generator is already executing.");
+            while (_) try {
+                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+                if (y = 0, t) op = [op[0] & 2, t.value];
+                switch (op[0]) {
+                    case 0: case 1: t = op; break;
+                    case 4: _.label++; return { value: op[1], done: false };
+                    case 5: _.label++; y = op[1]; op = [0]; continue;
+                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                    default:
+                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                        if (t[2]) _.ops.pop();
+                        _.trys.pop(); continue;
+                }
+                op = body.call(thisArg, _);
+            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+
+    function __exportStar(m, exports) {
+        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+    }
 
     function __values(o) {
         var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
@@ -28,6 +119,76 @@
                 return { value: o && o[i++], done: !o };
             }
         };
+    }
+
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
+            }
+            finally { if (e) throw e.error; }
+        }
+        return ar;
+    }
+
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
+    }
+
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+    }
+
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+        return cooked;
+    };
+
+    function __importStar(mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+        result.default = mod;
+        return result;
+    }
+
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
     }
 
     /**
@@ -873,6 +1034,14 @@
         }
         return TypeaheadOptions;
     }());
+    if (false) {
+        /** @type {?} */
+        TypeaheadOptions.prototype.placement;
+        /** @type {?} */
+        TypeaheadOptions.prototype.animation;
+        /** @type {?} */
+        TypeaheadOptions.prototype.typeaheadRef;
+    }
 
     /**
      * @fileoverview added by tsickle
@@ -907,6 +1076,39 @@
         };
         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
@@ -1039,14 +1241,20 @@
      * @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 core.EventEmitter();
             this.isFocused = false;
-            this.visibility = 'hidden';
             this.height = 0;
+            this.popupId = "ngb-typeahead-" + nextWindowId++;
             this._matches = [];
             this.isScrolledIntoView = (/**
              * @param {?} elem
@@ -1063,6 +1271,19 @@
                 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: /**
@@ -1074,6 +1295,23 @@
             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 {?}
@@ -1081,6 +1319,14 @@
             function () {
                 return this._active;
             },
+            set: /**
+             * @param {?} active
+             * @return {?}
+             */
+            function (active) {
+                this._active = active;
+                this.activeChanged();
+            },
             enumerable: true,
             configurable: true
         });
@@ -1101,26 +1347,6 @@
                     modifiers: { flip: { enabled: this.adaptivePosition } },
                     allowedPositions: ['top', 'bottom']
                 });
-                this.positionService.event$
-                    .pipe(operators.take(1), operators.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';
-                })), operators.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) {
@@ -1132,7 +1358,7 @@
                     }));
                 }
                 if (this.typeaheadIsFirstItemActive && this._matches.length > 0) {
-                    this._active = this._matches[0];
+                    this.active = this._matches[0];
                     if (this._active.isHeader()) {
                         this.nextActiveMatch();
                     }
@@ -1148,7 +1374,7 @@
                         this.selectActive(concurrency);
                         return;
                     }
-                    this._active = null;
+                    this.active = null;
                 }
             },
             enumerable: true,
@@ -1256,6 +1482,17 @@
                 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 {?}
          */
@@ -1265,7 +1502,7 @@
         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();
             }
@@ -1282,7 +1519,7 @@
         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();
             }
@@ -1300,7 +1537,7 @@
          */
         function (value) {
             this.isFocused = true;
-            this._active = value;
+            this.active = value;
         };
         /**
          * @param {?} match
@@ -1371,7 +1608,7 @@
          * @return {?}
          */
         function (value) {
-            return this._active === value;
+            return this.active === value;
         };
         /**
          * @param {?} value
@@ -1472,6 +1709,15 @@
                 }
             }
         };
+        /**
+         * @return {?}
+         */
+        TypeaheadContainerComponent.prototype.ngOnDestroy = /**
+         * @return {?}
+         */
+        function () {
+            this.positionServiceSubscription.unsubscribe();
+        };
         /**
          * @private
          * @return {?}
@@ -1497,14 +1743,15 @@
         TypeaheadContainerComponent.decorators = [
             { type: core.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  "]
@@ -1514,15 +1761,91 @@
         TypeaheadContainerComponent.ctorParameters = function () { return [
             { type: positioning.PositioningService },
             { type: core.Renderer2 },
-            { type: core.ElementRef }
+            { type: core.ElementRef },
+            { type: core.ChangeDetectorRef }
         ]; };
         TypeaheadContainerComponent.propDecorators = {
+            activeChangeEvent: [{ type: core.Output, args: ['activeChange',] }],
             ulElement: [{ type: core.ViewChild, args: ['ulElement', { static: false },] }],
             liElements: [{ type: core.ViewChildren, args: ['liElements',] }],
             focusLost: [{ type: core.HostListener, args: ['mouseleave',] }, { type: core.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
@@ -1545,6 +1868,10 @@
              * 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
              */
@@ -1564,6 +1891,44 @@
         ];
         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
@@ -1586,7 +1951,7 @@
              */
             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.
              */
@@ -1647,22 +2012,25 @@
             /**
              * fired when blur event occurs. returns the active item
              */
-            // tslint:disable-next-line:no-any
             this.typeaheadOnBlur = new core.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 core.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,
@@ -1682,8 +2050,7 @@
                 this.typeaheadMinLength === void 0 ? 1 : this.typeaheadMinLength;
             this.typeaheadWaitMs = this.typeaheadWaitMs || 0;
             // async should be false in case of array
-            if (this.typeaheadAsync === undefined &&
-                !(rxjs.isObservable(this.typeahead))) {
+            if (this.typeaheadAsync === undefined && !(rxjs.isObservable(this.typeahead))) {
                 this.typeaheadAsync = false;
             }
             if (rxjs.isObservable(this.typeahead)) {
@@ -1771,10 +2138,19 @@
          * @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 {?}
@@ -1783,9 +2159,13 @@
          * @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
@@ -1801,6 +2181,10 @@
                 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) {
@@ -1851,7 +2235,7 @@
             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,
@@ -1885,6 +2269,15 @@
                 : 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 {?}
@@ -1897,6 +2290,8 @@
                 this._typeahead.hide();
                 this._outsideClickListener();
                 this._container = null;
+                this.isOpen = false;
+                this.changeDetection.markForCheck();
             }
         };
         /**
@@ -1981,8 +2376,7 @@
                  * @return {?}
                  */
                 function (option) {
-                    return (option &&
-                        _this.testMatch(_this.normalizeOption(option), normalizedQuery));
+                    return option && _this.testMatch(_this.normalizeOption(option), normalizedQuery);
                 })), operators.toArray());
             })))
                 .subscribe((/**
@@ -1993,16 +2387,12 @@
                 _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 {?}
@@ -2027,8 +2417,7 @@
          * @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)
@@ -2084,6 +2473,9 @@
                 this.hide();
                 return;
             }
+            if (!this.isFocused && this.cancelRequestOnFocusLost) {
+                return;
+            }
             if (this._container) {
                 // fix: remove usage of ngControl internals
                 /** @type {?} */
@@ -2116,12 +2508,14 @@
             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 {?}
@@ -2144,21 +2538,15 @@
                     // 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 {?}
                      */
@@ -2169,7 +2557,7 @@
                 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
                 /**
@@ -2181,6 +2569,61 @@
                 }));
             }
         };
+        /**
+         * @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 {?}
@@ -2193,7 +2636,16 @@
             return this._matches.length > 0;
         };
         TypeaheadDirective.decorators = [
-            { type: core.Directive, args: [{ selector: '[typeahead]', exportAs: 'bs-typeahead' },] }
+            { type: core.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 [
@@ -2214,6 +2666,7 @@
             typeaheadOptionsLimit: [{ type: core.Input }],
             typeaheadOptionField: [{ type: core.Input }],
             typeaheadGroupField: [{ type: core.Input }],
+            typeaheadOrderBy: [{ type: core.Input }],
             typeaheadAsync: [{ type: core.Input }],
             typeaheadLatinize: [{ type: core.Input }],
             typeaheadSingleWords: [{ type: core.Input }],
@@ -2240,6 +2693,231 @@
         };
         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
@@ -2277,6 +2955,7 @@
     exports.TypeaheadMatch = TypeaheadMatch;
     exports.TypeaheadModule = TypeaheadModule;
     exports.TypeaheadOptions = TypeaheadOptions;
+    exports.TypeaheadOrder = TypeaheadOrder;
     exports.escapeRegexp = escapeRegexp;
     exports.getValueFromObject = getValueFromObject;
     exports.latinMap = latinMap;
@@ -2286,5 +2965,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-}));
+})));
 //# sourceMappingURL=ngx-bootstrap-typeahead.umd.js.map