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.
@@ -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 type=\"file\" (change)=\"onFileSelected($event)\" accept=\"image/*\" />\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"] }] }); }
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 type=\"file\" (change)=\"onFileSelected($event)\" accept=\"image/*\" />\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"] }]
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.status = false;
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
- item.status = !item.status;
4115
- this.statusChange.emit({ status: item.status, item: item });
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.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"] }]
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
- }], status: [{
4207
+ }], statusField: [{
4202
4208
  type: Input
4203
4209
  }], statusChange: [{
4204
4210
  type: Output