@dev-tcloud/tcloud-ui 6.6.0 → 6.6.2

package/fesm2022/dev-tcloud-tcloud-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, InjectionToken, Optional, Inject, input, effect, Directive, Pipe, ViewEncapsulation, signal, inject, HostListener, ChangeDetectionStrategy, NgModule, makeEnvironmentProviders, output, ContentChildren, computed, ApplicationRef, model, viewChild } from '@angular/core';
+import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, InjectionToken, Optional, Inject, input, effect, Directive, Pipe, ViewEncapsulation, signal, inject, HostListener, ChangeDetectorRef, ChangeDetectionStrategy, NgModule, makeEnvironmentProviders, output, ContentChildren, computed, ApplicationRef, model, viewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
 import { Subject, Subscription, debounceTime, distinctUntilChanged, map, BehaviorSubject } from 'rxjs';
@@ -6312,15 +6312,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['paste', ['$event']]
             }] } });
 
+[];
 class TCloudUiPaginationService {
     constructor() {
+        this._pagination = [];
+        this._stateTotal = new Subject();
+        this.stateTotal$ = this._stateTotal.asObservable();
+        this._collectionChanged = new Subject();
+        this.collectionChanged$ = this._collectionChanged.asObservable();
         this.total = 0;
     }
-    set_total(total) {
-        this.total = total;
+    set_total(args, total) {
+        if (args.id && this.getPaginations(args.id)) {
+            for (let i = 0; i < (this._pagination).length; i++) {
+                if (this._pagination[i].id === args.id) {
+                    this._pagination[i].total = total;
+                    this._pagination[i].itemsPerPage = args.itemsPerPage;
+                    this._pagination[i].currentPage = args.currentPage;
+                }
+            }
+            this._stateTotal.next(this._pagination);
+            return;
+        }
+        (this._pagination).push({
+            id: args.id,
+            total: total,
+            itemsPerPage: args.itemsPerPage,
+            currentPage: args.currentPage
+        });
+        this._stateTotal.next(this._pagination);
     }
     get_total() {
-        return this.total;
+        return this._pagination;
+    }
+    getPaginations(id) {
+        for (let i = 0; i < (this._pagination).length; i++) {
+            if (this._pagination[i].id === id) {
+                return this._pagination[i];
+            }
+        }
+        return undefined;
+    }
+    notifyCollectionChange(id) {
+        this._collectionChanged.next(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiPaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiPaginationService, providedIn: 'root' }); }
@@ -6335,11 +6369,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 class TCloudUiPaginationPipe {
     constructor() {
         this._tcloudUiPaginationService = inject(TCloudUiPaginationService);
-        this.resultItems = [];
+        this._previousLengths = new Map();
     }
     transform(collection, args) {
+        args.id = (args.id) ?? 'tcloud-ui-pagination-component-alone';
+        const currentLength = collection?.length || 0;
+        const previousLength = this._previousLengths.get(args.id) || 0;
+        // Se o tamanho da coleção mudou, reseta a página para 1
+        if (previousLength !== currentLength && previousLength > 0) {
+            args.currentPage = 1;
+            // Notifica ao serviço para atualizar o estado
+            this._tcloudUiPaginationService.notifyCollectionChange(args.id);
+        }
+        this._previousLengths.set(args.id, currentLength);
         const total = Math.ceil((collection?.length || 0) / args.itemsPerPage);
-        this._tcloudUiPaginationService.set_total(total);
+        this._tcloudUiPaginationService.set_total(args, total);
         if (!Array.isArray(collection) ||
             isNaN(args.currentPage) ||
             isNaN(args.itemsPerPage)) {
@@ -6368,20 +6412,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 class TCloudUiPaginationComponent {
     constructor() {
-        this.currentPage = 1;
-        //@Input() totalPages = 1;
+        this._id = 'tcloud-ui-pagination-component-alone';
+        this._currentPage = 1;
         this._tcloudUiPaginationService = inject(TCloudUiPaginationService);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._lastTotalPages = 1;
         this.pageChange = new EventEmitter();
         this.pageInputError = false;
     }
+    generateID() {
+        return `tcloud-ui-pagination-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+    }
+    set id(value) {
+        // Use o ID fornecido, ou gere um novo
+        this._id = value || this.generateID();
+    }
+    get id() {
+        return this._id || this.generateID();
+    }
+    set currentPage(value) {
+        this._currentPage = value;
+    }
+    get currentPage() {
+        return this._currentPage;
+    }
+    ngOnInit() {
+        this._tcloudUiPaginationService.stateTotal$.subscribe((items) => {
+            let pagination = {};
+            for (let i = 0; i < (items).length; i++) {
+                if (items[i].id === this.id) {
+                    pagination = items[i];
+                }
+            }
+            const newTotalPages = pagination.total || 1;
+            // Se o total de páginas mudou e a página atual é inválida, reseta para 1
+            if (this._lastTotalPages !== newTotalPages && this._currentPage > newTotalPages) {
+                this._currentPage = 1;
+                // Agenda a emissão para depois da detecção de mudanças
+                Promise.resolve().then(() => {
+                    this.pageChange.emit(1);
+                });
+            }
+            this._lastTotalPages = newTotalPages;
+            this._changeDetectorRef.markForCheck();
+        });
+        // Escuta mudanças na coleção (filtros)
+        this._tcloudUiPaginationService.collectionChanged$.subscribe((changedId) => {
+            if (changedId === this.id) {
+                this._changeDetectorRef.markForCheck();
+            }
+        });
+    }
     previous() {
         if (this.currentPage > 1) {
             this.currentPage--;
             this.pageChange.emit(this.currentPage);
         }
     }
+    getTotal() {
+        const items = this._tcloudUiPaginationService.get_total();
+        let pagination = {};
+        for (let i = 0; i < (items).length; i++) {
+            if (items[i].id === this.id) {
+                pagination = items[i];
+            }
+        }
+        return pagination;
+    }
     get totalPages() {
-        return this._tcloudUiPaginationService.get_total();
+        return this.getTotal().total;
     }
     next() {
         if (this.currentPage < this.totalPages) {
@@ -6415,15 +6514,17 @@ class TCloudUiPaginationComponent {
         return page < 10 ? `0${page}` : `${page}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiPaginationComponent, isStandalone: true, selector: "tcloud-ui-pagination", inputs: { currentPage: "currentPage" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">P\u00E1gina</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">de {{ totalPages }}</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700)}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-100);border-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiPaginationComponent, isStandalone: true, selector: "tcloud-ui-pagination", inputs: { id: "id", currentPage: "currentPage" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">P\u00E1gina</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">de\n\t\t{{ totalPages }}\n\t</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700)}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-100);border-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-pagination', imports: [
                         CommonModule,
                         TCloudUiPaginationPipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">P\u00E1gina</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">de {{ totalPages }}</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700)}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-100);border-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
-        }], propDecorators: { currentPage: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">P\u00E1gina</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">de\n\t\t{{ totalPages }}\n\t</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700)}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-100);border-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], currentPage: [{
                 type: Input
             }], pageChange: [{
                 type: Output