@solcre-org/core-ui 2.12.27 → 2.12.29

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

@@ -9033,6 +9033,135 @@ class ResetPasswordModel {
     }
 }
 
+class ManualRefreshService {
+    lastUpdateTimes = new Map();
+    configs = new Map();
+    initialize(id, config) {
+        if (!this.lastUpdateTimes.has(id)) {
+            this.lastUpdateTimes.set(id, signal(null));
+        }
+        if (config) {
+            this.configs.set(id, config);
+        }
+    }
+    getLastUpdateTime(id) {
+        const timeSignal = this.lastUpdateTimes.get(id);
+        if (!timeSignal) {
+            throw new Error(`ManualRefreshService not initialized for id: ${id}`);
+        }
+        return timeSignal;
+    }
+    updateLastRefreshTime(id, date) {
+        const timeSignal = this.lastUpdateTimes.get(id);
+        if (!timeSignal) {
+            throw new Error(`ManualRefreshService not initialized for id: ${id}`);
+        }
+        const refreshDate = date || new Date();
+        const config = this.configs.get(id);
+        let formattedTime;
+        if (config?.customDateFormatter) {
+            formattedTime = config.customDateFormatter(refreshDate);
+        }
+        else {
+            const dateFormat = config?.dateFormat || {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: false
+            };
+            formattedTime = refreshDate.toLocaleString('es-ES', dateFormat);
+        }
+        timeSignal.set(formattedTime);
+    }
+    getConfig(id) {
+        return this.configs.get(id);
+    }
+    updateConfig(id, config) {
+        this.configs.set(id, config);
+    }
+    destroy(id) {
+        this.lastUpdateTimes.delete(id);
+        this.configs.delete(id);
+    }
+    getRegisteredIds() {
+        return Array.from(this.lastUpdateTimes.keys());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ManualRefreshService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ManualRefreshService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ManualRefreshService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CoreManualRefreshComponent {
+    config = input({
+        id: 'default',
+        showLastUpdate: true,
+        lastUpdateLabel: 'Last update'
+    });
+    refreshId = input(undefined);
+    onRefresh = output();
+    timestampUpdated = output();
+    manualRefreshService = inject(ManualRefreshService);
+    effectRef;
+    computedRefreshId = computed(() => this.refreshId() || this.config().id || 'default');
+    ariaLabel = computed(() => this.config().lastUpdateLabel || 'Update');
+    lastUpdateLabel = computed(() => this.config().lastUpdateLabel || 'Last update');
+    lastUpdateTimeString = computed(() => {
+        const id = this.computedRefreshId();
+        try {
+            return this.manualRefreshService.getLastUpdateTime(id)();
+        }
+        catch {
+            return null;
+        }
+    });
+    constructor() {
+        this.effectRef = effect(() => {
+            const timestamp = this.lastUpdateTimeString();
+            if (timestamp) {
+                this.timestampUpdated.emit(timestamp);
+            }
+        });
+    }
+    ngOnInit() {
+        const id = this.computedRefreshId();
+        this.manualRefreshService.initialize(id, this.config());
+        if (this.config().showLastUpdate) {
+            this.manualRefreshService.updateLastRefreshTime(id);
+        }
+    }
+    ngOnDestroy() {
+        if (this.effectRef) {
+            this.effectRef.destroy?.();
+        }
+    }
+    onRefreshClick() {
+        const id = this.computedRefreshId();
+        this.manualRefreshService.updateLastRefreshTime(id);
+        this.onRefresh.emit(id);
+    }
+    updateTimestamp(date) {
+        const id = this.computedRefreshId();
+        this.manualRefreshService.updateLastRefreshTime(id, date);
+    }
+    getLastUpdateTime() {
+        return this.lastUpdateTimeString();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CoreManualRefreshComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CoreManualRefreshComponent, isStandalone: true, selector: "core-manual-refresh", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, refreshId: { classPropertyName: "refreshId", publicName: "refreshId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRefresh: "onRefresh", timestampUpdated: "timestampUpdated" }, ngImport: i0, template: "<div class=\"u-flex\">\n    @if (config().showLastUpdate && lastUpdateTimeString()) {\n        <p class=\"u-text\">{{ lastUpdateLabel() | translate }}: {{ lastUpdateTimeString() }}</p>\n    }\n    <button class=\"c-icon-btn\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onRefreshClick()\">\n        <span class=\"fa fa-arrows-rotate\"></span>\n    </button>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CoreManualRefreshComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-manual-refresh', standalone: true, imports: [CommonModule, TranslateModule], template: "<div class=\"u-flex\">\n    @if (config().showLastUpdate && lastUpdateTimeString()) {\n        <p class=\"u-text\">{{ lastUpdateLabel() | translate }}: {{ lastUpdateTimeString() }}</p>\n    }\n    <button class=\"c-icon-btn\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onRefreshClick()\">\n        <span class=\"fa fa-arrows-rotate\"></span>\n    </button>\n</div>" }]
+        }], ctorParameters: () => [] });
+
 class ActiveFiltersEventService {
     filterRemovedSubject = new Subject();
     filtersClearedSubject = new Subject();
@@ -9107,6 +9236,9 @@ class GenericTableComponent {
     showActiveFilters = input(false);
     activeFiltersConfig = input({});
     sortConfig = input(undefined);
+    showManualRefresh = input(false);
+    manualRefreshConfig = input(undefined);
+    refreshButtonConfig = input(undefined);
     customEdit = input();
     customDelete = input();
     customView = input();
@@ -9127,6 +9259,7 @@ class GenericTableComponent {
     onClearFilters = output();
     activeFilterRemoved = output();
     activeFiltersCleared = output();
+    dataRefreshed = output();
     hasTabs = computed(() => this.modalTabs().length > 0);
     allModalFields = computed(() => {
         if (this.hasTabs()) {
@@ -9201,6 +9334,7 @@ class GenericTableComponent {
     sentinel;
     dropdownTrigger;
     dropdown;
+    manualRefreshComponent;
     observer;
     subscriptions = [];
     isInitialized = false;
@@ -9236,7 +9370,6 @@ class GenericTableComponent {
     };
     onBeforeUnload(event) {
         if (this.tableActionService.getIsModalOpen()) {
-            console.log('🔄 Página descargándose, cerrando modal automáticamente');
             this.tableActionService.closeModal();
         }
     }
@@ -10514,8 +10647,45 @@ class GenericTableComponent {
     updateRowData(rowId, updatedFields, updateFunction) {
         this.tableDataService.updateRowData(rowId, updatedFields, updateFunction);
     }
+    onManualRefresh() {
+        if (this.endpoint() && this.modelFactory()) {
+            this.tableDataService.loadDataWithParams(this.endpoint(), this.modelFactory(), this.getRefreshParams(), this.MAIN_DATA_LOADER_ID, this.customArrayKey());
+        }
+        else {
+            this.updateDisplayedDataFromServer(this.dataInput());
+        }
+        if (this.manualRefreshComponent) {
+            this.manualRefreshComponent.updateTimestamp();
+        }
+        this.dataRefreshed.emit();
+    }
+    getRefreshParams() {
+        const filterParams = this.getFilterParams();
+        const sortParams = this.tableSortService.generateServerSortParams();
+        const paginationParams = this.enablePagination()
+            ? this.paginationService.getCurrentPaginationParams(this.tableId)
+            : {};
+        const cleanedCustomParams = this.getCleanedCustomParams(sortParams);
+        return {
+            ...cleanedCustomParams,
+            ...filterParams,
+            ...sortParams,
+            ...paginationParams
+        };
+    }
+    getManualRefreshConfig() {
+        const defaultConfig = {
+            id: 'table-refresh',
+            showLastUpdate: true,
+            lastUpdateLabel: 'table.lastUpdate',
+        };
+        return {
+            ...defaultConfig,
+            ...this.manualRefreshConfig()
+        };
+    }
     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 }, 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 }, sortConfig: { classPropertyName: "sortConfig", publicName: "sortConfig", 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", dataFetched: "dataFetched", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)", "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 (isColumnSortable(column)) {\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"getColumnSortState(column) === SortDirection.ASC\"\n            [class.is-desc]=\"getColumnSortState(column) === SortDirection.DESC\"\n            [class.has-multiple-sorts]=\"isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null\"\n            [title]=\"getSortButtonTitle(column)\"\n            (click)=\"onColumnHeaderClick(column)\">\n            {{ column.label | translate }}\n            <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n              <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n            } -->\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          } @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            <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\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            @for (actionConfig of getVisibleDefaultActions(row, false); 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, row)\"\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            }\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<core-generic-pagination \n  [tableId]=\"tableId\" \n  [isServerSide]=\"!!endpoint()\">\n</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", "customHasChanges"], 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 }, sortConfig: { classPropertyName: "sortConfig", publicName: "sortConfig", isSignal: true, isRequired: false, transformFunction: null }, showManualRefresh: { classPropertyName: "showManualRefresh", publicName: "showManualRefresh", isSignal: true, isRequired: false, transformFunction: null }, manualRefreshConfig: { classPropertyName: "manualRefreshConfig", publicName: "manualRefreshConfig", isSignal: true, isRequired: false, transformFunction: null }, refreshButtonConfig: { classPropertyName: "refreshButtonConfig", publicName: "refreshButtonConfig", 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", dataFetched: "dataFetched", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", dataRefreshed: "dataRefreshed", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)", "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 }, { propertyName: "manualRefreshComponent", first: true, predicate: CoreManualRefreshComponent, 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<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  @if (showManualRefresh()) {\n    <core-manual-refresh \n      [config]=\"getManualRefreshConfig()\"\n      (onRefresh)=\"onManualRefresh()\">\n    </core-manual-refresh>\n  }\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 (isColumnSortable(column)) {\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"getColumnSortState(column) === SortDirection.ASC\"\n            [class.is-desc]=\"getColumnSortState(column) === SortDirection.DESC\"\n            [class.has-multiple-sorts]=\"isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null\"\n            [title]=\"getSortButtonTitle(column)\"\n            (click)=\"onColumnHeaderClick(column)\">\n            {{ column.label | translate }}\n            <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n              <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n            } -->\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          } @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            <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\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            @for (actionConfig of getVisibleDefaultActions(row, false); 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, row)\"\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            }\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<core-generic-pagination \n  [tableId]=\"tableId\" \n  [isServerSide]=\"!!endpoint()\">\n</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", "customHasChanges"], 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"] }, { kind: "component", type: CoreManualRefreshComponent, selector: "core-manual-refresh", inputs: ["config", "refreshId"], outputs: ["onRefresh", "timestampUpdated"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
@@ -10529,7 +10699,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         GenericButtonComponent,
                         DynamicFieldDirective,
                         ActiveFiltersComponent,
-                    ], hostDirectives: [CoreHostDirective], providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], 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 (isColumnSortable(column)) {\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"getColumnSortState(column) === SortDirection.ASC\"\n            [class.is-desc]=\"getColumnSortState(column) === SortDirection.DESC\"\n            [class.has-multiple-sorts]=\"isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null\"\n            [title]=\"getSortButtonTitle(column)\"\n            (click)=\"onColumnHeaderClick(column)\">\n            {{ column.label | translate }}\n            <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n              <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n            } -->\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          } @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            <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\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            @for (actionConfig of getVisibleDefaultActions(row, false); 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, row)\"\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            }\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<core-generic-pagination \n  [tableId]=\"tableId\" \n  [isServerSide]=\"!!endpoint()\">\n</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"] }]
+                        CoreManualRefreshComponent,
+                    ], hostDirectives: [CoreHostDirective], providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], 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<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  @if (showManualRefresh()) {\n    <core-manual-refresh \n      [config]=\"getManualRefreshConfig()\"\n      (onRefresh)=\"onManualRefresh()\">\n    </core-manual-refresh>\n  }\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 (isColumnSortable(column)) {\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"getColumnSortState(column) === SortDirection.ASC\"\n            [class.is-desc]=\"getColumnSortState(column) === SortDirection.DESC\"\n            [class.has-multiple-sorts]=\"isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null\"\n            [title]=\"getSortButtonTitle(column)\"\n            (click)=\"onColumnHeaderClick(column)\">\n            {{ column.label | translate }}\n            <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n              <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n            } -->\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          } @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            <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\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            @for (actionConfig of getVisibleDefaultActions(row, false); 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, row)\"\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            }\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<core-generic-pagination \n  [tableId]=\"tableId\" \n  [isServerSide]=\"!!endpoint()\">\n</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"] }]
         }], ctorParameters: () => [], propDecorators: { sentinel: [{
                 type: ViewChild,
                 args: ['sentinel', { static: false }]
@@ -10539,6 +10710,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             }], dropdown: [{
                 type: ViewChild,
                 args: ['dropdown']
+            }], manualRefreshComponent: [{
+                type: ViewChild,
+                args: [CoreManualRefreshComponent]
             }], onBeforeUnload: [{
                 type: HostListener,
                 args: ['window:beforeunload', ['$event']]
@@ -12069,12 +12243,12 @@ 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.12.27',
+    full: '2.12.29',
     major: 2,
     minor: 12,
-    patch: 27,
-    timestamp: '2025-09-10T15:37:04.370Z',
-    buildDate: '10/9/2025'
+    patch: 29,
+    timestamp: '2025-09-11T15:51:08.747Z',
+    buildDate: '11/9/2025'
 };
 
 class MainNavComponent {
@@ -14962,6 +15136,373 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
+var GalleryLayoutType;
+(function (GalleryLayoutType) {
+    GalleryLayoutType["MAIN_LEFT"] = "main-left";
+    GalleryLayoutType["MAIN_RIGHT"] = "main-right";
+    GalleryLayoutType["MAIN_TOP"] = "main-top";
+    GalleryLayoutType["SINGLE"] = "single";
+})(GalleryLayoutType || (GalleryLayoutType = {}));
+
+var GalleryAnimationType;
+(function (GalleryAnimationType) {
+    GalleryAnimationType["FADE"] = "fade";
+    GalleryAnimationType["SLIDE_DOWN"] = "slide-down";
+    GalleryAnimationType["SLIDE_UP"] = "slide-up";
+    GalleryAnimationType["SLIDE_LEFT"] = "slide-left";
+    GalleryAnimationType["SLIDE_RIGHT"] = "slide-right";
+    GalleryAnimationType["ZOOM"] = "zoom";
+    GalleryAnimationType["NONE"] = "none";
+})(GalleryAnimationType || (GalleryAnimationType = {}));
+
+class GalleryModalService {
+    _isModalOpen = signal(false);
+    _currentImages = signal([]);
+    _currentIndex = signal(0);
+    _isClosing = signal(false);
+    isModalOpen = this._isModalOpen.asReadonly();
+    currentImages = this._currentImages.asReadonly();
+    currentIndex = this._currentIndex.asReadonly();
+    currentImage = computed(() => {
+        const images = this._currentImages();
+        const index = this._currentIndex();
+        return images[index] || null;
+    });
+    hasPrevious = computed(() => {
+        return this._currentIndex() > 0;
+    });
+    hasNext = computed(() => {
+        const images = this._currentImages();
+        const index = this._currentIndex();
+        return index < images.length - 1;
+    });
+    imageCounter = computed(() => {
+        const total = this._currentImages().length;
+        const current = this._currentIndex() + 1;
+        return `${current} / ${total}`;
+    });
+    isClosing = this._isClosing.asReadonly();
+    openModal(images, initialIndex = 0) {
+        if (!images || images.length === 0) {
+            console.warn('GalleryModalService: No se proporcionaron imágenes');
+            return;
+        }
+        this._currentImages.set(images);
+        this._currentIndex.set(Math.min(initialIndex, images.length - 1));
+        this._isClosing.set(false);
+        this._isModalOpen.set(true);
+    }
+    closeModal(immediate = false) {
+        if (!this._isModalOpen()) {
+            return;
+        }
+        if (immediate) {
+            this._isModalOpen.set(false);
+            this._isClosing.set(false);
+            this._currentImages.set([]);
+            this._currentIndex.set(0);
+        }
+        else {
+            this._isClosing.set(true);
+            setTimeout(() => {
+                this._isModalOpen.set(false);
+                this._isClosing.set(false);
+                this._currentImages.set([]);
+                this._currentIndex.set(0);
+            }, 200);
+        }
+    }
+    previousImage() {
+        if (this.hasPrevious()) {
+            this._currentIndex.update(index => index - 1);
+        }
+    }
+    nextImage() {
+        if (this.hasNext()) {
+            this._currentIndex.update(index => index + 1);
+        }
+    }
+    goToImage(index) {
+        const images = this._currentImages();
+        if (index >= 0 && index < images.length) {
+            this._currentIndex.set(index);
+        }
+    }
+    getImageIndexById(imageId) {
+        const images = this._currentImages();
+        return images.findIndex(img => img.id === imageId);
+    }
+    updateImages(images) {
+        if (this._isModalOpen()) {
+            this._currentImages.set(images);
+            if (this._currentIndex() >= images.length) {
+                this._currentIndex.set(Math.max(0, images.length - 1));
+            }
+        }
+    }
+    reset() {
+        this._isModalOpen.set(false);
+        this._isClosing.set(false);
+        this._currentImages.set([]);
+        this._currentIndex.set(0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleryModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleryModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleryModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class GenericGalleryComponent {
+    galleryModalService = inject(GalleryModalService);
+    images = input.required();
+    config = input({});
+    imageClick = output();
+    modalOpen = output();
+    modalClose = output();
+    imageChange = output();
+    imageLoadingStates = signal(new Map());
+    imageErrorStates = signal(new Map());
+    SkeletonType = SkeletonType;
+    SkeletonAnimation = SkeletonAnimation;
+    defaultConfig = {
+        layoutType: GalleryLayoutType.MAIN_LEFT,
+        totalItems: 3,
+        gap: '8px',
+        borderRadius: '16px',
+        showCounter: true,
+        showNavigation: true,
+        enableKeyboardNavigation: true,
+        closeOnOutsideClick: true,
+        showDescription: false,
+        animationType: GalleryAnimationType.FADE,
+        animationInDuration: 400,
+        animationOutDuration: 200,
+        lazyLoading: true
+    };
+    finalConfig = computed(() => ({
+        ...this.defaultConfig,
+        ...this.config()
+    }));
+    mainImage = computed(() => {
+        const imgs = this.images();
+        return imgs.length > 0 ? imgs[0] : null;
+    });
+    thumbnailImages = computed(() => {
+        const imgs = this.images();
+        const config = this.finalConfig();
+        const totalItems = config.totalItems || 3;
+        if (config.layoutType === GalleryLayoutType.MAIN_LEFT ||
+            config.layoutType === GalleryLayoutType.MAIN_RIGHT) {
+            return imgs.slice(1, totalItems);
+        }
+        return imgs.slice(0, totalItems);
+    });
+    containerClasses = computed(() => {
+        const config = this.finalConfig();
+        const classes = ['c-gallery-grid', 'js-gallery-grid'];
+        if (config.layoutType === GalleryLayoutType.MAIN_LEFT ||
+            config.layoutType === GalleryLayoutType.MAIN_RIGHT) {
+            classes.push('c-gallery-grid--side-items');
+        }
+        if (config.customClass) {
+            classes.push(config.customClass);
+        }
+        return classes.join(' ');
+    });
+    containerStyles = computed(() => {
+        const config = this.finalConfig();
+        const inputConfig = this.config();
+        let sidesSize;
+        if (inputConfig.sidesSize) {
+            sidesSize = inputConfig.sidesSize;
+        }
+        else {
+            switch (config.layoutType) {
+                case GalleryLayoutType.MAIN_LEFT:
+                case GalleryLayoutType.MAIN_TOP:
+                    sidesSize = '1.5fr 0.5fr';
+                    break;
+                case GalleryLayoutType.MAIN_RIGHT:
+                    sidesSize = '0.5fr 1.5fr';
+                    break;
+                default:
+                    sidesSize = '1.5fr 0.5fr';
+                    break;
+            }
+        }
+        const styles = {
+            '--total-items': config.totalItems || 3,
+            '--sides-size': sidesSize,
+        };
+        return styles;
+    });
+    isModalOpen = this.galleryModalService.isModalOpen;
+    isModalClosing = this.galleryModalService.isClosing;
+    currentModalImage = this.galleryModalService.currentImage;
+    currentModalIndex = this.galleryModalService.currentIndex;
+    modalImageCounter = this.galleryModalService.imageCounter;
+    canNavigatePrevious = this.galleryModalService.hasPrevious;
+    canNavigateNext = this.galleryModalService.hasNext;
+    keyboardListener;
+    constructor() {
+        effect(() => {
+            const images = this.images();
+            if (images.length > 0) {
+                this.initializeImageStates();
+            }
+        });
+        effect(() => {
+            const config = this.finalConfig();
+            if (config.enableKeyboardNavigation && this.isModalOpen()) {
+                this.setupKeyboardNavigation();
+            }
+            else {
+                this.removeKeyboardNavigation();
+            }
+        });
+        effect(() => {
+            const image = this.currentModalImage();
+            const index = this.currentModalIndex();
+            if (image && this.isModalOpen()) {
+                this.imageChange.emit({ image, index });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.removeKeyboardNavigation();
+        this.galleryModalService.reset();
+    }
+    onImageClick(image, index) {
+        this.imageClick.emit({ image, index });
+        this.openModal(index);
+    }
+    openModal(initialIndex = 0) {
+        const images = this.images();
+        this.galleryModalService.openModal(images, initialIndex);
+        this.modalOpen.emit({ images, index: initialIndex });
+    }
+    closeModal() {
+        const config = this.finalConfig();
+        const immediate = config.animationType === GalleryAnimationType.NONE;
+        this.galleryModalService.closeModal(immediate);
+        this.modalClose.emit();
+    }
+    previousImage() {
+        this.galleryModalService.previousImage();
+    }
+    nextImage() {
+        this.galleryModalService.nextImage();
+    }
+    onOverlayClick() {
+        if (this.finalConfig().closeOnOutsideClick) {
+            this.closeModal();
+        }
+    }
+    setupKeyboardNavigation() {
+        this.removeKeyboardNavigation();
+        this.keyboardListener = (event) => {
+            if (!this.isModalOpen())
+                return;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    this.previousImage();
+                    break;
+                case 'ArrowRight':
+                    event.preventDefault();
+                    this.nextImage();
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    this.closeModal();
+                    break;
+            }
+        };
+        document.addEventListener('keydown', this.keyboardListener);
+    }
+    removeKeyboardNavigation() {
+        if (this.keyboardListener) {
+            document.removeEventListener('keydown', this.keyboardListener);
+            this.keyboardListener = undefined;
+        }
+    }
+    getModalClasses() {
+        const classes = ['c-gallery-modal', 'js-gallery-modal'];
+        if (this.isModalOpen()) {
+            classes.push('is-visible');
+        }
+        if (this.isModalClosing()) {
+            classes.push('is-closing');
+        }
+        return classes.join(' ');
+    }
+    getModalStyles() {
+        const config = this.finalConfig();
+        return {
+            '--_modal-animation-in': `${config.animationInDuration}ms`,
+            '--_modal-animation-out': `${config.animationOutDuration}ms`
+        };
+    }
+    getImageKey(image, index) {
+        return image.id?.toString() || image.src || index.toString();
+    }
+    isImageLoading(image, index) {
+        const key = this.getImageKey(image, index);
+        return this.imageLoadingStates().get(key) ?? true;
+    }
+    hasImageError(image, index) {
+        const key = this.getImageKey(image, index);
+        return this.imageErrorStates().get(key) ?? false;
+    }
+    onImageLoad(image, index) {
+        const key = this.getImageKey(image, index);
+        const loadingStates = new Map(this.imageLoadingStates());
+        const errorStates = new Map(this.imageErrorStates());
+        loadingStates.set(key, false);
+        errorStates.set(key, false);
+        this.imageLoadingStates.set(loadingStates);
+        this.imageErrorStates.set(errorStates);
+    }
+    onImageError(image, index) {
+        const key = this.getImageKey(image, index);
+        const loadingStates = new Map(this.imageLoadingStates());
+        const errorStates = new Map(this.imageErrorStates());
+        loadingStates.set(key, false);
+        errorStates.set(key, true);
+        this.imageLoadingStates.set(loadingStates);
+        this.imageErrorStates.set(errorStates);
+    }
+    initializeImageStates() {
+        const images = this.images();
+        const loadingStates = new Map();
+        const errorStates = new Map();
+        images.forEach((image, index) => {
+            const key = this.getImageKey(image, index);
+            loadingStates.set(key, true);
+            errorStates.set(key, false);
+        });
+        this.imageLoadingStates.set(loadingStates);
+        this.imageErrorStates.set(errorStates);
+    }
+    getImageLoading(isMainImage = false) {
+        const config = this.finalConfig();
+        if (isMainImage) {
+            return 'eager';
+        }
+        return config.lazyLoading ? 'lazy' : 'eager';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericGalleryComponent, isStandalone: true, selector: "core-generic-gallery", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageClick: "imageClick", modalOpen: "modalOpen", modalClose: "modalClose", imageChange: "imageChange" }, providers: [], ngImport: i0, template: "<div [class]=\"containerClasses()\" \n     [ngStyle]=\"containerStyles()\">\n  \n  @if (finalConfig().layoutType === 'main-left') {\n    @if (mainImage()) {\n      <div class=\"c-gallery-grid__img\" \n           [class.c-gallery-grid__img--loading]=\"isImageLoading(mainImage()!, 0)\"\n           [class.c-gallery-grid__img--error]=\"hasImageError(mainImage()!, 0)\">\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__skeleton\">\n            <core-generic-skeleton \n              [type]=\"SkeletonType.IMAGE\"\n              width=\"100%\"\n              height=\"100%\"\n              [animation]=\"SkeletonAnimation.SHIMMER\"\n              [ariaLabel]=\"'Loading image: ' + (mainImage()!.alt || 'Main image')\">\n            </core-generic-skeleton>\n          </div>\n        }\n        \n        @if (!isImageLoading(mainImage()!, 0) && !hasImageError(mainImage()!, 0)) {\n          <img\n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            [title]=\"mainImage()!.title || ''\"\n            [loading]=\"getImageLoading(true)\"\n            (click)=\"onImageClick(mainImage()!, 0)\">\n        }\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <img \n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            style=\"display: none;\"\n            (load)=\"onImageLoad(mainImage()!, 0)\"\n            (error)=\"onImageError(mainImage()!, 0)\">\n        }\n        \n        @if (hasImageError(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__error\">\n            <div class=\"c-gallery-grid__error-content\">\n              <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n              <span class=\"c-gallery-grid__error-text\">Error al cargar imagen</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n    \n    @if (thumbnailImages().length > 0) {\n      <div class=\"c-gallery-grid__imgs-xs\">\n        @for (image of thumbnailImages(); track image.id || $index; let i = $index) {\n          <div class=\"c-gallery-grid__img\" \n               [class.c-gallery-grid__img--loading]=\"isImageLoading(image, i + 1)\"\n               [class.c-gallery-grid__img--error]=\"hasImageError(image, i + 1)\">\n            \n            @if (isImageLoading(image, i + 1)) {\n              <div class=\"c-gallery-grid__skeleton\">\n                <core-generic-skeleton \n                  [type]=\"SkeletonType.IMAGE\"\n                  width=\"100%\"\n                  height=\"100%\"\n                  [animation]=\"SkeletonAnimation.SHIMMER\"\n                  [ariaLabel]=\"'Loading thumbnail: ' + (image.alt || 'Thumbnail')\">\n                </core-generic-skeleton>\n              </div>\n            }\n            \n            @if (!isImageLoading(image, i + 1) && !hasImageError(image, i + 1)) {\n              <img\n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                [title]=\"image.title || ''\"\n                [loading]=\"getImageLoading(false)\"\n                (click)=\"onImageClick(image, i + 1)\">\n            }\n            \n            @if (isImageLoading(image, i + 1)) {\n              <img \n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                style=\"display: none;\"\n                (load)=\"onImageLoad(image, i + 1)\"\n                (error)=\"onImageError(image, i + 1)\">\n            }\n            \n            @if (hasImageError(image, i + 1)) {\n              <div class=\"c-gallery-grid__error\">\n                <div class=\"c-gallery-grid__error-content\">\n                  <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n                  <span class=\"c-gallery-grid__error-text\">Error</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  @if (finalConfig().layoutType === 'main-right') {\n    @if (thumbnailImages().length > 0) {\n      <div class=\"c-gallery-grid__imgs-xs\">\n        @for (image of thumbnailImages(); track image.id || $index; let i = $index) {\n          <div class=\"c-gallery-grid__img\" \n               [class.c-gallery-grid__img--loading]=\"isImageLoading(image, i + 1)\"\n               [class.c-gallery-grid__img--error]=\"hasImageError(image, i + 1)\">\n            \n            @if (isImageLoading(image, i + 1)) {\n              <div class=\"c-gallery-grid__skeleton\">\n                <core-generic-skeleton \n                  [type]=\"SkeletonType.IMAGE\"\n                  width=\"100%\"\n                  height=\"100%\"\n                  [animation]=\"SkeletonAnimation.SHIMMER\"\n                  [ariaLabel]=\"'Loading thumbnail: ' + (image.alt || 'Thumbnail')\">\n                </core-generic-skeleton>\n              </div>\n            }\n            \n            @if (!isImageLoading(image, i + 1) && !hasImageError(image, i + 1)) {\n              <img\n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                [title]=\"image.title || ''\"\n                [loading]=\"getImageLoading(false)\"\n                (click)=\"onImageClick(image, i + 1)\">\n            }\n            \n            @if (isImageLoading(image, i + 1)) {\n              <img \n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                style=\"display: none;\"\n                (load)=\"onImageLoad(image, i + 1)\"\n                (error)=\"onImageError(image, i + 1)\">\n            }\n            \n            @if (hasImageError(image, i + 1)) {\n              <div class=\"c-gallery-grid__error\">\n                <div class=\"c-gallery-grid__error-content\">\n                  <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n                  <span class=\"c-gallery-grid__error-text\">Error</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    \n    @if (mainImage()) {\n      <div class=\"c-gallery-grid__img\" \n           [class.c-gallery-grid__img--loading]=\"isImageLoading(mainImage()!, 0)\"\n           [class.c-gallery-grid__img--error]=\"hasImageError(mainImage()!, 0)\">\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__skeleton\">\n            <core-generic-skeleton \n              [type]=\"SkeletonType.IMAGE\"\n              width=\"100%\"\n              height=\"100%\"\n              [animation]=\"SkeletonAnimation.SHIMMER\"\n              [ariaLabel]=\"'Loading image: ' + (mainImage()!.alt || 'Main image')\">\n            </core-generic-skeleton>\n          </div>\n        }\n        \n        @if (!isImageLoading(mainImage()!, 0) && !hasImageError(mainImage()!, 0)) {\n          <img\n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            [title]=\"mainImage()!.title || ''\"\n            [loading]=\"getImageLoading(true)\"\n            (click)=\"onImageClick(mainImage()!, 0)\">\n        }\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <img \n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            style=\"display: none;\"\n            (load)=\"onImageLoad(mainImage()!, 0)\"\n            (error)=\"onImageError(mainImage()!, 0)\">\n        }\n        \n        @if (hasImageError(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__error\">\n            <div class=\"c-gallery-grid__error-content\">\n              <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n              <span class=\"c-gallery-grid__error-text\">Error al cargar imagen</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  @if (finalConfig().layoutType === 'main-top') {\n    @if (mainImage()) {\n      <div class=\"c-gallery-grid__img\" \n           [class.c-gallery-grid__img--loading]=\"isImageLoading(mainImage()!, 0)\"\n           [class.c-gallery-grid__img--error]=\"hasImageError(mainImage()!, 0)\">\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__skeleton\">\n            <core-generic-skeleton \n              [type]=\"SkeletonType.IMAGE\"\n              width=\"100%\"\n              height=\"100%\"\n              [animation]=\"SkeletonAnimation.SHIMMER\"\n              [ariaLabel]=\"'Loading image: ' + (mainImage()!.alt || 'Main image')\">\n            </core-generic-skeleton>\n          </div>\n        }\n        \n        @if (!isImageLoading(mainImage()!, 0) && !hasImageError(mainImage()!, 0)) {\n          <img\n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            [title]=\"mainImage()!.title || ''\"\n            [loading]=\"getImageLoading(true)\"\n            (click)=\"onImageClick(mainImage()!, 0)\">\n        }\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <img \n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            style=\"display: none;\"\n            (load)=\"onImageLoad(mainImage()!, 0)\"\n            (error)=\"onImageError(mainImage()!, 0)\">\n        }\n        \n        @if (hasImageError(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__error\">\n            <div class=\"c-gallery-grid__error-content\">\n              <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n              <span class=\"c-gallery-grid__error-text\">Error al cargar imagen</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n    \n    @if (thumbnailImages().length > 0) {\n      <div class=\"c-gallery-grid__imgs-xs\">\n        @for (image of thumbnailImages(); track image.id || $index; let i = $index) {\n          <div class=\"c-gallery-grid__img\" \n               [class.c-gallery-grid__img--loading]=\"isImageLoading(image, i + 1)\"\n               [class.c-gallery-grid__img--error]=\"hasImageError(image, i + 1)\">\n            \n            @if (isImageLoading(image, i + 1)) {\n              <div class=\"c-gallery-grid__skeleton\">\n                <core-generic-skeleton \n                  [type]=\"SkeletonType.IMAGE\"\n                  width=\"100%\"\n                  height=\"100%\"\n                  [animation]=\"SkeletonAnimation.SHIMMER\"\n                  [ariaLabel]=\"'Loading thumbnail: ' + (image.alt || 'Thumbnail')\">\n                </core-generic-skeleton>\n              </div>\n            }\n            \n            @if (!isImageLoading(image, i + 1) && !hasImageError(image, i + 1)) {\n              <img\n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                [title]=\"image.title || ''\"\n                [loading]=\"getImageLoading(false)\"\n                (click)=\"onImageClick(image, i + 1)\">\n            }\n            \n            @if (isImageLoading(image, i + 1)) {\n              <img \n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                style=\"display: none;\"\n                (load)=\"onImageLoad(image, i + 1)\"\n                (error)=\"onImageError(image, i + 1)\">\n            }\n            \n            @if (hasImageError(image, i + 1)) {\n              <div class=\"c-gallery-grid__error\">\n                <div class=\"c-gallery-grid__error-content\">\n                  <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n                  <span class=\"c-gallery-grid__error-text\">Error</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  @if (finalConfig().layoutType === 'single') {\n    @if (mainImage()) {\n      <div class=\"c-gallery-grid__img\" \n           [class.c-gallery-grid__img--loading]=\"isImageLoading(mainImage()!, 0)\"\n           [class.c-gallery-grid__img--error]=\"hasImageError(mainImage()!, 0)\">\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__skeleton\">\n            <core-generic-skeleton \n              [type]=\"SkeletonType.IMAGE\"\n              width=\"100%\"\n              height=\"100%\"\n              [animation]=\"SkeletonAnimation.SHIMMER\"\n              [ariaLabel]=\"'Loading image: ' + (mainImage()!.alt || 'Single image')\">\n            </core-generic-skeleton>\n          </div>\n        }\n        \n        @if (!isImageLoading(mainImage()!, 0) && !hasImageError(mainImage()!, 0)) {\n          <img\n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            [title]=\"mainImage()!.title || ''\"\n            [loading]=\"getImageLoading(true)\"\n            (click)=\"onImageClick(mainImage()!, 0)\">\n        }\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <img \n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            style=\"display: none;\"\n            (load)=\"onImageLoad(mainImage()!, 0)\"\n            (error)=\"onImageError(mainImage()!, 0)\">\n        }\n        \n        @if (hasImageError(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__error\">\n            <div class=\"c-gallery-grid__error-content\">\n              <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n              <span class=\"c-gallery-grid__error-text\">Error al cargar imagen</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n\n@if (isModalOpen()) {\n  <div [class]=\"getModalClasses()\" \n       [ngStyle]=\"getModalStyles()\">\n    \n    <span class=\"c-gallery-modal__close icon-cross-thin js-gallery-modal-close\" \n          (click)=\"closeModal()\"></span>\n    \n    <div class=\"c-gallery-modal__overlay js-gallery-modal-close\" \n         (click)=\"onOverlayClick()\"></div>\n    \n    <div class=\"c-gallery-modal__content\">\n      \n      @if (canNavigatePrevious()) {\n        <button class=\"c-gallery-modal__nav c-gallery-modal__nav--prev icon-arrow-left\" \n                (click)=\"previousImage()\"\n                [attr.aria-label]=\"'Imagen anterior'\">\n        </button>\n      }\n      \n      @if (canNavigateNext()) {\n        <button class=\"c-gallery-modal__nav c-gallery-modal__nav--next icon-arrow-right\" \n                (click)=\"nextImage()\"\n                [attr.aria-label]=\"'Siguiente imagen'\">\n        </button>\n      }\n      \n      @if (currentModalImage()) {\n        <div class=\"c-gallery-modal__image-container\">\n          <img \n            [src]=\"currentModalImage()!.src\"\n            [alt]=\"currentModalImage()!.alt || ''\"\n            [title]=\"currentModalImage()!.title || ''\"\n            loading=\"eager\"\n            class=\"c-gallery-modal__image\">\n          \n          @if (finalConfig().showDescription && currentModalImage()!.description) {\n            <div class=\"c-gallery-modal__description\">\n              {{ currentModalImage()!.description }}\n            </div>\n          }\n        </div>\n      }\n      \n      @if (finalConfig().showCounter) {\n        <div class=\"c-gallery-modal__counter\">\n          {{ modalImageCounter() }}\n        </div>\n      }\n      \n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: GenericSkeletonComponent, selector: "core-generic-skeleton", inputs: ["config", "items", "type", "size", "width", "height", "animated", "animation", "lines", "customClass", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericGalleryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-generic-gallery', standalone: true, imports: [CommonModule, GenericSkeletonComponent], providers: [], template: "<div [class]=\"containerClasses()\" \n     [ngStyle]=\"containerStyles()\">\n  \n  @if (finalConfig().layoutType === 'main-left') {\n    @if (mainImage()) {\n      <div class=\"c-gallery-grid__img\" \n           [class.c-gallery-grid__img--loading]=\"isImageLoading(mainImage()!, 0)\"\n           [class.c-gallery-grid__img--error]=\"hasImageError(mainImage()!, 0)\">\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__skeleton\">\n            <core-generic-skeleton \n              [type]=\"SkeletonType.IMAGE\"\n              width=\"100%\"\n              height=\"100%\"\n              [animation]=\"SkeletonAnimation.SHIMMER\"\n              [ariaLabel]=\"'Loading image: ' + (mainImage()!.alt || 'Main image')\">\n            </core-generic-skeleton>\n          </div>\n        }\n        \n        @if (!isImageLoading(mainImage()!, 0) && !hasImageError(mainImage()!, 0)) {\n          <img\n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            [title]=\"mainImage()!.title || ''\"\n            [loading]=\"getImageLoading(true)\"\n            (click)=\"onImageClick(mainImage()!, 0)\">\n        }\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <img \n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            style=\"display: none;\"\n            (load)=\"onImageLoad(mainImage()!, 0)\"\n            (error)=\"onImageError(mainImage()!, 0)\">\n        }\n        \n        @if (hasImageError(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__error\">\n            <div class=\"c-gallery-grid__error-content\">\n              <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n              <span class=\"c-gallery-grid__error-text\">Error al cargar imagen</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n    \n    @if (thumbnailImages().length > 0) {\n      <div class=\"c-gallery-grid__imgs-xs\">\n        @for (image of thumbnailImages(); track image.id || $index; let i = $index) {\n          <div class=\"c-gallery-grid__img\" \n               [class.c-gallery-grid__img--loading]=\"isImageLoading(image, i + 1)\"\n               [class.c-gallery-grid__img--error]=\"hasImageError(image, i + 1)\">\n            \n            @if (isImageLoading(image, i + 1)) {\n              <div class=\"c-gallery-grid__skeleton\">\n                <core-generic-skeleton \n                  [type]=\"SkeletonType.IMAGE\"\n                  width=\"100%\"\n                  height=\"100%\"\n                  [animation]=\"SkeletonAnimation.SHIMMER\"\n                  [ariaLabel]=\"'Loading thumbnail: ' + (image.alt || 'Thumbnail')\">\n                </core-generic-skeleton>\n              </div>\n            }\n            \n            @if (!isImageLoading(image, i + 1) && !hasImageError(image, i + 1)) {\n              <img\n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                [title]=\"image.title || ''\"\n                [loading]=\"getImageLoading(false)\"\n                (click)=\"onImageClick(image, i + 1)\">\n            }\n            \n            @if (isImageLoading(image, i + 1)) {\n              <img \n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                style=\"display: none;\"\n                (load)=\"onImageLoad(image, i + 1)\"\n                (error)=\"onImageError(image, i + 1)\">\n            }\n            \n            @if (hasImageError(image, i + 1)) {\n              <div class=\"c-gallery-grid__error\">\n                <div class=\"c-gallery-grid__error-content\">\n                  <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n                  <span class=\"c-gallery-grid__error-text\">Error</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  @if (finalConfig().layoutType === 'main-right') {\n    @if (thumbnailImages().length > 0) {\n      <div class=\"c-gallery-grid__imgs-xs\">\n        @for (image of thumbnailImages(); track image.id || $index; let i = $index) {\n          <div class=\"c-gallery-grid__img\" \n               [class.c-gallery-grid__img--loading]=\"isImageLoading(image, i + 1)\"\n               [class.c-gallery-grid__img--error]=\"hasImageError(image, i + 1)\">\n            \n            @if (isImageLoading(image, i + 1)) {\n              <div class=\"c-gallery-grid__skeleton\">\n                <core-generic-skeleton \n                  [type]=\"SkeletonType.IMAGE\"\n                  width=\"100%\"\n                  height=\"100%\"\n                  [animation]=\"SkeletonAnimation.SHIMMER\"\n                  [ariaLabel]=\"'Loading thumbnail: ' + (image.alt || 'Thumbnail')\">\n                </core-generic-skeleton>\n              </div>\n            }\n            \n            @if (!isImageLoading(image, i + 1) && !hasImageError(image, i + 1)) {\n              <img\n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                [title]=\"image.title || ''\"\n                [loading]=\"getImageLoading(false)\"\n                (click)=\"onImageClick(image, i + 1)\">\n            }\n            \n            @if (isImageLoading(image, i + 1)) {\n              <img \n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                style=\"display: none;\"\n                (load)=\"onImageLoad(image, i + 1)\"\n                (error)=\"onImageError(image, i + 1)\">\n            }\n            \n            @if (hasImageError(image, i + 1)) {\n              <div class=\"c-gallery-grid__error\">\n                <div class=\"c-gallery-grid__error-content\">\n                  <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n                  <span class=\"c-gallery-grid__error-text\">Error</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    \n    @if (mainImage()) {\n      <div class=\"c-gallery-grid__img\" \n           [class.c-gallery-grid__img--loading]=\"isImageLoading(mainImage()!, 0)\"\n           [class.c-gallery-grid__img--error]=\"hasImageError(mainImage()!, 0)\">\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__skeleton\">\n            <core-generic-skeleton \n              [type]=\"SkeletonType.IMAGE\"\n              width=\"100%\"\n              height=\"100%\"\n              [animation]=\"SkeletonAnimation.SHIMMER\"\n              [ariaLabel]=\"'Loading image: ' + (mainImage()!.alt || 'Main image')\">\n            </core-generic-skeleton>\n          </div>\n        }\n        \n        @if (!isImageLoading(mainImage()!, 0) && !hasImageError(mainImage()!, 0)) {\n          <img\n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            [title]=\"mainImage()!.title || ''\"\n            [loading]=\"getImageLoading(true)\"\n            (click)=\"onImageClick(mainImage()!, 0)\">\n        }\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <img \n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            style=\"display: none;\"\n            (load)=\"onImageLoad(mainImage()!, 0)\"\n            (error)=\"onImageError(mainImage()!, 0)\">\n        }\n        \n        @if (hasImageError(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__error\">\n            <div class=\"c-gallery-grid__error-content\">\n              <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n              <span class=\"c-gallery-grid__error-text\">Error al cargar imagen</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  @if (finalConfig().layoutType === 'main-top') {\n    @if (mainImage()) {\n      <div class=\"c-gallery-grid__img\" \n           [class.c-gallery-grid__img--loading]=\"isImageLoading(mainImage()!, 0)\"\n           [class.c-gallery-grid__img--error]=\"hasImageError(mainImage()!, 0)\">\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__skeleton\">\n            <core-generic-skeleton \n              [type]=\"SkeletonType.IMAGE\"\n              width=\"100%\"\n              height=\"100%\"\n              [animation]=\"SkeletonAnimation.SHIMMER\"\n              [ariaLabel]=\"'Loading image: ' + (mainImage()!.alt || 'Main image')\">\n            </core-generic-skeleton>\n          </div>\n        }\n        \n        @if (!isImageLoading(mainImage()!, 0) && !hasImageError(mainImage()!, 0)) {\n          <img\n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            [title]=\"mainImage()!.title || ''\"\n            [loading]=\"getImageLoading(true)\"\n            (click)=\"onImageClick(mainImage()!, 0)\">\n        }\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <img \n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            style=\"display: none;\"\n            (load)=\"onImageLoad(mainImage()!, 0)\"\n            (error)=\"onImageError(mainImage()!, 0)\">\n        }\n        \n        @if (hasImageError(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__error\">\n            <div class=\"c-gallery-grid__error-content\">\n              <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n              <span class=\"c-gallery-grid__error-text\">Error al cargar imagen</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n    \n    @if (thumbnailImages().length > 0) {\n      <div class=\"c-gallery-grid__imgs-xs\">\n        @for (image of thumbnailImages(); track image.id || $index; let i = $index) {\n          <div class=\"c-gallery-grid__img\" \n               [class.c-gallery-grid__img--loading]=\"isImageLoading(image, i + 1)\"\n               [class.c-gallery-grid__img--error]=\"hasImageError(image, i + 1)\">\n            \n            @if (isImageLoading(image, i + 1)) {\n              <div class=\"c-gallery-grid__skeleton\">\n                <core-generic-skeleton \n                  [type]=\"SkeletonType.IMAGE\"\n                  width=\"100%\"\n                  height=\"100%\"\n                  [animation]=\"SkeletonAnimation.SHIMMER\"\n                  [ariaLabel]=\"'Loading thumbnail: ' + (image.alt || 'Thumbnail')\">\n                </core-generic-skeleton>\n              </div>\n            }\n            \n            @if (!isImageLoading(image, i + 1) && !hasImageError(image, i + 1)) {\n              <img\n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                [title]=\"image.title || ''\"\n                [loading]=\"getImageLoading(false)\"\n                (click)=\"onImageClick(image, i + 1)\">\n            }\n            \n            @if (isImageLoading(image, i + 1)) {\n              <img \n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                style=\"display: none;\"\n                (load)=\"onImageLoad(image, i + 1)\"\n                (error)=\"onImageError(image, i + 1)\">\n            }\n            \n            @if (hasImageError(image, i + 1)) {\n              <div class=\"c-gallery-grid__error\">\n                <div class=\"c-gallery-grid__error-content\">\n                  <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n                  <span class=\"c-gallery-grid__error-text\">Error</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  @if (finalConfig().layoutType === 'single') {\n    @if (mainImage()) {\n      <div class=\"c-gallery-grid__img\" \n           [class.c-gallery-grid__img--loading]=\"isImageLoading(mainImage()!, 0)\"\n           [class.c-gallery-grid__img--error]=\"hasImageError(mainImage()!, 0)\">\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__skeleton\">\n            <core-generic-skeleton \n              [type]=\"SkeletonType.IMAGE\"\n              width=\"100%\"\n              height=\"100%\"\n              [animation]=\"SkeletonAnimation.SHIMMER\"\n              [ariaLabel]=\"'Loading image: ' + (mainImage()!.alt || 'Single image')\">\n            </core-generic-skeleton>\n          </div>\n        }\n        \n        @if (!isImageLoading(mainImage()!, 0) && !hasImageError(mainImage()!, 0)) {\n          <img\n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            [title]=\"mainImage()!.title || ''\"\n            [loading]=\"getImageLoading(true)\"\n            (click)=\"onImageClick(mainImage()!, 0)\">\n        }\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <img \n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            style=\"display: none;\"\n            (load)=\"onImageLoad(mainImage()!, 0)\"\n            (error)=\"onImageError(mainImage()!, 0)\">\n        }\n        \n        @if (hasImageError(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__error\">\n            <div class=\"c-gallery-grid__error-content\">\n              <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n              <span class=\"c-gallery-grid__error-text\">Error al cargar imagen</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n\n@if (isModalOpen()) {\n  <div [class]=\"getModalClasses()\" \n       [ngStyle]=\"getModalStyles()\">\n    \n    <span class=\"c-gallery-modal__close icon-cross-thin js-gallery-modal-close\" \n          (click)=\"closeModal()\"></span>\n    \n    <div class=\"c-gallery-modal__overlay js-gallery-modal-close\" \n         (click)=\"onOverlayClick()\"></div>\n    \n    <div class=\"c-gallery-modal__content\">\n      \n      @if (canNavigatePrevious()) {\n        <button class=\"c-gallery-modal__nav c-gallery-modal__nav--prev icon-arrow-left\" \n                (click)=\"previousImage()\"\n                [attr.aria-label]=\"'Imagen anterior'\">\n        </button>\n      }\n      \n      @if (canNavigateNext()) {\n        <button class=\"c-gallery-modal__nav c-gallery-modal__nav--next icon-arrow-right\" \n                (click)=\"nextImage()\"\n                [attr.aria-label]=\"'Siguiente imagen'\">\n        </button>\n      }\n      \n      @if (currentModalImage()) {\n        <div class=\"c-gallery-modal__image-container\">\n          <img \n            [src]=\"currentModalImage()!.src\"\n            [alt]=\"currentModalImage()!.alt || ''\"\n            [title]=\"currentModalImage()!.title || ''\"\n            loading=\"eager\"\n            class=\"c-gallery-modal__image\">\n          \n          @if (finalConfig().showDescription && currentModalImage()!.description) {\n            <div class=\"c-gallery-modal__description\">\n              {{ currentModalImage()!.description }}\n            </div>\n          }\n        </div>\n      }\n      \n      @if (finalConfig().showCounter) {\n        <div class=\"c-gallery-modal__counter\">\n          {{ modalImageCounter() }}\n        </div>\n      }\n      \n    </div>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
+
 class CacheBustingInterceptor {
     intercept(req, next) {
         if (req.url.includes('/assets/i18n/') && req.url.endsWith('.json')) {
@@ -15149,5 +15690,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CarouselComponent, ChatMessagePosition, ChatMessageType, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, DynamicFieldsHelper, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FilePreviewActionType, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericChatComponent, GenericChatService, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericSkeletonComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SkeletonAnimation, SkeletonService, SkeletonSize, SkeletonType, SmartFieldComponent, SortDirection, SortMode, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TableSortService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UsersModel, VERSION, equalToValidator, isSameDate, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader };
+export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CarouselComponent, ChatMessagePosition, ChatMessageType, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreManualRefreshComponent, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, DynamicFieldsHelper, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FilePreviewActionType, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GalleryAnimationType, GalleryLayoutType, GalleryModalService, GenericButtonComponent, GenericChatComponent, GenericChatService, GenericDocumentationComponent, GenericGalleryComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericSkeletonComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ManualRefreshService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SkeletonAnimation, SkeletonService, SkeletonSize, SkeletonType, SmartFieldComponent, SortDirection, SortMode, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TableSortService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UsersModel, VERSION, equalToValidator, isSameDate, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader };
 //# sourceMappingURL=solcre-org-core-ui.mjs.map