lib-portal-angular 0.0.83 → 0.0.85

package/fesm2022/lib-portal-angular.mjs

@@ -14,6 +14,8 @@ import * as i2$1 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
 import * as i5 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
+import * as ExcelJS from 'exceljs';
+import { saveAs } from 'file-saver';
 import * as CryptoJS from 'crypto-js';
 
 class AuthService {
@@ -1525,6 +1527,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+class DragDropListComponent {
+    constructor() {
+        this.nonSelectedList = [];
+        this.nonSelectedButtonClick = new EventEmitter();
+        this.nonSelectedInputChanged = new EventEmitter();
+        this.selectedList = [];
+        this.selectedButtonClick = new EventEmitter();
+        this.selectedInputChanged = new EventEmitter();
+        this.nonSelectedListInputSubject = new Subject();
+        this.selectedListInputSubject = new Subject();
+        this.ButtonClasses = ButtonClasses; // Adicione a enumeração ao componente
+        this.draggedItem = null;
+        this.nonSelectedListInputSubject.pipe(debounceTime(2000)).subscribe((value) => {
+            this.nonSelectedInputChanged.emit(value);
+        });
+        this.selectedListInputSubject.pipe(debounceTime(2000)).subscribe((value) => {
+            this.selectedInputChanged.emit(value);
+        });
+    }
+    onDragStart(item) {
+        this.draggedItem = item;
+    }
+    onDragOver(event) {
+        event.preventDefault();
+    }
+    onDrop(list, event) {
+        event.preventDefault();
+        if (this.draggedItem) {
+            const index = list.indexOf(this.draggedItem);
+            if (index === -1) {
+                this.removeItem(this.draggedItem);
+                list.push(this.draggedItem);
+            }
+            this.draggedItem = null;
+        }
+    }
+    removeItem(item) {
+        [this.nonSelectedList, this.selectedList].forEach((list) => {
+            const index = list.indexOf(item);
+            if (index !== -1) {
+                list.splice(index, 1);
+            }
+        });
+    }
+    nonSelectedListInputChange(event) {
+        this.nonSelectedListInputSubject.next(event.target.value);
+    }
+    selectedListInputChange(event) {
+        this.selectedListInputSubject.next(event.target.value);
+    }
+    selButtonClick() {
+        this.selectedButtonClick.emit();
+    }
+    nonSelButtonClick() {
+        this.nonSelectedButtonClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DragDropListComponent, selector: "argenta-drag-drop-list", inputs: { nonSelectedTitle: "nonSelectedTitle", nonSelectedList: "nonSelectedList", nonSelectedButtonLabel: "nonSelectedButtonLabel", selectedTitle: "selectedTitle", selectedList: "selectedList", selectedButtonLabel: "selectedButtonLabel" }, outputs: { nonSelectedButtonClick: "nonSelectedButtonClick", nonSelectedInputChanged: "nonSelectedInputChanged", selectedButtonClick: "selectedButtonClick", selectedInputChanged: "selectedInputChanged" }, ngImport: i0, template: "<!-- Cont\u00EAiner externo para dar a apar\u00EAncia de grupo -->\n<div class=\"group-container\">\n  <div class=\"container\">\n    <!-- Lista 1 com input -->\n    <div\n      class=\"list\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(nonSelectedList, $event)\"\n    >\n      <div class=\"row\">\n        <h6 class=\"col-md-8\">{{ nonSelectedTitle }}</h6>\n        <div *ngIf=\"nonSelectedButtonLabel\" class=\"col-md-4 align-end\">\n          <argenta-custom-button\n            label=\"{{ nonSelectedButtonLabel }}\"\n            (onButtonClick)=\"nonSelButtonClick()\"\n            class=\"align-end\"\n            [btnClass]=\"ButtonClasses.Primary\"\n          >\n          </argenta-custom-button>\n        </div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"list-input\"\n        (input)=\"nonSelectedListInputChange($event)\"\n      />\n      <div\n        *ngFor=\"let item of nonSelectedList\"\n        class=\"item-card\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart(item)\"\n      >\n        {{ item.descricao }}\n      </div>\n    </div>\n\n    <!-- Lista 2 com input -->\n    <div\n      class=\"list\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(selectedList, $event)\"\n    >\n      <div class=\"row\">\n        <h6 class=\"col-md-8\">{{ selectedTitle }}</h6>\n        <div *ngIf=\"selectedButtonLabel\" class=\"col-md-4 align-end\">\n          <argenta-custom-button\n            label=\"{{ selectedButtonLabel }}\"\n            (onButtonClick)=\"selButtonClick()\"\n            class=\"align-end\"\n            [btnClass]=\"ButtonClasses.Primary\"\n          >\n          </argenta-custom-button>\n        </div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"list-input\"\n        (input)=\"selectedListInputChange($event)\"\n      />\n      <div\n        *ngFor=\"let item of selectedList\"\n        class=\"item-card\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart(item)\"\n      >\n        {{ item.descricao }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.group-container{display:flex;justify-content:center;padding:20px;background-color:#fff;border-radius:12px;box-shadow:0 4px 8px #0000001a;width:80%;margin:auto}.container{display:flex;gap:20px;width:100%}.list{flex:1;padding:10px;background-color:#f0f0f0;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.list-input{width:100%;height:40px;margin-bottom:15px;border-radius:4px;border:1px solid #ccc;outline:none;font-size:1rem;resize:none}.item-card{width:100%;padding:15px;background-color:#fff;border-radius:8px;box-shadow:0 2px 5px #0003;cursor:move;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-family);font-weight:500;font-size:1.1rem;color:#333}.row{display:flex;justify-content:space-between;align-items:center;width:100%;max-height:50px;height:50px}.align-end{display:flex;justify-content:flex-end}\n"], dependencies: [{ 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: ButtonComponent, selector: "argenta-custom-button", inputs: ["type", "label", "btnClass", "fontSize", "disabled", "autofocus", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "name", "value", "permissions"], outputs: ["onButtonClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragDropListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "argenta-drag-drop-list", template: "<!-- Cont\u00EAiner externo para dar a apar\u00EAncia de grupo -->\n<div class=\"group-container\">\n  <div class=\"container\">\n    <!-- Lista 1 com input -->\n    <div\n      class=\"list\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(nonSelectedList, $event)\"\n    >\n      <div class=\"row\">\n        <h6 class=\"col-md-8\">{{ nonSelectedTitle }}</h6>\n        <div *ngIf=\"nonSelectedButtonLabel\" class=\"col-md-4 align-end\">\n          <argenta-custom-button\n            label=\"{{ nonSelectedButtonLabel }}\"\n            (onButtonClick)=\"nonSelButtonClick()\"\n            class=\"align-end\"\n            [btnClass]=\"ButtonClasses.Primary\"\n          >\n          </argenta-custom-button>\n        </div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"list-input\"\n        (input)=\"nonSelectedListInputChange($event)\"\n      />\n      <div\n        *ngFor=\"let item of nonSelectedList\"\n        class=\"item-card\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart(item)\"\n      >\n        {{ item.descricao }}\n      </div>\n    </div>\n\n    <!-- Lista 2 com input -->\n    <div\n      class=\"list\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(selectedList, $event)\"\n    >\n      <div class=\"row\">\n        <h6 class=\"col-md-8\">{{ selectedTitle }}</h6>\n        <div *ngIf=\"selectedButtonLabel\" class=\"col-md-4 align-end\">\n          <argenta-custom-button\n            label=\"{{ selectedButtonLabel }}\"\n            (onButtonClick)=\"selButtonClick()\"\n            class=\"align-end\"\n            [btnClass]=\"ButtonClasses.Primary\"\n          >\n          </argenta-custom-button>\n        </div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"list-input\"\n        (input)=\"selectedListInputChange($event)\"\n      />\n      <div\n        *ngFor=\"let item of selectedList\"\n        class=\"item-card\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart(item)\"\n      >\n        {{ item.descricao }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.group-container{display:flex;justify-content:center;padding:20px;background-color:#fff;border-radius:12px;box-shadow:0 4px 8px #0000001a;width:80%;margin:auto}.container{display:flex;gap:20px;width:100%}.list{flex:1;padding:10px;background-color:#f0f0f0;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.list-input{width:100%;height:40px;margin-bottom:15px;border-radius:4px;border:1px solid #ccc;outline:none;font-size:1rem;resize:none}.item-card{width:100%;padding:15px;background-color:#fff;border-radius:8px;box-shadow:0 2px 5px #0003;cursor:move;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-family);font-weight:500;font-size:1.1rem;color:#333}.row{display:flex;justify-content:space-between;align-items:center;width:100%;max-height:50px;height:50px}.align-end{display:flex;justify-content:flex-end}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { nonSelectedTitle: [{
+                type: Input
+            }], nonSelectedList: [{
+                type: Input
+            }], nonSelectedButtonLabel: [{
+                type: Input
+            }], nonSelectedButtonClick: [{
+                type: Output
+            }], nonSelectedInputChanged: [{
+                type: Output
+            }], selectedTitle: [{
+                type: Input
+            }], selectedList: [{
+                type: Input
+            }], selectedButtonLabel: [{
+                type: Input
+            }], selectedButtonClick: [{
+                type: Output
+            }], selectedInputChanged: [{
+                type: Output
+            }] } });
+
+class DynamicModalComponent {
+    constructor() {
+        this.modalTitle = "Modal Title";
+        this.modalSizeClass = "";
+        this.modalId = "dynamicModal"; // ID único para cada modal
+    }
+    openModal() {
+        const modalElement = document.getElementById(this.modalId);
+        if (modalElement) {
+            modalElement.classList.add("show");
+            modalElement.setAttribute("aria-hidden", "false");
+            modalElement.style.display = "block";
+            document.body.classList.add("modal-open");
+            // Adiciona o backdrop manualmente se não existir
+            if (!document.querySelector(`.modal-backdrop[data-modal-id="${this.modalId}"]`)) {
+                const backdrop = document.createElement("div");
+                backdrop.className = "modal-backdrop fade show";
+                backdrop.setAttribute("data-modal-id", this.modalId);
+                document.body.appendChild(backdrop);
+            }
+        }
+    }
+    closeModal() {
+        const modalElement = document.getElementById(this.modalId);
+        if (modalElement) {
+            modalElement.classList.remove("show");
+            modalElement.setAttribute("aria-hidden", "true");
+            modalElement.style.display = "none";
+            document.body.classList.remove("modal-open");
+            document
+                .querySelector(`.modal-backdrop[data-modal-id="${this.modalId}"]`)
+                ?.remove();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicModalComponent, selector: "argenta-dynamic-modal", inputs: { modalTitle: "modalTitle", modalSizeClass: "modalSizeClass", modalId: "modalId" }, ngImport: i0, template: "<div\n  class=\"modal fade\"\n  [id]=\"modalId\"\n  tabindex=\"-1\"\n  [attr.aria-labelledby]=\"modalId + 'Label'\"\n  aria-hidden=\"true\"\n>\n  <div class=\"modal-dialog\" [ngClass]=\"modalSizeClass\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header custom-header\">\n        <h5 class=\"modal-title custom-modal-title\" [id]=\"modalId + 'Label'\">\n          {{ modalTitle }}\n        </h5>\n        <button\n          type=\"button\"\n          class=\"custom-close-button\"\n          (click)=\"closeModal()\"\n          aria-label=\"Close\"\n        >\n          &times;\n        </button>\n      </div>\n      <div class=\"modal-body custom-body\">\n        <ng-content select=\"[modal-body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer custom-footer\">\n        <ng-content select=\"[modal-footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".custom-header{background-color:var(--primary-color)!important;color:var(--text-color)!important;font-size:1.25rem!important;font-family:var(--font-family)!important;padding:1rem;position:relative}.custom-header .custom-close-button{position:absolute;right:1rem;background:none;border:none;font-size:2.5rem;color:var(--text-color);cursor:pointer}.custom-header .custom-close-button:hover{color:var(--danger-color)}.custom-modal-title{color:var(--text-color)!important;font-size:1.8rem!important;font-family:var(--font-family)!important}.custom-body{background-color:#fff;padding:1rem}.custom-footer{background-color:#fff;padding:.75rem;display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "argenta-dynamic-modal", template: "<div\n  class=\"modal fade\"\n  [id]=\"modalId\"\n  tabindex=\"-1\"\n  [attr.aria-labelledby]=\"modalId + 'Label'\"\n  aria-hidden=\"true\"\n>\n  <div class=\"modal-dialog\" [ngClass]=\"modalSizeClass\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header custom-header\">\n        <h5 class=\"modal-title custom-modal-title\" [id]=\"modalId + 'Label'\">\n          {{ modalTitle }}\n        </h5>\n        <button\n          type=\"button\"\n          class=\"custom-close-button\"\n          (click)=\"closeModal()\"\n          aria-label=\"Close\"\n        >\n          &times;\n        </button>\n      </div>\n      <div class=\"modal-body custom-body\">\n        <ng-content select=\"[modal-body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer custom-footer\">\n        <ng-content select=\"[modal-footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".custom-header{background-color:var(--primary-color)!important;color:var(--text-color)!important;font-size:1.25rem!important;font-family:var(--font-family)!important;padding:1rem;position:relative}.custom-header .custom-close-button{position:absolute;right:1rem;background:none;border:none;font-size:2.5rem;color:var(--text-color);cursor:pointer}.custom-header .custom-close-button:hover{color:var(--danger-color)}.custom-modal-title{color:var(--text-color)!important;font-size:1.8rem!important;font-family:var(--font-family)!important}.custom-body{background-color:#fff;padding:1rem}.custom-footer{background-color:#fff;padding:.75rem;display:flex;justify-content:flex-end;gap:.5rem}\n"] }]
+        }], propDecorators: { modalTitle: [{
+                type: Input
+            }], modalSizeClass: [{
+                type: Input
+            }], modalId: [{
+                type: Input
+            }] } });
+
+class DynamicTableComponent {
+    constructor() {
+        this.itemsPerPageOptions = [10, 20, 50];
+        this.showPageInfo = true;
+        this.currentPage = 1;
+        this.itemsPerPage = 10;
+    }
+    get totalItems() {
+        return this.config.totalItems ?? this.config.data.length;
+    }
+    get paginatedData() {
+        if (!this.config.pagination) {
+            // Retorna todos os dados se a paginação estiver desativada
+            return this.config.data;
+        }
+        const itemsPerPage = this.config.itemsPerPage || this.itemsPerPage;
+        const startIndex = (this.currentPage - 1) * itemsPerPage;
+        return this.config.data.slice(startIndex, startIndex + itemsPerPage);
+    }
+    ngOnInit() {
+        if (!this.config || !this.config.columns || !this.config.data) {
+            throw new Error("DynamicTableComponent: Configuração inválida.");
+        }
+        // Define valores padrão se não especificados
+        this.config.showHeader = this.config.showHeader ?? true; // Exibe o cabeçalho por padrão
+        this.config.pagination = this.config.pagination ?? true; // Ativa paginação por padrão
+        this.itemsPerPage = this.config.itemsPerPage || 10;
+    }
+    onPageChange(newPage) {
+        this.currentPage = newPage;
+    }
+    onItemsPerPageChange(event) {
+        const target = event.target;
+        this.itemsPerPage = +target.value;
+        this.currentPage = 1; // Reinicia a paginação ao alterar os itens por página
+    }
+    // Getter para garantir que totalItems nunca seja undefined
+    get safeTotalItems() {
+        return this.totalItems || 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicTableComponent, selector: "argenta-dynamic-table", inputs: { config: "config", itemsPerPageOptions: "itemsPerPageOptions", showPageInfo: "showPageInfo" }, ngImport: i0, template: "<table class=\"table\" [ngClass]=\"{ nested: config.isNested }\">\n  <thead *ngIf=\"config.showHeader\">\n    <tr>\n      <th *ngFor=\"let column of config.columns\">{{ column.header }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of paginatedData\">\n      <td *ngFor=\"let column of config.columns\">\n        <ng-container [ngSwitch]=\"column.type\">\n          <span *ngSwitchCase=\"'text'\">{{ row[column.key] }}</span>\n          <ng-container *ngSwitchCase=\"'template'\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.template || null;\n                context: { $implicit: row }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<div\n  class=\"text-center pagination-controls\"\n  [ngClass]=\"{ nested: config.isNested }\"\n  *ngIf=\"config.pagination\"\n>\n  <custom-pagination\n    [totalItems]=\"safeTotalItems\"\n    [itemsPerPage]=\"itemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\"\n  >\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.table{width:100%;border-collapse:collapse;border-spacing:0}.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{border-top-left-radius:10px}.table thead th:last-child{border-top-right-radius:10px}.table.nested thead th{font-size:.7rem;padding:7px;line-height:.8}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table.nested tbody td:first-child{padding-left:1rem}.table tbody tr:hover{background-color:#f5f5f5!important;transition:background-color .3s ease}.table.nested tbody tr:hover{background-color:#f0f0f0!important}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.pagination-controls.nested{font-size:.7rem;transform:scale(.7);margin-top:.5rem}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.left-section{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.5rem}.custom-select{font-family:var(--font-family);font-size:14px;padding:.375rem 1.75rem .375rem .75rem;border:1px solid #ccc;border-radius:.25rem;appearance:none;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px}.custom-select:focus{border-color:#80bdff;outline:none;box-shadow:0 0 0 .2rem #007bff40}\n"], 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "showPageInfo"], outputs: ["pageChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "argenta-dynamic-table", template: "<table class=\"table\" [ngClass]=\"{ nested: config.isNested }\">\n  <thead *ngIf=\"config.showHeader\">\n    <tr>\n      <th *ngFor=\"let column of config.columns\">{{ column.header }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of paginatedData\">\n      <td *ngFor=\"let column of config.columns\">\n        <ng-container [ngSwitch]=\"column.type\">\n          <span *ngSwitchCase=\"'text'\">{{ row[column.key] }}</span>\n          <ng-container *ngSwitchCase=\"'template'\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.template || null;\n                context: { $implicit: row }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<div\n  class=\"text-center pagination-controls\"\n  [ngClass]=\"{ nested: config.isNested }\"\n  *ngIf=\"config.pagination\"\n>\n  <custom-pagination\n    [totalItems]=\"safeTotalItems\"\n    [itemsPerPage]=\"itemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\"\n  >\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.table{width:100%;border-collapse:collapse;border-spacing:0}.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{border-top-left-radius:10px}.table thead th:last-child{border-top-right-radius:10px}.table.nested thead th{font-size:.7rem;padding:7px;line-height:.8}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table.nested tbody td:first-child{padding-left:1rem}.table tbody tr:hover{background-color:#f5f5f5!important;transition:background-color .3s ease}.table.nested tbody tr:hover{background-color:#f0f0f0!important}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.pagination-controls.nested{font-size:.7rem;transform:scale(.7);margin-top:.5rem}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.left-section{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.5rem}.custom-select{font-family:var(--font-family);font-size:14px;padding:.375rem 1.75rem .375rem .75rem;border:1px solid #ccc;border-radius:.25rem;appearance:none;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px}.custom-select:focus{border-color:#80bdff;outline:none;box-shadow:0 0 0 .2rem #007bff40}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }], itemsPerPageOptions: [{
+                type: Input
+            }], showPageInfo: [{
+                type: Input
+            }] } });
+
 class FileUploadComponent {
     constructor(authService) {
         this.authService = authService;
@@ -2056,6 +2244,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+class JsonViewerComponent {
+    constructor() {
+        this.isRoot = true;
+        this.allExpanded = true;
+        this.expandedMap = new Map();
+    }
+    toggleAll() {
+        this.allExpanded = !this.allExpanded;
+        this.expandedMap.clear();
+    }
+    toggleExpand(key) {
+        const currentState = this.isExpanded(key);
+        this.expandedMap.set(key, !currentState);
+    }
+    isObject(val) {
+        return val !== null && typeof val === 'object';
+    }
+    objectKeys(obj) {
+        return Object.keys(obj);
+    }
+    isExpanded(key) {
+        return this.expandedMap.has(key) ? this.expandedMap.get(key) : this.allExpanded;
+    }
+    copyJson() {
+        const jsonString = JSON.stringify(this.jsonData, null, 2);
+        navigator.clipboard.writeText(jsonString).then(() => {
+            alert('JSON copiado com sucesso!');
+        }).catch(err => {
+            console.error('Error copying JSON to clipboard:', err);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JsonViewerComponent, selector: "argenta-json-viewer", inputs: { jsonData: "jsonData", isRoot: "isRoot", copyLabel: "copyLabel", showLabel: "showLabel", hideLabel: "hideLabel" }, ngImport: i0, template: "<div class=\"json-viewer-box\">\n  <div class=\"toolbar\">\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button copy-button\"\n      (click)=\"copyJson()\"\n    >\n      {{ copyLabel }}\n    </button>\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button toggle-button\"\n      (click)=\"toggleAll()\"\n    >\n      {{ allExpanded ? \"\u25BC \" + hideLabel : \"\u25BA \" + showLabel }}\n    </button>\n  </div>\n\n  <div class=\"json-content\">\n    <div *ngIf=\"isObject(jsonData)\">\n      <div class=\"json-pair\" *ngFor=\"let key of objectKeys(jsonData)\">\n        <span class=\"key\">\n          {{ key }}:\n          <button class=\"minimal-toggle-button\" (click)=\"toggleExpand(key)\">\n            {{ isExpanded(key) ? \"\u25BC\" : \"\u25BA\" }}\n          </button>\n        </span>\n\n        <div class=\"nested-json\" *ngIf=\"isExpanded(key)\">\n          <argenta-json-viewer\n            [jsonData]=\"jsonData[key]\"\n            [isRoot]=\"false\"\n          ></argenta-json-viewer>\n        </div>\n        <span *ngIf=\"!isExpanded(key) && isObject(jsonData[key])\">[...]</span>\n      </div>\n    </div>\n    <span *ngIf=\"!isObject(jsonData)\">\n      {{ jsonData }}\n    </span>\n  </div>\n</div>\n", styles: [".json-viewer-box{border:1px solid #ccc;padding:10px;border-radius:8px;font-family:Arial,sans-serif;background-color:#f9f9f9}.json-viewer-box .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #ddd}.json-viewer-box .action-button{background-color:#4caf50;color:#fff;border:none;padding:8px 16px;font-size:14px;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.json-viewer-box .action-button:hover{background-color:#45a049}.json-viewer-box .minimal-toggle-button{background:none;border:none;color:#007bff;cursor:pointer;font-size:12px;margin-left:5px;padding:0;line-height:1}.json-viewer-box .minimal-toggle-button:hover{color:#0056b3}.json-viewer-box .json-content{margin-top:10px}.json-viewer-box .json-content .json-pair{margin-bottom:5px}.json-viewer-box .json-content .json-pair .key{font-weight:700;margin-right:5px;display:flex;align-items:center}\n"], dependencies: [{ 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: JsonViewerComponent, selector: "argenta-json-viewer", inputs: ["jsonData", "isRoot", "copyLabel", "showLabel", "hideLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'argenta-json-viewer', template: "<div class=\"json-viewer-box\">\n  <div class=\"toolbar\">\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button copy-button\"\n      (click)=\"copyJson()\"\n    >\n      {{ copyLabel }}\n    </button>\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button toggle-button\"\n      (click)=\"toggleAll()\"\n    >\n      {{ allExpanded ? \"\u25BC \" + hideLabel : \"\u25BA \" + showLabel }}\n    </button>\n  </div>\n\n  <div class=\"json-content\">\n    <div *ngIf=\"isObject(jsonData)\">\n      <div class=\"json-pair\" *ngFor=\"let key of objectKeys(jsonData)\">\n        <span class=\"key\">\n          {{ key }}:\n          <button class=\"minimal-toggle-button\" (click)=\"toggleExpand(key)\">\n            {{ isExpanded(key) ? \"\u25BC\" : \"\u25BA\" }}\n          </button>\n        </span>\n\n        <div class=\"nested-json\" *ngIf=\"isExpanded(key)\">\n          <argenta-json-viewer\n            [jsonData]=\"jsonData[key]\"\n            [isRoot]=\"false\"\n          ></argenta-json-viewer>\n        </div>\n        <span *ngIf=\"!isExpanded(key) && isObject(jsonData[key])\">[...]</span>\n      </div>\n    </div>\n    <span *ngIf=\"!isObject(jsonData)\">\n      {{ jsonData }}\n    </span>\n  </div>\n</div>\n", styles: [".json-viewer-box{border:1px solid #ccc;padding:10px;border-radius:8px;font-family:Arial,sans-serif;background-color:#f9f9f9}.json-viewer-box .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #ddd}.json-viewer-box .action-button{background-color:#4caf50;color:#fff;border:none;padding:8px 16px;font-size:14px;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.json-viewer-box .action-button:hover{background-color:#45a049}.json-viewer-box .minimal-toggle-button{background:none;border:none;color:#007bff;cursor:pointer;font-size:12px;margin-left:5px;padding:0;line-height:1}.json-viewer-box .minimal-toggle-button:hover{color:#0056b3}.json-viewer-box .json-content{margin-top:10px}.json-viewer-box .json-content .json-pair{margin-bottom:5px}.json-viewer-box .json-content .json-pair .key{font-weight:700;margin-right:5px;display:flex;align-items:center}\n"] }]
+        }], propDecorators: { jsonData: [{
+                type: Input
+            }], isRoot: [{
+                type: Input
+            }], copyLabel: [{
+                type: Input
+            }], showLabel: [{
+                type: Input
+            }], hideLabel: [{
+                type: Input
+            }] } });
+
+class ModalComponent {
+    constructor(activeModal) {
+        this.activeModal = activeModal;
+        this.onButtonClick = new EventEmitter(); // Novo evento
+    }
+    ngOnInit() {
+        const componentRef = this.dynamicComponent.createComponent(this.component);
+        const instance = componentRef.instance;
+        if (this.componentInputs) {
+            Object.keys(this.componentInputs).forEach(inputName => {
+                instance[inputName] = this.componentInputs[inputName];
+            });
+        }
+    }
+    closeModal() {
+        this.activeModal.close();
+    }
+    buttonClicked() {
+        this.onButtonClick.emit(); // Emitindo o evento
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: i1$1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, selector: "argenta-modal", inputs: { title: "title", component: "component", componentInputs: "componentInputs", closeButtonLabel: "closeButtonLabel", buttonLabel: "buttonLabel" }, outputs: { onButtonClick: "onButtonClick" }, viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["dynamicComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"modal-header custom-modal-header\">\n  <h4 class=\"modal-title\">{{ title }}</h4>\n  <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n  <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n  <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n    {{ closeButtonLabel }}\n  </button>\n  <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n    {{ buttonLabel }}\n  </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:var(--primary-color);color:var(--text-color);border-bottom:none;font-family:var(--font-family);display:flex;justify-content:space-between;align-items:center;padding:1rem}.modal-title{color:var(--text-color);font-size:20px}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:var(--text-color)}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:var(--primary-color);color:var(--text-color);border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'argenta-modal', template: "<div class=\"modal-header custom-modal-header\">\n  <h4 class=\"modal-title\">{{ title }}</h4>\n  <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n  <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n  <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n    {{ closeButtonLabel }}\n  </button>\n  <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n    {{ buttonLabel }}\n  </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:var(--primary-color);color:var(--text-color);border-bottom:none;font-family:var(--font-family);display:flex;justify-content:space-between;align-items:center;padding:1rem}.modal-title{color:var(--text-color);font-size:20px}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:var(--text-color)}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:var(--primary-color);color:var(--text-color);border-bottom:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.NgbActiveModal }]; }, propDecorators: { title: [{
+                type: Input
+            }], component: [{
+                type: Input
+            }], componentInputs: [{
+                type: Input
+            }], closeButtonLabel: [{
+                type: Input
+            }], buttonLabel: [{
+                type: Input
+            }], onButtonClick: [{
+                type: Output
+            }], dynamicComponent: [{
+                type: ViewChild,
+                args: ['dynamicComponent', { read: ViewContainerRef, static: true }]
+            }] } });
+
 class MultiSelectComponent {
     constructor(authService, http) {
         this.authService = authService;
@@ -2814,6 +3094,8 @@ class DataTableComponent {
         this.buttonLabel = "";
         this.pagedData = [];
         this.initialFilterField = null;
+        this.buttonList = [];
+        this.sortChange = new EventEmitter();
         this.pageChange = new EventEmitter();
         this.itemsPerPageChange = new EventEmitter();
         this.onEditTable = new EventEmitter();
@@ -3007,11 +3289,11 @@ class DataTableComponent {
         this.onButtonClick.emit(); // Emitindo o evento
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AuthService }, { token: RefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataTableComponent, selector: "argenta-list-data-table", inputs: { columns: "columns", hiddenColumns: "hiddenColumns", defaultItemsPerPage: "defaultItemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel", totalItems: "totalItems", fetchDataFunction: "fetchDataFunction", editPermissions: "editPermissions", deletePermissions: "deletePermissions", viewPermissions: "viewPermissions", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText", filterDescription: "filterDescription", buttonLabel: "buttonLabel", pagedData: "pagedData", initialFilterField: "initialFilterField" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick", filterFieldChange: "filterFieldChange" }, ngImport: i0, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem\">\n  <div class=\"left-section\">\n    <div class=\"form-group\">\n      <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{\n        itemsPerPageLabel\n      }}</label>\n      <select\n        id=\"itemsPerPageSelect\"\n        class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n        [(ngModel)]=\"defaultItemsPerPage\"\n        (ngModelChange)=\"onItemsPerPageChange()\"\n      >\n        <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">\n          {{ option }}\n        </option>\n      </select>\n    </div>\n  </div>\n  <div *ngIf=\"buttonLabel && buttonLabel.length > 0\" class=\"right-section\">\n    <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\n      <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n      {{ buttonLabel }}\n    </button>\n  </div>\n</div>\n\n<div class=\"search-input-container\">\n  <argenta-search-input\n    id=\"search\"\n    label=\"\"\n    placeholder=\"Buscar\"\n    [(ngModel)]=\"filterDescription\"\n    (search)=\"onSearch($event)\"\n  ></argenta-search-input>\n</div>\n\n<div class=\"table-responsive\" style=\"margin-top: 1rem\">\n  <table class=\"table table-hover\">\n    <thead>\n      <tr>\n        <ng-container *ngFor=\"let column of columns\">\n          <th\n            *ngIf=\"!isColumnHidden(column.prop)\"\n            (click)=\"onSelectSearchField(column.prop)\"\n          >\n            {{ column.label }}\n            <span>\n              <i-lucide\n                name=\"arrow-up\"\n                [size]=\"14\"\n                [class.selected]=\"\n                  column.isSearchSelected && sortDirection === 'asc'\n                \"\n              ></i-lucide>\n              <i-lucide\n                name=\"arrow-down\"\n                [size]=\"14\"\n                [class.selected]=\"\n                  column.isSearchSelected && sortDirection === 'desc'\n                \"\n              ></i-lucide>\n            </span>\n          </th>\n        </ng-container>\n        <th\n          *ngIf=\"showActionColumn\"\n          class=\"text-end\"\n          style=\"padding-right: 6.3rem\"\n        >\n          {{ actionColumnLabel }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let item of pagedData; let i = index\">\n        <ng-container *ngFor=\"let column of columns\">\n          <td *ngIf=\"!isColumnHidden(column.prop)\">\n            {{ getNestedProperty(item, column.prop) }}\n          </td>\n        </ng-container>\n        <td *ngIf=\"showActionColumn\" class=\"text-end\">\n          <div class=\"d-flex justify-content-end\">\n            <div\n              *ngIf=\"\n                hasPermission(editPermissions) &&\n                onEditTable.observers.length > 0\n              \"\n              (click)=\"handleAction('edit', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <lucide-icon\n                name=\"square-pen\"\n                [size]=\"20\"\n                color=\"#2CA58D\"\n                [strokeWidth]=\"1.75\"\n              ></lucide-icon>\n            </div>\n            <div\n              *ngIf=\"\n                hasPermission(viewPermissions) &&\n                onViewTable.observers.length > 0\n              \"\n              (click)=\"handleAction('view', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <lucide-icon\n                name=\"user-round\"\n                [size]=\"20\"\n                color=\"#2CA58D\"\n                [strokeWidth]=\"1.75\"\n              ></lucide-icon>\n            </div>\n            <div\n              *ngIf=\"\n                hasPermission(deletePermissions) &&\n                onDeleteTable.observers.length > 0\n              \"\n              (click)=\"handleAction('delete', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <i-lucide\n                name=\"trash-2\"\n                [size]=\"20\"\n                color=\"#F26E6E\"\n                [strokeWidth]=\"1.75\"\n              ></i-lucide>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n  <custom-pagination\n    [totalItems]=\"totalItems\"\n    [itemsPerPage]=\"defaultItemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\"\n  >\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.clickable-icon{cursor:pointer}:host{font-family:var(--font-family)}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:var(--font-family);font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:var(--font-family);font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737b7b);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:var(--secondary-color);border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{box-shadow:0 0 0 .15rem var(--secondary-color)}.custom-button:active{background-color:var(--secondary-color)}.custom-button:focus{outline:none;box-shadow:0 0 0 .15rem var(--secondary-color)}.selected{color:var(--secondary-color);stroke-width:8}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "showPageInfo"], outputs: ["pageChange"] }, { kind: "component", type: SearchInputComponent, selector: "argenta-search-input", inputs: ["id", "label", "type", "placeholder", "value", "disabled", "readonly", "autofocus", "maxlength", "minlength", "required", "pattern", "debounceTime"], outputs: ["search", "inputChange", "change", "focus", "blur", "keyup", "keydown", "keypress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataTableComponent, selector: "argenta-list-data-table", inputs: { columns: "columns", hiddenColumns: "hiddenColumns", defaultItemsPerPage: "defaultItemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel", totalItems: "totalItems", fetchDataFunction: "fetchDataFunction", editPermissions: "editPermissions", deletePermissions: "deletePermissions", viewPermissions: "viewPermissions", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText", filterDescription: "filterDescription", buttonLabel: "buttonLabel", pagedData: "pagedData", initialFilterField: "initialFilterField", buttonList: "buttonList" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick", filterFieldChange: "filterFieldChange" }, ngImport: i0, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem\">\n  <div class=\"left-section\">\n    <div class=\"form-group\">\n      <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{\n        itemsPerPageLabel\n      }}</label>\n      <select\n        id=\"itemsPerPageSelect\"\n        class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n        [(ngModel)]=\"defaultItemsPerPage\"\n        (ngModelChange)=\"onItemsPerPageChange()\"\n      >\n        <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">\n          {{ option }}\n        </option>\n      </select>\n    </div>\n  </div>\n  <div class=\"right-section\">\n    <div *ngIf=\"buttonList && buttonList.length > 0\" class=\"ng-button-row\">\n      <ng-container *ngFor=\"let buttonTemplate of buttonList\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonTemplate\"\n          class=\"ng-button\"\n        ></ng-container>\n      </ng-container>\n    </div>\n    <button\n      *ngIf=\"buttonLabel && buttonLabel.length > 0\"\n      class=\"custom-button\"\n      (click)=\"onNewButtonClick()\"\n    >\n      <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n      {{ buttonLabel }}\n    </button>\n  </div>\n</div>\n\n<div class=\"search-input-container\">\n  <argenta-search-input\n    id=\"search\"\n    label=\"\"\n    placeholder=\"Buscar\"\n    [(ngModel)]=\"filterDescription\"\n    (search)=\"onSearch($event)\"\n  ></argenta-search-input>\n</div>\n\n<div class=\"table-responsive\" style=\"margin-top: 1rem\">\n  <table class=\"table table-hover\">\n    <thead>\n      <tr>\n        <ng-container *ngFor=\"let column of columns\">\n          <th\n            *ngIf=\"!isColumnHidden(column.prop)\"\n            (click)=\"onSelectSearchField(column.prop)\"\n          >\n            {{ column.label }}\n            <span>\n              <i-lucide\n                name=\"arrow-up\"\n                [size]=\"14\"\n                [class.selected]=\"\n                  column.isSearchSelected && sortDirection === 'asc'\n                \"\n              ></i-lucide>\n              <i-lucide\n                name=\"arrow-down\"\n                [size]=\"14\"\n                [class.selected]=\"\n                  column.isSearchSelected && sortDirection === 'desc'\n                \"\n              ></i-lucide>\n            </span>\n          </th>\n        </ng-container>\n        <th\n          *ngIf=\"showActionColumn\"\n          class=\"text-end\"\n          style=\"padding-right: 6.3rem\"\n        >\n          {{ actionColumnLabel }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let item of pagedData; let i = index\">\n        <ng-container *ngFor=\"let column of columns\">\n          <td *ngIf=\"!isColumnHidden(column.prop)\">\n            {{ getNestedProperty(item, column.prop) }}\n          </td>\n        </ng-container>\n        <td *ngIf=\"showActionColumn\" class=\"text-end\">\n          <div class=\"d-flex justify-content-end\">\n            <div\n              *ngIf=\"\n                hasPermission(editPermissions) &&\n                onEditTable.observers.length > 0\n              \"\n              (click)=\"handleAction('edit', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <lucide-icon\n                name=\"square-pen\"\n                [size]=\"20\"\n                color=\"#2CA58D\"\n                [strokeWidth]=\"1.75\"\n              ></lucide-icon>\n            </div>\n            <div\n              *ngIf=\"\n                hasPermission(viewPermissions) &&\n                onViewTable.observers.length > 0\n              \"\n              (click)=\"handleAction('view', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <lucide-icon\n                name=\"user-round\"\n                [size]=\"20\"\n                color=\"#2CA58D\"\n                [strokeWidth]=\"1.75\"\n              ></lucide-icon>\n            </div>\n            <div\n              *ngIf=\"\n                hasPermission(deletePermissions) &&\n                onDeleteTable.observers.length > 0\n              \"\n              (click)=\"handleAction('delete', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <i-lucide\n                name=\"trash-2\"\n                [size]=\"20\"\n                color=\"#F26E6E\"\n                [strokeWidth]=\"1.75\"\n              ></i-lucide>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n  <custom-pagination\n    [totalItems]=\"totalItems\"\n    [itemsPerPage]=\"defaultItemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\"\n  >\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.clickable-icon{cursor:pointer}:host{font-family:var(--font-family)}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:var(--font-family);font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:var(--font-family);font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737b7b);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:var(--secondary-color);border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{box-shadow:0 0 0 .15rem var(--secondary-color)}.custom-button:active{background-color:var(--secondary-color)}.custom-button:focus{outline:none;box-shadow:0 0 0 .15rem var(--secondary-color)}.selected{color:var(--secondary-color);stroke-width:8}.ng-button-row{display:flex;gap:10px;margin-right:10px;margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "showPageInfo"], outputs: ["pageChange"] }, { kind: "component", type: SearchInputComponent, selector: "argenta-search-input", inputs: ["id", "label", "type", "placeholder", "value", "disabled", "readonly", "autofocus", "maxlength", "minlength", "required", "pattern", "debounceTime"], outputs: ["search", "inputChange", "change", "focus", "blur", "keyup", "keydown", "keypress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: "argenta-list-data-table", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem\">\n  <div class=\"left-section\">\n    <div class=\"form-group\">\n      <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{\n        itemsPerPageLabel\n      }}</label>\n      <select\n        id=\"itemsPerPageSelect\"\n        class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n        [(ngModel)]=\"defaultItemsPerPage\"\n        (ngModelChange)=\"onItemsPerPageChange()\"\n      >\n        <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">\n          {{ option }}\n        </option>\n      </select>\n    </div>\n  </div>\n  <div *ngIf=\"buttonLabel && buttonLabel.length > 0\" class=\"right-section\">\n    <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\n      <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n      {{ buttonLabel }}\n    </button>\n  </div>\n</div>\n\n<div class=\"search-input-container\">\n  <argenta-search-input\n    id=\"search\"\n    label=\"\"\n    placeholder=\"Buscar\"\n    [(ngModel)]=\"filterDescription\"\n    (search)=\"onSearch($event)\"\n  ></argenta-search-input>\n</div>\n\n<div class=\"table-responsive\" style=\"margin-top: 1rem\">\n  <table class=\"table table-hover\">\n    <thead>\n      <tr>\n        <ng-container *ngFor=\"let column of columns\">\n          <th\n            *ngIf=\"!isColumnHidden(column.prop)\"\n            (click)=\"onSelectSearchField(column.prop)\"\n          >\n            {{ column.label }}\n            <span>\n              <i-lucide\n                name=\"arrow-up\"\n                [size]=\"14\"\n                [class.selected]=\"\n                  column.isSearchSelected && sortDirection === 'asc'\n                \"\n              ></i-lucide>\n              <i-lucide\n                name=\"arrow-down\"\n                [size]=\"14\"\n                [class.selected]=\"\n                  column.isSearchSelected && sortDirection === 'desc'\n                \"\n              ></i-lucide>\n            </span>\n          </th>\n        </ng-container>\n        <th\n          *ngIf=\"showActionColumn\"\n          class=\"text-end\"\n          style=\"padding-right: 6.3rem\"\n        >\n          {{ actionColumnLabel }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let item of pagedData; let i = index\">\n        <ng-container *ngFor=\"let column of columns\">\n          <td *ngIf=\"!isColumnHidden(column.prop)\">\n            {{ getNestedProperty(item, column.prop) }}\n          </td>\n        </ng-container>\n        <td *ngIf=\"showActionColumn\" class=\"text-end\">\n          <div class=\"d-flex justify-content-end\">\n            <div\n              *ngIf=\"\n                hasPermission(editPermissions) &&\n                onEditTable.observers.length > 0\n              \"\n              (click)=\"handleAction('edit', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <lucide-icon\n                name=\"square-pen\"\n                [size]=\"20\"\n                color=\"#2CA58D\"\n                [strokeWidth]=\"1.75\"\n              ></lucide-icon>\n            </div>\n            <div\n              *ngIf=\"\n                hasPermission(viewPermissions) &&\n                onViewTable.observers.length > 0\n              \"\n              (click)=\"handleAction('view', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <lucide-icon\n                name=\"user-round\"\n                [size]=\"20\"\n                color=\"#2CA58D\"\n                [strokeWidth]=\"1.75\"\n              ></lucide-icon>\n            </div>\n            <div\n              *ngIf=\"\n                hasPermission(deletePermissions) &&\n                onDeleteTable.observers.length > 0\n              \"\n              (click)=\"handleAction('delete', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <i-lucide\n                name=\"trash-2\"\n                [size]=\"20\"\n                color=\"#F26E6E\"\n                [strokeWidth]=\"1.75\"\n              ></i-lucide>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n  <custom-pagination\n    [totalItems]=\"totalItems\"\n    [itemsPerPage]=\"defaultItemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\"\n  >\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.clickable-icon{cursor:pointer}:host{font-family:var(--font-family)}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:var(--font-family);font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:var(--font-family);font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737b7b);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:var(--secondary-color);border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{box-shadow:0 0 0 .15rem var(--secondary-color)}.custom-button:active{background-color:var(--secondary-color)}.custom-button:focus{outline:none;box-shadow:0 0 0 .15rem var(--secondary-color)}.selected{color:var(--secondary-color);stroke-width:8}\n"] }]
+            args: [{ selector: "argenta-list-data-table", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem\">\n  <div class=\"left-section\">\n    <div class=\"form-group\">\n      <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{\n        itemsPerPageLabel\n      }}</label>\n      <select\n        id=\"itemsPerPageSelect\"\n        class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n        [(ngModel)]=\"defaultItemsPerPage\"\n        (ngModelChange)=\"onItemsPerPageChange()\"\n      >\n        <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">\n          {{ option }}\n        </option>\n      </select>\n    </div>\n  </div>\n  <div class=\"right-section\">\n    <div *ngIf=\"buttonList && buttonList.length > 0\" class=\"ng-button-row\">\n      <ng-container *ngFor=\"let buttonTemplate of buttonList\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonTemplate\"\n          class=\"ng-button\"\n        ></ng-container>\n      </ng-container>\n    </div>\n    <button\n      *ngIf=\"buttonLabel && buttonLabel.length > 0\"\n      class=\"custom-button\"\n      (click)=\"onNewButtonClick()\"\n    >\n      <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n      {{ buttonLabel }}\n    </button>\n  </div>\n</div>\n\n<div class=\"search-input-container\">\n  <argenta-search-input\n    id=\"search\"\n    label=\"\"\n    placeholder=\"Buscar\"\n    [(ngModel)]=\"filterDescription\"\n    (search)=\"onSearch($event)\"\n  ></argenta-search-input>\n</div>\n\n<div class=\"table-responsive\" style=\"margin-top: 1rem\">\n  <table class=\"table table-hover\">\n    <thead>\n      <tr>\n        <ng-container *ngFor=\"let column of columns\">\n          <th\n            *ngIf=\"!isColumnHidden(column.prop)\"\n            (click)=\"onSelectSearchField(column.prop)\"\n          >\n            {{ column.label }}\n            <span>\n              <i-lucide\n                name=\"arrow-up\"\n                [size]=\"14\"\n                [class.selected]=\"\n                  column.isSearchSelected && sortDirection === 'asc'\n                \"\n              ></i-lucide>\n              <i-lucide\n                name=\"arrow-down\"\n                [size]=\"14\"\n                [class.selected]=\"\n                  column.isSearchSelected && sortDirection === 'desc'\n                \"\n              ></i-lucide>\n            </span>\n          </th>\n        </ng-container>\n        <th\n          *ngIf=\"showActionColumn\"\n          class=\"text-end\"\n          style=\"padding-right: 6.3rem\"\n        >\n          {{ actionColumnLabel }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let item of pagedData; let i = index\">\n        <ng-container *ngFor=\"let column of columns\">\n          <td *ngIf=\"!isColumnHidden(column.prop)\">\n            {{ getNestedProperty(item, column.prop) }}\n          </td>\n        </ng-container>\n        <td *ngIf=\"showActionColumn\" class=\"text-end\">\n          <div class=\"d-flex justify-content-end\">\n            <div\n              *ngIf=\"\n                hasPermission(editPermissions) &&\n                onEditTable.observers.length > 0\n              \"\n              (click)=\"handleAction('edit', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <lucide-icon\n                name=\"square-pen\"\n                [size]=\"20\"\n                color=\"#2CA58D\"\n                [strokeWidth]=\"1.75\"\n              ></lucide-icon>\n            </div>\n            <div\n              *ngIf=\"\n                hasPermission(viewPermissions) &&\n                onViewTable.observers.length > 0\n              \"\n              (click)=\"handleAction('view', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <lucide-icon\n                name=\"user-round\"\n                [size]=\"20\"\n                color=\"#2CA58D\"\n                [strokeWidth]=\"1.75\"\n              ></lucide-icon>\n            </div>\n            <div\n              *ngIf=\"\n                hasPermission(deletePermissions) &&\n                onDeleteTable.observers.length > 0\n              \"\n              (click)=\"handleAction('delete', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <i-lucide\n                name=\"trash-2\"\n                [size]=\"20\"\n                color=\"#F26E6E\"\n                [strokeWidth]=\"1.75\"\n              ></i-lucide>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n  <custom-pagination\n    [totalItems]=\"totalItems\"\n    [itemsPerPage]=\"defaultItemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\"\n  >\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.clickable-icon{cursor:pointer}:host{font-family:var(--font-family)}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:var(--font-family);font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:var(--font-family);font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737b7b);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:var(--secondary-color);border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{box-shadow:0 0 0 .15rem var(--secondary-color)}.custom-button:active{background-color:var(--secondary-color)}.custom-button:focus{outline:none;box-shadow:0 0 0 .15rem var(--secondary-color)}.selected{color:var(--secondary-color);stroke-width:8}.ng-button-row{display:flex;gap:10px;margin-right:10px;margin-left:10px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AuthService }, { type: RefreshService }]; }, propDecorators: { columns: [{
                 type: Input
             }], hiddenColumns: [{
@@ -3048,6 +3330,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], initialFilterField: [{
                 type: Input
+            }], buttonList: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
             }], pageChange: [{
                 type: Output
             }], itemsPerPageChange: [{
@@ -3307,146 +3593,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class JsonViewerComponent {
-    constructor() {
-        this.isRoot = true;
-        this.allExpanded = true;
-        this.expandedMap = new Map();
-    }
-    toggleAll() {
-        this.allExpanded = !this.allExpanded;
-        this.expandedMap.clear();
-    }
-    toggleExpand(key) {
-        const currentState = this.isExpanded(key);
-        this.expandedMap.set(key, !currentState);
-    }
-    isObject(val) {
-        return val !== null && typeof val === 'object';
-    }
-    objectKeys(obj) {
-        return Object.keys(obj);
-    }
-    isExpanded(key) {
-        return this.expandedMap.has(key) ? this.expandedMap.get(key) : this.allExpanded;
-    }
-    copyJson() {
-        const jsonString = JSON.stringify(this.jsonData, null, 2);
-        navigator.clipboard.writeText(jsonString).then(() => {
-            alert('JSON copiado com sucesso!');
-        }).catch(err => {
-            console.error('Error copying JSON to clipboard:', err);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JsonViewerComponent, selector: "argenta-json-viewer", inputs: { jsonData: "jsonData", isRoot: "isRoot", copyLabel: "copyLabel", showLabel: "showLabel", hideLabel: "hideLabel" }, ngImport: i0, template: "<div class=\"json-viewer-box\">\n  <div class=\"toolbar\">\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button copy-button\"\n      (click)=\"copyJson()\"\n    >\n      {{ copyLabel }}\n    </button>\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button toggle-button\"\n      (click)=\"toggleAll()\"\n    >\n      {{ allExpanded ? \"\u25BC \" + hideLabel : \"\u25BA \" + showLabel }}\n    </button>\n  </div>\n\n  <div class=\"json-content\">\n    <div *ngIf=\"isObject(jsonData)\">\n      <div class=\"json-pair\" *ngFor=\"let key of objectKeys(jsonData)\">\n        <span class=\"key\">\n          {{ key }}:\n          <button class=\"minimal-toggle-button\" (click)=\"toggleExpand(key)\">\n            {{ isExpanded(key) ? \"\u25BC\" : \"\u25BA\" }}\n          </button>\n        </span>\n\n        <div class=\"nested-json\" *ngIf=\"isExpanded(key)\">\n          <argenta-json-viewer\n            [jsonData]=\"jsonData[key]\"\n            [isRoot]=\"false\"\n          ></argenta-json-viewer>\n        </div>\n        <span *ngIf=\"!isExpanded(key) && isObject(jsonData[key])\">[...]</span>\n      </div>\n    </div>\n    <span *ngIf=\"!isObject(jsonData)\">\n      {{ jsonData }}\n    </span>\n  </div>\n</div>\n", styles: [".json-viewer-box{border:1px solid #ccc;padding:10px;border-radius:8px;font-family:Arial,sans-serif;background-color:#f9f9f9}.json-viewer-box .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #ddd}.json-viewer-box .action-button{background-color:#4caf50;color:#fff;border:none;padding:8px 16px;font-size:14px;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.json-viewer-box .action-button:hover{background-color:#45a049}.json-viewer-box .minimal-toggle-button{background:none;border:none;color:#007bff;cursor:pointer;font-size:12px;margin-left:5px;padding:0;line-height:1}.json-viewer-box .minimal-toggle-button:hover{color:#0056b3}.json-viewer-box .json-content{margin-top:10px}.json-viewer-box .json-content .json-pair{margin-bottom:5px}.json-viewer-box .json-content .json-pair .key{font-weight:700;margin-right:5px;display:flex;align-items:center}\n"], dependencies: [{ 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: JsonViewerComponent, selector: "argenta-json-viewer", inputs: ["jsonData", "isRoot", "copyLabel", "showLabel", "hideLabel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'argenta-json-viewer', template: "<div class=\"json-viewer-box\">\n  <div class=\"toolbar\">\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button copy-button\"\n      (click)=\"copyJson()\"\n    >\n      {{ copyLabel }}\n    </button>\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button toggle-button\"\n      (click)=\"toggleAll()\"\n    >\n      {{ allExpanded ? \"\u25BC \" + hideLabel : \"\u25BA \" + showLabel }}\n    </button>\n  </div>\n\n  <div class=\"json-content\">\n    <div *ngIf=\"isObject(jsonData)\">\n      <div class=\"json-pair\" *ngFor=\"let key of objectKeys(jsonData)\">\n        <span class=\"key\">\n          {{ key }}:\n          <button class=\"minimal-toggle-button\" (click)=\"toggleExpand(key)\">\n            {{ isExpanded(key) ? \"\u25BC\" : \"\u25BA\" }}\n          </button>\n        </span>\n\n        <div class=\"nested-json\" *ngIf=\"isExpanded(key)\">\n          <argenta-json-viewer\n            [jsonData]=\"jsonData[key]\"\n            [isRoot]=\"false\"\n          ></argenta-json-viewer>\n        </div>\n        <span *ngIf=\"!isExpanded(key) && isObject(jsonData[key])\">[...]</span>\n      </div>\n    </div>\n    <span *ngIf=\"!isObject(jsonData)\">\n      {{ jsonData }}\n    </span>\n  </div>\n</div>\n", styles: [".json-viewer-box{border:1px solid #ccc;padding:10px;border-radius:8px;font-family:Arial,sans-serif;background-color:#f9f9f9}.json-viewer-box .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #ddd}.json-viewer-box .action-button{background-color:#4caf50;color:#fff;border:none;padding:8px 16px;font-size:14px;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.json-viewer-box .action-button:hover{background-color:#45a049}.json-viewer-box .minimal-toggle-button{background:none;border:none;color:#007bff;cursor:pointer;font-size:12px;margin-left:5px;padding:0;line-height:1}.json-viewer-box .minimal-toggle-button:hover{color:#0056b3}.json-viewer-box .json-content{margin-top:10px}.json-viewer-box .json-content .json-pair{margin-bottom:5px}.json-viewer-box .json-content .json-pair .key{font-weight:700;margin-right:5px;display:flex;align-items:center}\n"] }]
-        }], propDecorators: { jsonData: [{
-                type: Input
-            }], isRoot: [{
-                type: Input
-            }], copyLabel: [{
-                type: Input
-            }], showLabel: [{
-                type: Input
-            }], hideLabel: [{
-                type: Input
-            }] } });
-
-class ModalComponent {
-    constructor(activeModal) {
-        this.activeModal = activeModal;
-        this.onButtonClick = new EventEmitter(); // Novo evento
-    }
-    ngOnInit() {
-        const componentRef = this.dynamicComponent.createComponent(this.component);
-        const instance = componentRef.instance;
-        if (this.componentInputs) {
-            Object.keys(this.componentInputs).forEach(inputName => {
-                instance[inputName] = this.componentInputs[inputName];
-            });
-        }
-    }
-    closeModal() {
-        this.activeModal.close();
-    }
-    buttonClicked() {
-        this.onButtonClick.emit(); // Emitindo o evento
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: i1$1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, selector: "argenta-modal", inputs: { title: "title", component: "component", componentInputs: "componentInputs", closeButtonLabel: "closeButtonLabel", buttonLabel: "buttonLabel" }, outputs: { onButtonClick: "onButtonClick" }, viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["dynamicComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"modal-header custom-modal-header\">\n  <h4 class=\"modal-title\">{{ title }}</h4>\n  <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n  <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n  <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n    {{ closeButtonLabel }}\n  </button>\n  <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n    {{ buttonLabel }}\n  </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:var(--primary-color);color:var(--text-color);border-bottom:none;font-family:var(--font-family);display:flex;justify-content:space-between;align-items:center;padding:1rem}.modal-title{color:var(--text-color);font-size:20px}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:var(--text-color)}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:var(--primary-color);color:var(--text-color);border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'argenta-modal', template: "<div class=\"modal-header custom-modal-header\">\n  <h4 class=\"modal-title\">{{ title }}</h4>\n  <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n  <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n  <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n    {{ closeButtonLabel }}\n  </button>\n  <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n    {{ buttonLabel }}\n  </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:var(--primary-color);color:var(--text-color);border-bottom:none;font-family:var(--font-family);display:flex;justify-content:space-between;align-items:center;padding:1rem}.modal-title{color:var(--text-color);font-size:20px}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:var(--text-color)}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:var(--primary-color);color:var(--text-color);border-bottom:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.NgbActiveModal }]; }, propDecorators: { title: [{
-                type: Input
-            }], component: [{
-                type: Input
-            }], componentInputs: [{
-                type: Input
-            }], closeButtonLabel: [{
-                type: Input
-            }], buttonLabel: [{
-                type: Input
-            }], onButtonClick: [{
-                type: Output
-            }], dynamicComponent: [{
-                type: ViewChild,
-                args: ['dynamicComponent', { read: ViewContainerRef, static: true }]
-            }] } });
-
-class DynamicModalComponent {
-    constructor() {
-        this.modalTitle = "Modal Title";
-        this.modalSizeClass = "";
-        this.modalId = "dynamicModal"; // ID único para cada modal
-    }
-    openModal() {
-        const modalElement = document.getElementById(this.modalId);
-        if (modalElement) {
-            modalElement.classList.add("show");
-            modalElement.setAttribute("aria-hidden", "false");
-            modalElement.style.display = "block";
-            document.body.classList.add("modal-open");
-            // Adiciona o backdrop manualmente se não existir
-            if (!document.querySelector(`.modal-backdrop[data-modal-id="${this.modalId}"]`)) {
-                const backdrop = document.createElement("div");
-                backdrop.className = "modal-backdrop fade show";
-                backdrop.setAttribute("data-modal-id", this.modalId);
-                document.body.appendChild(backdrop);
-            }
-        }
-    }
-    closeModal() {
-        const modalElement = document.getElementById(this.modalId);
-        if (modalElement) {
-            modalElement.classList.remove("show");
-            modalElement.setAttribute("aria-hidden", "true");
-            modalElement.style.display = "none";
-            document.body.classList.remove("modal-open");
-            document
-                .querySelector(`.modal-backdrop[data-modal-id="${this.modalId}"]`)
-                ?.remove();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicModalComponent, selector: "argenta-dynamic-modal", inputs: { modalTitle: "modalTitle", modalSizeClass: "modalSizeClass", modalId: "modalId" }, ngImport: i0, template: "<div\n  class=\"modal fade\"\n  [id]=\"modalId\"\n  tabindex=\"-1\"\n  [attr.aria-labelledby]=\"modalId + 'Label'\"\n  aria-hidden=\"true\"\n>\n  <div class=\"modal-dialog\" [ngClass]=\"modalSizeClass\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header custom-header\">\n        <h5 class=\"modal-title custom-modal-title\" [id]=\"modalId + 'Label'\">\n          {{ modalTitle }}\n        </h5>\n        <button\n          type=\"button\"\n          class=\"custom-close-button\"\n          (click)=\"closeModal()\"\n          aria-label=\"Close\"\n        >\n          &times;\n        </button>\n      </div>\n      <div class=\"modal-body custom-body\">\n        <ng-content select=\"[modal-body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer custom-footer\">\n        <ng-content select=\"[modal-footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".custom-header{background-color:var(--primary-color)!important;color:var(--text-color)!important;font-size:1.25rem!important;font-family:var(--font-family)!important;padding:1rem;position:relative}.custom-header .custom-close-button{position:absolute;right:1rem;background:none;border:none;font-size:2.5rem;color:var(--text-color);cursor:pointer}.custom-header .custom-close-button:hover{color:var(--danger-color)}.custom-modal-title{color:var(--text-color)!important;font-size:1.8rem!important;font-family:var(--font-family)!important}.custom-body{background-color:#fff;padding:1rem}.custom-footer{background-color:#fff;padding:.75rem;display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "argenta-dynamic-modal", template: "<div\n  class=\"modal fade\"\n  [id]=\"modalId\"\n  tabindex=\"-1\"\n  [attr.aria-labelledby]=\"modalId + 'Label'\"\n  aria-hidden=\"true\"\n>\n  <div class=\"modal-dialog\" [ngClass]=\"modalSizeClass\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header custom-header\">\n        <h5 class=\"modal-title custom-modal-title\" [id]=\"modalId + 'Label'\">\n          {{ modalTitle }}\n        </h5>\n        <button\n          type=\"button\"\n          class=\"custom-close-button\"\n          (click)=\"closeModal()\"\n          aria-label=\"Close\"\n        >\n          &times;\n        </button>\n      </div>\n      <div class=\"modal-body custom-body\">\n        <ng-content select=\"[modal-body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer custom-footer\">\n        <ng-content select=\"[modal-footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".custom-header{background-color:var(--primary-color)!important;color:var(--text-color)!important;font-size:1.25rem!important;font-family:var(--font-family)!important;padding:1rem;position:relative}.custom-header .custom-close-button{position:absolute;right:1rem;background:none;border:none;font-size:2.5rem;color:var(--text-color);cursor:pointer}.custom-header .custom-close-button:hover{color:var(--danger-color)}.custom-modal-title{color:var(--text-color)!important;font-size:1.8rem!important;font-family:var(--font-family)!important}.custom-body{background-color:#fff;padding:1rem}.custom-footer{background-color:#fff;padding:.75rem;display:flex;justify-content:flex-end;gap:.5rem}\n"] }]
-        }], propDecorators: { modalTitle: [{
-                type: Input
-            }], modalSizeClass: [{
-                type: Input
-            }], modalId: [{
-                type: Input
-            }] } });
-
 // Select some icons (use an object, not an array)
 class LucideIconsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -3494,7 +3640,9 @@ class ComponentsModule {
             AccordionArgentaComponent,
             JsonViewerComponent,
             ModalComponent,
-            DynamicModalComponent], imports: [CommonModule,
+            DragDropListComponent,
+            DynamicModalComponent,
+            DynamicTableComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgSelectModule,
@@ -3533,7 +3681,9 @@ class ComponentsModule {
             AccordionArgentaComponent,
             JsonViewerComponent,
             ModalComponent,
-            DynamicModalComponent] }); }
+            DragDropListComponent,
+            DynamicModalComponent,
+            DynamicTableComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -3578,7 +3728,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AccordionArgentaComponent,
                         JsonViewerComponent,
                         ModalComponent,
