ngx-bootstrap 5.6.1 → 6.2.0

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

@@ -1,12 +1,12 @@
 import { __values } from 'tslib';
-import { EventEmitter, Component, Renderer2, ElementRef, ChangeDetectorRef, Output, ViewChild, ViewChildren, HostListener, Injectable, Directive, ViewContainerRef, Input, NgModule } from '@angular/core';
+import { EventEmitter, Component, Renderer2, ElementRef, ChangeDetectorRef, Output, ViewChild, ViewChildren, HostListener, Injectable, ɵɵdefineInjectable, 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 { 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 { debounceTime, tap, switchMap, mergeMap, filter, toArray } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 
 /**
@@ -963,11 +963,44 @@ function escapeRegexp(queryToEscape) {
  * @param {?} str
  * @param {?=} wordRegexDelimiters
  * @param {?=} phraseRegexDelimiters
+ * @param {?=} delimitersForMultipleSearch
  * @return {?}
  */
-function tokenize(str, wordRegexDelimiters, phraseRegexDelimiters) {
+function tokenize(str, wordRegexDelimiters, phraseRegexDelimiters, delimitersForMultipleSearch) {
     if (wordRegexDelimiters === void 0) { wordRegexDelimiters = ' '; }
     if (phraseRegexDelimiters === void 0) { phraseRegexDelimiters = ''; }
+    /** @type {?} */
+    var result = [];
+    if (!delimitersForMultipleSearch) {
+        result = tokenizeWordsAndPhrases(str, wordRegexDelimiters, phraseRegexDelimiters);
+    }
+    else {
+        /** @type {?} */
+        var multipleSearchRegexStr = "([" + delimitersForMultipleSearch + "]+)";
+        /** @type {?} */
+        var delimitedTokens = str.split(new RegExp(multipleSearchRegexStr, 'g'));
+        /** @type {?} */
+        var lastToken = delimitedTokens[delimitedTokens.length - 1];
+        if (lastToken > '') {
+            if (wordRegexDelimiters && phraseRegexDelimiters) {
+                result = tokenizeWordsAndPhrases(lastToken, wordRegexDelimiters, phraseRegexDelimiters);
+            }
+            else {
+                result.push(lastToken);
+            }
+        }
+    }
+    return result;
+}
+/**
+ * @param {?} str
+ * @param {?} wordRegexDelimiters
+ * @param {?} phraseRegexDelimiters
+ * @return {?}
+ */
+function tokenizeWordsAndPhrases(str, wordRegexDelimiters, phraseRegexDelimiters) {
+    /** @type {?} */
+    var result = [];
     /* tslint:enable */
     /** @type {?} */
     var regexStr = "(?:[" + phraseRegexDelimiters + "])([^" + phraseRegexDelimiters + "]+)" +
@@ -975,8 +1008,6 @@ function tokenize(str, wordRegexDelimiters, phraseRegexDelimiters) {
     /** @type {?} */
     var preTokenized = str.split(new RegExp(regexStr, 'g'));
     /** @type {?} */
-    var result = [];
-    /** @type {?} */
     var preTokenizedLength = preTokenized.length;
     /** @type {?} */
     var token;
@@ -1705,8 +1736,11 @@ var TypeaheadConfig = /** @class */ (function () {
         this.minLength = 1;
     }
     TypeaheadConfig.decorators = [
-        { type: Injectable }
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
     ];
+    /** @nocollapse */ TypeaheadConfig.ɵprov = ɵɵdefineInjectable({ factory: function TypeaheadConfig_Factory() { return new TypeaheadConfig(); }, token: TypeaheadConfig, providedIn: "root" });
     return TypeaheadConfig;
 }());
 if (false) {
@@ -1789,6 +1823,23 @@ var TypeaheadDirective = /** @class */ (function () {
          * Sets the word delimiter to break words. Defaults to space.
          */
         this.typeaheadWordDelimiters = ' ';
+        /**
+         * Can be used to conduct a search of multiple items and have suggestion not for the
+         * whole value of the input but for the value that comes after a delimiter provided via
+         * typeaheadMultipleSearchDelimiters attribute. This option can only be used together with
+         * typeaheadSingleWords option if typeaheadWordDelimiters and typeaheadPhraseDelimiters
+         * are different from typeaheadMultipleSearchDelimiters to avoid conflict in determining
+         * when to delimit multiple searches and when a single word.
+         */
+        this.typeaheadMultipleSearch = void 0;
+        /**
+         * should be used only in case typeaheadMultipleSearch attribute is true.
+         * Sets the multiple search delimiter to know when to start a new search. Defaults to comma.
+         * If space needs to be used, then explicitly set typeaheadWordDelimiters to something else than space
+         * because space is used by default OR set typeaheadSingleWords attribute to false if you don't need
+         * to use it together with multiple search.
+         */
+        this.typeaheadMultipleSearchDelimiters = ',';
         /**
          * should be used only in case typeaheadSingleWords attribute is true.
          * Sets the word delimiter to match exact phrase.
@@ -1842,13 +1893,14 @@ var TypeaheadDirective = /** @class */ (function () {
         this.cancelRequestOnFocusLost = false;
         // tslint:disable-next-line:no-any
         this.keyUpEventEmitter = new EventEmitter();
+        this._matches = [];
         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,
+            cancelRequestOnFocusLost: config.cancelRequestOnFocusLost,
             typeaheadSelectFirstItem: config.selectFirstItem,
             typeaheadIsFirstItemActive: config.isFirstItemActive,
             typeaheadMinLength: config.minLength,
@@ -1880,6 +1932,7 @@ var TypeaheadDirective = /** @class */ (function () {
         else {
             this.syncActions();
         }
+        this.checkDelimitersConflict();
     };
     /**
      * @param {?} e
@@ -2026,7 +2079,16 @@ var TypeaheadDirective = /** @class */ (function () {
      */
     function (match) {
         /** @type {?} */
-        var valueStr = match.value;
+        var valueStr;
+        if (this.typeaheadMultipleSearch) {
+            /** @type {?} */
+            var tokens = this._allEnteredValue.split(new RegExp("([" + this.typeaheadMultipleSearchDelimiters + "]+)"));
+            this._allEnteredValue = tokens.slice(0, tokens.length - 1).concat(match.value).join('');
+            valueStr = this._allEnteredValue;
+        }
+        else {
+            valueStr = match.value;
+        }
         this.ngControl.viewToModelUpdate(valueStr);
         (this.ngControl.control).setValue(valueStr);
         this.changeDetection.markForCheck();
@@ -2082,9 +2144,7 @@ var TypeaheadDirective = /** @class */ (function () {
             : this.ngControl.control.value)
             .toString()
             .toLowerCase();
-        this._container.query = this.typeaheadSingleWords
-            ? tokenize(normalizedQuery, this.typeaheadWordDelimiters, this.typeaheadPhraseDelimiters)
-            : normalizedQuery;
+        this._container.query = this.tokenizeQuery(normalizedQuery);
         this._container.matches = this._matches;
         this.element.nativeElement.focus();
         this._container.activeChangeEvent.subscribe((/**
@@ -2158,7 +2218,13 @@ var TypeaheadDirective = /** @class */ (function () {
     function () {
         var _this = this;
         this._subscriptions.push(this.keyUpEventEmitter
-            .pipe(debounceTime(this.typeaheadWaitMs), switchMap((/**
+            .pipe(debounceTime(this.typeaheadWaitMs), tap((/**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            _this._allEnteredValue = value;
+        })), switchMap((/**
          * @return {?}
          */
         function () { return _this.typeahead; })))
@@ -2186,6 +2252,7 @@ var TypeaheadDirective = /** @class */ (function () {
          * @return {?}
          */
         function (value) {
+            _this._allEnteredValue = value;
             /** @type {?} */
             var normalizedQuery = _this.normalizeQuery(value);
             return from(_this.typeahead)
@@ -2224,6 +2291,34 @@ var TypeaheadDirective = /** @class */ (function () {
             : optionValue;
         return normalizedOption.toLowerCase();
     };
+    /**
+     * @protected
+     * @param {?} currentQuery
+     * @return {?}
+     */
+    TypeaheadDirective.prototype.tokenizeQuery = /**
+     * @protected
+     * @param {?} currentQuery
+     * @return {?}
+     */
+    function (currentQuery) {
+        /** @type {?} */
+        var query = currentQuery;
+        if (this.typeaheadMultipleSearch && this.typeaheadSingleWords) {
+            if (!this.haveCommonCharacters("" + this.typeaheadPhraseDelimiters + this.typeaheadWordDelimiters, this.typeaheadMultipleSearchDelimiters)) {
+                // single words and multiple search delimiters are different, can be used together
+                query = tokenize((/** @type {?} */ (query)), this.typeaheadWordDelimiters, this.typeaheadPhraseDelimiters, this.typeaheadMultipleSearchDelimiters);
+            }
+        }
+        else if (this.typeaheadSingleWords) {
+            query = tokenize((/** @type {?} */ (query)), this.typeaheadWordDelimiters, this.typeaheadPhraseDelimiters);
+        }
+        else {
+            // multiple searches
+            query = tokenize((/** @type {?} */ (query)), null, null, this.typeaheadMultipleSearchDelimiters);
+        }
+        return query;
+    };
     /**
      * @protected
      * @param {?} value
@@ -2242,9 +2337,7 @@ var TypeaheadDirective = /** @class */ (function () {
             : value)
             .toString()
             .toLowerCase();
-        normalizedQuery = this.typeaheadSingleWords
-            ? tokenize(normalizedQuery, this.typeaheadWordDelimiters, this.typeaheadPhraseDelimiters)
-            : normalizedQuery;
+        normalizedQuery = this.tokenizeQuery(normalizedQuery);
         return normalizedQuery;
     };
     /**
@@ -2303,9 +2396,7 @@ var TypeaheadDirective = /** @class */ (function () {
             // This improves the speed as it won't have to be done for each list item
             /** @type {?} */
             var normalizedQuery = _controlValue.toString().toLowerCase();
-            this._container.query = this.typeaheadSingleWords
-                ? tokenize(normalizedQuery, this.typeaheadWordDelimiters, this.typeaheadPhraseDelimiters)
-                : normalizedQuery;
+            this._container.query = this.tokenizeQuery(normalizedQuery);
             this._container.matches = this._matches;
         }
         else {
@@ -2453,14 +2544,48 @@ var TypeaheadDirective = /** @class */ (function () {
     function () {
         return this._matches.length > 0;
     };
+    /**
+     * @protected
+     * @return {?}
+     */
+    TypeaheadDirective.prototype.checkDelimitersConflict = /**
+     * @protected
+     * @return {?}
+     */
+    function () {
+        if (this.typeaheadMultipleSearch && this.typeaheadSingleWords
+            && (this.haveCommonCharacters("" + this.typeaheadPhraseDelimiters + this.typeaheadWordDelimiters, this.typeaheadMultipleSearchDelimiters))) {
+            throw new Error("Delimiters used in typeaheadMultipleSearchDelimiters must be different\n          from delimiters used in typeaheadWordDelimiters (current value: " + this.typeaheadWordDelimiters + ") and\n          typeaheadPhraseDelimiters (current value: " + this.typeaheadPhraseDelimiters + ").\n          Please refer to the documentation");
+        }
+    };
+    /**
+     * @protected
+     * @param {?} str1
+     * @param {?} str2
+     * @return {?}
+     */
+    TypeaheadDirective.prototype.haveCommonCharacters = /**
+     * @protected
+     * @param {?} str1
+     * @param {?} str2
+     * @return {?}
+     */
+    function (str1, str2) {
+        for (var i = 0; i < str1.length; i++) {
+            if (str1.charAt(i).indexOf(str2) > -1) {
+                return true;
+            }
+        }
+        return false;
+    };
     TypeaheadDirective.decorators = [
         { 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-owns]': 'isOpen ? this._container.popupId : null',
+                        '[attr.aria-expanded]': 'isOpen',
                         '[attr.aria-autocomplete]': 'list'
                     }
                 },] }
@@ -2489,6 +2614,8 @@ var TypeaheadDirective = /** @class */ (function () {
         typeaheadLatinize: [{ type: Input }],
         typeaheadSingleWords: [{ type: Input }],
         typeaheadWordDelimiters: [{ type: Input }],
+        typeaheadMultipleSearch: [{ type: Input }],
+        typeaheadMultipleSearchDelimiters: [{ type: Input }],
         typeaheadPhraseDelimiters: [{ type: Input }],
         typeaheadItemTemplate: [{ type: Input }],
         optionsListTemplate: [{ type: Input }],
@@ -2590,6 +2717,25 @@ if (false) {
      * @type {?}
      */
     TypeaheadDirective.prototype.typeaheadWordDelimiters;
+    /**
+     * Can be used to conduct a search of multiple items and have suggestion not for the
+     * whole value of the input but for the value that comes after a delimiter provided via
+     * typeaheadMultipleSearchDelimiters attribute. This option can only be used together with
+     * typeaheadSingleWords option if typeaheadWordDelimiters and typeaheadPhraseDelimiters
+     * are different from typeaheadMultipleSearchDelimiters to avoid conflict in determining
+     * when to delimit multiple searches and when a single word.
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadMultipleSearch;
+    /**
+     * should be used only in case typeaheadMultipleSearch attribute is true.
+     * Sets the multiple search delimiter to know when to start a new search. Defaults to comma.
+     * If space needs to be used, then explicitly set typeaheadWordDelimiters to something else than space
+     * because space is used by default OR set typeaheadSingleWords attribute to false if you don't need
+     * to use it together with multiple search.
+     * @type {?}
+     */
+    TypeaheadDirective.prototype.typeaheadMultipleSearchDelimiters;
     /**
      * should be used only in case typeaheadSingleWords attribute is true.
      * Sets the word delimiter to match exact phrase.
@@ -2715,6 +2861,11 @@ if (false) {
      * @private
      */
     TypeaheadDirective.prototype._outsideClickListener;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadDirective.prototype._allEnteredValue;
     /**
      * @type {?}
      * @private
@@ -2753,7 +2904,7 @@ var TypeaheadModule = /** @class */ (function () {
     function () {
         return {
             ngModule: TypeaheadModule,
-            providers: [ComponentLoaderFactory, PositioningService, TypeaheadConfig]
+            providers: [ComponentLoaderFactory, PositioningService]
         };
     };
     TypeaheadModule.decorators = [