added debounce to klp-form-text-input

klippa-app · Dec 12, 2023 · 135da9f · 135da9f
1 parent 9e53044
commit 135da9f
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
@@ -27,6 +27,10 @@
 			<klp-form-text-input formControlName="unrendered" [innerValueChangeInterceptor]="innerValueChangeInterceptor" (onBlur)="blurry()">
 			</klp-form-text-input>
 		</klp-form-element>
+		<klp-form-element caption="TESTING Debouncing" spaceDistribution="34-66">
+			<klp-form-text-input [debounceMs]="300" formControlName="testing">
+			</klp-form-text-input>
+		</klp-form-element>
 		<klp-form-element caption="Yes or no" spaceDistribution="34-66">
 			<klp-form-toggle formControlName="yesno">
 			</klp-form-toggle>

diff --git a/projects/demo/src/app/demo/demo.component.ts b/projects/demo/src/app/demo/demo.component.ts
@@ -78,6 +78,7 @@ export class DemoComponent {
 		emails: [''],
 		disabledButRendered: ['disabledButRendered'],
 		unrendered: ['unrendered'],
+		testing: '',
 		yesno: false,
 		yesno2: false,
 		selector: [null],

diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "14.10.0",
+  "version": "14.11.1",
   "publishConfig": {
     "access": "public"
   },

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.html b/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.html
@@ -1,3 +1,4 @@
+la
 <div class="componentContainer">
 	<ng-container *ngIf="icon?.length > 0">
 		<i class="ti-search" *ngIf="icon === 'search'"></i>
@@ -6,7 +7,7 @@
 		[type]="type"
 		[(ngModel)]="innerValue"
 		[ngClass]="{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}"
-		(input)="setInnerValueAndNotify($event.target.value)"
+		(input)="onValueChange($event.target.value)"
 		[placeholder]="placeholder ? placeholder : ''"
 		(blur)="touch(); onBlur.emit()"
 		[disabled]='disabled'

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.ts
@@ -1,5 +1,7 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {NG_VALUE_ACCESSOR} from '@angular/forms';
+import {Subject} from "rxjs";
+import {debounceTime} from "rxjs/operators";
 import {ValueAccessorBase} from '../value-accessor-base/value-accessor-base.component';
 
 @Component({
@@ -11,9 +13,22 @@ import {ValueAccessorBase} from '../value-accessor-base/value-accessor-base.comp
 export class TextInputComponent extends ValueAccessorBase<string> {
 	@Input() placeholder: string;
 	@Input() type: 'text' | 'password' = 'text';
-	@Input() clearable = false;
+	@Input() clearable: boolean = false;
 	@Input() icon: 'search';
-	@Input() hasBorderLeft = true;
-	@Input() hasBorderRight = true;
-	@Output() onBlur = new EventEmitter<void>();
+	@Input() hasBorderLeft: boolean = true;
+	@Input() hasBorderRight: boolean = true;
+	@Input() debounceMs: number = 0;
+	@Output() onBlur: EventEmitter<void> = new EventEmitter<void>();
+	private valueSubject: Subject<string> = new Subject<string>();
+
+	public ngOnInit(): void {
+		super.ngOnInit();
+		this.valueSubject.pipe(debounceTime(this.debounceMs)).subscribe((val) => {
+			this.setInnerValueAndNotify(val)
+		});
+	}
+
+	public onValueChange(value: string): void {
+		this.valueSubject.next(value);
+	}
 }