sf-crud 13.2.62 → 13.3.0

package/fesm2022/sf-crud.mjs

@@ -1068,23 +1068,13 @@ class TableroService {
         if (!table || !config)
             return;
         this.setLoading({ inProgress: true, target: 'data' });
-        // Solo resetear datos si no es paginación, para mantener el skeleton con las filas correctas
-        // if (typeLoad !== 'data') {
-        //   this._data.set([]);
-        //   this._initialData.set([]);
-        //   this._totalRecords.set(0);
-        // }
         let url = this.applyKeys(table.keys, `${this.generalService.jsonConfig[table.server]}${table.endpoint}`, config.dataExt);
         this.generalService
             .genericRequest(table.method, url, config.dataExt)
             .then((res) => {
-            let aux;
-            if (!Array.isArray(res))
-                aux = res.data;
-            else
-                aux = res;
-            this._initialData.set(_.cloneDeep(aux));
-            this.generateData(aux);
+            const { items, totalRecords } = this.extractResponseData(res, table);
+            this._initialData.set(_.cloneDeep(items));
+            this.generateData(items, undefined, totalRecords);
             this._initialLoadDone.set(true);
             this.setLoading({ inProgress: false, target: 'data' });
         })
@@ -1093,13 +1083,48 @@ class TableroService {
             this.setLoading({ inProgress: false, target: 'data' });
         });
     }
