matcha-components 19.0.2 → 19.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/matcha-components.mjs +173 -6
- package/fesm2022/matcha-components.mjs.map +1 -1
- package/lib/matcha-components.module.d.ts +36 -35
- package/lib/matcha-infinite-scroll/matcha-infinite-scroll/matcha-infinite-scroll.component.d.ts +12 -0
- package/lib/matcha-infinite-scroll/matcha-infinite-scroll-data/matcha-infinite-scroll-data.component.d.ts +53 -0
- package/lib/matcha-infinite-scroll/matcha-infinite-scroll.module.d.ts +9 -0
- package/package.json +1 -1
- package/public-api.d.ts +3 -0
|
@@ -1,8 +1,153 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { EventEmitter, Component, Output, Input, ElementRef, Renderer2, Inject, HostListener, NgModule, Directive } from '@angular/core';
|
|
3
|
+
import { Subscription } from 'rxjs';
|
|
3
4
|
import * as i1 from '@angular/common';
|
|
4
5
|
import { CommonModule } from '@angular/common';
|
|
5
6
|
|
|
7
|
+
/*
|
|
8
|
+
HOW TO USE ---------------------------------------------------------
|
|
9
|
+
TEMPLATE:
|
|
10
|
+
<!-- Elemento sentinela para detectar o scroll -->
|
|
11
|
+
<option disabled style="height: 1px; padding: 0; margin: 0;">
|
|
12
|
+
<!-- Esse <div> não precisa ter conteúdo visual; ele apenas será observado -->
|
|
13
|
+
<div infiniteScroll (scrolledToEnd)="onScrolledToEnd()"></div>
|
|
14
|
+
</option>
|
|
15
|
+
*/
|
|
16
|
+
class MatchaInfiniteScrollComponent {
|
|
17
|
+
constructor(element) {
|
|
18
|
+
this.element = element;
|
|
19
|
+
// Evento que será disparado quando o elemento entrar na área visível
|
|
20
|
+
this.scrolledToEnd = new EventEmitter();
|
|
21
|
+
}
|
|
22
|
+
ngOnInit() {
|
|
23
|
+
// Configura o observer para disparar quando 10% do elemento estiver visível
|
|
24
|
+
const options = {
|
|
25
|
+
root: null, // Usa a viewport
|
|
26
|
+
rootMargin: '0px',
|
|
27
|
+
threshold: 0.1
|
|
28
|
+
};
|
|
29
|
+
this.observer = new IntersectionObserver((entries) => {
|
|
30
|
+
entries.forEach(entry => {
|
|
31
|
+
if (entry.isIntersecting) {
|
|
32
|
+
this.scrolledToEnd.emit();
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
}, options);
|
|
36
|
+
this.observer.observe(this.element.nativeElement);
|
|
37
|
+
}
|
|
38
|
+
ngOnDestroy() {
|
|
39
|
+
this.observer.disconnect();
|
|
40
|
+
}
|
|
41
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaInfiniteScrollComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: MatchaInfiniteScrollComponent, isStandalone: false, selector: "matcha-infinite-scroll", outputs: { scrolledToEnd: "scrolledToEnd" }, ngImport: i0, template: "", styles: [""] }); }
|
|
43
|
+
}
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaInfiniteScrollComponent, decorators: [{
|
|
45
|
+
type: Component,
|
|
46
|
+
args: [{ selector: 'matcha-infinite-scroll', standalone: false, template: "" }]
|
|
47
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scrolledToEnd: [{
|
|
48
|
+
type: Output
|
|
49
|
+
}] } });
|
|
50
|
+
|
|
51
|
+
class MatchaInfiniteScrollDataComponent {
|
|
52
|
+
constructor(element) {
|
|
53
|
+
this.element = element;
|
|
54
|
+
/**
|
|
55
|
+
* Lista inicial (opcional) para iniciar a agregação.
|
|
56
|
+
*/
|
|
57
|
+
this.initialList = [];
|
|
58
|
+
/**
|
|
59
|
+
* Threshold para o Intersection Observer (padrão: 0.1 = 10% do elemento visível).
|
|
60
|
+
*/
|
|
61
|
+
this.threshold = 0.1;
|
|
62
|
+
/**
|
|
63
|
+
* Emite a lista acumulada de itens.
|
|
64
|
+
*/
|
|
65
|
+
this.aggregatedData = new EventEmitter();
|
|
66
|
+
this.aggregatedList = [];
|
|
67
|
+
this.currentPage = 0;
|
|
68
|
+
this.subscription = new Subscription();
|
|
69
|
+
}
|
|
70
|
+
ngOnInit() {
|
|
71
|
+
this.initialize();
|
|
72
|
+
const options = {
|
|
73
|
+
root: null, // utiliza a viewport como área de visualização
|
|
74
|
+
rootMargin: '0px',
|
|
75
|
+
threshold: this.threshold
|
|
76
|
+
};
|
|
77
|
+
this.observer = new IntersectionObserver(entries => {
|
|
78
|
+
entries.forEach(entry => {
|
|
79
|
+
if (entry.isIntersecting) {
|
|
80
|
+
this.loadNextPage();
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
}, options);
|
|
84
|
+
this.observer.observe(this.element.nativeElement);
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Detecta mudanças no resetKey e, se for o caso, reseta a lista e a página atual.
|
|
88
|
+
*/
|
|
89
|
+
ngOnChanges(changes) {
|
|
90
|
+
if (changes['resetKey'] && !changes['resetKey'].firstChange) {
|
|
91
|
+
this.reset();
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Inicializa ou reinicializa a lista agregada e o contador de página.
|
|
96
|
+
*/
|
|
97
|
+
initialize() {
|
|
98
|
+
this.aggregatedList = [...this.initialList];
|
|
99
|
+
this.currentPage = 0;
|
|
100
|
+
this.aggregatedData.emit(this.aggregatedList);
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Reseta o estado interno da diretiva.
|
|
104
|
+
*/
|
|
105
|
+
reset() {
|
|
106
|
+
// Cancela quaisquer assinaturas pendentes
|
|
107
|
+
this.subscription.unsubscribe();
|
|
108
|
+
this.subscription = new Subscription();
|
|
109
|
+
// Re-inicializa a lista e o contador
|
|
110
|
+
this.initialize();
|
|
111
|
+
}
|
|
112
|
+
/**
|
|
113
|
+
* Carrega a próxima página de dados utilizando a função loadData.
|
|
114
|
+
*/
|
|
115
|
+
loadNextPage() {
|
|
116
|
+
if (!this.loadData) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
this.currentPage++;
|
|
120
|
+
const dataObservable = this.loadData(this.currentPage);
|
|
121
|
+
const sub = dataObservable.subscribe(data => {
|
|
122
|
+
if (data && data.length) {
|
|
123
|
+
this.aggregatedList = [...this.aggregatedList, ...data];
|
|
124
|
+
this.aggregatedData.emit(this.aggregatedList);
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
this.subscription.add(sub);
|
|
128
|
+
}
|
|
129
|
+
ngOnDestroy() {
|
|
130
|
+
this.observer.disconnect();
|
|
131
|
+
this.subscription.unsubscribe();
|
|
132
|
+
}
|
|
133
|
+
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 }); }
|
|
134
|
+
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"] }); }
|
|
135
|
+
}
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaInfiniteScrollDataComponent, decorators: [{
|
|
137
|
+
type: Component,
|
|
138
|
+
args: [{ selector: 'matcha-infinite-scroll-data', standalone: false, template: "", styles: [":host{height:1px;opacity:0}\n"] }]
|
|
139
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { loadData: [{
|
|
140
|
+
type: Input
|
|
141
|
+
}], initialList: [{
|
|
142
|
+
type: Input
|
|
143
|
+
}], threshold: [{
|
|
144
|
+
type: Input
|
|
145
|
+
}], resetKey: [{
|
|
146
|
+
type: Input
|
|
147
|
+
}], aggregatedData: [{
|
|
148
|
+
type: Output
|
|
149
|
+
}] } });
|
|
150
|
+
|
|
6
151
|
class MatchaButtonComponent {
|
|
7
152
|
constructor(_elementRef, _renderer) {
|
|
8
153
|
this._elementRef = _elementRef;
|
|
@@ -818,6 +963,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
818
963
|
type: Output
|
|
819
964
|
}] } });
|
|
820
965
|
|
|
966
|
+
class MatchaInfiniteScrollModule {
|
|
967
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
968
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: MatchaInfiniteScrollModule, declarations: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent], imports: [CommonModule], exports: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent] }); }
|
|
969
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaInfiniteScrollModule, imports: [CommonModule] }); }
|
|
970
|
+
}
|
|
971
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaInfiniteScrollModule, decorators: [{
|
|
972
|
+
type: NgModule,
|
|
973
|
+
args: [{
|
|
974
|
+
declarations: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent],
|
|
975
|
+
imports: [
|
|
976
|
+
CommonModule
|
|
977
|
+
],
|
|
978
|
+
exports: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent]
|
|
979
|
+
}]
|
|
980
|
+
}] });
|
|
981
|
+
|
|
821
982
|
class MatchaIconModule {
|
|
822
983
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
823
984
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: MatchaIconModule, declarations: [MatchaIconComponent], imports: [CommonModule], exports: [MatchaIconComponent] }); }
|
|
@@ -2191,7 +2352,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
2191
2352
|
|
|
2192
2353
|
class MatchaComponentsModule {
|
|
2193
2354
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2194
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [
|
|
2355
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [MatchaInfiniteScrollModule,
|
|
2356
|
+
MatchaModalModule,
|
|
2195
2357
|
MatchaMasonryModule,
|
|
2196
2358
|
MatchaCardModule,
|
|
2197
2359
|
MatchaTitleModule,
|
|
@@ -2225,7 +2387,8 @@ class MatchaComponentsModule {
|
|
|
2225
2387
|
MatchaTableModule,
|
|
2226
2388
|
MatchaTabsModule,
|
|
2227
2389
|
MatchaTooltipModule,
|
|
2228
|
-
MatchaTreeModule], exports: [
|
|
2390
|
+
MatchaTreeModule], exports: [MatchaInfiniteScrollModule,
|
|
2391
|
+
MatchaModalModule,
|
|
2229
2392
|
MatchaMasonryModule,
|
|
2230
2393
|
MatchaCardModule,
|
|
2231
2394
|
MatchaTitleModule,
|
|
@@ -2260,7 +2423,8 @@ class MatchaComponentsModule {
|
|
|
2260
2423
|
MatchaTabsModule,
|
|
2261
2424
|
MatchaTooltipModule,
|
|
2262
2425
|
MatchaTreeModule] }); }
|
|
2263
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaComponentsModule, imports: [
|
|
2426
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MatchaComponentsModule, imports: [MatchaInfiniteScrollModule,
|
|
2427
|
+
MatchaModalModule,
|
|
2264
2428
|
MatchaMasonryModule,
|
|
2265
2429
|
MatchaCardModule,
|
|
2266
2430
|
MatchaTitleModule,
|
|
@@ -2294,7 +2458,8 @@ class MatchaComponentsModule {
|
|
|
2294
2458
|
MatchaTableModule,
|
|
2295
2459
|
MatchaTabsModule,
|
|
2296
2460
|
MatchaTooltipModule,
|
|
2297
|
-
MatchaTreeModule,
|
|
2461
|
+
MatchaTreeModule, MatchaInfiniteScrollModule,
|
|
2462
|
+
MatchaModalModule,
|
|
2298
2463
|
MatchaMasonryModule,
|
|
2299
2464
|
MatchaCardModule,
|
|
2300
2465
|
MatchaTitleModule,
|
|
@@ -2337,6 +2502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
2337
2502
|
MatchaOverflowDraggableComponent
|
|
2338
2503
|
],
|
|
2339
2504
|
imports: [
|
|
2505
|
+
MatchaInfiniteScrollModule,
|
|
2340
2506
|
MatchaModalModule,
|
|
2341
2507
|
MatchaMasonryModule,
|
|
2342
2508
|
MatchaCardModule,
|
|
@@ -2374,6 +2540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
2374
2540
|
MatchaTreeModule
|
|
2375
2541
|
],
|
|
2376
2542
|
exports: [
|
|
2543
|
+
MatchaInfiniteScrollModule,
|
|
2377
2544
|
MatchaModalModule,
|
|
2378
2545
|
MatchaMasonryModule,
|
|
2379
2546
|
MatchaCardModule,
|
|
@@ -2432,5 +2599,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
2432
2599
|
* Generated bundle index. Do not edit.
|
|
2433
2600
|
*/
|
|
2434
2601
|
|
|
2435
|
-
export { MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAutocompleteOverviewDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaBottomSheetDirective, MatchaBottomSheetModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleDirective, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxDirective, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaExpansionDirective, MatchaExpansionModule, MatchaFormFieldDirective, MatchaFormsModule, MatchaGridComponent, MatchaGridModule, MatchaIconComponent, MatchaIconModule, MatchaInputDirective, MatchaInputModule, MatchaListDirective, MatchaListModule, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaProgressSpinnerDirective, MatchaProgressSpinnerModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleDirective, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaTableDirective, MatchaTableModule, MatchaTabsDirective, MatchaTabsModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
|
|
2602
|
+
export { MatchaAutocompleteDirective, MatchaAutocompleteModule, MatchaAutocompleteOverviewDirective, MatchaBadgeDirective, MatchaBadgeModule, MatchaBottomSheetDirective, MatchaBottomSheetModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleDirective, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxDirective, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaExpansionDirective, MatchaExpansionModule, MatchaFormFieldDirective, MatchaFormsModule, MatchaGridComponent, MatchaGridModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaListDirective, MatchaListModule, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaProgressSpinnerDirective, MatchaProgressSpinnerModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleDirective, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaTableDirective, MatchaTableModule, MatchaTabsDirective, MatchaTabsModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule };
|
|
2436
2603
|
//# sourceMappingURL=matcha-components.mjs.map
|