@colijnit/corecomponents_v12 256.1.15 → 256.1.17

package/fesm2015/colijnit-corecomponents_v12.js

@@ -5691,9 +5691,10 @@ OverlayModule.decorators = [
 ];
 
 class InputTextComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+    constructor(formComponent, injector, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
         super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
+        this.injector = injector;
         this.changeDetector = changeDetector;
         this.overlayService = overlayService;
         this.componentFactoryResolver = componentFactoryResolver;
@@ -5763,6 +5764,17 @@ class InputTextComponent extends BaseInputComponent {
     get model() {
         return super.model;
     }
+    get pipedModel() {
+        if (this.formatPipe) {
+            try {
+                const pipe = new this.formatPipe(this);
+                return pipe.transform(this.model);
+            }
+            catch (e) {
+            }
+        }
+        return this.model;
+    }
     // exclude some non-digit characters, since input type 'number' still allows the characters -, + and e
     excludeNonDigitChars(event) {
         const excludedKeys = this.excludePlusMinus ? ['e', '-', '+'] : ['e'];
@@ -5838,7 +5850,13 @@ InputTextComponent.decorators = [
       <div class="input-wrapper">
         <label *ngIf="showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)"
                [textContent]="placeholder"></label>
-        <input #input
+        <span class="input-text-formatted" *ngIf="!focused && !useContent && formatPipe"
+              [class.show]="!focused && !useContent && formatPipe"
+              [ngClass]="align"
+              [textContent]="pipedModel"
+              (click)="doFocus($event)"
+        ></span>
+        <input [class.show]="focused || !formatPipe" #input
                [class.input-input-hidden]="useContent"
                [ngClass]="align"
                [type]="(isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'number' : (type === 'date' ? 'text' : type))"
@@ -5894,6 +5912,7 @@ InputTextComponent.decorators = [
 ];
 InputTextComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
+    { type: Injector },
     { type: ChangeDetectorRef },
     { type: OverlayService },
     { type: ComponentFactoryResolver },
@@ -5906,6 +5925,7 @@ InputTextComponent.propDecorators = {
     placeholder: [{ type: Input }],
     align: [{ type: Input }],
     type: [{ type: Input }],
+    formatPipe: [{ type: Input }],
     min: [{ type: Input }],
     max: [{ type: Input }],
     pattern: [{ type: Input }],
@@ -11935,6 +11955,7 @@ class FilterItemComponent {
         this.limitTo = 10;
         this.filterText = "";
         this.showButton = false;
+        this.isLoading = false;
         this._collection = [];
         this._mode = this.modes.Filterlist;
     }
@@ -12057,20 +12078,31 @@ class FilterItemComponent {
         }
         return false;
     }
+    onModelChange(text) {
+        this.isLoading = true;
+        clearTimeout(this.debounceTimeout);
+        this.debounceTimeout = setTimeout(() => {
+            this.applyFilter(text);
+        }, 300);
+    }
     // Applies filter to the collection.
     applyFilter(text) {
         var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
-            if (!isNaN(this.minSearchCharsToLoadCollection) && this.collectionLoadFn) {
-                if (text.length === this.minSearchCharsToLoadCollection && text.length > this.filterText.length) {
-                    this.collection = yield this.collectionLoadFn(text);
-                }
-                else if (text.length < this.minSearchCharsToLoadCollection) {
+            if (!isNaN(this.minSearchCharsToLoadCollection)) {
+                if (text.length < this.minSearchCharsToLoadCollection) {
+                    yield new Promise(resolve => setTimeout(resolve, 300));
                     this.collection = undefined;
                 }
+                else {
+                    yield new Promise(resolve => setTimeout(resolve, 300));
+                    this.collection = yield this.collectionLoadFn(text);
+                }
             }
             this.filterText = text;
             if (!this.collection) {
+                this._changeDetector.detectChanges();
+                this.isLoading = false;
                 return [];
             }
             const filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
@@ -12087,6 +12119,8 @@ class FilterItemComponent {
                     return true;
                 }
             });
+            this.isLoading = false;
+            this._changeDetector.detectChanges();
         });
     }
     onButtonClicked() {
@@ -12393,14 +12427,15 @@ FilterItemComponent.decorators = [
                   <ng-template #collectionContent>
                       <div class="co-filter-item-collection-content" *ngIf="mode === modes.Filterlist || mode === modes.SingleSelectList
                                                                    || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput">
-                          <co-input-text
-                                  *ngIf="collection?.length > 10 || minSearchCharsToLoadCollection"
-                                  [placeholder]="searchPlaceholder"
-                                  [model]="filterText"
-                                  (modelChange)="applyFilter($event)"
-                                  [readonly]="readonly"
-                          >
-                          </co-input-text>
+                        <co-input-text
+                          *ngIf="collection?.length > 10 || minSearchCharsToLoadCollection"
+                          [placeholder]="searchPlaceholder"
+                          [model]="filterText"
+                          (modelChange)="onModelChange($event)"
+                          [readonly]="readonly"
+                        >
+                        </co-input-text>
+                        <div *ngIf="isLoading" class="filter-loader"><span></span></div>
                           <div class="no-results" *ngIf="filteredCollection?.length === 0">
                               <span [textContent]="noResultsLabel"></span>
                           </div>