-    generateData(data, tableConfig) {
+    /**
+     * Extrae los items y metadatos de paginación de la respuesta del servidor
+     * según el responseMapping configurado o usando la lógica por defecto.
+     */
+    extractResponseData(res, table) {
+        const mapping = table.responseMapping;
+        // Si la respuesta ya es un array, retornar directamente
+        if (Array.isArray(res)) {
+            return { items: res, totalRecords: 0 };
+        }
+        // Si hay responseMapping configurado, usar los campos especificados
+        if (mapping) {
+            const source = res.data !== undefined ? res.data : res;
+            const items = mapping.items ? this.getNestedValue(source, mapping.items) : source;
+            const totalRecords = mapping.total ? (this.getNestedValue(source, mapping.total) || 0) : 0;
+            return {
+                items: Array.isArray(items) ? items : [],
+                totalRecords
+            };
+        }
+        // Fallback: lógica original (res.data como array, o buscar TotalRecords en items)
+        const data = res.data !== undefined ? res.data : res;
+        if (Array.isArray(data)) {
+            // Buscar TotalRecords en el primer item (comportamiento legacy)
+            const firstWithTotal = data.find((item) => item['TotalRecords'] !== undefined);
+            const totalRecords = firstWithTotal ? (firstWithTotal['TotalRecords'] || data.length) : 0;
+            return { items: data, totalRecords };
+        }
+        return { items: [], totalRecords: 0 };
+    }
+    /**
+     * Obtiene un valor de un objeto usando una ruta con puntos (ej: "pagination.total")
+     */
+    getNestedValue(obj, path) {
+        return path.split('.').reduce((current, key) => current?.[key], obj);
+    }
+    generateData(data, tableConfig, externalTotalRecords) {
         const table = tableConfig || this._table();
         if (!table)
             return;
         const previousTotalRecords = this._totalRecords();
         const newData = [];
-        let totalRecords = 0;
         data.forEach((item) => {
             let newItem = {};
             table.columns.forEach((col) => {
@@ -1109,17 +1134,10 @@ class TableroService {
             if (table?.dataKey && !newItem[table.dataKey]) {
                 newItem[table.dataKey] = this.getValue(table.dataKey, item);
             }
-            if (table?.customPaginator &&
-                totalRecords === 0 &&
-                item['TotalRecords'] !== undefined) {
-                totalRecords = item['TotalRecords'] || data.length;
-            }
-            // const missingKeys = Object.keys(item).filter(key => !(key in newItem));
-            // missingKeys.forEach(key => {
-            //   newItem[key] = item[key];
-            // })
             newData.push(newItem);
         });
+        // Determinar total de registros: prioridad al valor externo, luego fallback
+        let totalRecords = externalTotalRecords || 0;
         if (totalRecords === 0) {
             totalRecords =
                 previousTotalRecords > 0 ? previousTotalRecords : newData.length;
@@ -1156,6 +1174,9 @@ class TableroService {
                 case '@searchValue':
                     endpoint = endpoint.replace(key.key, encodeURIComponent(this._searchValue()));
                     break;
+                case '@total':
+                    endpoint = endpoint.replace(key.key, this._totalRecords().toString());
+                    break;
                 default:
                     if (key.key.startsWith('@filter.')) {
                         const filterKey = key.key.replace('@filter.', '');
@@ -1300,11 +1321,13 @@ class TableroService {
         // Debounce de 400ms para evitar múltiples llamadas
         this.searchTimeout = setTimeout(() => {
             this._currentPage.set(1);
+            this._totalRecords.set(0);
             this.getInfoTablero();
         }, 400);
     }
     refresh() {
         this._currentPage.set(1);
+        this._totalRecords.set(0);
         this.getInfoTablero();
     }
     destroy() {
@@ -1337,6 +1360,7 @@ class TableroService {
         this._filterValue.set(value);
         if (this._table()?.customPaginator) {
             this._currentPage.set(1);
+            this._totalRecords.set(0);
             this.getInfoTablero();
         }
     }
@@ -1634,13 +1658,17 @@ class TableroComponent {
         this.selectFilter = true;
         fallback(value);
     }
+    isSingleOption(col) {
+        const options = this.tableroService.optionsMap().get(col);
+        return options && options.length === 1;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableroComponent, deps: [{ token: SfCrudService }, { token: TableroService }], target: i0.ɵɵFactoryTarget.Component });
-    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", customFilters: "customFilters", rowsPerPage: "rowsPerPage", optionsMap: "optionsMap" }, 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 #dt [columns]=\"tableConfig?.columns\" [value]=\"displayData\" [rowHover]=\"true\"\r\n    [rows]=\"totalRows\" [paginator]=\"true\" [totalRecords]=\"totalRecords\" [lazy]=\"tableConfig?.customPaginator || false\"\r\n    [first]=\"first\" [globalFilterFields]=\"tableConfig?.filters || []\"\r\n    [tableStyle]=\"{'min-width': '75rem'}\" currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\"\r\n    [showCurrentPageReport]=\"true\" [selectionMode]=\"tableConfig?.selectionMode || null\" [(selection)]=\"itemSelected\"\r\n    [dataKey]=\"tableConfig?.dataKey\" (onRowSelect)=\"goToDetail($event)\" (onLazyLoad)=\"pageChange($event)\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <lib-tablero-header (searchChange)=\"onGlobalSearch($event, dt)\"></lib-tablero-header> \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                            [showApplyButton]=\"col.filter.showApplyButton || 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                            [showApplyButton]=\"col.filter.showApplyButton || false\"\r\n                            >\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-select [ngModel]=\"value\" [options]=\"filterOptions.get(col.col) ?? []\"\r\n                                    placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\"\r\n                                    (onChange)=\"filterValue($event.value, filter)\" />\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 || 'in'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\"\r\n                            [showApplyButton]=\"col.filter.showApplyButton || false\"                            \r\n                            >\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-multiselect [ngModel]=\"value\" [options]=\"filterOptions.get(col.col) ?? []\"\r\n                                    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                                    (onChange)=\"filterValue($event.value, filter)\" >\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=\"tableConfig?.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=\"tableConfig?.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                        @if(col.classCondition){\r\n                        @if(col.classCondition[rowData[col.col]].type === 'image'){\r\n                        <img [src]=\"col.classCondition[rowData[col.col]].src\" alt=\"icon\"\r\n                            [ngClass]=\"col.classCondition[rowData[col.col]].class || ''\" />\r\n                        }\r\n                        @else{\r\n                        <i class=\"pi\" [ngClass]=\"col.classCondition[rowData[col.col]].class\"></i>\r\n                        }\r\n                        }\r\n                        @else {\r\n                        <i class=\"pi\" [ngClass]=\"col.class || ''\"></i>\r\n                        }\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=\"tableConfig?.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]=\"(tableConfig?.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>{{tableConfig?.emptyMessage || 'No se encontraron registros.'}}</p>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>", 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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$2.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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$2.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i5$2.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: i7.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: "ngmodule", type: ToolbarModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: InputIconModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i8.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: i9.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: i10.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: i11.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i12.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i13.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: TableroHeaderComponent, selector: "lib-tablero-header", inputs: ["disabled"], outputs: ["searchChange"] }] });
+    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", customFilters: "customFilters", rowsPerPage: "rowsPerPage", optionsMap: "optionsMap" }, 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 #dt [columns]=\"tableConfig?.columns\" [value]=\"displayData\" [rowHover]=\"true\" [rows]=\"totalRows\"\r\n    [paginator]=\"true\" [totalRecords]=\"totalRecords\" [lazy]=\"tableConfig?.customPaginator || false\" [first]=\"first\"\r\n    [globalFilterFields]=\"tableConfig?.filters || []\" [tableStyle]=\"{'min-width': '75rem'}\"\r\n    currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\" [showCurrentPageReport]=\"true\"\r\n    [selectionMode]=\"tableConfig?.selectionMode || null\" [(selection)]=\"itemSelected\" [dataKey]=\"tableConfig?.dataKey\"\r\n    (onRowSelect)=\"goToDetail($event)\" (onLazyLoad)=\"pageChange($event)\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <lib-tablero-header (searchChange)=\"onGlobalSearch($event, dt)\"></lib-tablero-header>\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                            [showApplyButton]=\"col.filter.showApplyButton || false\" />\r\n                        <ng-container *ngSwitchCase=\"'list'\">\r\n                            <p-columnFilter *ngIf=\"!isSingleOption(col.filter.field)\" [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                                [showApplyButton]=\"col.filter.showApplyButton || false\">\r\n                                <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                    <p-select [ngModel]=\"value\" [options]=\"filterOptions.get(col.col) ?? []\"\r\n                                        placeholder=\"Seleccione\" class=\"w-full\"\r\n                                        [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                        [optionValue]=\"col.filter?.config?.optionValue\"\r\n                                        (onChange)=\"filterValue($event.value, filter)\" />\r\n                                </ng-template>\r\n                            </p-columnFilter>\r\n                        </ng-container>\r\n                        <p-columnFilter *ngSwitchCase=\"'multiselect'\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [matchMode]=\"col.filter.matchMode || 'in'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\"\r\n                            [showApplyButton]=\"col.filter.showApplyButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-multiselect [ngModel]=\"value\" [options]=\"filterOptions.get(col.col) ?? []\"\r\n                                    placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\" [panelStyle]=\"{ minWidth: '16rem' }\"\r\n                                    (onChange)=\"filterValue($event.value, filter)\">\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=\"tableConfig?.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=\"tableConfig?.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                    @if(col.classCondition){\r\n                    @if(col.classCondition[rowData[col.col]].type === 'image'){\r\n                    <img [src]=\"col.classCondition[rowData[col.col]].src\" alt=\"icon\"\r\n                        [ngClass]=\"col.classCondition[rowData[col.col]].class || ''\" />\r\n                    }\r\n                    @else{\r\n                    <i class=\"pi\" [ngClass]=\"col.classCondition[rowData[col.col]].class\"></i>\r\n                    }\r\n                    }\r\n                    @else {\r\n                    <i class=\"pi\" [ngClass]=\"col.class || ''\"></i>\r\n                    }\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=\"tableConfig?.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]=\"(tableConfig?.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>{{tableConfig?.emptyMessage || 'No se encontraron registros.'}}</p>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>", 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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$2.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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$2.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i5$2.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: i7.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: "ngmodule", type: ToolbarModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: InputIconModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i8.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: i9.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: i10.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: i11.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i12.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i13.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: TableroHeaderComponent, selector: "lib-tablero-header", inputs: ["disabled"], outputs: ["searchChange"] }] });
 }
 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, TableroHeaderComponent], 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 #dt [columns]=\"tableConfig?.columns\" [value]=\"displayData\" [rowHover]=\"true\"\r\n    [rows]=\"totalRows\" [paginator]=\"true\" [totalRecords]=\"totalRecords\" [lazy]=\"tableConfig?.customPaginator || false\"\r\n    [first]=\"first\" [globalFilterFields]=\"tableConfig?.filters || []\"\r\n    [tableStyle]=\"{'min-width': '75rem'}\" currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\"\r\n    [showCurrentPageReport]=\"true\" [selectionMode]=\"tableConfig?.selectionMode || null\" [(selection)]=\"itemSelected\"\r\n    [dataKey]=\"tableConfig?.dataKey\" (onRowSelect)=\"goToDetail($event)\" (onLazyLoad)=\"pageChange($event)\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <lib-tablero-header (searchChange)=\"onGlobalSearch($event, dt)\"></lib-tablero-header> \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                            [showApplyButton]=\"col.filter.showApplyButton || 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                            [showApplyButton]=\"col.filter.showApplyButton || false\"\r\n                            >\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-select [ngModel]=\"value\" [options]=\"filterOptions.get(col.col) ?? []\"\r\n                                    placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\"\r\n                                    (onChange)=\"filterValue($event.value, filter)\" />\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 || 'in'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\"\r\n                            [showApplyButton]=\"col.filter.showApplyButton || false\"                            \r\n                            >\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-multiselect [ngModel]=\"value\" [options]=\"filterOptions.get(col.col) ?? []\"\r\n                                    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                                    (onChange)=\"filterValue($event.value, filter)\" >\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=\"tableConfig?.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=\"tableConfig?.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                        @if(col.classCondition){\r\n                        @if(col.classCondition[rowData[col.col]].type === 'image'){\r\n                        <img [src]=\"col.classCondition[rowData[col.col]].src\" alt=\"icon\"\r\n                            [ngClass]=\"col.classCondition[rowData[col.col]].class || ''\" />\r\n                        }\r\n                        @else{\r\n                        <i class=\"pi\" [ngClass]=\"col.classCondition[rowData[col.col]].class\"></i>\r\n                        }\r\n                        }\r\n                        @else {\r\n                        <i class=\"pi\" [ngClass]=\"col.class || ''\"></i>\r\n                        }\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=\"tableConfig?.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]=\"(tableConfig?.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>{{tableConfig?.emptyMessage || 'No se encontraron registros.'}}</p>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>", 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, TableroHeaderComponent], 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 #dt [columns]=\"tableConfig?.columns\" [value]=\"displayData\" [rowHover]=\"true\" [rows]=\"totalRows\"\r\n    [paginator]=\"true\" [totalRecords]=\"totalRecords\" [lazy]=\"tableConfig?.customPaginator || false\" [first]=\"first\"\r\n    [globalFilterFields]=\"tableConfig?.filters || []\" [tableStyle]=\"{'min-width': '75rem'}\"\r\n    currentPageReportTemplate=\"Registro {first} al {last} de {totalRecords}\" [showCurrentPageReport]=\"true\"\r\n    [selectionMode]=\"tableConfig?.selectionMode || null\" [(selection)]=\"itemSelected\" [dataKey]=\"tableConfig?.dataKey\"\r\n    (onRowSelect)=\"goToDetail($event)\" (onLazyLoad)=\"pageChange($event)\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <lib-tablero-header (searchChange)=\"onGlobalSearch($event, dt)\"></lib-tablero-header>\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                            [showApplyButton]=\"col.filter.showApplyButton || false\" />\r\n                        <ng-container *ngSwitchCase=\"'list'\">\r\n                            <p-columnFilter *ngIf=\"!isSingleOption(col.filter.field)\" [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                                [showApplyButton]=\"col.filter.showApplyButton || false\">\r\n                                <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                    <p-select [ngModel]=\"value\" [options]=\"filterOptions.get(col.col) ?? []\"\r\n                                        placeholder=\"Seleccione\" class=\"w-full\"\r\n                                        [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                        [optionValue]=\"col.filter?.config?.optionValue\"\r\n                                        (onChange)=\"filterValue($event.value, filter)\" />\r\n                                </ng-template>\r\n                            </p-columnFilter>\r\n                        </ng-container>\r\n                        <p-columnFilter *ngSwitchCase=\"'multiselect'\" [field]=\"col.filter.field\"\r\n                            [display]=\"col.filter.display\" [matchMode]=\"col.filter.matchMode || 'in'\"\r\n                            [showMatchModes]=\"col.filter.showMatchModes || false\"\r\n                            [showOperator]=\"col.filter.showOperator || false\"\r\n                            [showAddButton]=\"col.filter.showAddButton || false\"\r\n                            [showApplyButton]=\"col.filter.showApplyButton || false\">\r\n                            <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                                <p-multiselect [ngModel]=\"value\" [options]=\"filterOptions.get(col.col) ?? []\"\r\n                                    placeholder=\"Seleccione\" class=\"w-full\"\r\n                                    [optionLabel]=\"col.filter?.config?.optionLabel\"\r\n                                    [optionValue]=\"col.filter?.config?.optionValue\" [panelStyle]=\"{ minWidth: '16rem' }\"\r\n                                    (onChange)=\"filterValue($event.value, filter)\">\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=\"tableConfig?.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=\"tableConfig?.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                    @if(col.classCondition){\r\n                    @if(col.classCondition[rowData[col.col]].type === 'image'){\r\n                    <img [src]=\"col.classCondition[rowData[col.col]].src\" alt=\"icon\"\r\n                        [ngClass]=\"col.classCondition[rowData[col.col]].class || ''\" />\r\n                    }\r\n                    @else{\r\n                    <i class=\"pi\" [ngClass]=\"col.classCondition[rowData[col.col]].class\"></i>\r\n                    }\r\n                    }\r\n                    @else {\r\n                    <i class=\"pi\" [ngClass]=\"col.class || ''\"></i>\r\n                    }\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=\"tableConfig?.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]=\"(tableConfig?.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>{{tableConfig?.emptyMessage || 'No se encontraron registros.'}}</p>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>", 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: SfCrudService }, { type: TableroService }], propDecorators: { opciones: [{
                 type: Input
             }], idEntidad: [{
@@ -1698,6 +1726,9 @@ class ConfigTablero {
     rowsPerPage;
     label;
     customSearch;
+    responseMapping;
+    emptyMessage;
+    showActions;
 }
 class ConfigRegistro {
     operations = [];
@@ -2789,19 +2820,30 @@ class ControlComponent {
         }
     }
     sendDependencyValue(data) {
-        if (this.control.dependency && this.setDependencyValue) {
-            if (typeof (data) !== "object") {
-                this.setDependencyValue.emit({ data: data, scope: this.control.dependency.scope });
-            }
-            else if (typeof (this.control.dependency) === "object") {
-                this.setDependencyValue.emit({ data: data[this.control.dependency.value], scope: this.control.dependency.scope });
-            }
-            else if (Array.isArray(this.control.dependency)) {
+        if (this.control.dependency) {
+            if (Array.isArray(this.control.dependency)) {
                 const array = this.control.dependency;
                 array.forEach((d) => {
-                    this.setDependencyValue.emit({ data: data[d.value], scope: d.scope });
+                    this.evaluateDependencyValue(data, d.value, d.scope);
                 });
             }
+            else {
+                this.evaluateDependencyValue(data, this.control.dependency.value, this.control.dependency.scope);
+            }
+        }
+    }
+    evaluateDependencyValue(data, value, scope) {
+        if ((this.control.subtype === 'dropdown' || this.control.subtype === 'multiselect' || this.control.subtype === 'group') && this.dataFromService.length > 0 && typeof (data) !== "object") {
+            const selectedOption = this.dataFromService.find((item) => item[this.control.config?.optionValue] === data);
+            if (selectedOption) {
+                this.setDependencyValue.emit({ data: selectedOption[value], scope: scope });
+            }
+        }
+        else if (typeof (data) !== "object") {
+            this.setDependencyValue.emit({ data: data, scope: scope });
+        }
+        else {
+            this.setDependencyValue.emit({ data: data[value], scope: scope });
         }
     }
     /**