+                        DragDropListComponent,
                         DynamicModalComponent,
+                        DynamicTableComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -3623,7 +3775,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AccordionArgentaComponent,
                         JsonViewerComponent,
                         ModalComponent,
+                        DragDropListComponent,
                         DynamicModalComponent,
+                        DynamicTableComponent,
                     ],
                 }]
         }] });
@@ -3727,6 +3881,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i2$1.HttpClient }]; } });
 
+class ExcelService {
+    constructor() {
+        this.sheets = [];
+        this.fileName = 'export.xlsx';
+    }
+    async createExcel(conf, data) {
+        this.fileName = conf.fileName;
+        this.sheets = conf.sheets.map((sheet, index) => ({
+            ...sheet,
+            data: data[index]?.data ?? []
+        }));
+        const workbook = new ExcelJS.Workbook();
+        this.sheets.forEach((sheet) => {
+            const worksheet = workbook.addWorksheet(sheet.sheetName);
+            worksheet.columns = sheet.columns.map(col => ({
+                header: col.header,
+                key: col.key,
+                width: col.width
+            }));
+            sheet.data.forEach(item => {
+                const mappedItem = this.mapData(item, sheet.columns);
+                const row = worksheet.addRow(mappedItem);
+                if (sheet.styles) {
+                    row.eachCell({ includeEmpty: true }, (cell) => {
+                        if (sheet.styles?.font) {
+                            cell.font = sheet.styles.font;
+                        }
+                        if (sheet.styles?.alignment) {
+                            cell.alignment = sheet.styles.alignment;
+                        }
+                    });
+                }
+                if (sheet.conditionalStyles) {
+                    sheet.conditionalStyles.forEach(style => {
+                        const cell = row.getCell(style.columnKey);
+                        const value = cell.value;
+                        cell.style = value === style.condition ? style.trueStyle : style.falseStyle;
+                    });
+                }
+            });
+            if (sheet.styles) {
+                worksheet.getRow(1).eachCell((cell) => {
+                    if (sheet.styles?.font) {
+                        cell.font = { ...sheet.styles.font, bold: true };
+                    }
+                    if (sheet.styles?.alignment) {
+                        cell.alignment = sheet.styles.alignment;
+                    }
+                });
+            }
+        });
+        try {
+            const buffer = await workbook.xlsx.writeBuffer();
+            const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+            saveAs(blob, this.fileName);
+        }
+        catch (err) {
+            console.error('Error writing buffer:', err);
+        }
+    }
+    mapData(item, columns) {
+        const mappedItem = {};
+        columns.forEach(column => {
+            mappedItem[column.key] = item[column.key];
+        });
+        return mappedItem;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
 class RouterParameterService {
     constructor() {
         this.secretKey = '9db3589f$h86115&@b457bdff422c232e0e04c!ibe14374970aef0fe0ba054618f!=';
@@ -3757,6 +3988,7 @@ class LibPortalAngularModule {
             DataPaginateService,
             RefreshService,
             RouterParameterService,
+            ExcelService,
         ], imports: [ComponentsModule, ComponentsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LibPortalAngularModule, decorators: [{
@@ -3774,10 +4006,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         DataPaginateService,
                         RefreshService,
                         RouterParameterService,
+                        ExcelService,
                     ],
                 }]
         }] });
 
