@solcre-org/core-ui 2.12.29 → 2.12.31

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

@@ -5193,7 +5193,7 @@ class GenericModalComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericModalComponent, isStandalone: true, selector: "core-generic-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null }, customViewTemplate: { classPropertyName: "customViewTemplate", publicName: "customViewTemplate", isSignal: true, isRequired: false, transformFunction: null }, buttonConfig: { classPropertyName: "buttonConfig", publicName: "buttonConfig", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, customHasChanges: { classPropertyName: "customHasChanges", publicName: "customHasChanges", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", close: "close", modalData: "modalData" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-modal\" [class.is-visible]=\"isOpen()\" [class.is-closing]=\"isClosing()\">\n  <div class=\"c-modal__overlay\" (click)=\"onClose()\"></div>\n  <div class=\"c-modal__holder\">\n    <div class=\"c-modal__header\">\n      <p class=\"c-modal__title\">\n        {{ title() | translate }}\n      </p>\n      <core-generic-button\n        [config]=\"closeButtonConfig()\"\n        (buttonClick)=\"onClose()\">\n      </core-generic-button>\n    </div>\n    <div class=\"c-modal__body\">\n      @if (editedData()) {\n        @if (hasTabs()) {\n          <nav core-generic-tabs\n            [config]=\"genericTabsConfig()\"\n            [activeTabId]=\"activeTabId()\"\n            [hasTabErrors]=\"hasTabErrorsFunction\"\n            (tabChange)=\"onGenericTabChange($event)\">\n          </nav>\n        }\n\n        @if (mode() === ModalMode.VIEW) {\n          <core-data-list\n            [items]=\"dataListItems()\"\n            [customTemplate]=\"customViewTemplate()\"\n            [emptyMessage]=\"'modal.noData'\"\n          ></core-data-list>\n        } @else {\n          <div class=\"c-entry-group\">\n            @if (customTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"customTemplate()\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: editedData(),\n                    mode: mode(),\n                    updateField: onFieldValueChange.bind(this),\n                    save: onSave.bind(this),\n                    close: onClose.bind(this),\n                    activeTabId: activeTabId(),\n                    onTabChange: onTabChange.bind(this),\n                    getFieldErrors: getFieldErrors.bind(this),\n                    validateAllFields: validateAllFields.bind(this),\n                    hasErrors: hasErrors(),\n                    setCustomHasChanges: setCustomHasChanges.bind(this)\n                  }\"\n                ></ng-container>\n            } @else {\n              @for (field of (hasTabs() ? activeTabFields() : fields()); track field.key) {\n                @if (getFieldConfig(field).visible) {\n                  <div\n                    coreDynamicField\n                    [field]=\"getFieldConfig(field)\"\n                    [value]=\"editedData()![field.key]\"\n                    [mode]=\"mode()\"\n                    [errors]=\"getFieldErrors(field.key)\"\n                    [rowData]=\"editedData()\"\n                    [formValue]=\"editedData()\"\n                    (valueChange)=\"onFieldValueChange(field.key, $event)\"\n                    (onBlurEvent)=\"validateAllFields()\"\n                    (selectionChange)=\"onSelectionChange($event)\"\n                  ></div>\n                }\n              }\n            }\n          </div> <!-- .c-entry-group -->\n        }\n      } @else {\n        <p>{{ 'modal.noData' | translate }}</p>\n      }\n    </div>\n    <div class=\"c-modal__bottom\">\n      @if (buttonConfig().length > 0) {\n        @for (button of buttonConfig(); track $index) {\n          <core-generic-button\n            [config]=\"getCustomButtonConfig(button)\"\n            [data]=\"data()\"\n            (buttonClick)=\"onCustomButtonClick(button)\">\n          </core-generic-button>\n        }\n      } @else {\n        <core-generic-button\n          [config]=\"defaultCancelButtonConfig()\"\n          (buttonClick)=\"onClose()\">\n        </core-generic-button>\n        @if (mode() !== ModalMode.VIEW) {\n          <core-generic-button\n            [config]=\"defaultSaveButtonConfig()\"\n            (buttonClick)=\"onSave()\">\n          </core-generic-button>\n        }\n      }\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: GenericTabsComponent, selector: "nav[core-generic-tabs]", inputs: ["config", "activeTabId", "hasTabErrors"], outputs: ["tabClick", "tabChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "component", type: DataListComponent, selector: "core-data-list", inputs: ["items", "fields", "data", "customTemplate", "showEmptyMessage", "emptyMessage", "cssClasses"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericModalComponent, isStandalone: true, selector: "core-generic-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null }, customViewTemplate: { classPropertyName: "customViewTemplate", publicName: "customViewTemplate", isSignal: true, isRequired: false, transformFunction: null }, buttonConfig: { classPropertyName: "buttonConfig", publicName: "buttonConfig", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, customHasChanges: { classPropertyName: "customHasChanges", publicName: "customHasChanges", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", close: "close", modalData: "modalData" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-modal\" [class.is-visible]=\"isOpen()\" [class.is-closing]=\"isClosing()\">\n  <div class=\"c-modal__overlay\" (click)=\"onClose()\"></div>\n  <div class=\"c-modal__holder\">\n    <div class=\"c-modal__header\">\n      <p class=\"c-modal__title\">\n        {{ title() | translate }}\n      </p>\n      <core-generic-button\n        [config]=\"closeButtonConfig()\"\n        (buttonClick)=\"onClose()\">\n      </core-generic-button>\n    </div>\n    <div class=\"c-modal__body\">\n      @if (editedData() || customTemplate()) {\n        @if (hasTabs()) {\n          <nav core-generic-tabs\n            [config]=\"genericTabsConfig()\"\n            [activeTabId]=\"activeTabId()\"\n            [hasTabErrors]=\"hasTabErrorsFunction\"\n            (tabChange)=\"onGenericTabChange($event)\">\n          </nav>\n        }\n\n        @if (customTemplate()) {\n          <div class=\"c-entry-group\">\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: editedData(),\n                mode: mode(),\n                updateField: onFieldValueChange.bind(this),\n                save: onSave.bind(this),\n                close: onClose.bind(this),\n                activeTabId: activeTabId(),\n                onTabChange: onTabChange.bind(this),\n                getFieldErrors: getFieldErrors.bind(this),\n                validateAllFields: validateAllFields.bind(this),\n                hasErrors: hasErrors(),\n                setCustomHasChanges: setCustomHasChanges.bind(this)\n              }\"\n            ></ng-container>\n          </div> <!-- .c-entry-group -->\n        } @else if (editedData()) {\n          @if (mode() === ModalMode.VIEW) {\n            <core-data-list\n              [items]=\"dataListItems()\"\n              [customTemplate]=\"customViewTemplate()\"\n              [emptyMessage]=\"'modal.noData'\"\n            ></core-data-list>\n          } @else {\n            <div class=\"c-entry-group\">\n              @for (field of (hasTabs() ? activeTabFields() : fields()); track field.key) {\n                @if (getFieldConfig(field).visible) {\n                  <div\n                    coreDynamicField\n                    [field]=\"getFieldConfig(field)\"\n                    [value]=\"editedData()![field.key]\"\n                    [mode]=\"mode()\"\n                    [errors]=\"getFieldErrors(field.key)\"\n                    [rowData]=\"editedData()\"\n                    [formValue]=\"editedData()\"\n                    (valueChange)=\"onFieldValueChange(field.key, $event)\"\n                    (onBlurEvent)=\"validateAllFields()\"\n                    (selectionChange)=\"onSelectionChange($event)\"\n                  ></div>\n                }\n              }\n            </div> <!-- .c-entry-group -->\n          }\n        }\n      } @else {\n        <p>{{ 'modal.noData' | translate }}</p>\n      }\n    </div>\n    <div class=\"c-modal__bottom\">\n      @if (buttonConfig().length > 0) {\n        @for (button of buttonConfig(); track $index) {\n          <core-generic-button\n            [config]=\"getCustomButtonConfig(button)\"\n            [data]=\"data()\"\n            (buttonClick)=\"onCustomButtonClick(button)\">\n          </core-generic-button>\n        }\n      } @else {\n        <core-generic-button\n          [config]=\"defaultCancelButtonConfig()\"\n          (buttonClick)=\"onClose()\">\n        </core-generic-button>\n        @if (mode() !== ModalMode.VIEW) {\n          <core-generic-button\n            [config]=\"defaultSaveButtonConfig()\"\n            (buttonClick)=\"onSave()\">\n          </core-generic-button>\n        }\n      }\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: GenericTabsComponent, selector: "nav[core-generic-tabs]", inputs: ["config", "activeTabId", "hasTabErrors"], outputs: ["tabClick", "tabChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "component", type: DataListComponent, selector: "core-data-list", inputs: ["items", "fields", "data", "customTemplate", "showEmptyMessage", "emptyMessage", "cssClasses"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericModalComponent, decorators: [{
             type: Component,
@@ -5206,7 +5206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         GenericTabsComponent,
                         GenericButtonComponent,
                         DataListComponent,
-                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"c-modal\" [class.is-visible]=\"isOpen()\" [class.is-closing]=\"isClosing()\">\n  <div class=\"c-modal__overlay\" (click)=\"onClose()\"></div>\n  <div class=\"c-modal__holder\">\n    <div class=\"c-modal__header\">\n      <p class=\"c-modal__title\">\n        {{ title() | translate }}\n      </p>\n      <core-generic-button\n        [config]=\"closeButtonConfig()\"\n        (buttonClick)=\"onClose()\">\n      </core-generic-button>\n    </div>\n    <div class=\"c-modal__body\">\n      @if (editedData()) {\n        @if (hasTabs()) {\n          <nav core-generic-tabs\n            [config]=\"genericTabsConfig()\"\n            [activeTabId]=\"activeTabId()\"\n            [hasTabErrors]=\"hasTabErrorsFunction\"\n            (tabChange)=\"onGenericTabChange($event)\">\n          </nav>\n        }\n\n        @if (mode() === ModalMode.VIEW) {\n          <core-data-list\n            [items]=\"dataListItems()\"\n            [customTemplate]=\"customViewTemplate()\"\n            [emptyMessage]=\"'modal.noData'\"\n          ></core-data-list>\n        } @else {\n          <div class=\"c-entry-group\">\n            @if (customTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"customTemplate()\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: editedData(),\n                    mode: mode(),\n                    updateField: onFieldValueChange.bind(this),\n                    save: onSave.bind(this),\n                    close: onClose.bind(this),\n                    activeTabId: activeTabId(),\n                    onTabChange: onTabChange.bind(this),\n                    getFieldErrors: getFieldErrors.bind(this),\n                    validateAllFields: validateAllFields.bind(this),\n                    hasErrors: hasErrors(),\n                    setCustomHasChanges: setCustomHasChanges.bind(this)\n                  }\"\n                ></ng-container>\n            } @else {\n              @for (field of (hasTabs() ? activeTabFields() : fields()); track field.key) {\n                @if (getFieldConfig(field).visible) {\n                  <div\n                    coreDynamicField\n                    [field]=\"getFieldConfig(field)\"\n                    [value]=\"editedData()![field.key]\"\n                    [mode]=\"mode()\"\n                    [errors]=\"getFieldErrors(field.key)\"\n                    [rowData]=\"editedData()\"\n                    [formValue]=\"editedData()\"\n                    (valueChange)=\"onFieldValueChange(field.key, $event)\"\n                    (onBlurEvent)=\"validateAllFields()\"\n                    (selectionChange)=\"onSelectionChange($event)\"\n                  ></div>\n                }\n              }\n            }\n          </div> <!-- .c-entry-group -->\n        }\n      } @else {\n        <p>{{ 'modal.noData' | translate }}</p>\n      }\n    </div>\n    <div class=\"c-modal__bottom\">\n      @if (buttonConfig().length > 0) {\n        @for (button of buttonConfig(); track $index) {\n          <core-generic-button\n            [config]=\"getCustomButtonConfig(button)\"\n            [data]=\"data()\"\n            (buttonClick)=\"onCustomButtonClick(button)\">\n          </core-generic-button>\n        }\n      } @else {\n        <core-generic-button\n          [config]=\"defaultCancelButtonConfig()\"\n          (buttonClick)=\"onClose()\">\n        </core-generic-button>\n        @if (mode() !== ModalMode.VIEW) {\n          <core-generic-button\n            [config]=\"defaultSaveButtonConfig()\"\n            (buttonClick)=\"onSave()\">\n          </core-generic-button>\n        }\n      }\n    </div>\n  </div>\n</div>" }]
+                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"c-modal\" [class.is-visible]=\"isOpen()\" [class.is-closing]=\"isClosing()\">\n  <div class=\"c-modal__overlay\" (click)=\"onClose()\"></div>\n  <div class=\"c-modal__holder\">\n    <div class=\"c-modal__header\">\n      <p class=\"c-modal__title\">\n        {{ title() | translate }}\n      </p>\n      <core-generic-button\n        [config]=\"closeButtonConfig()\"\n        (buttonClick)=\"onClose()\">\n      </core-generic-button>\n    </div>\n    <div class=\"c-modal__body\">\n      @if (editedData() || customTemplate()) {\n        @if (hasTabs()) {\n          <nav core-generic-tabs\n            [config]=\"genericTabsConfig()\"\n            [activeTabId]=\"activeTabId()\"\n            [hasTabErrors]=\"hasTabErrorsFunction\"\n            (tabChange)=\"onGenericTabChange($event)\">\n          </nav>\n        }\n\n        @if (customTemplate()) {\n          <div class=\"c-entry-group\">\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: editedData(),\n                mode: mode(),\n                updateField: onFieldValueChange.bind(this),\n                save: onSave.bind(this),\n                close: onClose.bind(this),\n                activeTabId: activeTabId(),\n                onTabChange: onTabChange.bind(this),\n                getFieldErrors: getFieldErrors.bind(this),\n                validateAllFields: validateAllFields.bind(this),\n                hasErrors: hasErrors(),\n                setCustomHasChanges: setCustomHasChanges.bind(this)\n              }\"\n            ></ng-container>\n          </div> <!-- .c-entry-group -->\n        } @else if (editedData()) {\n          @if (mode() === ModalMode.VIEW) {\n            <core-data-list\n              [items]=\"dataListItems()\"\n              [customTemplate]=\"customViewTemplate()\"\n              [emptyMessage]=\"'modal.noData'\"\n            ></core-data-list>\n          } @else {\n            <div class=\"c-entry-group\">\n              @for (field of (hasTabs() ? activeTabFields() : fields()); track field.key) {\n                @if (getFieldConfig(field).visible) {\n                  <div\n                    coreDynamicField\n                    [field]=\"getFieldConfig(field)\"\n                    [value]=\"editedData()![field.key]\"\n                    [mode]=\"mode()\"\n                    [errors]=\"getFieldErrors(field.key)\"\n                    [rowData]=\"editedData()\"\n                    [formValue]=\"editedData()\"\n                    (valueChange)=\"onFieldValueChange(field.key, $event)\"\n                    (onBlurEvent)=\"validateAllFields()\"\n                    (selectionChange)=\"onSelectionChange($event)\"\n                  ></div>\n                }\n              }\n            </div> <!-- .c-entry-group -->\n          }\n        }\n      } @else {\n        <p>{{ 'modal.noData' | translate }}</p>\n      }\n    </div>\n    <div class=\"c-modal__bottom\">\n      @if (buttonConfig().length > 0) {\n        @for (button of buttonConfig(); track $index) {\n          <core-generic-button\n            [config]=\"getCustomButtonConfig(button)\"\n            [data]=\"data()\"\n            (buttonClick)=\"onCustomButtonClick(button)\">\n          </core-generic-button>\n        }\n      } @else {\n        <core-generic-button\n          [config]=\"defaultCancelButtonConfig()\"\n          (buttonClick)=\"onClose()\">\n        </core-generic-button>\n        @if (mode() !== ModalMode.VIEW) {\n          <core-generic-button\n            [config]=\"defaultSaveButtonConfig()\"\n            (buttonClick)=\"onSave()\">\n          </core-generic-button>\n        }\n      }\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: () => [] });
 
 class PaginationService {
@@ -12243,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.29',
+    full: '2.12.31',
     major: 2,
     minor: 12,
-    patch: 29,
-    timestamp: '2025-09-11T15:51:08.747Z',
-    buildDate: '11/9/2025'
+    patch: 31,
+    timestamp: '2025-09-12T11:51:34.140Z',
+    buildDate: '12/9/2025'
 };
 
 class MainNavComponent {
@@ -12823,6 +12823,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 args: ['document:mouseup']
             }] } });
 
