matcha-components 20.132.0 → 20.134.0
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.
|
@@ -9515,6 +9515,21 @@ class MatchaPaginatorIntl {
|
|
|
9515
9515
|
const amountPages = Math.ceil(length / pageSize);
|
|
9516
9516
|
return `Página ${page + 1} de ${amountPages}`;
|
|
9517
9517
|
};
|
|
9518
|
+
/**
|
|
9519
|
+
* A label for the range display (e.g., "Exibindo 1 a 10 de 100 registros")
|
|
9520
|
+
*/
|
|
9521
|
+
this.getRangeDisplayLabel = (start, end, length) => {
|
|
9522
|
+
if (length === 0) {
|
|
9523
|
+
return 'Exibindo 0 de 0 registros';
|
|
9524
|
+
}
|
|
9525
|
+
return `Exibindo ${start} a ${end} de ${length} registros`;
|
|
9526
|
+
};
|
|
9527
|
+
/**
|
|
9528
|
+
* A label for filtered results (e.g., "(filtrados de 500 no total)")
|
|
9529
|
+
*/
|
|
9530
|
+
this.getFilteredLabel = (totalLength) => {
|
|
9531
|
+
return `(filtrados de ${totalLength} no total)`;
|
|
9532
|
+
};
|
|
9518
9533
|
}
|
|
9519
9534
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
9520
9535
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorIntl, providedIn: 'root' }); }
|
|
@@ -9534,6 +9549,8 @@ class MatchaPaginatorComponent {
|
|
|
9534
9549
|
this.pageSizeOptions = [];
|
|
9535
9550
|
/** Color theme for active page button. Defaults to 'accent' */
|
|
9536
9551
|
this.color = 'accent';
|
|
9552
|
+
/** Show total records information. Defaults to false */
|
|
9553
|
+
this.showTotal = false;
|
|
9537
9554
|
this.page = new EventEmitter();
|
|
9538
9555
|
this._intlChanges = _intl.changes.subscribe(() => {
|
|
9539
9556
|
// Trigger change detection when labels change
|
|
@@ -9639,12 +9656,39 @@ class MatchaPaginatorComponent {
|
|
|
9639
9656
|
};
|
|
9640
9657
|
this.page.emit(event);
|
|
9641
9658
|
}
|
|
9659
|
+
/** Get the range of items being displayed */
|
|
9660
|
+
get rangeStart() {
|
|
9661
|
+
if (this.length === 0)
|
|
9662
|
+
return 0;
|
|
9663
|
+
return (this.pageIndex * this.pageSize) + 1;
|
|
9664
|
+
}
|
|
9665
|
+
get rangeEnd() {
|
|
9666
|
+
if (this.length === 0)
|
|
9667
|
+
return 0;
|
|
9668
|
+
const end = (this.pageIndex + 1) * this.pageSize;
|
|
9669
|
+
return Math.min(end, this.length);
|
|
9670
|
+
}
|
|
9671
|
+
/** Check if there are filtered results */
|
|
9672
|
+
get hasFilteredResults() {
|
|
9673
|
+
return this.filteredLength !== undefined && this.filteredLength !== this.length;
|
|
9674
|
+
}
|
|
9675
|
+
/** Get range label for display */
|
|
9676
|
+
getRangeLabel() {
|
|
9677
|
+
return this._intl.getRangeDisplayLabel(this.rangeStart, this.rangeEnd, this.length);
|
|
9678
|
+
}
|
|
9679
|
+
/** Get filtered label for display */
|
|
9680
|
+
getFilteredLabel() {
|
|
9681
|
+
if (this.hasFilteredResults && this.filteredLength !== undefined) {
|
|
9682
|
+
return this._intl.getFilteredLabel(this.filteredLength);
|
|
9683
|
+
}
|
|
9684
|
+
return '';
|
|
9685
|
+
}
|
|
9642
9686
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorComponent, deps: [{ token: MatchaPaginatorIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9643
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaPaginatorComponent, isStandalone: false, selector: "matcha-paginator", inputs: { pageIndex: "pageIndex", length: "length", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", color: "color" }, outputs: { page: "page" }, ngImport: i0, template: "<div class=\"matcha-paginator flex-row flex-align-center gap-
|
|
9687
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaPaginatorComponent, isStandalone: false, selector: "matcha-paginator", inputs: { pageIndex: "pageIndex", length: "length", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", color: "color", showTotal: "showTotal", filteredLength: "filteredLength" }, outputs: { page: "page" }, ngImport: i0, template: "<div class=\"matcha-paginator flex-row flex-align-center gap-20\">\n <!-- Total records information -->\n <div class=\"paginator-total-info\" *ngIf=\"showTotal\">\n <div class=\"total-range\">{{ getRangeLabel() }}</div>\n <div class=\"total-filtered\" *ngIf=\"hasFilteredResults\">{{ getFilteredLabel() }}</div>\n </div>\n\n <!-- Items per page selector -->\n <div class=\"flex-row flex-align-center gap-8\" *ngIf=\"pageSizeOptions && pageSizeOptions.length > 0\">\n <span class=\"text-sm color-placeholder\">{{ _intl.itemsPerPageLabel }}</span>\n <div class=\"page-size-selector\">\n <select \n class=\"page-size-select radius-8\" \n [value]=\"pageSize\" \n (change)=\"onPageSizeChange($event)\">\n <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n <div class=\"select-icon\">\n <matcha-icon name=\"action_arrow_down\" size=\"sm\" color=\"fg\"></matcha-icon>\n </div>\n </div>\n </div>\n \n <!-- Page navigation -->\n <div class=\"flex-row flex-align-center gap-8\">\n <!-- Previous page button -->\n <button \n class=\"nav-button\" \n [disabled]=\"!hasPreviousPage\"\n (click)=\"previousPage()\"\n [attr.aria-label]=\"_intl.previousPageLabel\">\n <matcha-icon name=\"action_arrow_left\" size=\"md\"></matcha-icon>\n </button>\n \n <!-- Page numbers -->\n <div class=\"flex-row flex-align-center gap-4\">\n <ng-container *ngFor=\"let page of displayPages; trackBy: trackByPage\">\n <button \n *ngIf=\"isNumber(page); else ellipsis\"\n class=\"page-button\"\n [class.active]=\"page === currentPage\"\n [class.radius-full]=\"page === currentPage\"\n [ngClass]=\"page === currentPage ? color : ''\"\n (click)=\"goToPage(page)\"\n [attr.aria-label]=\"'Ir para p\u00E1gina ' + page\">\n {{ page }}\n </button>\n <ng-template #ellipsis>\n <span class=\"ellipsis\">{{ page }}</span>\n </ng-template>\n </ng-container>\n </div>\n \n <!-- Next page button -->\n <button \n class=\"nav-button\" \n [disabled]=\"!hasNextPage\"\n (click)=\"nextPage()\"\n [attr.aria-label]=\"_intl.nextPageLabel\">\n <matcha-icon name=\"action_arrow_right\" size=\"md\"></matcha-icon>\n </button>\n </div>\n </div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9644
9688
|
}
|
|
9645
9689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorComponent, decorators: [{
|
|
9646
9690
|
type: Component,
|
|
9647
|
-
args: [{ selector: 'matcha-paginator', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"matcha-paginator flex-row flex-align-center gap-
|
|
9691
|
+
args: [{ selector: 'matcha-paginator', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"matcha-paginator flex-row flex-align-center gap-20\">\n <!-- Total records information -->\n <div class=\"paginator-total-info\" *ngIf=\"showTotal\">\n <div class=\"total-range\">{{ getRangeLabel() }}</div>\n <div class=\"total-filtered\" *ngIf=\"hasFilteredResults\">{{ getFilteredLabel() }}</div>\n </div>\n\n <!-- Items per page selector -->\n <div class=\"flex-row flex-align-center gap-8\" *ngIf=\"pageSizeOptions && pageSizeOptions.length > 0\">\n <span class=\"text-sm color-placeholder\">{{ _intl.itemsPerPageLabel }}</span>\n <div class=\"page-size-selector\">\n <select \n class=\"page-size-select radius-8\" \n [value]=\"pageSize\" \n (change)=\"onPageSizeChange($event)\">\n <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n <div class=\"select-icon\">\n <matcha-icon name=\"action_arrow_down\" size=\"sm\" color=\"fg\"></matcha-icon>\n </div>\n </div>\n </div>\n \n <!-- Page navigation -->\n <div class=\"flex-row flex-align-center gap-8\">\n <!-- Previous page button -->\n <button \n class=\"nav-button\" \n [disabled]=\"!hasPreviousPage\"\n (click)=\"previousPage()\"\n [attr.aria-label]=\"_intl.previousPageLabel\">\n <matcha-icon name=\"action_arrow_left\" size=\"md\"></matcha-icon>\n </button>\n \n <!-- Page numbers -->\n <div class=\"flex-row flex-align-center gap-4\">\n <ng-container *ngFor=\"let page of displayPages; trackBy: trackByPage\">\n <button \n *ngIf=\"isNumber(page); else ellipsis\"\n class=\"page-button\"\n [class.active]=\"page === currentPage\"\n [class.radius-full]=\"page === currentPage\"\n [ngClass]=\"page === currentPage ? color : ''\"\n (click)=\"goToPage(page)\"\n [attr.aria-label]=\"'Ir para p\u00E1gina ' + page\">\n {{ page }}\n </button>\n <ng-template #ellipsis>\n <span class=\"ellipsis\">{{ page }}</span>\n </ng-template>\n </ng-container>\n </div>\n \n <!-- Next page button -->\n <button \n class=\"nav-button\" \n [disabled]=\"!hasNextPage\"\n (click)=\"nextPage()\"\n [attr.aria-label]=\"_intl.nextPageLabel\">\n <matcha-icon name=\"action_arrow_right\" size=\"md\"></matcha-icon>\n </button>\n </div>\n </div>" }]
|
|
9648
9692
|
}], ctorParameters: () => [{ type: MatchaPaginatorIntl }, { type: i0.ChangeDetectorRef }], propDecorators: { pageIndex: [{
|
|
9649
9693
|
type: Input
|
|
9650
9694
|
}], length: [{
|
|
@@ -9655,6 +9699,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
9655
9699
|
type: Input
|
|
9656
9700
|
}], color: [{
|
|
9657
9701
|
type: Input
|
|
9702
|
+
}], showTotal: [{
|
|
9703
|
+
type: Input
|
|
9704
|
+
}], filteredLength: [{
|
|
9705
|
+
type: Input
|
|
9658
9706
|
}], page: [{
|
|
9659
9707
|
type: Output
|
|
9660
9708
|
}] } });
|