lib-portal-angular 0.0.45 → 0.0.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/custom-pagination/custom-pagination.component.mjs +3 -9
- package/esm2022/lib/components/imput/input.component.mjs +3 -3
- package/esm2022/lib/components/tables/data-table.component.mjs +12 -10
- package/esm2022/lib/components/tree-node/tree-node.component.mjs +8 -5
- package/fesm2022/lib-portal-angular.mjs +20 -20
- package/fesm2022/lib-portal-angular.mjs.map +1 -1
- package/lib/components/custom-pagination/custom-pagination.component.d.ts +1 -3
- package/lib/components/imput/input.component.d.ts +1 -1
- package/lib/components/tables/data-table.component.d.ts +4 -3
- package/lib/components/tree-node/tree-node.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -753,8 +753,6 @@ class CustomPaginationComponent {
|
|
|
753
753
|
this.totalItems = 0;
|
|
754
754
|
this.itemsPerPage = 10;
|
|
755
755
|
this.currentPage = 1;
|
|
756
|
-
this.pageText = 'Page'; // Texto para "Page"
|
|
757
|
-
this.ofText = 'of'; // Texto para "of"
|
|
758
756
|
this.showPageInfo = true; // Mostrar ou esconder a informação da página
|
|
759
757
|
this.pageChange = new EventEmitter();
|
|
760
758
|
this.maxSize = 5; // Número máximo de botões de página visíveis
|
|
@@ -788,21 +786,17 @@ class CustomPaginationComponent {
|
|
|
788
786
|
this.destroy$.complete();
|
|
789
787
|
}
|
|
790
788
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
791
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomPaginationComponent, selector: "custom-pagination", inputs: { totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage",
|
|
789
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomPaginationComponent, selector: "custom-pagination", inputs: { totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", showPageInfo: "showPageInfo" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav *ngIf=\"totalPages > 0\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"changePage(1)\">««</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"changePage(currentPage - 1)\">«</a>\n </li>\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\n <a class=\"page-link\" (click)=\"changePage(page)\">{{ page }}</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n <a class=\"page-link\" (click)=\"changePage(currentPage + 1)\">»</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n <a class=\"page-link\" (click)=\"changePage(totalPages)\">»»</a>\n </li>\n </ul>\n</nav>\n", styles: [".pagination{display:flex;list-style:none;padding:0;margin:1rem 0;justify-content:center;align-items:center}.page-item{margin:0 .25rem}.page-item.disabled .page-link{cursor:not-allowed;opacity:.5}.page-item.active .page-link{background-color:#00444c;color:#fff}.page-item .page-link{padding:.5rem .75rem;border:1px solid #dee2e6;border-radius:.25rem;text-decoration:none;color:#00444c;cursor:pointer;transition:background-color .2s}.page-item .page-link:hover{background-color:#2ca58d}.page-info{margin-left:1rem;font-size:1rem;color:#00444c;font-weight:700}\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"] }] }); }
|
|
792
790
|
}
|
|
793
791
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomPaginationComponent, decorators: [{
|
|
794
792
|
type: Component,
|
|
795
|
-
args: [{ selector: 'custom-pagination', template: "<nav *ngIf=\"totalPages > 0\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"changePage(1)\">««</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"changePage(currentPage - 1)\">«</a>\n </li>\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\n <a class=\"page-link\" (click)=\"changePage(page)\">{{ page }}</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n <a class=\"page-link\" (click)=\"changePage(currentPage + 1)\">»</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n <a class=\"page-link\" (click)=\"changePage(totalPages)\">»»</a>\n </li>\n </ul>\n
|
|
793
|
+
args: [{ selector: 'custom-pagination', template: "<nav *ngIf=\"totalPages > 0\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"changePage(1)\">««</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"changePage(currentPage - 1)\">«</a>\n </li>\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\n <a class=\"page-link\" (click)=\"changePage(page)\">{{ page }}</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n <a class=\"page-link\" (click)=\"changePage(currentPage + 1)\">»</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n <a class=\"page-link\" (click)=\"changePage(totalPages)\">»»</a>\n </li>\n </ul>\n</nav>\n", styles: [".pagination{display:flex;list-style:none;padding:0;margin:1rem 0;justify-content:center;align-items:center}.page-item{margin:0 .25rem}.page-item.disabled .page-link{cursor:not-allowed;opacity:.5}.page-item.active .page-link{background-color:#00444c;color:#fff}.page-item .page-link{padding:.5rem .75rem;border:1px solid #dee2e6;border-radius:.25rem;text-decoration:none;color:#00444c;cursor:pointer;transition:background-color .2s}.page-item .page-link:hover{background-color:#2ca58d}.page-info{margin-left:1rem;font-size:1rem;color:#00444c;font-weight:700}\n"] }]
|
|
796
794
|
}], propDecorators: { totalItems: [{
|
|
797
795
|
type: Input
|
|
798
796
|
}], itemsPerPage: [{
|
|
799
797
|
type: Input
|
|
800
798
|
}], currentPage: [{
|
|
801
799
|
type: Input
|
|
802
|
-
}], pageText: [{
|
|
803
|
-
type: Input
|
|
804
|
-
}], ofText: [{
|
|
805
|
-
type: Input
|
|
806
800
|
}], showPageInfo: [{
|
|
807
801
|
type: Input
|
|
808
802
|
}], pageChange: [{
|
|
@@ -974,7 +968,7 @@ class InputComponent {
|
|
|
974
968
|
this.subscriptions.forEach(sub => sub.unsubscribe());
|
|
975
969
|
}
|
|
976
970
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
977
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputComponent, selector: "
|
|
971
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputComponent, selector: "argenta-custom-input", inputs: { label: "label", placeholder: "placeholder", id: "id", type: "type", disabled: "disabled", readonly: "readonly", maxlength: "maxlength", minlength: "minlength", required: "required", pattern: "pattern", autofocus: "autofocus", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight", labelFontWeight: "labelFontWeight", permissions: "permissions" }, outputs: { inputEvent: "inputEvent", changeEvent: "changeEvent", focusEvent: "focusEvent", blurEvent: "blurEvent", keyupEvent: "keyupEvent", keydownEvent: "keydownEvent", keypressEvent: "keypressEvent" }, providers: [
|
|
978
972
|
{
|
|
979
973
|
provide: NG_VALUE_ACCESSOR,
|
|
980
974
|
useExisting: forwardRef(() => InputComponent),
|
|
@@ -1012,7 +1006,7 @@ class InputComponent {
|
|
|
1012
1006
|
}
|
|
1013
1007
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
|
|
1014
1008
|
type: Component,
|
|
1015
|
-
args: [{ selector: '
|
|
1009
|
+
args: [{ selector: 'argenta-custom-input', template: `
|
|
1016
1010
|
<div *ngIf="hasPermission()" class="form-group" [ngStyle]="{
|
|
1017
1011
|
'margin-top': marginTop + 'rem',
|
|
1018
1012
|
'margin-bottom': marginBottom + 'rem',
|
|
@@ -1636,13 +1630,14 @@ class DataTableComponent {
|
|
|
1636
1630
|
this.pageText = 'Page';
|
|
1637
1631
|
this.ofText = 'of';
|
|
1638
1632
|
this.filterDescription = '';
|
|
1633
|
+
this.buttonLabel = 'Novo perfil'; // Adicionando o Input para o label do botão
|
|
1639
1634
|
this.sortChange = new EventEmitter();
|
|
1640
1635
|
this.pageChange = new EventEmitter();
|
|
1641
1636
|
this.itemsPerPageChange = new EventEmitter();
|
|
1642
1637
|
this.onEditTable = new EventEmitter();
|
|
1643
1638
|
this.onDeleteTable = new EventEmitter();
|
|
1644
1639
|
this.onViewTable = new EventEmitter();
|
|
1645
|
-
this.
|
|
1640
|
+
this.onButtonClick = new EventEmitter(); // Novo evento
|
|
1646
1641
|
this.itemsPerPageOptions = [5, 10, 15, 25];
|
|
1647
1642
|
this.currentPage = 1;
|
|
1648
1643
|
this.sortColumn = '';
|
|
@@ -1765,15 +1760,15 @@ class DataTableComponent {
|
|
|
1765
1760
|
this.currentPage = 1; // Resetar para a primeira página
|
|
1766
1761
|
this.fetchData();
|
|
1767
1762
|
}
|
|
1768
|
-
|
|
1769
|
-
this.
|
|
1763
|
+
onNewButtonClick() {
|
|
1764
|
+
this.onButtonClick.emit(); // Emitindo o evento
|
|
1770
1765
|
}
|
|
1771
1766
|
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 }); }
|
|
1772
|
-
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" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable",
|
|
1767
|
+
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" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"data-table-header\">\n <div class=\"left-section\">\n <div class=\"form-group\">\n <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{ itemsPerPageLabel }}</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 <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n </div>\n <div 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 id=\"search\" label=\"\" placeholder=\"Descri\u00E7\u00E3o\" [(ngModel)]=\"filterDescription\" (search)=\"onSearch($event)\"></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 *ngIf=\"!isColumnHidden(column.prop)\" (click)=\"onSort(column.prop)\">\n {{ column.label }}\n </th>\n </ng-container>\n <th *ngIf=\"showActionColumn\" class=\"text-end\" style=\"padding-right: 6.3rem;\">{{ actionColumnLabel }}</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 {{ 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 *ngIf=\"hasPermission(editPermissions) && onEditTable.observers.length > 0\" (click)=\"handleAction('edit', item, i)\" style=\"margin-right: 1.5rem;\">\n <lucide-icon name=\"square-pen\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n </div>\n <div *ngIf=\"hasPermission(viewPermissions) && onViewTable.observers.length > 0\" (click)=\"handleAction('view', item, i)\" style=\"margin-right: 1.5rem;\">\n <lucide-icon name=\"user-round\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n </div>\n <div *ngIf=\"hasPermission(deletePermissions) && onDeleteTable.observers.length > 0\" (click)=\"handleAction('delete', item, i)\" style=\"margin-right: 1.5rem;\">\n <i-lucide name=\"trash-2\" [size]=\"20\" color=\"#F26E6E\" [strokeWidth]=\"1.75\"></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 </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";:host{font-family:Inter,Arial,sans-serif}.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:Inter,Arial,sans-serif;font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;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 th{background-color:#00444c;color:#fff;font-family:Inter,Arial,sans-serif;font-size:13px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc}.table tbody td{font-family:Inter,Arial,sans-serif;font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc}.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:Inter,sans-serif;font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:#2ca58d;border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{background-color:#217d6b}.custom-button:active{background-color:#3acaae}.custom-button:focus{outline:none;box-shadow:0 0 0 .2rem #2ca58d40}\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: i5.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 }); }
|
|
1773
1768
|
}
|
|
1774
1769
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
1775
1770
|
type: Component,
|
|
1776
|
-
args: [{ selector: 'argenta-list-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"data-table-header\">\n <div class=\"left-section\">\n <div class=\"form-group\">\n <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{ itemsPerPageLabel }}</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 <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n </div>\n
|
|
1771
|
+
args: [{ selector: 'argenta-list-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"data-table-header\">\n <div class=\"left-section\">\n <div class=\"form-group\">\n <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{ itemsPerPageLabel }}</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 <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n </div>\n <div 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 id=\"search\" label=\"\" placeholder=\"Descri\u00E7\u00E3o\" [(ngModel)]=\"filterDescription\" (search)=\"onSearch($event)\"></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 *ngIf=\"!isColumnHidden(column.prop)\" (click)=\"onSort(column.prop)\">\n {{ column.label }}\n </th>\n </ng-container>\n <th *ngIf=\"showActionColumn\" class=\"text-end\" style=\"padding-right: 6.3rem;\">{{ actionColumnLabel }}</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 {{ 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 *ngIf=\"hasPermission(editPermissions) && onEditTable.observers.length > 0\" (click)=\"handleAction('edit', item, i)\" style=\"margin-right: 1.5rem;\">\n <lucide-icon name=\"square-pen\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n </div>\n <div *ngIf=\"hasPermission(viewPermissions) && onViewTable.observers.length > 0\" (click)=\"handleAction('view', item, i)\" style=\"margin-right: 1.5rem;\">\n <lucide-icon name=\"user-round\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n </div>\n <div *ngIf=\"hasPermission(deletePermissions) && onDeleteTable.observers.length > 0\" (click)=\"handleAction('delete', item, i)\" style=\"margin-right: 1.5rem;\">\n <i-lucide name=\"trash-2\" [size]=\"20\" color=\"#F26E6E\" [strokeWidth]=\"1.75\"></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 </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";:host{font-family:Inter,Arial,sans-serif}.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:Inter,Arial,sans-serif;font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;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 th{background-color:#00444c;color:#fff;font-family:Inter,Arial,sans-serif;font-size:13px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc}.table tbody td{font-family:Inter,Arial,sans-serif;font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc}.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:Inter,sans-serif;font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:#2ca58d;border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{background-color:#217d6b}.custom-button:active{background-color:#3acaae}.custom-button:focus{outline:none;box-shadow:0 0 0 .2rem #2ca58d40}\n"] }]
|
|
1777
1772
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AuthService }, { type: RefreshService }]; }, propDecorators: { columns: [{
|
|
1778
1773
|
type: Input
|
|
1779
1774
|
}], hiddenColumns: [{
|
|
@@ -1804,6 +1799,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1804
1799
|
type: Input
|
|
1805
1800
|
}], filterDescription: [{
|
|
1806
1801
|
type: Input
|
|
1802
|
+
}], buttonLabel: [{
|
|
1803
|
+
type: Input
|
|
1807
1804
|
}], sortChange: [{
|
|
1808
1805
|
type: Output
|
|
1809
1806
|
}], pageChange: [{
|
|
@@ -1816,7 +1813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1816
1813
|
type: Output
|
|
1817
1814
|
}], onViewTable: [{
|
|
1818
1815
|
type: Output
|
|
1819
|
-
}],
|
|
1816
|
+
}], onButtonClick: [{
|
|
1820
1817
|
type: Output
|
|
1821
1818
|
}] } });
|
|
1822
1819
|
|
|
@@ -2017,6 +2014,7 @@ class TreeNodeComponent {
|
|
|
2017
2014
|
if (node.children) {
|
|
2018
2015
|
this.toggleChildren(node.children, node.selected);
|
|
2019
2016
|
}
|
|
2017
|
+
this.updateParentSelection(this.nodes);
|
|
2020
2018
|
this.nodeSelected.emit(node);
|
|
2021
2019
|
}
|
|
2022
2020
|
toggleChildren(children, selected) {
|
|
@@ -2034,8 +2032,10 @@ class TreeNodeComponent {
|
|
|
2034
2032
|
updateParentSelection(nodes) {
|
|
2035
2033
|
nodes.forEach(node => {
|
|
2036
2034
|
if (node.children) {
|
|
2037
|
-
const
|
|
2038
|
-
|
|
2035
|
+
const anyChildSelected = node.children.some(child => child.selected);
|
|
2036
|
+
if (anyChildSelected) {
|
|
2037
|
+
node.selected = true;
|
|
2038
|
+
}
|
|
2039
2039
|
// Recursive call for nested parents
|
|
2040
2040
|
this.updateParentSelection(node.children);
|
|
2041
2041
|
}
|
|
@@ -2045,11 +2045,11 @@ class TreeNodeComponent {
|
|
|
2045
2045
|
node.collapsed = !node.collapsed;
|
|
2046
2046
|
}
|
|
2047
2047
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2048
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeNodeComponent, selector: "
|
|
2048
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeNodeComponent, selector: "argenta-custom-tree-node", inputs: { title: "title", nodes: "nodes", isRoot: "isRoot" }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div *ngIf=\"isRoot\" class=\"tree-title\">{{ title || 'Tree Node' }}</div>\n<ul class=\"tree\">\n <li *ngFor=\"let node of nodes\">\n <div class=\"node-content\">\n <span *ngIf=\"node.children\" class=\"toggle-icon\" (click)=\"toggleCollapse(node)\"\n [ngClass]=\"{'collapsed-icon': node.collapsed, 'expanded-icon': !node.collapsed}\">\n {{ node.collapsed ? '\u25B6' : '\u25BC' }}\n </span>\n <label class=\"custom-checkbox\">\n <input type=\"checkbox\" [checked]=\"node.selected\" (change)=\"onNodeSelected(node, $event)\" />\n <span class=\"checkmark\"></span>\n </label>\n <label class=\"node-label\">{{ node.name }}</label>\n </div>\n <argenta-custom-tree-node *ngIf=\"node.children && !node.collapsed\" [nodes]=\"node.children\" [isRoot]=\"false\" (nodeSelected)=\"onChildNodeSelected(node)\"></argenta-custom-tree-node>\n </li>\n</ul>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.tree{list-style-type:none;margin:0;padding:0;position:relative;font-family:Inter,sans-serif}.tree li{margin:0;padding:0 0 0 2em;line-height:2em;position:relative;font-size:14px;transition:all .3s ease}.tree li:before{content:\"\";position:absolute;top:0;left:0;border-left:1px solid #ccc;bottom:.75em;transition:border-color .3s ease}.tree li:after{content:\"\";position:absolute;top:1em;left:0;border-top:1px solid #ccc;width:1em;transition:border-color .3s ease}.tree li:last-child:before{height:1em}.node-content{display:flex;align-items:center;color:#333;transition:color .3s ease}.node-content:hover .node-label{color:#00444c;box-shadow:0 4px 8px #0000001a}.toggle-icon{cursor:pointer;margin-right:.5em;font-size:1em;transition:transform .3s ease,color .3s ease}.collapsed-icon{color:orange}.expanded-icon{color:green}.node-content input[type=checkbox]{display:none}.custom-checkbox{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.checkmark{position:relative;height:14px;width:14px;background-color:#fff;border:2px solid #00444C;border-radius:3px;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox input:checked+.checkmark{background-color:#00444c;border-color:#00444c;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:4px;top:1px;width:3px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .3s ease}.custom-checkbox input:checked+.checkmark:after{display:block}.node-label{margin-left:.5em;transition:color .3s ease,box-shadow .3s ease}.node-content input{margin-right:.5em;transition:transform .3s ease}.tree-title{font-weight:600;margin-bottom:10px;font-size:18px;color:#00444c;transition:color .3s ease}\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: "component", type: TreeNodeComponent, selector: "argenta-custom-tree-node", inputs: ["title", "nodes", "isRoot"], outputs: ["nodeSelected"] }] }); }
|
|
2049
2049
|
}
|
|
2050
2050
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeNodeComponent, decorators: [{
|
|
2051
2051
|
type: Component,
|
|
2052
|
-
args: [{ selector: '
|
|
2052
|
+
args: [{ selector: 'argenta-custom-tree-node', template: "<div *ngIf=\"isRoot\" class=\"tree-title\">{{ title || 'Tree Node' }}</div>\n<ul class=\"tree\">\n <li *ngFor=\"let node of nodes\">\n <div class=\"node-content\">\n <span *ngIf=\"node.children\" class=\"toggle-icon\" (click)=\"toggleCollapse(node)\"\n [ngClass]=\"{'collapsed-icon': node.collapsed, 'expanded-icon': !node.collapsed}\">\n {{ node.collapsed ? '\u25B6' : '\u25BC' }}\n </span>\n <label class=\"custom-checkbox\">\n <input type=\"checkbox\" [checked]=\"node.selected\" (change)=\"onNodeSelected(node, $event)\" />\n <span class=\"checkmark\"></span>\n </label>\n <label class=\"node-label\">{{ node.name }}</label>\n </div>\n <argenta-custom-tree-node *ngIf=\"node.children && !node.collapsed\" [nodes]=\"node.children\" [isRoot]=\"false\" (nodeSelected)=\"onChildNodeSelected(node)\"></argenta-custom-tree-node>\n </li>\n</ul>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.tree{list-style-type:none;margin:0;padding:0;position:relative;font-family:Inter,sans-serif}.tree li{margin:0;padding:0 0 0 2em;line-height:2em;position:relative;font-size:14px;transition:all .3s ease}.tree li:before{content:\"\";position:absolute;top:0;left:0;border-left:1px solid #ccc;bottom:.75em;transition:border-color .3s ease}.tree li:after{content:\"\";position:absolute;top:1em;left:0;border-top:1px solid #ccc;width:1em;transition:border-color .3s ease}.tree li:last-child:before{height:1em}.node-content{display:flex;align-items:center;color:#333;transition:color .3s ease}.node-content:hover .node-label{color:#00444c;box-shadow:0 4px 8px #0000001a}.toggle-icon{cursor:pointer;margin-right:.5em;font-size:1em;transition:transform .3s ease,color .3s ease}.collapsed-icon{color:orange}.expanded-icon{color:green}.node-content input[type=checkbox]{display:none}.custom-checkbox{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.checkmark{position:relative;height:14px;width:14px;background-color:#fff;border:2px solid #00444C;border-radius:3px;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox input:checked+.checkmark{background-color:#00444c;border-color:#00444c;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:4px;top:1px;width:3px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .3s ease}.custom-checkbox input:checked+.checkmark:after{display:block}.node-label{margin-left:.5em;transition:color .3s ease,box-shadow .3s ease}.node-content input{margin-right:.5em;transition:transform .3s ease}.tree-title{font-weight:600;margin-bottom:10px;font-size:18px;color:#00444c;transition:color .3s ease}\n"] }]
|
|
2053
2053
|
}], propDecorators: { title: [{
|
|
2054
2054
|
type: Input
|
|
2055
2055
|
}], nodes: [{
|