@solcre-org/core-ui 2.11.13 → 2.11.15

package/fesm2022/solcre-org-core-ui.mjs

@@ -7215,6 +7215,7 @@ class GenericTableComponent {
     fileUploadConfig = input(undefined);
     rowStyleConfigs = input([]);
     columnDisabledConfigs = input([]);
+    rowVisibilityConfigs = input([]);
     headerOrder = input(undefined);
     showActiveFilters = input(false);
     activeFiltersConfig = input({});
@@ -7360,7 +7361,8 @@ class GenericTableComponent {
             if (this.currentSortColumn() === null && this.currentSortDirection() === null) {
                 this.originalUnsortedData.set([...inputData]);
             }
-            this.displayedData.set([...inputData]);
+            const visibleData = this.applyRowVisibilityFilter(inputData);
+            this.displayedData.set([...visibleData]);
             this.loadingStates.mainData = false;
             this.loadingStates.filterData = false;
             this.checkAndHideLoader();
@@ -7506,11 +7508,12 @@ class GenericTableComponent {
         if (this.currentSortColumn() === null && this.currentSortDirection() === null) {
             this.originalUnsortedData.set([...data]);
         }
+        const visibleData = this.applyRowVisibilityFilter(data);
         if (this.endpoint() && this.endpoint() !== '') {
-            this.displayedData.set([...data]);
+            this.displayedData.set([...visibleData]);
         }
         else {
-            this.tableDataService.updateDisplayedData(data, this.enablePagination(), this.paginationService, this.tableId, this.itemsLoaded());
+            this.tableDataService.updateDisplayedData(visibleData, this.enablePagination(), this.paginationService, this.tableId, this.itemsLoaded());
             const displayed = this.tableDataService.getDisplayedData();
             this.displayedData.set([...displayed]);
         }
@@ -7525,11 +7528,15 @@ class GenericTableComponent {
     }
     applyCustomFilters(filterValues) {
         this.filterService.setCustomFilters(filterValues);
+        this.currentFilterValues.set(new Map(filterValues));
         if (this.endpoint()) {
             const transformedFilters = this.transformFiltersForPayload(filterValues);
             this.startLoaderTimeout(this.FILTER_LOADER_ID);
             this.tableDataService.updateFilters(transformedFilters, this.FILTER_LOADER_ID);
         }
+        else {
+            this.updateDisplayedDataFromServer(this.filterService.getFilteredData());
+        }
     }
     sortData(column) {
         if (column.sortable === false)
@@ -7882,11 +7889,15 @@ class GenericTableComponent {
     handleFilterChange(filterValues) {
         this.onFilterChange.emit(filterValues);
         this.filterService.setCustomFilters(filterValues);
+        this.currentFilterValues.set(new Map(filterValues));
         if (this.endpoint()) {
             const transformedFilters = this.transformFiltersForPayload(filterValues);
             this.startLoaderTimeout(this.FILTER_LOADER_ID);
             this.tableDataService.updateFilters(transformedFilters, this.FILTER_LOADER_ID);
         }
+        else {
+            this.updateDisplayedDataFromServer(this.filterService.getFilteredData());
+        }
     }
     transformFiltersForPayload(filterValues) {
         const transformedFilters = new Map();
@@ -7899,11 +7910,16 @@ class GenericTableComponent {
     }
     handleClearFilters() {
         this.filterService.setCustomFilters(new Map());
+        this.currentFilterValues.set(new Map());
         if (this.endpoint()) {
             this.startLoaderTimeout(this.FILTER_LOADER_ID);
             this.tableDataService.updateFilters(new Map(), this.FILTER_LOADER_ID);
             this.onClearFilters.emit();
         }
+        else {
+            this.updateDisplayedDataFromServer(this.filterService.getFilteredData());
+            this.onClearFilters.emit();
+        }
     }
     toggleSubmenu(rowId, event) {
         event.stopPropagation();
@@ -8005,6 +8021,32 @@ class GenericTableComponent {
         }
         return classes.join(' ');
     }
+    isRowVisible(row) {
+        const visibilityConfigs = this.rowVisibilityConfigs();
+        if (!visibilityConfigs || visibilityConfigs.length === 0) {
+            return true;
+        }
+        const activeFilters = this.currentFilterValues();
+        const applicableConfigs = visibilityConfigs
+            .filter(config => config.hideCondition(row))
+            .sort((a, b) => (b.priority || 0) - (a.priority || 0));
+        if (applicableConfigs.length === 0) {
+            return true;
+        }
+        for (const config of applicableConfigs) {
+            if (config.showWhenFiltered && config.showWhenFiltered(row, activeFilters)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    applyRowVisibilityFilter(data) {
+        const visibilityConfigs = this.rowVisibilityConfigs();
+        if (!visibilityConfigs || visibilityConfigs.length === 0) {
+            return data;
+        }
+        return data.filter(row => this.isRowVisible(row));
+    }
     generateActiveFilters() {
         const activeFilters = [];
         const currentFilters = this.currentFilterValues();
@@ -8405,7 +8447,7 @@ class GenericTableComponent {
         this.tableDataService.updateRowData(rowId, updatedFields, updateFunction);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericTableComponent, isStandalone: true, selector: "core-generic-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, modalFields: { classPropertyName: "modalFields", publicName: "modalFields", isSignal: true, isRequired: false, transformFunction: null }, modalTabs: { classPropertyName: "modalTabs", publicName: "modalTabs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, filterButtonConfig: { classPropertyName: "filterButtonConfig", publicName: "filterButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonConfig: { classPropertyName: "createButtonConfig", publicName: "createButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "dataInput", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: true, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, customParams: { classPropertyName: "customParams", publicName: "customParams", isSignal: true, isRequired: false, transformFunction: null }, customArrayKey: { classPropertyName: "customArrayKey", publicName: "customArrayKey", isSignal: true, isRequired: false, transformFunction: null }, listTitle: { classPropertyName: "listTitle", publicName: "listTitle", isSignal: true, isRequired: false, transformFunction: null }, moreData: { classPropertyName: "moreData", publicName: "moreData", isSignal: true, isRequired: false, transformFunction: null }, inModal: { classPropertyName: "inModal", publicName: "inModal", isSignal: true, isRequired: false, transformFunction: null }, expansionConfig: { classPropertyName: "expansionConfig", publicName: "expansionConfig", isSignal: true, isRequired: false, transformFunction: null }, fileUploadConfig: { classPropertyName: "fileUploadConfig", publicName: "fileUploadConfig", isSignal: true, isRequired: false, transformFunction: null }, rowStyleConfigs: { classPropertyName: "rowStyleConfigs", publicName: "rowStyleConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnDisabledConfigs: { classPropertyName: "columnDisabledConfigs", publicName: "columnDisabledConfigs", isSignal: true, isRequired: false, transformFunction: null }, headerOrder: { classPropertyName: "headerOrder", publicName: "headerOrder", isSignal: true, isRequired: false, transformFunction: null }, showActiveFilters: { classPropertyName: "showActiveFilters", publicName: "showActiveFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersConfig: { classPropertyName: "activeFiltersConfig", publicName: "activeFiltersConfig", isSignal: true, isRequired: false, transformFunction: null }, customEdit: { classPropertyName: "customEdit", publicName: "customEdit", isSignal: true, isRequired: false, transformFunction: null }, customDelete: { classPropertyName: "customDelete", publicName: "customDelete", isSignal: true, isRequired: false, transformFunction: null }, customView: { classPropertyName: "customView", publicName: "customView", isSignal: true, isRequired: false, transformFunction: null }, customSave: { classPropertyName: "customSave", publicName: "customSave", isSignal: true, isRequired: false, transformFunction: null }, useCustomSave: { classPropertyName: "useCustomSave", publicName: "useCustomSave", isSignal: true, isRequired: false, transformFunction: null }, onApiError: { classPropertyName: "onApiError", publicName: "onApiError", isSignal: true, isRequired: false, transformFunction: null }, inlineEditConfig: { classPropertyName: "inlineEditConfig", publicName: "inlineEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", selectionChanged: "selectionChanged", dataCreated: "dataCreated", dataUpdated: "dataUpdated", dataDeleted: "dataDeleted", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "document:click": "closeSubmenu()" } }, providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\">\n  </core-active-filters>\n}\n\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <th class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n        </th>\n        }\n        @for (column of columns(); track $index) {\n        <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n          @if (column.sortable !== false) {\n          <!-- \u2705 Solcre: Agregado [title] din\u00E1mico y capacidad de volver al estado sin selecci\u00F3n -->\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\"\n            [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n            [title]=\"getSortTitle(column) | translate\" (click)=\"sortData(column)\">\n            {{ column.label | translate }}\n            <span class=\"c-table-order__controls\">\n              <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n              <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n            </span>\n          </button>\n          <!-- <button \n                class=\"c-table__order\" \n                [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\" \n                [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n                (click)=\"sortData(column)\">\n                {{ column.label | translate }}\n                <span class=\"icon-order-arrow\"></span>\n              </button> -->\n          } @else {\n          {{ column.label | translate }}\n          }\n        </th>\n        }\n        @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n        <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n      <tr [ngClass]=\"getRowClasses(row)\" \n          [class.is-editing-inline]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\">\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <td class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n        </td>\n        }\n        @for (column of columns(); track $index) {\n        <td [attr.data-label]=\"column.label | translate\" \n            [ngClass]=\"[\n              column.align ? 'u-align-' + column.align : '',\n              getCellDisabledClasses(row, column)\n            ]\" \n            [class.is-editing]=\"isColumnEditable(column, row)\"\n            [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n          @if (column.template) {\n          <!-- Todo: Ver qu\u00E9 es esto -->\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n          } @else if (isColumnEditable(column, row)) {\n            <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n            <div class=\"c-table__inline-edit\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n              <div\n                coreDynamicField\n                [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                [value]=\"getEditingValue(row, column)\"\n                [mode]=\"ModalMode.EDIT\"\n                [errors]=\"getCellErrors(row, column)\"\n                [rowData]=\"row\"\n                (valueChange)=\"onCellValueChange(row, column, $event)\"\n                (onBlurEvent)=\"onCellBlur(row, column)\"\n                (onEnterEvent)=\"onCellEnter(row, column)\"\n              ></div>\n            </div>\n          } @else {\n            <div class=\"c-table__content\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n              column) }}\n            </div>\n          }\n        </td>\n        }\n\n        <!-- Actions-->\n\n        @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n        <td class=\"u-align-right\">\n          <div class=\"c-table__actions\">\n\n            @for (actionConfig of regularDefaultActions(); track actionConfig.action) {\n              @if (hasPermission(actionConfig)) {\n                @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n                actionConfig.action === TableAction.DELETE) {\n                  <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig)\"\n                    (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n                  </core-generic-button>\n                }\n              }\n            }\n            @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n              @if (hasPermission(customAction)) {\n                <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n                  (buttonClick)=\"onButtonClick($event, customAction, row)\">\n                </core-generic-button>\n              }\n            }\n\n            @if (hasExtraActionsForRow(row)) {\n              <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n                (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n              </core-generic-button>\n              <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"extraDefaultActions()\"\n                [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n                [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n              </core-dropdown>\n            }\n\n            @if (expansionConfig()?.enabled) {\n              <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n              <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n              </core-generic-button>\n            }\n\n          </div> <!-- .c-table__actions -->\n        </td> <!-- td parent of .c-table__actions -->\n        } <!-- @if (showActions() -->\n\n\n      </tr>\n      @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n        <!-- Todo: Ver que es esto -->\n        <tr class=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\n            <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n        </tr>\n      }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<core-generic-pagination [tableId]=\"tableId\"></core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>", styles: [".in-modal .c-table thead th:last-child,.c-table tbody td:last-child{text-align:left}.c-table__order-btn--asc{transform:rotate(180deg)}.c-table__order-btn--desc{transform:rotate(0)}.c-table tr.is-editing-inline{background-color:#fff3cd;border-left:3px solid #ffc107}.c-table tr.is-editing-inline td{background-color:#fff3cd}.c-table tr.is-editing-inline:hover td{background-color:#ffecb5}.expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: GenericPaginationComponent, selector: "core-generic-pagination", inputs: ["tableId", "isServerSide"] }, { kind: "component", type: DropdownComponent, selector: "core-dropdown", inputs: ["rowId", "triggerElementId", "extraDefaultActions", "extraCustomActions", "row"], outputs: ["actionTriggered", "customActionTriggered"] }, { kind: "component", type: FilterModalComponent, selector: "core-filter-modal", inputs: ["isOpen", "filters", "currentFilterValues"], outputs: ["close", "filterChange", "clearFilters", "globalFilterChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: ActiveFiltersComponent, selector: "core-active-filters", inputs: ["activeFilters", "config"], outputs: ["onFilterRemove", "onClearAll"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericTableComponent, isStandalone: true, selector: "core-generic-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, modalFields: { classPropertyName: "modalFields", publicName: "modalFields", isSignal: true, isRequired: false, transformFunction: null }, modalTabs: { classPropertyName: "modalTabs", publicName: "modalTabs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, filterButtonConfig: { classPropertyName: "filterButtonConfig", publicName: "filterButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonConfig: { classPropertyName: "createButtonConfig", publicName: "createButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "dataInput", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: true, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, customParams: { classPropertyName: "customParams", publicName: "customParams", isSignal: true, isRequired: false, transformFunction: null }, customArrayKey: { classPropertyName: "customArrayKey", publicName: "customArrayKey", isSignal: true, isRequired: false, transformFunction: null }, listTitle: { classPropertyName: "listTitle", publicName: "listTitle", isSignal: true, isRequired: false, transformFunction: null }, moreData: { classPropertyName: "moreData", publicName: "moreData", isSignal: true, isRequired: false, transformFunction: null }, inModal: { classPropertyName: "inModal", publicName: "inModal", isSignal: true, isRequired: false, transformFunction: null }, expansionConfig: { classPropertyName: "expansionConfig", publicName: "expansionConfig", isSignal: true, isRequired: false, transformFunction: null }, fileUploadConfig: { classPropertyName: "fileUploadConfig", publicName: "fileUploadConfig", isSignal: true, isRequired: false, transformFunction: null }, rowStyleConfigs: { classPropertyName: "rowStyleConfigs", publicName: "rowStyleConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnDisabledConfigs: { classPropertyName: "columnDisabledConfigs", publicName: "columnDisabledConfigs", isSignal: true, isRequired: false, transformFunction: null }, rowVisibilityConfigs: { classPropertyName: "rowVisibilityConfigs", publicName: "rowVisibilityConfigs", isSignal: true, isRequired: false, transformFunction: null }, headerOrder: { classPropertyName: "headerOrder", publicName: "headerOrder", isSignal: true, isRequired: false, transformFunction: null }, showActiveFilters: { classPropertyName: "showActiveFilters", publicName: "showActiveFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersConfig: { classPropertyName: "activeFiltersConfig", publicName: "activeFiltersConfig", isSignal: true, isRequired: false, transformFunction: null }, customEdit: { classPropertyName: "customEdit", publicName: "customEdit", isSignal: true, isRequired: false, transformFunction: null }, customDelete: { classPropertyName: "customDelete", publicName: "customDelete", isSignal: true, isRequired: false, transformFunction: null }, customView: { classPropertyName: "customView", publicName: "customView", isSignal: true, isRequired: false, transformFunction: null }, customSave: { classPropertyName: "customSave", publicName: "customSave", isSignal: true, isRequired: false, transformFunction: null }, useCustomSave: { classPropertyName: "useCustomSave", publicName: "useCustomSave", isSignal: true, isRequired: false, transformFunction: null }, onApiError: { classPropertyName: "onApiError", publicName: "onApiError", isSignal: true, isRequired: false, transformFunction: null }, inlineEditConfig: { classPropertyName: "inlineEditConfig", publicName: "inlineEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", selectionChanged: "selectionChanged", dataCreated: "dataCreated", dataUpdated: "dataUpdated", dataDeleted: "dataDeleted", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "document:click": "closeSubmenu()" } }, providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\">\n  </core-active-filters>\n}\n\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <th class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n        </th>\n        }\n        @for (column of columns(); track $index) {\n        <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n          @if (column.sortable !== false) {\n          <!-- \u2705 Solcre: Agregado [title] din\u00E1mico y capacidad de volver al estado sin selecci\u00F3n -->\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\"\n            [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n            [title]=\"getSortTitle(column) | translate\" (click)=\"sortData(column)\">\n            {{ column.label | translate }}\n            <span class=\"c-table-order__controls\">\n              <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n              <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n            </span>\n          </button>\n          <!-- <button \n                class=\"c-table__order\" \n                [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\" \n                [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n                (click)=\"sortData(column)\">\n                {{ column.label | translate }}\n                <span class=\"icon-order-arrow\"></span>\n              </button> -->\n          } @else {\n          {{ column.label | translate }}\n          }\n        </th>\n        }\n        @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n        <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n      <tr [ngClass]=\"getRowClasses(row)\" \n          [class.is-editing-inline]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\">\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <td class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n        </td>\n        }\n        @for (column of columns(); track $index) {\n        <td [attr.data-label]=\"column.label | translate\" \n            [ngClass]=\"[\n              column.align ? 'u-align-' + column.align : '',\n              getCellDisabledClasses(row, column)\n            ]\" \n            [class.is-editing]=\"isColumnEditable(column, row)\"\n            [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n          @if (column.template) {\n          <!-- Todo: Ver qu\u00E9 es esto -->\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n          } @else if (isColumnEditable(column, row)) {\n            <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n            <div class=\"c-table__inline-edit\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n              <div\n                coreDynamicField\n                [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                [value]=\"getEditingValue(row, column)\"\n                [mode]=\"ModalMode.EDIT\"\n                [errors]=\"getCellErrors(row, column)\"\n                [rowData]=\"row\"\n                (valueChange)=\"onCellValueChange(row, column, $event)\"\n                (onBlurEvent)=\"onCellBlur(row, column)\"\n                (onEnterEvent)=\"onCellEnter(row, column)\"\n              ></div>\n            </div>\n          } @else {\n            <div class=\"c-table__content\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n              column) }}\n            </div>\n          }\n        </td>\n        }\n\n        <!-- Actions-->\n\n        @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n        <td class=\"u-align-right\">\n          <div class=\"c-table__actions\">\n\n            @for (actionConfig of regularDefaultActions(); track actionConfig.action) {\n              @if (hasPermission(actionConfig)) {\n                @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n                actionConfig.action === TableAction.DELETE) {\n                  <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig)\"\n                    (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n                  </core-generic-button>\n                }\n              }\n            }\n            @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n              @if (hasPermission(customAction)) {\n                <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n                  (buttonClick)=\"onButtonClick($event, customAction, row)\">\n                </core-generic-button>\n              }\n            }\n\n            @if (hasExtraActionsForRow(row)) {\n              <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n                (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n              </core-generic-button>\n              <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"extraDefaultActions()\"\n                [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n                [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n              </core-dropdown>\n            }\n\n            @if (expansionConfig()?.enabled) {\n              <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n              <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n              </core-generic-button>\n            }\n\n          </div> <!-- .c-table__actions -->\n        </td> <!-- td parent of .c-table__actions -->\n        } <!-- @if (showActions() -->\n\n\n      </tr>\n      @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n        <!-- Todo: Ver que es esto -->\n        <tr class=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\n            <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n        </tr>\n      }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<core-generic-pagination [tableId]=\"tableId\"></core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>", styles: [".in-modal .c-table thead th:last-child,.c-table tbody td:last-child{text-align:left}.c-table__order-btn--asc{transform:rotate(180deg)}.c-table__order-btn--desc{transform:rotate(0)}.c-table tr.is-editing-inline{background-color:#fff3cd;border-left:3px solid #ffc107}.c-table tr.is-editing-inline td{background-color:#fff3cd}.c-table tr.is-editing-inline:hover td{background-color:#ffecb5}.expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: GenericPaginationComponent, selector: "core-generic-pagination", inputs: ["tableId", "isServerSide"] }, { kind: "component", type: DropdownComponent, selector: "core-dropdown", inputs: ["rowId", "triggerElementId", "extraDefaultActions", "extraCustomActions", "row"], outputs: ["actionTriggered", "customActionTriggered"] }, { kind: "component", type: FilterModalComponent, selector: "core-filter-modal", inputs: ["isOpen", "filters", "currentFilterValues"], outputs: ["close", "filterChange", "clearFilters", "globalFilterChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: ActiveFiltersComponent, selector: "core-active-filters", inputs: ["activeFilters", "config"], outputs: ["onFilterRemove", "onClearAll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
@@ -8949,6 +8991,105 @@ class SidebarCustomModalService {
     currentConfig = signal(null);
     componentRef = null;
     viewContainerRef = null;
+    componentRegistry = new Map();
+    async openComponent(componentPath, data, customClass, onClose) {
+        try {
+            if (componentPath.startsWith('./') || componentPath.startsWith('../')) {
+                const module = await this.loadComponentByPath(componentPath);
+                return this.createModalFromModule(module, data, customClass, onClose);
+            }
+            if (this.componentRegistry.has(componentPath)) {
+                return this.openRegisteredComponent(componentPath, data, customClass, onClose);
+            }
+            return this.loadComponentByConvention(componentPath, data, customClass, onClose);
+        }
+        catch (error) {
+            console.error('Error opening component:', componentPath, error);
+            throw new Error(`Failed to load component: ${componentPath}`);
+        }
+    }
+    async loadComponentByConvention(componentName, data, customClass, onClose) {
+        const conventions = [
+            `./components/${componentName}/${componentName}.component`,
+            `./components/${componentName}-modal/${componentName}-modal.component`,
+            `./modals/${componentName}/${componentName}.component`,
+            `./components/${componentName}.component`,
+        ];
+        for (const convention of conventions) {
+            try {
+                const module = await this.loadComponentByPath(convention);
+                return this.createModalFromModule(module, data, customClass, onClose);
+            }
+            catch (error) {
+                continue;
+            }
+        }
+        throw new Error(`Component '${componentName}' not found using any convention. Tried: ${conventions.join(', ')}`);
+    }
+    async loadComponentByPath(path) {
+        return import(/* @vite-ignore */ path);
+    }
+    createModalFromModule(module, data, customClass, onClose) {
+        const componentKey = Object.keys(module).find(key => key.endsWith('Component') &&
+            (key.includes('Modal') || key.includes('Dialog') || Object.keys(module).length === 1)) || Object.keys(module)[0];
+        if (!componentKey) {
+            throw new Error('No component found in module');
+        }
+        const Component = module[componentKey];
+        this.openComponentModal(Component, data, {
+            customClass,
+            onClose
+        });
+    }
+    openModal(componentPath, data, options) {
+        return this.openComponent(componentPath, data, options?.customClass, options?.onClose);
+    }
+    openLazyModal(lazyImport, data, options) {
+        return lazyImport()
+            .then(module => this.createModalFromModule(module, data, options?.customClass, options?.onClose))
+            .catch(error => {
+            console.error('Error loading lazy modal:', error);
+            throw new Error(`Failed to load lazy modal: ${error.message}`);
+        });
+    }
+    openDirectModal(component, data, options) {
+        this.openComponentModal(component, data, {
+            customClass: options?.customClass,
+            onClose: options?.onClose
+        });
+    }
+    registerComponent(name, loader) {
+        this.componentRegistry.set(name, loader);
+    }
+    openRegisteredComponent(componentName, data, customClass, onClose) {
+        const loader = this.componentRegistry.get(componentName);
+        if (!loader) {
+            throw new Error(`Component '${componentName}' not registered. Use registerComponent() first.`);
+        }
+        return loader()
+            .then((module) => {
+            const componentKey = Object.keys(module).find(key => key.endsWith('Component') || key === componentName);
+            if (!componentKey) {
+                throw new Error(`No component found in module for '${componentName}'`);
+            }
+            const Component = module[componentKey];
+            this.openComponentModal(Component, data, {
+                customClass,
+                onClose
+            });
+        })
+            .catch(error => {
+            console.error('Error loading registered component:', componentName, error);
+            throw new Error(`Failed to load component '${componentName}': ${error.message}`);
+        });
+    }
+    getRegisteredComponents() {
+        return Array.from(this.componentRegistry.keys());
+    }
+    registerAndOpenComponent(name, importPath, data, customClass, onClose) {
+        this.registerComponent(name, () => import(/* @vite-ignore */ importPath));
+        return this.openRegisteredComponent(name, data, customClass, onClose);
+    }
     getIsOpen() {
         return this.isOpen;
     }
@@ -8958,6 +9099,9 @@ class SidebarCustomModalService {
     setViewContainerRef(vcr) {
         this.viewContainerRef = vcr;
     }
+    resetViewContainerRef() {
+        this.viewContainerRef = null;
+    }
     openComponentModal(component, data, config) {
         this.closeModal();
         const modalConfig = {
@@ -8969,14 +9113,29 @@ class SidebarCustomModalService {
         };
         this.currentConfig.set(modalConfig);
         this.isOpen.set(true);
+        this.createComponentWhenReady(component, data);
+    }
+    createComponentWhenReady(component, data) {
+        if (this.viewContainerRef) {
+            this.createComponentInstance(component, data);
+        }
+        else {
+            setTimeout(() => this.createComponentWhenReady(component, data), 10);
+        }
+    }
+    createComponentInstance(component, data) {
+        if (this.componentRef) {
+            return;
+        }
         if (this.viewContainerRef && component) {
             this.componentRef = this.viewContainerRef.createComponent(component);
             if (data) {
                 Object.keys(data).forEach(key => {
-                    if (this.componentRef?.instance.hasOwnProperty(key)) {
+                    if (key in this.componentRef.instance) {
                         this.componentRef.instance[key] = data[key];
                     }
                 });
+                this.componentRef.changeDetectorRef.detectChanges();
             }
             if (this.componentRef.instance.modalClosed) {
                 this.componentRef.instance.modalClosed.subscribe(() => {
@@ -9002,6 +9161,7 @@ class SidebarCustomModalService {
             this.componentRef.destroy();
             this.componentRef = null;
         }
+        this.resetViewContainerRef();
         const config = this.currentConfig();
         if (config?.onClose) {
             config.onClose();
@@ -9009,6 +9169,20 @@ class SidebarCustomModalService {
         this.isOpen.set(false);
         this.currentConfig.set(null);
     }
+    openDynamicComponentModal(importPath, componentName, data, config) {
+        return import(/* @vite-ignore */ importPath)
+            .then((module) => {
+            const Component = module[componentName];
+            if (!Component) {
+                throw new Error(`Component ${componentName} not found in module ${importPath}`);
+            }
+            this.openComponentModal(Component, data, config);
+        })
+            .catch(error => {
+            console.error('Error loading dynamic component:', componentName, 'from:', importPath, error);
+            throw new Error(`Failed to load component ${componentName} from ${importPath}`);
+        });
+    }
     onBackdropClick() {
         const config = this.currentConfig();
         if (config?.closeOnBackdrop !== false) {
@@ -9271,12 +9445,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 class SidebarCustomModalComponent {
     modalService = inject(SidebarCustomModalService);
+    cdr = inject(ChangeDetectorRef);
     dynamicComponent;
-    ngOnInit() {
-        setTimeout(() => {
-            this.modalService.setViewContainerRef(this.dynamicComponent);
+    hasInitializedViewContainerRef = false;
+    currentModalState = false;
+    constructor() {
+        effect(() => {
+            const isOpen = this.modalService.getIsOpen()();
+            if (this.currentModalState && !isOpen) {
+                this.hasInitializedViewContainerRef = false;
+                this.modalService['viewContainerRef'] = null;
+            }
+            this.currentModalState = isOpen;
         });
     }
+    ngAfterViewInit() {
+        this.setupViewContainerRefIfAvailable();
+    }
+    ngAfterViewChecked() {
+        this.setupViewContainerRefIfAvailable();
+    }
+    setupViewContainerRefIfAvailable() {
+        if (!this.modalService.getIsOpen()() || !this.dynamicComponent) {
+            return;
+        }
+        const hasViewContainerRef = !!this.modalService['viewContainerRef'];
+        const hasComponentRef = !!this.modalService['componentRef'];
+        if (!hasViewContainerRef || !this.hasInitializedViewContainerRef) {
+            this.modalService.setViewContainerRef(this.dynamicComponent);
+            this.hasInitializedViewContainerRef = true;
+            setTimeout(() => this.cdr.detectChanges(), 0);
+            const config = this.modalService.getCurrentConfig()();
+            if (config?.component && !hasComponentRef) {
+                setTimeout(() => {
+                    this.modalService.createComponentInstance(config.component, config.data);
+                    this.cdr.detectChanges();
+                }, 0);
+            }
+        }
+    }
     ngOnDestroy() {
         this.modalService.closeModal();
     }
@@ -9298,12 +9505,12 @@ class SidebarCustomModalComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SidebarCustomModalComponent, isStandalone: true, selector: "core-sidebar-custom-modal", viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["dynamicComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
     @if(modalService.getIsOpen()()) {
       <ng-container #dynamicComponent></ng-container>
-          
-        @if(getCurrentConfig()?.template) {
+      
+      @if(getCurrentConfig()?.template) {
         <ng-container 
             *ngTemplateOutlet="getCurrentConfig()!.template!; context: { $implicit: getCurrentConfig()?.data }">
         </ng-container>
-        }
+      }
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
@@ -9316,18 +9523,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     template: `
     @if(modalService.getIsOpen()()) {
       <ng-container #dynamicComponent></ng-container>
-          
-        @if(getCurrentConfig()?.template) {
+      
+      @if(getCurrentConfig()?.template) {
         <ng-container 
             *ngTemplateOutlet="getCurrentConfig()!.template!; context: { $implicit: getCurrentConfig()?.data }">
         </ng-container>
-        }
+      }
     }
   `,
                 }]
-        }], propDecorators: { dynamicComponent: [{
+        }], ctorParameters: () => [], propDecorators: { dynamicComponent: [{
                 type: ViewChild,
-                args: ['dynamicComponent', { read: ViewContainerRef }]
+                args: ['dynamicComponent', { read: ViewContainerRef, static: false }]
             }] } });
 
 var TimelineStatus;
@@ -9787,11 +9994,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // Este archivo es generado automáticamente por scripts/update-version.js
 // No edites manualmente este archivo
 const VERSION = {
-    full: '2.11.13',
+    full: '2.11.15',
     major: 2,
     minor: 11,
-    patch: 13,
-    timestamp: '2025-08-22T09:27:21.226Z',
+    patch: 15,
+    timestamp: '2025-08-22T11:27:30.822Z',
     buildDate: '22/8/2025'
 };