From da04dd178fc9619123f2efffee31d02947888a15 Mon Sep 17 00:00:00 2001
From: JonasPeres <jonasperes10@hotmail.com>
Date: Mon, 25 Mar 2024 13:59:30 -0300
Subject: [PATCH] Add Input minCharactersToSearch

---
 .../sq-select-multi-tags.component.ts         | 39 +++++++++++--------
 .../sq-select-search.component.ts             | 28 ++++++-------
 src/package.json                              |  2 +-
 3 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/components/sq-select-multi-tags/sq-select-multi-tags.component.ts b/src/components/sq-select-multi-tags/sq-select-multi-tags.component.ts
index 8776178..1309aa4 100644
--- a/src/components/sq-select-multi-tags/sq-select-multi-tags.component.ts
+++ b/src/components/sq-select-multi-tags/sq-select-multi-tags.component.ts
@@ -117,6 +117,16 @@ export class SqSelectMultiTagsComponent implements OnChanges {
    */
   @Input() labelColor = ''
 
+  /**
+   * Minimum number of characters to perform the searchChange.
+   */
+  @Input() minCharactersToSearch = 0
+
+  /**
+   * The time interval for input timeout in ms.
+   */
+  @Input() timeToChange = 800
+
   /**
    * Options available for selection.
    */
@@ -223,16 +233,6 @@ export class SqSelectMultiTagsComponent implements OnChanges {
    */
   nativeElement: ElementRef
 
-  /**
-   * Timeout for input changes.
-   */
-  timeoutInput!: ReturnType<typeof setTimeout>
-
-  /**
-   * Time in milliseconds before triggering input timeout.
-   */
-  timeToChange = 800
-
   /**
    * Control pagination for options
    */
@@ -263,6 +263,11 @@ export class SqSelectMultiTagsComponent implements OnChanges {
    */
   isMaxTags = false
 
+  /**
+   * Timeout for input changes.
+   */
+  timeoutInput!: ReturnType<typeof setTimeout>
+
   /**
    * Constructs a new SqSelectMultiTagsComponent.
    *
@@ -463,12 +468,14 @@ export class SqSelectMultiTagsComponent implements OnChanges {
    * Change searchtext with timeout and detect detectChanges
    */
   async modelChange(event: any) {
-    clearTimeout(this.timeoutInput)
-    this.searchText = await new Promise<string>(resolve => this.timeoutInput = setTimeout(() => {
-      resolve(event)
-    }, this.timeToChange)) || ''
-    this.searchChange.emit(event)
-    this.changeDetector.detectChanges()
+    if (!this.minCharactersToSearch || !event.length || event.length >= this.minCharactersToSearch) {
+      clearTimeout(this.timeoutInput)
+      this.searchText = await new Promise<string>(resolve => this.timeoutInput = setTimeout(() => {
+        resolve(event)
+      }, this.timeToChange)) || ''
+      this.searchChange.emit(event)
+      this.changeDetector.detectChanges()
+    }
   }
 
   /**
diff --git a/src/components/sq-select-search/sq-select-search.component.ts b/src/components/sq-select-search/sq-select-search.component.ts
index 40a5c93..3e3dbe6 100644
--- a/src/components/sq-select-search/sq-select-search.component.ts
+++ b/src/components/sq-select-search/sq-select-search.component.ts
@@ -100,6 +100,11 @@ export class SqSelectSearchComponent implements OnChanges {
    */
   @Input() errorSpan = true
 
+  /**
+   * Minimum number of characters to perform the searchChange.
+   */
+  @Input() minCharactersToSearch = 0
+
   /**
    * The time interval for input timeout in ms.
    */
@@ -165,11 +170,6 @@ export class SqSelectSearchComponent implements OnChanges {
    */
   error: boolean | string = ''
 
-  /**
-   * Timeout duration for input changes.
-   */
-  timeOutInputTime = 800
-
   /**
    * Native element reference.
    */
@@ -215,10 +215,10 @@ export class SqSelectSearchComponent implements OnChanges {
    */
   limit = this.quantity
 
-   /**
+  /**
    * Timeout for input changes.
    */
-   timeoutInput!: ReturnType<typeof setTimeout>
+  timeoutInput!: ReturnType<typeof setTimeout>
 
   /**
    * Constructs a new SqSelectSearchComponent.
@@ -311,12 +311,14 @@ export class SqSelectSearchComponent implements OnChanges {
    * @param {string} event - The search input value.
    */
   async onTipSearchChange(event: string) {
-    clearTimeout(this.timeoutInput)
-    this.searchText = await new Promise<string>(resolve => this.timeoutInput = setTimeout(() => {
-      resolve(event)
-    }, this.timeToChange)) || ''
-    this.searchChange.emit(event)
-    this.changeDetector.detectChanges()
+    if (!this.minCharactersToSearch || !event.length || event.length >= this.minCharactersToSearch) {
+      clearTimeout(this.timeoutInput)
+      this.searchText = await new Promise<string>(resolve => this.timeoutInput = setTimeout(() => {
+        resolve(event)
+      }, this.timeToChange)) || ''
+      this.searchChange.emit(event)
+      this.changeDetector.detectChanges()
+    }
   }
 
   /**
diff --git a/src/package.json b/src/package.json
index 025a1b3..aab3b49 100644
--- a/src/package.json
+++ b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@squidit/ngx-css",
-  "version": "1.3.25",
+  "version": "1.3.26",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0",