lib-portal-angular 0.0.103 → 0.0.105
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/image-upload/image-upload.component.mjs +6 -3
- package/esm2022/lib/components/tables/data-table.component.mjs +11 -7
- package/fesm2022/lib-portal-angular.mjs +14 -8
- package/fesm2022/lib-portal-angular.mjs.map +1 -1
- package/lib/components/image-upload/image-upload.component.d.ts +2 -1
- package/lib/components/tables/data-table.component.d.ts +3 -2
- package/package.json +1 -1
@@ -2313,13 +2313,15 @@ class ImageUploadComponent {
|
|
2313
2313
|
}
|
2314
2314
|
}
|
2315
2315
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageUploadComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
|
2316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageUploadComponent, selector: "argenta-image-upload", inputs: { imagePreview: "imagePreview", permissions: "permissions" }, outputs: { base64Output: "base64Output" }, ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"image-uploader\">\n <div *ngIf=\"imagePreview\">\n <img [src]=\"imagePreview\" />\n </div>\n <input
|
2316
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageUploadComponent, selector: "argenta-image-upload", inputs: { imagePreview: "imagePreview", label: "label", permissions: "permissions" }, outputs: { base64Output: "base64Output" }, ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"image-uploader\">\n <div *ngIf=\"imagePreview\">\n <img [src]=\"imagePreview\" />\n </div>\n <label for=\"fileInput\" class=\"custom-file-label\">\n {{ label }} <i-lucide name=\"import\" [size]=\"20\" color=\"black\"></i-lucide>\n </label>\n <input\n type=\"file\"\n id=\"fileInput\"\n (change)=\"onFileSelected($event)\"\n accept=\"image/*\"\n hidden\n />\n</div>\n", styles: [".image-uploader{display:flex;flex-direction:column;align-items:center;gap:10px}.image-uploader input{border:1px solid #ccc;padding:8px;cursor:pointer}.image-uploader img{max-width:300px;max-height:300px;border-radius:10px;box-shadow:0 0 10px #0000001a}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
|
2317
2317
|
}
|
2318
2318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageUploadComponent, decorators: [{
|
2319
2319
|
type: Component,
|
2320
|
-
args: [{ selector: 'argenta-image-upload', template: "<div *ngIf=\"hasPermission()\" class=\"image-uploader\">\n <div *ngIf=\"imagePreview\">\n <img [src]=\"imagePreview\" />\n </div>\n <input
|
2320
|
+
args: [{ selector: 'argenta-image-upload', template: "<div *ngIf=\"hasPermission()\" class=\"image-uploader\">\n <div *ngIf=\"imagePreview\">\n <img [src]=\"imagePreview\" />\n </div>\n <label for=\"fileInput\" class=\"custom-file-label\">\n {{ label }} <i-lucide name=\"import\" [size]=\"20\" color=\"black\"></i-lucide>\n </label>\n <input\n type=\"file\"\n id=\"fileInput\"\n (change)=\"onFileSelected($event)\"\n accept=\"image/*\"\n hidden\n />\n</div>\n", styles: [".image-uploader{display:flex;flex-direction:column;align-items:center;gap:10px}.image-uploader input{border:1px solid #ccc;padding:8px;cursor:pointer}.image-uploader img{max-width:300px;max-height:300px;border-radius:10px;box-shadow:0 0 10px #0000001a}\n"] }]
|
2321
2321
|
}], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { imagePreview: [{
|
2322
2322
|
type: Input
|
2323
|
+
}], label: [{
|
2324
|
+
type: Input
|
2323
2325
|
}], permissions: [{
|
2324
2326
|
type: Input
|
2325
2327
|
}], base64Output: [{
|
@@ -3940,7 +3942,7 @@ class DataTableComponent {
|
|
3940
3942
|
this.pagedData = [];
|
3941
3943
|
this.initialFilterField = null;
|
3942
3944
|
this.buttonList = [];
|
3943
|
-
this.
|
3945
|
+
this.statusField = 'indInativo';
|
3944
3946
|
this.statusChange = new EventEmitter();
|
3945
3947
|
this.sortChange = new EventEmitter();
|
3946
3948
|
this.pageChange = new EventEmitter();
|
@@ -4111,8 +4113,9 @@ class DataTableComponent {
|
|
4111
4113
|
.confirm(this.inativoTexts.modalTitle, this.inativoTexts.modalText)
|
4112
4114
|
.then((confirmed) => {
|
4113
4115
|
if (confirmed) {
|
4114
|
-
|
4115
|
-
this.
|
4116
|
+
let value = !item[this.statusField];
|
4117
|
+
item[this.statusField] = value;
|
4118
|
+
this.statusChange.emit({ status: value, item: item });
|
4116
4119
|
}
|
4117
4120
|
else {
|
4118
4121
|
return;
|
@@ -4142,6 +4145,9 @@ class DataTableComponent {
|
|
4142
4145
|
isColumnHidden(columnProp) {
|
4143
4146
|
return this.hiddenColumns.includes(columnProp);
|
4144
4147
|
}
|
4148
|
+
isBoolean(value) {
|
4149
|
+
return typeof value === 'boolean';
|
4150
|
+
}
|
4145
4151
|
onSearch(searchText) {
|
4146
4152
|
this.filterDescription = searchText;
|
4147
4153
|
this.currentPage = 1; // Resetar para a primeira página
|
@@ -4151,11 +4157,11 @@ class DataTableComponent {
|
|
4151
4157
|
this.onButtonClick.emit(); // Emitindo o evento
|
4152
4158
|
}
|
4153
4159
|
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 }, { token: ConfirmationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
4154
|
-
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", inativoPermissions: "inativoPermissions", viewPermissions: "viewPermissions", inativoTexts: "inativoTexts", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText", filterDescription: "filterDescription", buttonLabel: "buttonLabel", pagedData: "pagedData", initialFilterField: "initialFilterField", buttonList: "buttonList", status: "status" }, outputs: { statusChange: "statusChange", 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)\" [ngSwitch]=\"column.type\">\n <!-- Default case (when type is undefined or not matched) -->\n <span *ngSwitchDefault>\n {{ getNestedProperty(item, column.prop) }}\n </span>\n\n <!-- String case -->\n <span *ngSwitchCase=\"'string'\">\n {{ getNestedProperty(item, column.prop) }}\n </span>\n\n <!-- Image case -->\n <img\n *ngSwitchCase=\"'image'\"\n [src]=\"getNestedProperty(item, column.prop)\"\n alt=\"Image\"\n width=\"50\"\n height=\"50\"\n />\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(inativoPermissions) &&\n statusChange.observers.length > 0\n \"\n (click)=\"handleAction('inativar', item, i)\"\n class=\"clickable-icon\"\n style=\"margin-right: 1.5rem\"\n >\n <button\n [ngClass]=\"\n item.status\n ? 'btn btn-danger small-rounded-btn'\n : 'btn btn-success small-rounded-btn'\n \"\n >\n {{\n item.status ? inativoTexts.inactivate : inativoTexts.activate\n }}\n </button>\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}.small-rounded-btn{padding:6px 12px;font-size:14px;border-radius:20px;height:32px;min-width:80px;border:none;transition:all .3s ease-in-out}.small-rounded-btn:hover{opacity:.8;transform:scale(1.05)}\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: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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 }); }
|
4160
|
+
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", inativoPermissions: "inativoPermissions", viewPermissions: "viewPermissions", inativoTexts: "inativoTexts", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText", filterDescription: "filterDescription", buttonLabel: "buttonLabel", pagedData: "pagedData", initialFilterField: "initialFilterField", buttonList: "buttonList", statusField: "statusField" }, outputs: { statusChange: "statusChange", 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)\" [ngSwitch]=\"column.type\">\n <!-- Default case (when type is undefined or not matched) -->\n <span *ngSwitchDefault>\n {{ getNestedProperty(item, column.prop) }}\n </span>\n\n <!-- String case -->\n <span *ngSwitchCase=\"'string'\">\n {{ getNestedProperty(item, column.prop) }}\n </span>\n\n <!-- Image case -->\n <img\n *ngSwitchCase=\"'image'\"\n [src]=\"getNestedProperty(item, column.prop)\"\n alt=\"Image\"\n width=\"50\"\n height=\"50\"\n />\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(inativoPermissions) &&\n statusChange.observers.length > 0 &&\n statusField.length > 0 &&\n isBoolean(item[statusField])\n \"\n (click)=\"handleAction('inativar', item, i)\"\n class=\"clickable-icon\"\n style=\"margin-right: 1.5rem\"\n >\n <button\n [ngClass]=\"\n item[statusField]\n ? 'btn btn-danger small-rounded-btn'\n : 'btn btn-success small-rounded-btn'\n \"\n >\n {{\n item[statusField] ? inativoTexts.inactivate : inativoTexts.activate\n }}\n </button>\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}.small-rounded-btn{padding:6px 12px;font-size:14px;border-radius:20px;height:32px;min-width:80px;border:none;transition:all .3s ease-in-out}.small-rounded-btn:hover{opacity:.8;transform:scale(1.05)}\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: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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 }); }
|
4155
4161
|
}
|
4156
4162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, decorators: [{
|
4157
4163
|
type: Component,
|
4158
|
-
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)\" [ngSwitch]=\"column.type\">\n <!-- Default case (when type is undefined or not matched) -->\n <span *ngSwitchDefault>\n {{ getNestedProperty(item, column.prop) }}\n </span>\n\n <!-- String case -->\n <span *ngSwitchCase=\"'string'\">\n {{ getNestedProperty(item, column.prop) }}\n </span>\n\n <!-- Image case -->\n <img\n *ngSwitchCase=\"'image'\"\n [src]=\"getNestedProperty(item, column.prop)\"\n alt=\"Image\"\n width=\"50\"\n height=\"50\"\n />\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(inativoPermissions) &&\n statusChange.observers.length > 0\n \"\n (click)=\"handleAction('inativar', item, i)\"\n class=\"clickable-icon\"\n style=\"margin-right: 1.5rem\"\n >\n <button\n [ngClass]=\"\n item
|
4164
|
+
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)\" [ngSwitch]=\"column.type\">\n <!-- Default case (when type is undefined or not matched) -->\n <span *ngSwitchDefault>\n {{ getNestedProperty(item, column.prop) }}\n </span>\n\n <!-- String case -->\n <span *ngSwitchCase=\"'string'\">\n {{ getNestedProperty(item, column.prop) }}\n </span>\n\n <!-- Image case -->\n <img\n *ngSwitchCase=\"'image'\"\n [src]=\"getNestedProperty(item, column.prop)\"\n alt=\"Image\"\n width=\"50\"\n height=\"50\"\n />\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(inativoPermissions) &&\n statusChange.observers.length > 0 &&\n statusField.length > 0 &&\n isBoolean(item[statusField])\n \"\n (click)=\"handleAction('inativar', item, i)\"\n class=\"clickable-icon\"\n style=\"margin-right: 1.5rem\"\n >\n <button\n [ngClass]=\"\n item[statusField]\n ? 'btn btn-danger small-rounded-btn'\n : 'btn btn-success small-rounded-btn'\n \"\n >\n {{\n item[statusField] ? inativoTexts.inactivate : inativoTexts.activate\n }}\n </button>\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}.small-rounded-btn{padding:6px 12px;font-size:14px;border-radius:20px;height:32px;min-width:80px;border:none;transition:all .3s ease-in-out}.small-rounded-btn:hover{opacity:.8;transform:scale(1.05)}\n"] }]
|
4159
4165
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AuthService }, { type: RefreshService }, { type: ConfirmationService }]; }, propDecorators: { columns: [{
|
4160
4166
|
type: Input
|
4161
4167
|
}], hiddenColumns: [{
|
@@ -4198,7 +4204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
4198
4204
|
type: Input
|
4199
4205
|
}], buttonList: [{
|
4200
4206
|
type: Input
|
4201
|
-
}],
|
4207
|
+
}], statusField: [{
|
4202
4208
|
type: Input
|
4203
4209
|
}], statusChange: [{
|
4204
4210
|
type: Output
|