+function convertToSnakeCase(input) {
+    return input.replace(/([A-Z])/g, "_$1").toLowerCase();
+}
+
 function setThemeColors(config) {
     if (config.primary) {
         document.documentElement.style.setProperty("--primary-color", config.primary);
@@ -3817,10 +4054,6 @@ function setThemeColors(config) {
     }
 }
 
-function convertToSnakeCase(input) {
-    return input.replace(/([A-Z])/g, "_$1").toLowerCase();
-}
-
 /*
  * Public API Surface of sim-lib
  *
@@ -3833,5 +4066,5 @@ function convertToSnakeCase(input) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionArgentaComponent, AlertComponent, AppBackgroundComponent, AutofocusDirective, BadgeComponent, BasicRegistrationComponent, ButtonClasses, ButtonComponent, CalendarArgentaComponent, CardComponent, CepMaskDirective, CheckboxComponent, CnpjMaskDirective, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CpfMaskDirective, CustomPaginationComponent, CustomSwitchComponent, DataPaginateService, DataTableComponent, DynamicModalComponent, FileUploadComponent, InputComponent, JsonViewerComponent, LibPortalAngularModule, LucideIconsModule, ModalComponent, MultiSelectCategoryComponent, MultiSelectComponent, NotificationService, RadioComponent, RefreshService, RouterParameterService, SearchCustomerComponent, SearchInputComponent, SelectComponent, TabComponent, TextareaComponent, TreeNodeComponent, convertToSnakeCase, setThemeColors };
+export { AccordionArgentaComponent, AlertComponent, AppBackgroundComponent, AutofocusDirective, BadgeComponent, BasicRegistrationComponent, ButtonClasses, ButtonComponent, CalendarArgentaComponent, CardComponent, CepMaskDirective, CheckboxComponent, CnpjMaskDirective, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CpfMaskDirective, CustomPaginationComponent, CustomSwitchComponent, DataPaginateService, DataTableComponent, DragDropListComponent, DynamicModalComponent, DynamicTableComponent, ExcelService, FileUploadComponent, InputComponent, JsonViewerComponent, LibPortalAngularModule, LucideIconsModule, ModalComponent, MultiSelectCategoryComponent, MultiSelectComponent, NotificationService, RadioComponent, RefreshService, RouterParameterService, SearchCustomerComponent, SearchInputComponent, SelectComponent, TabComponent, TextareaComponent, TreeNodeComponent, convertToSnakeCase, setThemeColors };
 //# sourceMappingURL=lib-portal-angular.mjs.map