+class GalleryModalGlobalService {
+    _isModalOpen = signal(false);
+    _isClosing = signal(false);
+    _currentImages = signal([]);
+    _currentIndex = signal(0);
+    isModalOpen = this._isModalOpen.asReadonly();
+    isClosing = this._isClosing.asReadonly();
+    currentImages = this._currentImages.asReadonly();
+    currentIndex = this._currentIndex.asReadonly();
+    currentImage = computed(() => {
+        const images = this._currentImages();
+        const index = this._currentIndex();
+        return images.length > 0 && index >= 0 && index < images.length
+            ? images[index]
+            : null;
+    });
+    imageCounter = computed(() => {
+        const images = this._currentImages();
+        const index = this._currentIndex();
+        return images.length > 0
+            ? `${index + 1} / ${images.length}`
+            : '';
+    });
+    hasPrevious = computed(() => this._currentIndex() > 0);
+    hasNext = computed(() => {
+        const images = this._currentImages();
+        const index = this._currentIndex();
+        return index < images.length - 1;
+    });
+    openModal(images, initialIndex = 0) {
+        if (!images || images.length === 0) {
+            console.warn('GalleryModalGlobalService: 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 (images && images.length > 0) {
+            const currentIndex = Math.min(this._currentIndex(), images.length - 1);
+            this._currentImages.set(images);
+            this._currentIndex.set(currentIndex);
+        }
+    }
+    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: GalleryModalGlobalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleryModalGlobalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleryModalGlobalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class GalleryModalComponent {
+    galleryModalService = inject(GalleryModalGlobalService);
+    isModalOpen = this.galleryModalService.isModalOpen;
+    isModalClosing = this.galleryModalService.isClosing;
+    currentImage = computed(() => this.galleryModalService.currentImage());
+    currentIndex = this.galleryModalService.currentIndex;
+    imageCounter = computed(() => this.galleryModalService.imageCounter());
+    canNavigatePrevious = computed(() => this.galleryModalService.hasPrevious());
+    canNavigateNext = computed(() => this.galleryModalService.hasNext());
+    keyboardListener;
+    constructor() { }
+    ngOnDestroy() { }
+    onKeyDown(event) {
+        if (!this.isModalOpen()) {
+            return;
+        }
+        switch (event.key) {
+            case 'Escape':
+                this.closeModal();
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.previousImage();
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.nextImage();
+                break;
+        }
+    }
+    closeModal() {
+        this.galleryModalService.closeModal();
+    }
+    previousImage() {
+        this.galleryModalService.previousImage();
+    }
+    nextImage() {
+        this.galleryModalService.nextImage();
+    }
+    onOverlayClick() {
+        this.closeModal();
+    }
+    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() {
+        return {
+            '--_modal-animation-in': '200ms',
+            '--_modal-animation-out': '200ms'
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleryModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GalleryModalComponent, isStandalone: true, selector: "core-gallery-modal", host: { listeners: { "document:keydown": "onKeyDown($event)" } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<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__holder\">\n\n@if (canNavigatePrevious()) {\n    <button class=\"c-gallery-modal__nav icon-arrow-left c-gallery-modal__nav--left\" \n            (click)=\"previousImage()\"\n            [attr.aria-label]=\"'Imagen anterior'\"\n            data-control=\"prevBtn\">\n    </button>\n}\n\n@if (currentImage()) {\n    <img \n    [src]=\"currentImage()!.src\"\n    [alt]=\"currentImage()!.alt || 'Imagen Ampliada'\"\n    [title]=\"currentImage()!.title || ''\"\n    loading=\"eager\"\n    class=\"js-gallery-modal-img\">\n}\n\n@if (canNavigateNext()) {\n    <button class=\"c-gallery-modal__nav icon-arrow-right c-gallery-modal__nav--right\" \n            (click)=\"nextImage()\"\n            [attr.aria-label]=\"'Siguiente imagen'\"\n            data-control=\"nextBtn\">\n    </button>\n}\n\n</div>\n\n<div class=\"c-gallery-modal__counter js-gallery-modal-counter\">\n{{ imageCounter() }}\n</div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleryModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-gallery-modal', standalone: true, imports: [CommonModule], hostDirectives: [CoreHostDirective], template: "<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__holder\">\n\n@if (canNavigatePrevious()) {\n    <button class=\"c-gallery-modal__nav icon-arrow-left c-gallery-modal__nav--left\" \n            (click)=\"previousImage()\"\n            [attr.aria-label]=\"'Imagen anterior'\"\n            data-control=\"prevBtn\">\n    </button>\n}\n\n@if (currentImage()) {\n    <img \n    [src]=\"currentImage()!.src\"\n    [alt]=\"currentImage()!.alt || 'Imagen Ampliada'\"\n    [title]=\"currentImage()!.title || ''\"\n    loading=\"eager\"\n    class=\"js-gallery-modal-img\">\n}\n\n@if (canNavigateNext()) {\n    <button class=\"c-gallery-modal__nav icon-arrow-right c-gallery-modal__nav--right\" \n            (click)=\"nextImage()\"\n            [attr.aria-label]=\"'Siguiente imagen'\"\n            data-control=\"nextBtn\">\n    </button>\n}\n\n</div>\n\n<div class=\"c-gallery-modal__counter js-gallery-modal-counter\">\n{{ imageCounter() }}\n</div>\n</div>" }]
+        }], ctorParameters: () => [], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
 class LayoutComponent {
     navItems = input([]);
     bottomNavItems = input([]);
@@ -12999,7 +13170,7 @@ class LayoutComponent {
         this.onLogout.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout" }, host: { listeners: { "window:resize": "onResize($event)" } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(layoutStateService.isHeaderVisible$() | async) {\n      <core-header\n        [class]=\"getHeaderClasses()\"\n        (filterRequested)=\"onFilterRequested()\"\n        (createRequested)=\"onCreateRequested()\"\n        (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n      </core-header>\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- ! Refactor: End -->", dependencies: [{ kind: "component", type: MainNavComponent, selector: "core-main-nav", inputs: ["navConfig", "appVersion", "navItems", "bottomNavItems", "isProduction", "logoImagesConfig", "collapsedLogo", "expandedLogo"], outputs: ["onLogout"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: ConfirmationDialogComponent, selector: "core-confirmation-dialog", inputs: ["isOpen", "config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: GenericSidebarComponent, selector: "core-generic-sidebar", inputs: ["config", "position", "customTemplate"], outputs: ["itemClicked", "subItemClicked"] }, { 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: ImageModalComponent, selector: "core-image-modal", outputs: ["modalClosed"] }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout" }, host: { listeners: { "window:resize": "onResize($event)" } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(layoutStateService.isHeaderVisible$() | async) {\n      <core-header\n        [class]=\"getHeaderClasses()\"\n        (filterRequested)=\"onFilterRequested()\"\n        (createRequested)=\"onCreateRequested()\"\n        (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n      </core-header>\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- Gallery Modal Global -->\n<core-gallery-modal></core-gallery-modal>\n\n<!-- ! Refactor: End -->", dependencies: [{ kind: "component", type: MainNavComponent, selector: "core-main-nav", inputs: ["navConfig", "appVersion", "navItems", "bottomNavItems", "isProduction", "logoImagesConfig", "collapsedLogo", "expandedLogo"], outputs: ["onLogout"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: ConfirmationDialogComponent, selector: "core-confirmation-dialog", inputs: ["isOpen", "config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: GenericSidebarComponent, selector: "core-generic-sidebar", inputs: ["config", "position", "customTemplate"], outputs: ["itemClicked", "subItemClicked"] }, { 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: ImageModalComponent, selector: "core-image-modal", outputs: ["modalClosed"] }, { kind: "component", type: GalleryModalComponent, selector: "core-gallery-modal" }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -13011,8 +13182,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         GenericSidebarComponent,
                         GenericModalComponent,
                         ImageModalComponent,
+                        GalleryModalComponent,
                         SidebarCustomModalComponent
-                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(layoutStateService.isHeaderVisible$() | async) {\n      <core-header\n        [class]=\"getHeaderClasses()\"\n        (filterRequested)=\"onFilterRequested()\"\n        (createRequested)=\"onCreateRequested()\"\n        (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n      </core-header>\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- ! Refactor: End -->" }]
+                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(layoutStateService.isHeaderVisible$() | async) {\n      <core-header\n        [class]=\"getHeaderClasses()\"\n        (filterRequested)=\"onFilterRequested()\"\n        (createRequested)=\"onCreateRequested()\"\n        (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n      </core-header>\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- Gallery Modal Global -->\n<core-gallery-modal></core-gallery-modal>\n\n<!-- ! Refactor: End -->" }]
         }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -15155,109 +15327,8 @@ var GalleryAnimationType;
     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);
+    galleryModalService = inject(GalleryModalGlobalService);
     images = input.required();
     config = input({});
     imageClick = output();
@@ -15277,11 +15348,9 @@ class GenericGalleryComponent {
         showNavigation: true,
         enableKeyboardNavigation: true,
         closeOnOutsideClick: true,
-        showDescription: false,
         animationType: GalleryAnimationType.FADE,
         animationInDuration: 400,
         animationOutDuration: 200,
-        lazyLoading: true
     };
     finalConfig = computed(() => ({
         ...this.defaultConfig,
@@ -15308,9 +15377,6 @@ class GenericGalleryComponent {
             config.layoutType === GalleryLayoutType.MAIN_RIGHT) {
             classes.push('c-gallery-grid--side-items');
         }
-        if (config.customClass) {
-            classes.push(config.customClass);
-        }
         return classes.join(' ');
     });
     containerStyles = computed(() => {
@@ -15340,14 +15406,6 @@ class GenericGalleryComponent {
         };
         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();
@@ -15356,26 +15414,15 @@ class GenericGalleryComponent {
             }
         });
         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 });
+            const currentIndex = this.galleryModalService.currentIndex();
+            const currentImage = this.galleryModalService.currentImage();
+            const isOpen = this.galleryModalService.isModalOpen();
+            if (currentImage && isOpen) {
+                this.imageChange.emit({ image: currentImage, index: currentIndex });
             }
         });
     }
-    ngOnDestroy() {
-        this.removeKeyboardNavigation();
-        this.galleryModalService.reset();
-    }
+    ngOnDestroy() { }
     onImageClick(image, index) {
         this.imageClick.emit({ image, index });
         this.openModal(index);
@@ -15386,67 +15433,9 @@ class GenericGalleryComponent {
         this.modalOpen.emit({ images, index: initialIndex });
     }
     closeModal() {
-        const config = this.finalConfig();
-        const immediate = config.animationType === GalleryAnimationType.NONE;
-        this.galleryModalService.closeModal(immediate);
+        this.galleryModalService.closeModal();
         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();
     }
@@ -15496,11 +15485,11 @@ class GenericGalleryComponent {
         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"] }] });
+    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", 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" }]
+            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" }]
         }], ctorParameters: () => [] });
 
 class CacheBustingInterceptor {
@@ -15690,5 +15679,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, 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 };
+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, GalleryModalComponent, GalleryModalGlobalService, 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