sf-crud 13.1.21 → 13.1.22

package/fesm2022/sf-crud.mjs

@@ -72,129 +72,6 @@ import { SfPdfsignModule } from 'sf-pdfsign';
 import * as i2$1 from '@angular/platform-browser';
 import * as i4 from 'sf-ado';
 
-class CrudConfig {
-    idEntidad = '';
-    uiEsquemas = [];
-    esquemas = [];
-    registros = [];
-    tablero;
-}
-class ConfigTablero {
-    columns = [];
-    endpoint = '';
-    method = '';
-    server = '';
-    filters = [];
-    keys = [];
-    createButton;
-    dialog;
-    dataKey;
-    selectionMode;
-    redirect;
-    customPaginator;
-}
-class ConfigRegistro {
-    operations = [];
-    btnBack = '';
-    label;
-    canBack = false;
-    constructionId;
-    keys;
-    conditions = [];
-    backWhenSubmit = false;
-}
-class Operation {
-    type;
-    server;
-    endpoint;
-    method = '';
-    validations;
-    url;
-    changeTrx = [];
-    errorChecking;
-    answerChecking;
-    keysEsquema;
-    keys;
-}
-class ConstructionId {
-    indexStep;
-    path;
-    keys;
-}
-class Validations {
-    type = '';
-    required = [];
-    equals = [];
-    different = [];
-    server = '';
-    endpoint = '';
-    operations;
-}
-class ValidationRequired {
-    field;
-    message;
-    conditions;
-    validation;
-}
-class ValidationEqual extends ValidationRequired {
-    value;
-    constructor(value) {
-        super();
-        this.value = value;
-    }
-}
-class ValidationDifferent extends ValidationRequired {
-    value;
-    constructor(value) {
-        super();
-        this.value = value;
-    }
-}
-class RequestChecking {
-    dynamics;
-    statics;
-    useSwal;
-    redirect;
-    cancelRedirect;
-    allowContinue;
-    parse;
-    constructor(dynamics, statics, useSwal, redirect, cancelRedirect, allowContinue, parse) {
-        this.dynamics = dynamics;
-        this.statics = statics;
-        this.useSwal = useSwal;
-        this.redirect = redirect;
-        this.cancelRedirect = cancelRedirect;
-        this.allowContinue = allowContinue;
-        this.parse = parse;
-    }
-}
-class Key {
-    key;
-    scope;
-    indexAnswer;
-    indexData;
-    indexId;
-    data;
-    overrideControl;
-}
-class OverrideConfig {
-    property;
-    value;
-    elseValue;
-    conditions;
-    newPropertyValue;
-    elseNewPropertyValue;
-}
-class keyEsquema {
-    key;
-    scope;
-    indexData;
-    indexId;
-    isArray;
-    indexKey;
-    canBeValueUndefined;
-}
-
 const GENERAL_CRUD_SERVICE = new InjectionToken('GENERAL_CRUD_SERVICE');
 
 class GeneralService {
@@ -1070,11 +947,12 @@ class TableroComponent {
     user;
     dataExt;
     showCreateButton = false;
+    customConfig = false;
+    table;
     onSelectAction = new EventEmitter();
     color2;
     colorButtons;
     items = [];
-    crudConfig = new CrudConfig();
     data = [];
     initialData = [];
     btn = { create: undefined, read: undefined, update: undefined, delete: undefined };
@@ -1113,7 +991,7 @@ class TableroComponent {
             this.environment = JSON.parse(sessionStorage.getItem('ConfigJSON') || '{}');
         }
         this.generalService.environment = this.environment;
-        this.loadConfigCrud();
+        this.VerifyConfigExist();
     }
     ngOnChanges(changes) {
         if (changes['dataExt'] && !changes['dataExt'].firstChange) {
@@ -1126,6 +1004,21 @@ class TableroComponent {
             if (!this.customFilters)
                 this.initFilterOptions();
         }
+        if (changes['table'] && !changes['table'].firstChange) {
+            this.VerifyConfigExist();
+        }
+    }
+    VerifyConfigExist() {
+        if (this.customConfig && this.table) {
+            console.log(this.table);
+            this.getInfoTablero();
+            this.loadOptions();
+            if (!this.customFilters)
+                this.initFilterOptions();
+        }
+        else {
+            this.loadConfigCrud();
+        }
     }
     loadConfigCrud() {
         this.loading.inProgress = true;
@@ -1135,7 +1028,7 @@ class TableroComponent {
                 if (res) {
                     if (res.data)
                         res = res.data;
-                    this.crudConfig = res;
+                    this.table = res.tablero || undefined;
                     this.getInfoTablero();
                     this.loadOptions();
                     if (!this.customFilters)
@@ -1196,8 +1089,8 @@ class TableroComponent {
             this.initialData = [];
             this.totalRecords = 0;
         }
-        let url = this.aplyKeys(this.crudConfig.tablero.keys, `${this.generalService.jsonConfig[this.crudConfig.tablero.server]}${this.crudConfig.tablero.endpoint}`, this.dataExt);
-        this.generalService.genericRequest(this.crudConfig.tablero.method, url, this.dataExt)
+        let url = this.aplyKeys(this.table.keys, `${this.generalService.jsonConfig[this.table.server]}${this.table.endpoint}`, this.dataExt);
+        this.generalService.genericRequest(this.table.method, url, this.dataExt)
             .then((res) => {
             let aux;
             if (!Array.isArray(res))
@@ -1220,13 +1113,13 @@ class TableroComponent {
         this.totalRecords = 0;
         data.forEach((item) => {
             let newItem = {};
-            this.crudConfig.tablero.columns.forEach(col => {
+            this.table.columns.forEach(col => {
                 newItem[col.col] = this.getValue(col.col, item);
             });
-            if (this.crudConfig.tablero?.dataKey && !newItem[this.crudConfig.tablero.dataKey]) {
-                newItem[this.crudConfig.tablero.dataKey] = item[this.crudConfig.tablero.dataKey];
+            if (this.table?.dataKey && !newItem[this.table.dataKey]) {
+                newItem[this.table.dataKey] = item[this.table.dataKey];
             }
-            if (this.crudConfig.tablero?.customPaginator && this.totalRecords === 0 && item['TotalRecords'] !== undefined) {
+            if (this.table?.customPaginator && this.totalRecords === 0 && item['TotalRecords'] !== undefined) {
                 this.totalRecords = item['TotalRecords'] || data.length;
             }
             const missingKeys = Object.keys(item).filter(key => !(key in newItem));
@@ -1243,15 +1136,15 @@ class TableroComponent {
         this.sfCrudService.formLoading = this.loading;
     }
     initFilterOptions() {
-        this.crudConfig.tablero?.columns.filter(col => col.filter?.config).forEach(col => this.generateFilterOptions(col));
+        this.table?.columns.filter(col => col.filter?.config).forEach(col => this.generateFilterOptions(col));
     }
     verifyCreateButton() {
-        if (this.crudConfig.tablero?.createButton && this.crudConfig.tablero?.createButton?.verify === 'filterList') {
-            this.showCreateButton = this.optionsMap.get(this.crudConfig.tablero.createButton.column)?.length > 0;
+        if (this.table?.createButton && this.table?.createButton?.verify === 'filterList') {
+            this.showCreateButton = this.optionsMap.get(this.table.createButton.column)?.length > 0;
         }
     }
     generateFilterOptions(col) {
-        const url = this.aplyKeys(this.crudConfig.tablero.keys, `${this.generalService.jsonConfig[col.filter.config.server]}${col.filter.config.endpoint}`, this.dataExt);
+        const url = this.aplyKeys(this.table.keys, `${this.generalService.jsonConfig[col.filter.config.server]}${col.filter.config.endpoint}`, this.dataExt);
         this.generalService.genericRequest(col.filter.config.method, url, this.dataExt)
             .then((res) => {
             if (!Array.isArray(res) && res.data)
@@ -1286,13 +1179,13 @@ class TableroComponent {
                 this.router.navigateByUrl(this.btn.create?.valor?.redirect || '');
                 break;
             case 'read':
-                this.router.navigateByUrl(this.aplyKeys(this.crudConfig.tablero.keys, this.btn.read.valor.redirect, data));
+                this.router.navigateByUrl(this.aplyKeys(this.table.keys, this.btn.read.valor.redirect, data));
                 break;
             case 'update':
-                this.router.navigateByUrl(this.aplyKeys(this.crudConfig.tablero.keys, this.btn.update.valor.redirect, data));
+                this.router.navigateByUrl(this.aplyKeys(this.table.keys, this.btn.update.valor.redirect, data));
                 break;
             case 'delete':
-                this.router.navigateByUrl(this.aplyKeys(this.crudConfig.tablero.keys, this.btn.delete.valor.redirect, data));
+                this.router.navigateByUrl(this.aplyKeys(this.table.keys, this.btn.delete.valor.redirect, data));
                 break;
             default:
                 break;
@@ -1330,7 +1223,7 @@ class TableroComponent {
     execAction(params) {
         switch (params.action) {
             case 'redirect':
-                this.router.navigateByUrl(this.aplyKeys(this.crudConfig.tablero.keys, params.link, this.itemSelected)).then(() => {
+                this.router.navigateByUrl(this.aplyKeys(this.table.keys, params.link, this.itemSelected)).then(() => {
                     if (params.reload)
                         window.location.reload();
                 });
@@ -1346,20 +1239,20 @@ class TableroComponent {
     }
     showAddDialog() {
         this.verifyCreateButton();
-        if (!this.showCreateButton && this.crudConfig.tablero?.dialog) {
-            this.dialogService.showDialog('create', this.crudConfig.tablero.dialog);
+        if (!this.showCreateButton && this.table?.dialog) {
+            this.dialogService.showDialog('create', this.table.dialog);
         }
         else {
             this.redirect('create');
         }
     }
     goToDetail(row) {
-        if (this.crudConfig.tablero?.redirect) {
-            this.router.navigateByUrl(this.aplyKeys(this.crudConfig.tablero.keys, this.crudConfig.tablero.redirect, row.data));
+        if (this.table?.redirect) {
+            this.router.navigateByUrl(this.aplyKeys(this.table.keys, this.table.redirect, row.data));
         }
     }
     pageChange(event) {
-        if (this.crudConfig.tablero?.customPaginator) {
+        if (this.table?.customPaginator) {
             if (!this.initialLoadDone) {
                 return;
             }
@@ -1387,12 +1280,12 @@ class TableroComponent {
         }, 400);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableroComponent, deps: [{ token: GeneralService }, { token: i2.Router }, { token: SfCrudService }, { token: StepService }, { token: CrudDialogService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TableroComponent, isStandalone: true, selector: "sf-crudtablero", inputs: { opciones: "opciones", idEntidad: "idEntidad", idKatios: "idKatios", environment: "environment", user: "user", dataExt: "dataExt", showCreateButton: "showCreateButton", optionsMap: "optionsMap", customFilters: "customFilters" }, outputs: { onSelectAction: "onSelectAction" }, host: { properties: { "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButtons" } }, usesOnChanges: true, ngImport: i0, template: "<p-toolbar styleClass=\"mb-4 gap-2\" *ngIf=\"btn.create\">\r\n    <ng-template #start>\r\n        <button pButton pRipple [label]=\"btn.create.label\" [icon]=\"btn.create.icon\" class=\"p-button-success mr-2\"\r\n            (click)=\"showAddDialog()\"></button>\r\n    </ng-template>\r\n</p-toolbar>\r\n<p-table *ngIf=\"crudConfig?.tablero?.columns && initialLoadDone\" #dt [columns]=\"crudConfig.tablero.columns\" [value]=\"displayData\"\r\n    [rowHover]=\"true\" [rows]=\"rowsPerPage\" [paginator]=\"true\" [totalRecords]=\"totalRecords\"\r\n    [lazy]=\"crudConfig.tablero?.customPaginator || false\" [first]=\"(currentPage - 1) * rowsPerPage\"\r\n    [globalFilterFields]=\"crudConfig.tablero?.filters || []\" [tableStyle]=\"{'min-width': '75rem'}\"\r\n    currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\" [showCurrentPageReport]=\"true\"\r\n    [selectionMode]=\"crudConfig.tablero?.selectionMode || null\" [(selection)]=\"itemSelected\"\r\n    [dataKey]=\"crudConfig.tablero?.dataKey\" (onRowSelect)=\"goToDetail($event)\" (onLazyLoad)=\"pageChange($event)\"\r\n    (onPage)=\"pageChange($event)\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex flex-column justify-content-between md:flex-row md:align-items-center\">\r\n            <h5 class=\"m-0\">{{crudConfig.tablero?.label || idEntidad}}</h5>\r\n            <p-iconfield>\r\n                <p-inputicon class=\"pi pi-search\" />\r\n                <input pInputText type=\"text\"\r\n                    (input)=\"crudConfig?.tablero?.customSearch ? onGlobalSearch($event) : dt.filterGlobal($event.target.value, 'contains')\"\r\n                    placeholder=\"Buscar...\" class=\"w-full\" [(ngModel)]=\"searchValue\" />\r\n            </p-iconfield>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\">\r\n                <div class=\"flex align-items-center justify-between\">\r\n                    {{col.label}}\r\n                    <ng-container *ngIf=\"col.filter\" [ngSwitch]=\"col.filter.type\">\r\n                        <p-columnFilter *ngSwitchCase=\"'text'\" type=\"text\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\" />\r\n                        <p-columnFilter *ngSwitchCase=\"'list'\" [field]=\"col.filter.field\" [display]=\"col.filter.display\"\r\n                            [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-select [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\" />\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                        <p-columnFilter *ngSwitchCase=\"'multiselect'\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-multiselect [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\"\r\n                                    [panelStyle]=\"{ minWidth: '16rem' }\">\r\n                                </p-multiselect>\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                    </ng-container>\r\n                </div>\r\n            </th>\r\n            <th *ngIf=\"crudConfig?.tablero?.showActions\">Acci\u00F3n</th>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\">\r\n        <!-- Skeleton cuando est\u00E1 cargando paginaci\u00F3n -->\r\n        <tr *ngIf=\"isLoadingData\">\r\n            <td *ngFor=\"let col of columns\">\r\n                <p-skeleton [width]=\"col.type === 'tag' ? '6rem' : '100%'\" height=\"1.5rem\"></p-skeleton>\r\n            </td>\r\n            <td *ngIf=\"crudConfig?.tablero?.showActions\">\r\n                <p-skeleton width=\"3rem\" height=\"2rem\" borderRadius=\"4px\"></p-skeleton>\r\n            </td>\r\n        </tr>\r\n        <!-- Datos reales -->\r\n        <tr *ngIf=\"!isLoadingData\" [pSelectableRow]=\"rowData\">\r\n            <ng-container *ngFor=\"let col of columns\" [ngSwitch]=\"col.type\">\r\n                <td *ngSwitchCase=\"'text'\">{{rowData[col.col]}}</td>\r\n                <td *ngSwitchCase=\"'date:yyyy-mm-dd'\">{{rowData[col.col] | date: 'yyyy-MM-dd'}}</td>\r\n                <td *ngSwitchCase=\"'currency:USD'\">{{rowData[col.col] | currency: 'USD'}}</td>\r\n                <td *ngSwitchCase=\"'tag'\">\r\n                    <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                </td>\r\n            </ng-container>\r\n            <td *ngIf=\"crudConfig?.tablero?.showActions\">\r\n                <p-splitButton *ngIf=\"items.length > 1\" icon=\"pi pi-align-justify\" [model]=\"items\" appendTo=\"body\"\r\n                    (onDropdownClick)=\"itemSelected = rowData\"></p-splitButton>\r\n                <div *ngIf=\"items.length <= 1\">\r\n                    <button *ngFor=\"let item of items\" pButton pRipple [icon]=\"item.icon\" class=\"mr-2\"\r\n                        (click)=\"itemSelected = rowData; item.command()\"></button>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"emptymessage\" *ngIf=\"!loading.inProgress\">\r\n        <tr>\r\n            <td [attr.colspan]=\"(crudConfig.tablero?.columns?.length || 0) + 1\" class=\"text-center\">\r\n                <div class=\"text-center text-gray-500 py-5\">\r\n                    <p-avatar icon=\"pi pi-info\" class=\"mr-2 surface-100 text-primary\" size=\"xlarge\" shape=\"circle\" />\r\n                    <p>{{crudConfig.tablero?.emptyMessage || 'No se encontraron registros.'}}</p>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>\r\n", styles: ["::ng-deep .p-datatable table{min-width:100%}button:not(.p-button-success){background:var(--secondary-color)!important;border:var(--secondary-color)!important;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i8.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i12.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i15.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i16.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i17.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "style", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i18.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i19.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i20.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableroComponent, isStandalone: true, selector: "sf-crudtablero", inputs: { opciones: "opciones", idEntidad: "idEntidad", idKatios: "idKatios", environment: "environment", user: "user", dataExt: "dataExt", showCreateButton: "showCreateButton", customConfig: "customConfig", table: "table", optionsMap: "optionsMap", customFilters: "customFilters" }, outputs: { onSelectAction: "onSelectAction" }, host: { properties: { "style.--secondary-color": "this.color2", "style.--button-color": "this.colorButtons" } }, usesOnChanges: true, ngImport: i0, template: "<p-toolbar styleClass=\"mb-4 gap-2\" *ngIf=\"btn.create\">\r\n    <ng-template #start>\r\n        <button pButton pRipple [label]=\"btn.create.label\" [icon]=\"btn.create.icon\" class=\"p-button-success mr-2\"\r\n            (click)=\"showAddDialog()\"></button>\r\n    </ng-template>\r\n</p-toolbar>\r\n<p-table *ngIf=\"table?.columns && initialLoadDone\" #dt [columns]=\"table.columns\" [value]=\"displayData\"\r\n    [rowHover]=\"true\" [rows]=\"rowsPerPage\" [paginator]=\"true\" [totalRecords]=\"totalRecords\"\r\n    [lazy]=\"table?.customPaginator || false\" [first]=\"(currentPage - 1) * rowsPerPage\"\r\n    [globalFilterFields]=\"table?.filters || []\" [tableStyle]=\"{'min-width': '75rem'}\"\r\n    currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\" [showCurrentPageReport]=\"true\"\r\n    [selectionMode]=\"table?.selectionMode || null\" [(selection)]=\"itemSelected\"\r\n    [dataKey]=\"table?.dataKey\" (onRowSelect)=\"goToDetail($event)\" (onLazyLoad)=\"pageChange($event)\"\r\n    (onPage)=\"pageChange($event)\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex flex-column justify-content-between md:flex-row md:align-items-center\">\r\n            <h5 class=\"m-0\">{{table?.label || idEntidad}}</h5>\r\n            <p-iconfield>\r\n                <p-inputicon class=\"pi pi-search\" />\r\n                <input pInputText type=\"text\"\r\n                    (input)=\"table?.customSearch ? onGlobalSearch($event) : dt.filterGlobal($event.target.value, 'contains')\"\r\n                    placeholder=\"Buscar...\" class=\"w-full\" [(ngModel)]=\"searchValue\" />\r\n            </p-iconfield>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\">\r\n                <div class=\"flex align-items-center justify-between\">\r\n                    {{col.label}}\r\n                    <ng-container *ngIf=\"col.filter\" [ngSwitch]=\"col.filter.type\">\r\n                        <p-columnFilter *ngSwitchCase=\"'text'\" type=\"text\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\" />\r\n                        <p-columnFilter *ngSwitchCase=\"'list'\" [field]=\"col.filter.field\" [display]=\"col.filter.display\"\r\n                            [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-select [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\" />\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                        <p-columnFilter *ngSwitchCase=\"'multiselect'\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-multiselect [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\"\r\n                                    [panelStyle]=\"{ minWidth: '16rem' }\">\r\n                                </p-multiselect>\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                    </ng-container>\r\n                </div>\r\n            </th>\r\n            <th *ngIf=\"table?.showActions\">Acci\u00F3n</th>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\">\r\n        <!-- Skeleton cuando est\u00E1 cargando paginaci\u00F3n -->\r\n        <tr *ngIf=\"isLoadingData\">\r\n            <td *ngFor=\"let col of columns\">\r\n                <p-skeleton [width]=\"col.type === 'tag' ? '6rem' : '100%'\" height=\"1.5rem\"></p-skeleton>\r\n            </td>\r\n            <td *ngIf=\"table?.showActions\">\r\n                <p-skeleton width=\"3rem\" height=\"2rem\" borderRadius=\"4px\"></p-skeleton>\r\n            </td>\r\n        </tr>\r\n        <!-- Datos reales -->\r\n        <tr *ngIf=\"!isLoadingData\" [pSelectableRow]=\"rowData\">\r\n            <ng-container *ngFor=\"let col of columns\">\r\n                <td>\r\n                    @switch (col.type) {\r\n                        @case('date:yyyy-mm-dd'){\r\n                            {{rowData[col.col] | date: 'yyyy-MM-dd'}}\r\n                        }\r\n                        @case('currency:USD'){\r\n                            {{rowData[col.col] | currency: 'USD'}}\r\n                        }\r\n                        @case('tag'){\r\n                            <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                        }\r\n                        @case('icon'){\r\n                            <i class=\"pi\" [ngClass]=\"col.col && col.classCondition ? col.classCondition[rowData[col.col]] : col.icon ? col.icon : ''\"></i>\r\n                        }\r\n                        @default{\r\n                            {{rowData[col.col]}}\r\n                        }\r\n                    }\r\n                </td>\r\n                <!-- <td *ngSwitchCase=\"'date:yyyy-mm-dd'\">{{rowData[col.col] | date: 'yyyy-MM-dd'}}</td>\r\n                <td *ngSwitchCase=\"'currency:USD'\">{{rowData[col.col] | currency: 'USD'}}</td>\r\n                <td *ngSwitchCase=\"'tag'\">\r\n                    <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                </td>\r\n                <td *ngSwitchCase=\"'icon'\">\r\n                    <i class=\"pi\" [ngClass]=\"col.col && col.classConditions ? col.classConditions[rowData[col.col]] : col.icon ? col.icon : ''\"></i>\r\n                </td>\r\n                <td *ngSwitchDefault>{{rowData[col.col]}}</td> -->\r\n            </ng-container>\r\n            <td *ngIf=\"table?.showActions\">\r\n                <p-splitButton *ngIf=\"items.length > 1\" icon=\"pi pi-align-justify\" [model]=\"items\" appendTo=\"body\"\r\n                    (onDropdownClick)=\"itemSelected = rowData\"></p-splitButton>\r\n                <div *ngIf=\"items.length <= 1\">\r\n                    <button *ngFor=\"let item of items\" pButton pRipple [icon]=\"item.icon\" class=\"mr-2\"\r\n                        (click)=\"itemSelected = rowData; item.command()\"></button>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"emptymessage\" *ngIf=\"!loading.inProgress\">\r\n        <tr>\r\n            <td [attr.colspan]=\"(table?.columns?.length || 0) + 1\" class=\"text-center\">\r\n                <div class=\"text-center text-gray-500 py-5\">\r\n                    <p-avatar icon=\"pi pi-info\" class=\"mr-2 surface-100 text-primary\" size=\"xlarge\" shape=\"circle\" />\r\n                    <p>{{table?.emptyMessage || 'No se encontraron registros.'}}</p>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>\r\n", styles: ["::ng-deep .p-datatable table{min-width:100%}button:not(.p-button-success){background:var(--secondary-color)!important;border:var(--secondary-color)!important;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i8.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i12.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i15.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i16.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i17.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "style", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i18.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i19.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i20.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableroComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sf-crudtablero', imports: [CommonModule, FormsModule, TableModule, ButtonModule, DropdownModule, InputTextModule, ToolbarModule, TooltipModule, DialogModule, CardModule, IconFieldModule, InputIconModule,
-                        SelectModule, MultiSelectModule, SplitButtonModule, TagModule, AvatarModule, SkeletonModule], standalone: true, template: "<p-toolbar styleClass=\"mb-4 gap-2\" *ngIf=\"btn.create\">\r\n    <ng-template #start>\r\n        <button pButton pRipple [label]=\"btn.create.label\" [icon]=\"btn.create.icon\" class=\"p-button-success mr-2\"\r\n            (click)=\"showAddDialog()\"></button>\r\n    </ng-template>\r\n</p-toolbar>\r\n<p-table *ngIf=\"crudConfig?.tablero?.columns && initialLoadDone\" #dt [columns]=\"crudConfig.tablero.columns\" [value]=\"displayData\"\r\n    [rowHover]=\"true\" [rows]=\"rowsPerPage\" [paginator]=\"true\" [totalRecords]=\"totalRecords\"\r\n    [lazy]=\"crudConfig.tablero?.customPaginator || false\" [first]=\"(currentPage - 1) * rowsPerPage\"\r\n    [globalFilterFields]=\"crudConfig.tablero?.filters || []\" [tableStyle]=\"{'min-width': '75rem'}\"\r\n    currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\" [showCurrentPageReport]=\"true\"\r\n    [selectionMode]=\"crudConfig.tablero?.selectionMode || null\" [(selection)]=\"itemSelected\"\r\n    [dataKey]=\"crudConfig.tablero?.dataKey\" (onRowSelect)=\"goToDetail($event)\" (onLazyLoad)=\"pageChange($event)\"\r\n    (onPage)=\"pageChange($event)\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex flex-column justify-content-between md:flex-row md:align-items-center\">\r\n            <h5 class=\"m-0\">{{crudConfig.tablero?.label || idEntidad}}</h5>\r\n            <p-iconfield>\r\n                <p-inputicon class=\"pi pi-search\" />\r\n                <input pInputText type=\"text\"\r\n                    (input)=\"crudConfig?.tablero?.customSearch ? onGlobalSearch($event) : dt.filterGlobal($event.target.value, 'contains')\"\r\n                    placeholder=\"Buscar...\" class=\"w-full\" [(ngModel)]=\"searchValue\" />\r\n            </p-iconfield>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\">\r\n                <div class=\"flex align-items-center justify-between\">\r\n                    {{col.label}}\r\n                    <ng-container *ngIf=\"col.filter\" [ngSwitch]=\"col.filter.type\">\r\n                        <p-columnFilter *ngSwitchCase=\"'text'\" type=\"text\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\" />\r\n                        <p-columnFilter *ngSwitchCase=\"'list'\" [field]=\"col.filter.field\" [display]=\"col.filter.display\"\r\n                            [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-select [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\" />\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                        <p-columnFilter *ngSwitchCase=\"'multiselect'\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-multiselect [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\"\r\n                                    [panelStyle]=\"{ minWidth: '16rem' }\">\r\n                                </p-multiselect>\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                    </ng-container>\r\n                </div>\r\n            </th>\r\n            <th *ngIf=\"crudConfig?.tablero?.showActions\">Acci\u00F3n</th>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\">\r\n        <!-- Skeleton cuando est\u00E1 cargando paginaci\u00F3n -->\r\n        <tr *ngIf=\"isLoadingData\">\r\n            <td *ngFor=\"let col of columns\">\r\n                <p-skeleton [width]=\"col.type === 'tag' ? '6rem' : '100%'\" height=\"1.5rem\"></p-skeleton>\r\n            </td>\r\n            <td *ngIf=\"crudConfig?.tablero?.showActions\">\r\n                <p-skeleton width=\"3rem\" height=\"2rem\" borderRadius=\"4px\"></p-skeleton>\r\n            </td>\r\n        </tr>\r\n        <!-- Datos reales -->\r\n        <tr *ngIf=\"!isLoadingData\" [pSelectableRow]=\"rowData\">\r\n            <ng-container *ngFor=\"let col of columns\" [ngSwitch]=\"col.type\">\r\n                <td *ngSwitchCase=\"'text'\">{{rowData[col.col]}}</td>\r\n                <td *ngSwitchCase=\"'date:yyyy-mm-dd'\">{{rowData[col.col] | date: 'yyyy-MM-dd'}}</td>\r\n                <td *ngSwitchCase=\"'currency:USD'\">{{rowData[col.col] | currency: 'USD'}}</td>\r\n                <td *ngSwitchCase=\"'tag'\">\r\n                    <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                </td>\r\n            </ng-container>\r\n            <td *ngIf=\"crudConfig?.tablero?.showActions\">\r\n                <p-splitButton *ngIf=\"items.length > 1\" icon=\"pi pi-align-justify\" [model]=\"items\" appendTo=\"body\"\r\n                    (onDropdownClick)=\"itemSelected = rowData\"></p-splitButton>\r\n                <div *ngIf=\"items.length <= 1\">\r\n                    <button *ngFor=\"let item of items\" pButton pRipple [icon]=\"item.icon\" class=\"mr-2\"\r\n                        (click)=\"itemSelected = rowData; item.command()\"></button>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"emptymessage\" *ngIf=\"!loading.inProgress\">\r\n        <tr>\r\n            <td [attr.colspan]=\"(crudConfig.tablero?.columns?.length || 0) + 1\" class=\"text-center\">\r\n                <div class=\"text-center text-gray-500 py-5\">\r\n                    <p-avatar icon=\"pi pi-info\" class=\"mr-2 surface-100 text-primary\" size=\"xlarge\" shape=\"circle\" />\r\n                    <p>{{crudConfig.tablero?.emptyMessage || 'No se encontraron registros.'}}</p>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>\r\n", styles: ["::ng-deep .p-datatable table{min-width:100%}button:not(.p-button-success){background:var(--secondary-color)!important;border:var(--secondary-color)!important;color:#fff}\n"] }]
+                        SelectModule, MultiSelectModule, SplitButtonModule, TagModule, AvatarModule, SkeletonModule], standalone: true, template: "<p-toolbar styleClass=\"mb-4 gap-2\" *ngIf=\"btn.create\">\r\n    <ng-template #start>\r\n        <button pButton pRipple [label]=\"btn.create.label\" [icon]=\"btn.create.icon\" class=\"p-button-success mr-2\"\r\n            (click)=\"showAddDialog()\"></button>\r\n    </ng-template>\r\n</p-toolbar>\r\n<p-table *ngIf=\"table?.columns && initialLoadDone\" #dt [columns]=\"table.columns\" [value]=\"displayData\"\r\n    [rowHover]=\"true\" [rows]=\"rowsPerPage\" [paginator]=\"true\" [totalRecords]=\"totalRecords\"\r\n    [lazy]=\"table?.customPaginator || false\" [first]=\"(currentPage - 1) * rowsPerPage\"\r\n    [globalFilterFields]=\"table?.filters || []\" [tableStyle]=\"{'min-width': '75rem'}\"\r\n    currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\" [showCurrentPageReport]=\"true\"\r\n    [selectionMode]=\"table?.selectionMode || null\" [(selection)]=\"itemSelected\"\r\n    [dataKey]=\"table?.dataKey\" (onRowSelect)=\"goToDetail($event)\" (onLazyLoad)=\"pageChange($event)\"\r\n    (onPage)=\"pageChange($event)\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex flex-column justify-content-between md:flex-row md:align-items-center\">\r\n            <h5 class=\"m-0\">{{table?.label || idEntidad}}</h5>\r\n            <p-iconfield>\r\n                <p-inputicon class=\"pi pi-search\" />\r\n                <input pInputText type=\"text\"\r\n                    (input)=\"table?.customSearch ? onGlobalSearch($event) : dt.filterGlobal($event.target.value, 'contains')\"\r\n                    placeholder=\"Buscar...\" class=\"w-full\" [(ngModel)]=\"searchValue\" />\r\n            </p-iconfield>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\">\r\n                <div class=\"flex align-items-center justify-between\">\r\n                    {{col.label}}\r\n                    <ng-container *ngIf=\"col.filter\" [ngSwitch]=\"col.filter.type\">\r\n                        <p-columnFilter *ngSwitchCase=\"'text'\" type=\"text\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\" />\r\n                        <p-columnFilter *ngSwitchCase=\"'list'\" [field]=\"col.filter.field\" [display]=\"col.filter.display\"\r\n                            [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-select [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\" />\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                        <p-columnFilter *ngSwitchCase=\"'multiselect'\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [matchMode]=\"col.filter.matchMode || 'equals'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-multiselect [(ngModel)]=\"value\" [options]=\"optionsMap.get(col.col) ?? []\"\r\n                                    (onChange)=\"filter($event.value)\" placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\"\r\n                                    [panelStyle]=\"{ minWidth: '16rem' }\">\r\n                                </p-multiselect>\r\n                            </ng-template>\r\n                        </p-columnFilter>\r\n                    </ng-container>\r\n                </div>\r\n            </th>\r\n            <th *ngIf=\"table?.showActions\">Acci\u00F3n</th>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\">\r\n        <!-- Skeleton cuando est\u00E1 cargando paginaci\u00F3n -->\r\n        <tr *ngIf=\"isLoadingData\">\r\n            <td *ngFor=\"let col of columns\">\r\n                <p-skeleton [width]=\"col.type === 'tag' ? '6rem' : '100%'\" height=\"1.5rem\"></p-skeleton>\r\n            </td>\r\n            <td *ngIf=\"table?.showActions\">\r\n                <p-skeleton width=\"3rem\" height=\"2rem\" borderRadius=\"4px\"></p-skeleton>\r\n            </td>\r\n        </tr>\r\n        <!-- Datos reales -->\r\n        <tr *ngIf=\"!isLoadingData\" [pSelectableRow]=\"rowData\">\r\n            <ng-container *ngFor=\"let col of columns\">\r\n                <td>\r\n                    @switch (col.type) {\r\n                        @case('date:yyyy-mm-dd'){\r\n                            {{rowData[col.col] | date: 'yyyy-MM-dd'}}\r\n                        }\r\n                        @case('currency:USD'){\r\n                            {{rowData[col.col] | currency: 'USD'}}\r\n                        }\r\n                        @case('tag'){\r\n                            <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                        }\r\n                        @case('icon'){\r\n                            <i class=\"pi\" [ngClass]=\"col.col && col.classCondition ? col.classCondition[rowData[col.col]] : col.icon ? col.icon : ''\"></i>\r\n                        }\r\n                        @default{\r\n                            {{rowData[col.col]}}\r\n                        }\r\n                    }\r\n                </td>\r\n                <!-- <td *ngSwitchCase=\"'date:yyyy-mm-dd'\">{{rowData[col.col] | date: 'yyyy-MM-dd'}}</td>\r\n                <td *ngSwitchCase=\"'currency:USD'\">{{rowData[col.col] | currency: 'USD'}}</td>\r\n                <td *ngSwitchCase=\"'tag'\">\r\n                    <p-tag [value]=\"rowData[col.col]\" [ngClass]=\"rowData[col.col] ? (col.class || '') : 'hidden'\" />\r\n                </td>\r\n                <td *ngSwitchCase=\"'icon'\">\r\n                    <i class=\"pi\" [ngClass]=\"col.col && col.classConditions ? col.classConditions[rowData[col.col]] : col.icon ? col.icon : ''\"></i>\r\n                </td>\r\n                <td *ngSwitchDefault>{{rowData[col.col]}}</td> -->\r\n            </ng-container>\r\n            <td *ngIf=\"table?.showActions\">\r\n                <p-splitButton *ngIf=\"items.length > 1\" icon=\"pi pi-align-justify\" [model]=\"items\" appendTo=\"body\"\r\n                    (onDropdownClick)=\"itemSelected = rowData\"></p-splitButton>\r\n                <div *ngIf=\"items.length <= 1\">\r\n                    <button *ngFor=\"let item of items\" pButton pRipple [icon]=\"item.icon\" class=\"mr-2\"\r\n                        (click)=\"itemSelected = rowData; item.command()\"></button>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"emptymessage\" *ngIf=\"!loading.inProgress\">\r\n        <tr>\r\n            <td [attr.colspan]=\"(table?.columns?.length || 0) + 1\" class=\"text-center\">\r\n                <div class=\"text-center text-gray-500 py-5\">\r\n                    <p-avatar icon=\"pi pi-info\" class=\"mr-2 surface-100 text-primary\" size=\"xlarge\" shape=\"circle\" />\r\n                    <p>{{table?.emptyMessage || 'No se encontraron registros.'}}</p>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>\r\n", styles: ["::ng-deep .p-datatable table{min-width:100%}button:not(.p-button-success){background:var(--secondary-color)!important;border:var(--secondary-color)!important;color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: GeneralService }, { type: i2.Router }, { type: SfCrudService }, { type: StepService }, { type: CrudDialogService }], propDecorators: { opciones: [{
                 type: Input
             }], idEntidad: [{
@@ -1407,6 +1300,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], showCreateButton: [{
                 type: Input
+            }], customConfig: [{
+                type: Input
+            }], table: [{
+                type: Input
             }], onSelectAction: [{
                 type: Output
             }], color2: [{
@@ -1421,6 +1318,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }] } });
 
+class CrudConfig {
+    idEntidad = '';
+    uiEsquemas = [];
+    esquemas = [];
+    registros = [];
+    tablero;
+}
+class ConfigTablero {
+    columns = [];
+    endpoint = '';
+    method = '';
+    server = '';
+    filters = [];
+    keys = [];
+    createButton;
+    dialog;
+    dataKey;
+    selectionMode;
+    redirect;
+    customPaginator;
+}
+class ConfigRegistro {
+    operations = [];
+    btnBack = '';
+    label;
+    canBack = false;
+    constructionId;
+    keys;
+    conditions = [];
+    backWhenSubmit = false;
+}
+class Operation {
+    type;
+    server;
+    endpoint;
+    method = '';
+    validations;
+    url;
+    changeTrx = [];
+    errorChecking;
+    answerChecking;
+    keysEsquema;
+    keys;
+}
+class ConstructionId {
+    indexStep;
+    path;
+    keys;
+}
+class Validations {
+    type = '';
+    required = [];
+    equals = [];
+    different = [];
+    server = '';
+    endpoint = '';
+    operations;
+}
+class ValidationRequired {
+    field;
+    message;
+    conditions;
+    validation;
+}
+class ValidationEqual extends ValidationRequired {
+    value;
+    constructor(value) {
+        super();
+        this.value = value;
+    }
+}
+class ValidationDifferent extends ValidationRequired {
+    value;
+    constructor(value) {
+        super();
+        this.value = value;
+    }
+}
+class RequestChecking {
+    dynamics;
+    statics;
+    useSwal;
+    redirect;
+    cancelRedirect;
+    allowContinue;
+    parse;
+    constructor(dynamics, statics, useSwal, redirect, cancelRedirect, allowContinue, parse) {
+        this.dynamics = dynamics;
+        this.statics = statics;
+        this.useSwal = useSwal;
+        this.redirect = redirect;
+        this.cancelRedirect = cancelRedirect;
+        this.allowContinue = allowContinue;
+        this.parse = parse;
+    }
+}
+class Key {
+    key;
+    scope;
+    indexAnswer;
+    indexData;
+    indexId;
+    data;
+    overrideControl;
+}
+class OverrideConfig {
+    property;
+    value;
+    elseValue;
+    conditions;
+    newPropertyValue;
+    elseNewPropertyValue;
+}
+class keyEsquema {
+    key;
+    scope;
+    indexData;
+    indexId;
+    isArray;
+    indexKey;
+    canBeValueUndefined;
+}
+
 class StepComponent {
     router;
     stepService;