Merge pull request #53 from squidit/feature/SQ-63298-limitar-disparo-…

…search-change

feature/SQ-63298-limitar-disparo-search-change

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()
+    }
   }
 
   /**

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()
+    }
   }
 
   /**

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",