matcha-components 19.135.0 → 19.136.0

package/fesm2022/matcha-components.mjs

@@ -639,6 +639,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+/*
+HOW TO USE ---------------------------------------------------------
+TEMPLATE:
+<!-- Elemento sentinela para detectar o scroll -->
+<option disabled style="height: 1px; padding: 0; margin: 0;">
+    <!-- Esse <div> não precisa ter conteúdo visual; ele apenas será observado -->
+    <div infiniteScroll (scrolledToEnd)="onScrolledToEnd()"></div>
+</option>
+*/
+class MatchaLazyloadComponent {
+    constructor(element) {
+        this.element = element;
+        // Evento que será disparado quando o elemento entrar na área visível
+        this.scrolledToEnd = new EventEmitter();
+    }
+    ngOnInit() {
+        // Configura o observer para disparar quando 10% do elemento estiver visível
+        const options = {
+            root: null, // Usa a viewport
+            rootMargin: '0px',
+            threshold: 0.1
+        };
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.scrolledToEnd.emit();
+                }
+            });
+        }, options);
+        this.observer.observe(this.element.nativeElement);
+    }
+    ngOnDestroy() {
+        this.observer.disconnect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaLazyloadComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MatchaLazyloadComponent, isStandalone: false, selector: "matcha-lazyload", outputs: { scrolledToEnd: "scrolledToEnd" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaLazyloadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-lazyload', standalone: false, template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scrolledToEnd: [{
+                type: Output
+            }] } });
+
+class MatchaLazyloadDataComponent {
+    constructor(element) {
+        this.element = element;
+        /**
+         * Lista inicial (opcional) para iniciar a agregação.
+         */
+        this.initialList = [];
+        /**
+         * Threshold para o Intersection Observer (padrão: 0.1 = 10% do elemento visível).
+         */
+        this.threshold = 0.1;
+        /**
+         * Emite a lista acumulada de itens.
+         */
+        this.aggregatedData = new EventEmitter();
+        /**
+         * Emite o item exato, quando a aggregatedData tiver um único item igual ao searchTerm.
+         */
+        this.exactMatch = new EventEmitter();
+        this.aggregatedList = [];
+        this.currentPage = 0;
+        // Subscription para as chamadas do loadData
+        this.dataSubscription = new Subscription();
+        // Subscription exclusiva para o debounce do searchTerm
+        this.searchSubscription = 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,
+            rootMargin: '0px',
+            threshold: this.threshold
+        };
+        this.observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.loadNextPage();
+                }
+            });
+        }, options);
+        this.observer.observe(this.element.nativeElement);
+        // Inscreve para receber alterações do searchTerm com debounce
+        this.searchSubscription = this.searchTermSubject.pipe(debounceTime(300)).subscribe(() => {
+            // Reseta e carrega a primeira página após o debounce
+            this.resetData();
+            this.loadNextPage();
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['resetKey'] && !changes['resetKey'].firstChange) {
+            this.resetData();
+        }
+        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.
+     */
+    initialize() {
+        this.aggregatedList = [...this.initialList];
+        this.currentPage = 0;
+        this.aggregatedData.emit(this.aggregatedList);
+        this.checkExactMatch();
+    }
+    /**
+     * Reseta apenas as assinaturas e o estado dos dados (não a inscrição do searchTerm).
+     */
+    resetData() {
+        // Cancela as assinaturas das chamadas de loadData
+        this.dataSubscription.unsubscribe();
+        this.dataSubscription = new Subscription();
+        // Re-inicializa a lista e o contador
+        this.initialize();
+    }
+    /**
+     * Carrega a próxima página de dados utilizando a função loadData.
+     */
+    loadNextPage() {
+        if (!this.loadData) {
+            return;
+        }
+        this.currentPage++;
+        const dataObservable = this.loadData(this.currentPage);
+        const sub = dataObservable.subscribe(data => {
+            if (data && data.length) {
+                this.aggregatedList = [...this.aggregatedList, ...data];
+                this.aggregatedData.emit(this.aggregatedList);
+                this.checkExactMatch();
+            }
+        });
+        this.dataSubscription.add(sub);
+    }
+    /**
+     * Verifica se a lista agregada possui exatamente um item e se esse item é igual ao searchTerm.
+     * Se sim, emite o output exactMatch com esse item.
+     */
+    checkExactMatch() {
+        if (this.aggregatedList.length === 1 && this.aggregatedList[0] === this.searchTerm) {
+            this.exactMatch.emit(this.aggregatedList[0]);
+        }
+    }
+    ngOnDestroy() {
+        this.observer.disconnect();
+        this.dataSubscription.unsubscribe();
+        this.searchSubscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaLazyloadDataComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MatchaLazyloadDataComponent, isStandalone: false, selector: "matcha-lazyload-data", inputs: { loadData: "loadData", initialList: "initialList", threshold: "threshold", resetKey: "resetKey", searchTerm: "searchTerm" }, outputs: { aggregatedData: "aggregatedData", exactMatch: "exactMatch" }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["", ":host{height:1px;opacity:0}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaLazyloadDataComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-lazyload-data', standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{height:1px;opacity:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { loadData: [{
+                type: Input
+            }], initialList: [{
+                type: Input
+            }], threshold: [{
+                type: Input
+            }], resetKey: [{
+                type: Input
+            }], searchTerm: [{
+                type: Input
+            }], aggregatedData: [{
+                type: Output
+            }], exactMatch: [{
+                type: Output
+            }] } });
+
 class MatchaButtonComponent {
     get colorAttr() {
         return this.color;
@@ -3718,6 +3895,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+class MatchaLazyloadModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaLazyloadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: MatchaLazyloadModule, declarations: [MatchaLazyloadComponent, MatchaLazyloadDataComponent], imports: [CommonModule], exports: [MatchaLazyloadComponent, MatchaLazyloadDataComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaLazyloadModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatchaLazyloadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaLazyloadComponent, MatchaLazyloadDataComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [MatchaLazyloadComponent, MatchaLazyloadDataComponent]
+                }]
+        }] });
+
 class MatchaElevationDirective {
     constructor(_elementRef, _renderer) {
         this._elementRef = _elementRef;
@@ -5132,6 +5325,7 @@ class MatchaComponentsModule {
             MatchaHintTextModule,
             MatchaIconModule,
             MatchaInfiniteScrollModule,
+            MatchaLazyloadModule,
             MatchaInputModule,
             // MatchaInputPhoneModule,
             MatchaMasonryModule,
@@ -5172,6 +5366,7 @@ class MatchaComponentsModule {
             MatchaHintTextModule,
             MatchaIconModule,
             MatchaInfiniteScrollModule,
+            MatchaLazyloadModule,
             MatchaInputModule,
             //  MatchaInputPhoneModule,
             MatchaMasonryModule,
@@ -5218,6 +5413,7 @@ class MatchaComponentsModule {
             MatchaHintTextModule,
             MatchaIconModule,
             MatchaInfiniteScrollModule,
+            MatchaLazyloadModule,
             MatchaInputModule,
             // MatchaInputPhoneModule,
             MatchaMasonryModule,
@@ -5258,6 +5454,7 @@ class MatchaComponentsModule {
             MatchaHintTextModule,
             MatchaIconModule,
             MatchaInfiniteScrollModule,
+            MatchaLazyloadModule,
             MatchaInputModule,
             //  MatchaInputPhoneModule,
             MatchaMasonryModule,
@@ -5310,6 +5507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatchaHintTextModule,
                         MatchaIconModule,
                         MatchaInfiniteScrollModule,
+                        MatchaLazyloadModule,
                         MatchaInputModule,
                         // MatchaInputPhoneModule,
                         MatchaMasonryModule,
@@ -5352,6 +5550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatchaHintTextModule,
                         MatchaIconModule,
                         MatchaInfiniteScrollModule,
+                        MatchaLazyloadModule,
                         MatchaInputModule,
                         //  MatchaInputPhoneModule,
                         MatchaMasonryModule,
@@ -5446,5 +5645,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaBadgeDirective, MatchaBadgeModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaLabelComponent, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOptionService, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective };
+export { MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaBadgeDirective, MatchaBadgeModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOptionService, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective };
 //# sourceMappingURL=matcha-components.mjs.map