ngx-bootstrap 5.6.1 → 6.2.0

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

@@ -1,11 +1,11 @@
-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';
 
 /**
@@ -957,9 +957,42 @@ function escapeRegexp(queryToEscape) {
  * @param {?} str
  * @param {?=} wordRegexDelimiters
  * @param {?=} phraseRegexDelimiters
+ * @param {?=} delimitersForMultipleSearch
  * @return {?}
  */
-function tokenize(str, wordRegexDelimiters = ' ', phraseRegexDelimiters = '') {
+function tokenize(str, wordRegexDelimiters = ' ', phraseRegexDelimiters = '', delimitersForMultipleSearch) {
+    /** @type {?} */
+    let result = [];
+    if (!delimitersForMultipleSearch) {
+        result = tokenizeWordsAndPhrases(str, wordRegexDelimiters, phraseRegexDelimiters);
+    }
+    else {
+        /** @type {?} */
+        const multipleSearchRegexStr = `([${delimitersForMultipleSearch}]+)`;
+        /** @type {?} */
+        const delimitedTokens = str.split(new RegExp(multipleSearchRegexStr, 'g'));
+        /** @type {?} */
+        const 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 {?} */
+    const result = [];
     /* tslint:enable */
     /** @type {?} */
     const regexStr = `(?:[${phraseRegexDelimiters}])([^${phraseRegexDelimiters}]+)` +
@@ -967,8 +1000,6 @@ function tokenize(str, wordRegexDelimiters = ' ', phraseRegexDelimiters = '') {
     /** @type {?} */
     const preTokenized = str.split(new RegExp(regexStr, 'g'));
     /** @type {?} */
-    const result = [];
-    /** @type {?} */
     const preTokenizedLength = preTokenized.length;
     /** @type {?} */
     let token;
@@ -1589,8 +1620,11 @@ class TypeaheadConfig {
     }
 }
 TypeaheadConfig.decorators = [
-    { type: Injectable }
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
 ];
+/** @nocollapse */ TypeaheadConfig.ɵprov = ɵɵdefineInjectable({ factory: function TypeaheadConfig_Factory() { return new TypeaheadConfig(); }, token: TypeaheadConfig, providedIn: "root" });
 if (false) {
     /**
      * sets use adaptive position
@@ -1680,6 +1714,23 @@ class TypeaheadDirective {
          * 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.
@@ -1733,13 +1784,14 @@ class TypeaheadDirective {
         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,
@@ -1768,6 +1820,7 @@ class TypeaheadDirective {
         else {
             this.syncActions();
         }
+        this.checkDelimitersConflict();
     }
     /**
      * @param {?} e
@@ -1891,7 +1944,16 @@ class TypeaheadDirective {
      */
     changeModel(match) {
         /** @type {?} */
-        const valueStr = match.value;
+        let valueStr;
+        if (this.typeaheadMultipleSearch) {
+            /** @type {?} */
+            const 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();
@@ -1939,9 +2001,7 @@ class TypeaheadDirective {
             : 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((/**
@@ -1990,7 +2050,13 @@ class TypeaheadDirective {
      */
     asyncActions() {
         this._subscriptions.push(this.keyUpEventEmitter
-            .pipe(debounceTime(this.typeaheadWaitMs), switchMap((/**
+            .pipe(debounceTime(this.typeaheadWaitMs), tap((/**
+         * @param {?} value
+         * @return {?}
+         */
+        value => {
+            this._allEnteredValue = value;
+        })), switchMap((/**
          * @return {?}
          */
         () => this.typeahead)))
@@ -2013,6 +2079,7 @@ class TypeaheadDirective {
          * @return {?}
          */
         (value) => {
+            this._allEnteredValue = value;
             /** @type {?} */
             const normalizedQuery = this.normalizeQuery(value);
             return from(this.typeahead)
@@ -2046,6 +2113,29 @@ class TypeaheadDirective {
             : optionValue;
         return normalizedOption.toLowerCase();
     }
+    /**
+     * @protected
+     * @param {?} currentQuery
+     * @return {?}
+     */
+    tokenizeQuery(currentQuery) {
+        /** @type {?} */
+        let 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
@@ -2059,9 +2149,7 @@ class TypeaheadDirective {
             : value)
             .toString()
             .toLowerCase();
-        normalizedQuery = this.typeaheadSingleWords
-            ? tokenize(normalizedQuery, this.typeaheadWordDelimiters, this.typeaheadPhraseDelimiters)
-            : normalizedQuery;
+        normalizedQuery = this.tokenizeQuery(normalizedQuery);
         return normalizedQuery;
     }
     /**
@@ -2109,9 +2197,7 @@ class TypeaheadDirective {
             // This improves the speed as it won't have to be done for each list item
             /** @type {?} */
             const 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 {
@@ -2235,6 +2321,33 @@ class TypeaheadDirective {
     hasMatches() {
         return this._matches.length > 0;
     }
+    /**
+     * @protected
+     * @return {?}
+     */
+    checkDelimitersConflict() {
+        if (this.typeaheadMultipleSearch && this.typeaheadSingleWords
+            && (this.haveCommonCharacters(`${this.typeaheadPhraseDelimiters}${this.typeaheadWordDelimiters}`, this.typeaheadMultipleSearchDelimiters))) {
+            throw new Error(`Delimiters used in typeaheadMultipleSearchDelimiters must be different
+          from delimiters used in typeaheadWordDelimiters (current value: ${this.typeaheadWordDelimiters}) and
+          typeaheadPhraseDelimiters (current value: ${this.typeaheadPhraseDelimiters}).
+          Please refer to the documentation`);
+        }
+    }
+    /**
+     * @protected
+     * @param {?} str1
+     * @param {?} str2
+     * @return {?}
+     */
+    haveCommonCharacters(str1, str2) {
+        for (let i = 0; i < str1.length; i++) {
+            if (str1.charAt(i).indexOf(str2) > -1) {
+                return true;
+            }
+        }
+        return false;
+    }
 }
 TypeaheadDirective.decorators = [
     { type: Directive, args: [{
@@ -2242,8 +2355,8 @@ TypeaheadDirective.decorators = [
                 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'
                 }
             },] }
@@ -2272,6 +2385,8 @@ TypeaheadDirective.propDecorators = {
     typeaheadLatinize: [{ type: Input }],
     typeaheadSingleWords: [{ type: Input }],
     typeaheadWordDelimiters: [{ type: Input }],
+    typeaheadMultipleSearch: [{ type: Input }],
+    typeaheadMultipleSearchDelimiters: [{ type: Input }],
     typeaheadPhraseDelimiters: [{ type: Input }],
     typeaheadItemTemplate: [{ type: Input }],
     optionsListTemplate: [{ type: Input }],
@@ -2371,6 +2486,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.
@@ -2496,6 +2630,11 @@ if (false) {
      * @private
      */
     TypeaheadDirective.prototype._outsideClickListener;
+    /**
+     * @type {?}
+     * @private
+     */
+    TypeaheadDirective.prototype._allEnteredValue;
     /**
      * @type {?}
      * @private
@@ -2529,7 +2668,7 @@ class TypeaheadModule {
     static forRoot() {
         return {
             ngModule: TypeaheadModule,
-            providers: [ComponentLoaderFactory, PositioningService, TypeaheadConfig]
+            providers: [ComponentLoaderFactory, PositioningService]
         };
     }
 }