matcha-components 19.9.0 → 19.11.0

package/fesm2022/matcha-components.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, ContentChildren, ElementRef, Renderer2, Inject, HostListener, Directive, NgModule } from '@angular/core';
 import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
-import { Subscription } from 'rxjs';
+import { Subscription, Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -501,11 +502,14 @@ class MatchaInfiniteScrollDataComponent {
         this.aggregatedList = [];
         this.currentPage = 0;
         this.subscription = new Subscription();
+        // Subject para aplicar debounce no searchTerm
+        this.searchTermSubject = new Subject();
     }
     ngOnInit() {
         this.initialize();
+        // Configura o Intersection Observer para carregamento via scroll
         const options = {
-            root: null, // utiliza a viewport como área de visualização
+            root: null,
             rootMargin: '0px',
             threshold: this.threshold
         };
@@ -517,16 +521,25 @@ class MatchaInfiniteScrollDataComponent {
             });
         }, options);
         this.observer.observe(this.element.nativeElement);
+        // Inscreve para receber alterações do searchTerm com debounce
+        this.subscription.add(this.searchTermSubject.pipe(debounceTime(300) // ajusta o tempo conforme necessário
+        ).subscribe(() => {
+            // Reseta e carrega a primeira página após o debounce
+            this.reset();
+            this.loadNextPage();
+        }));
     }
     /**
-     * Detecta mudanças no resetKey e, se for o caso, reseta a lista e a página atual.
+     * Detecta mudanças nos inputs e, se for o caso, reseta a lista e a página atual.
      */
     ngOnChanges(changes) {
-        console.log('changes', changes);
         if (changes['resetKey'] && !changes['resetKey'].firstChange) {
-            console.log('entrou no if changes', changes);
             this.reset();
         }
+        if (changes['searchTerm'] && !changes['searchTerm'].firstChange) {
+            // Emite o novo valor para o Subject e aguarda o debounce
+            this.searchTermSubject.next(changes['searchTerm'].currentValue);
+        }
     }
     /**
      * Inicializa ou reinicializa a lista agregada e o contador de página.
@@ -568,7 +581,7 @@ class MatchaInfiniteScrollDataComponent {
         this.subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaInfiniteScrollDataComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: MatchaInfiniteScrollDataComponent, isStandalone: false, selector: "matcha-infinite-scroll-data", inputs: { loadData: "loadData", initialList: "initialList", threshold: "threshold", resetKey: "resetKey" }, outputs: { aggregatedData: "aggregatedData" }, usesOnChanges: true, ngImport: i0, template: "", styles: ["", ":host{height:1px;opacity:0}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: MatchaInfiniteScrollDataComponent, isStandalone: false, selector: "matcha-infinite-scroll-data", inputs: { loadData: "loadData", initialList: "initialList", threshold: "threshold", resetKey: "resetKey", searchTerm: "searchTerm" }, outputs: { aggregatedData: "aggregatedData" }, usesOnChanges: true, ngImport: i0, template: "", styles: ["", ":host{height:1px;opacity:0}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaInfiniteScrollDataComponent, decorators: [{
             type: Component,
@@ -581,6 +594,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }], resetKey: [{
                 type: Input
+            }], searchTerm: [{
+                type: Input
             }], aggregatedData: [{
                 type: Output
             }] } });