@solcre-org/core-ui 2.11.31 → 2.11.33

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, input, Component, inject, output, computed, signal, effect, Pipe, ViewChild, Injectable, ViewContainerRef, TemplateRef, InjectionToken, ContentChild, ChangeDetectionStrategy, ElementRef, Input, HostListener, viewChild, ChangeDetectorRef, importProvidersFrom } from '@angular/core';
+import { HostBinding, Directive, input, Component, inject, output, computed, signal, effect, Pipe, Injectable, ViewChild, ViewContainerRef, TemplateRef, InjectionToken, ContentChild, ChangeDetectionStrategy, ElementRef, Input, HostListener, viewChild, ChangeDetectorRef, importProvidersFrom } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i3 from '@ngx-translate/core';
@@ -928,6 +928,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 }]
         }] });
 
+class ImageModalService {
+    isOpen = signal(false);
+    currentImage = signal(null);
+    isModalOpen = this.isOpen.asReadonly();
+    getCurrentImage = this.currentImage.asReadonly();
+    openImageModal(imageData) {
+        this.currentImage.set(imageData);
+        this.isOpen.set(true);
+    }
+    closeImageModal() {
+        this.isOpen.set(false);
+        setTimeout(() => {
+            this.currentImage.set(null);
+        }, 300);
+    }
+    toggleModal() {
+        if (this.isOpen()) {
+            this.closeImageModal();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImageModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImageModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImageModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ImagePreviewComponent {
+    imageModalService = inject(ImageModalService);
+    src = input.required();
+    alt = input('');
+    title = input('');
+    width = input('');
+    height = input('');
+    objectFit = input('cover');
+    borderRadius = input('4px');
+    cursor = input('pointer');
+    loading = input('lazy');
+    onImageClick() {
+        this.imageModalService.openImageModal({
+            src: this.src(),
+            alt: this.alt(),
+            title: this.title()
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImagePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: ImagePreviewComponent, isStandalone: true, selector: "core-image-preview", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, cursor: { classPropertyName: "cursor", publicName: "cursor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-img-preview\" \n     [style.width]=\"width()\"\n     [style.height]=\"height()\"\n     (click)=\"onImageClick()\">\n  <img \n    [src]=\"src()\" \n    [alt]=\"alt()\"\n    [title]=\"title()\"\n    [loading]=\"loading()\"\n    [style.object-fit]=\"objectFit()\"\n    [style.border-radius]=\"borderRadius()\"\n    [style.cursor]=\"cursor()\">\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImagePreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-image-preview', standalone: true, imports: [CommonModule], template: "<div class=\"c-img-preview\" \n     [style.width]=\"width()\"\n     [style.height]=\"height()\"\n     (click)=\"onImageClick()\">\n  <img \n    [src]=\"src()\" \n    [alt]=\"alt()\"\n    [title]=\"title()\"\n    [loading]=\"loading()\"\n    [style.object-fit]=\"objectFit()\"\n    [style.border-radius]=\"borderRadius()\"\n    [style.cursor]=\"cursor()\">\n</div>" }]
+        }] });
+
 class FileFieldComponent extends BaseFieldComponent {
     authService = inject(AuthService);
     selectedFiles = signal([]);
@@ -1173,11 +1229,11 @@ class FileFieldComponent extends BaseFieldComponent {
         this.onBlur();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileFieldComponent, isStandalone: true, selector: "core-file-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  @if (field().label) {\n    <span class=\"c-entry-text\">\n      {{ field().label | translate }}\n      @if (hasRequiredValidators()) {\n        <span class=\"c-required\">*</span>\n      }\n    </span>\n  }\n  <div class=\"c-entry-file\" [class.has-error]=\"hasError()\">\n    @if(fieldConfig().multiple || isEditMode() || allFiles().length === 0) {\n      <label class=\"c-entry-file__label\">\n        <span class=\"icon-upload c-entry-file__icon\"></span>\n        <input\n          type=\"file\"\n          class=\"c-entry-file__input\"\n          (change)=\"onFileSelected($event)\"\n          [accept]=\"fieldConfig().accept\"\n          [multiple]=\"fieldConfig().multiple\"\n          (blur)=\"onBlurInput()\"\n          [readonly]=\"isReadonly()\"\n        >\n        {{ fieldConfig().placeholder ?? fieldConfig().label | translate }}\n        @if(fieldConfig().acceptString) {\n          <br>\n          <span class=\"c-entry-file__filename\" id=\"file-name\">{{ fieldConfig().acceptString }}</span>\n        }\n      </label>\n    }\n\n    @if (allFiles().length > 0) {\n      <div class=\"c-attachments\">\n        <p class=\"c-entry-text\">{{ 'files.attachedFiles' | translate }}</p>\n        \n        <ul class=\"c-attachments__list\">\n          @for (file of allFiles(); track $index; let i = $index) {\n            <li class=\"c-attachments__item\">\n              <div class=\"c-bulleted-text\">\n                @if(!isServerFile(file)) {\n                  <time>{{ getCurrentDate() }}</time>\n                  <span>{{ getCurrentUser() }}</span>\n                }\n              </div>\n              \n              <div class=\"c-attachments__holder\">\n                  @if(!isServerFile(file) && file.type.startsWith('image/') && fieldConfig().showPreview !== false) {\n                    <div class=\"c-attachments__content\">\n                      @if(getPreviewIndex(file) >= 0 && previewUrls()[getPreviewIndex(file)]) {\n                        <picture class=\"c-attachments__pic c-pic\">\n                          <img [src]=\"previewUrls()[getPreviewIndex(file)]\" [alt]=\"file.name\" loading=\"lazy\">\n                        </picture>\n                      }\n                      <div class=\"c-attachments__text\">\n                        <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n                        <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n                      </div>\n                    </div>\n                  } @else {\n                    <a class=\"c-attachments__content\">\n                      @if(isServerFile(file)) {\n                        <span class=\"icon-file\"></span>\n                        {{ file.filename }}\n                      } @else {\n                        <span [class]=\"getFileIcon(file)\"></span>\n                        <div class=\"c-attachments__text\">\n                          <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n                          <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n                        </div>\n                      }\n                    </a>\n                  }\n\n                  <div class=\"c-attachments__actions u-flex u-flex--wrap\">\n                    <button \n                      type=\"button\" \n                      class=\"c-link context:error\" \n                      (click)=\"removeFile(i)\"\n                      [title]=\"'files.remove' | translate\"\n                    >\n                      <span class=\"icon-delete\"></span>\n                      {{ 'files.remove' | translate }}\n                    </button>\n\n                    @if(fieldConfig().customActions) {\n                      @for(action of fieldConfig().customActions; track action.id) {\n                        <button \n                          type=\"button\"\n                          class=\"c-link c-link--underlined\" \n                          (click)=\"action.action(file)\"\n                          [title]=\"action.label | translate\"\n                        >\n                          {{ action.label | translate }}\n                          <span [ngClass]=\"action.icon | coreIconCompat\"></span>\n                        </button>\n                      }\n                    }\n                  </div>\n              </div>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n  @if(displayErrorMessage()) {\n    <span class=\"c-entry-error\">{{ displayErrorMessage()!.key | translate:displayErrorMessage()!.params }}</span>\n  }\n</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileFieldComponent, isStandalone: true, selector: "core-file-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  @if (field().label) {\n    <span class=\"c-entry-text\">\n      {{ field().label | translate }}\n      @if (hasRequiredValidators()) {\n        <span class=\"c-required\">*</span>\n      }\n    </span>\n  }\n  <div class=\"c-entry-file\" [class.has-error]=\"hasError()\">\n    @if(fieldConfig().multiple || isEditMode() || allFiles().length === 0) {\n      <label class=\"c-entry-file__label\">\n        <span class=\"icon-upload c-entry-file__icon\"></span>\n        <input\n          type=\"file\"\n          class=\"c-entry-file__input\"\n          (change)=\"onFileSelected($event)\"\n          [accept]=\"fieldConfig().accept\"\n          [multiple]=\"fieldConfig().multiple\"\n          (blur)=\"onBlurInput()\"\n          [readonly]=\"isReadonly()\"\n        >\n        {{ fieldConfig().placeholder ?? fieldConfig().label | translate }}\n        @if(fieldConfig().acceptString) {\n          <br>\n          <span class=\"c-entry-file__filename\" id=\"file-name\">{{ fieldConfig().acceptString }}</span>\n        }\n      </label>\n    }\n\n    @if (allFiles().length > 0) {\n      <div class=\"c-attachments\">\n        <p class=\"c-entry-text\">{{ 'files.attachedFiles' | translate }}</p>\n        \n        <ul class=\"c-attachments__list\">\n          @for (file of allFiles(); track $index; let i = $index) {\n            <li class=\"c-attachments__item\">\n              <div class=\"c-bulleted-text\">\n                @if(!isServerFile(file)) {\n                  <time>{{ getCurrentDate() }}</time>\n                  <span>{{ getCurrentUser() }}</span>\n                }\n              </div>\n              \n              <div class=\"c-attachments__holder\">\n                  @if(!isServerFile(file) && file.type.startsWith('image/') && fieldConfig().showPreview !== false) {\n                    <div class=\"c-attachments__content\">\n                      @if(getPreviewIndex(file) >= 0 && previewUrls()[getPreviewIndex(file)]) {\n                        <core-image-preview\n                          [src]=\"previewUrls()[getPreviewIndex(file)]\"\n                          [alt]=\"file.name\"\n                          ></core-image-preview>\n                        <!-- <picture class=\"c-attachments__pic c-pic\">\n                          <img [src]=\"previewUrls()[getPreviewIndex(file)]\" [alt]=\"file.name\" loading=\"lazy\">\n                        </picture> -->\n                      }\n                      <div class=\"c-attachments__text\">\n                        <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n                        <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n                      </div>\n                    </div>\n                  } @else {\n                    <a class=\"c-attachments__content\">\n                      @if(isServerFile(file)) {\n                        <span class=\"icon-file\"></span>\n                        {{ file.filename }}\n                      } @else {\n                        <span [class]=\"getFileIcon(file)\"></span>\n                        <div class=\"c-attachments__text\">\n                          <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n                          <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n                        </div>\n                      }\n                    </a>\n                  }\n\n                  <div class=\"c-attachments__actions u-flex u-flex--wrap\">\n                    <button \n                      type=\"button\" \n                      class=\"c-link context:error\" \n                      (click)=\"removeFile(i)\"\n                      [title]=\"'files.remove' | translate\"\n                    >\n                      <span class=\"icon-delete\"></span>\n                      {{ 'files.remove' | translate }}\n                    </button>\n\n                    @if(fieldConfig().customActions) {\n                      @for(action of fieldConfig().customActions; track action.id) {\n                        <button \n                          type=\"button\"\n                          class=\"c-link c-link--underlined\" \n                          (click)=\"action.action(file)\"\n                          [title]=\"action.label | translate\"\n                        >\n                          {{ action.label | translate }}\n                          <span [ngClass]=\"action.icon | coreIconCompat\"></span>\n                        </button>\n                      }\n                    }\n                  </div>\n              </div>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n  @if(displayErrorMessage()) {\n    <span class=\"c-entry-error\">{{ displayErrorMessage()!.key | translate:displayErrorMessage()!.params }}</span>\n  }\n</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }, { kind: "component", type: ImagePreviewComponent, selector: "core-image-preview", inputs: ["src", "alt", "title", "width", "height", "objectFit", "borderRadius", "cursor", "loading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-file-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  @if (field().label) {\n    <span class=\"c-entry-text\">\n      {{ field().label | translate }}\n      @if (hasRequiredValidators()) {\n        <span class=\"c-required\">*</span>\n      }\n    </span>\n  }\n  <div class=\"c-entry-file\" [class.has-error]=\"hasError()\">\n    @if(fieldConfig().multiple || isEditMode() || allFiles().length === 0) {\n      <label class=\"c-entry-file__label\">\n        <span class=\"icon-upload c-entry-file__icon\"></span>\n        <input\n          type=\"file\"\n          class=\"c-entry-file__input\"\n          (change)=\"onFileSelected($event)\"\n          [accept]=\"fieldConfig().accept\"\n          [multiple]=\"fieldConfig().multiple\"\n          (blur)=\"onBlurInput()\"\n          [readonly]=\"isReadonly()\"\n        >\n        {{ fieldConfig().placeholder ?? fieldConfig().label | translate }}\n        @if(fieldConfig().acceptString) {\n          <br>\n          <span class=\"c-entry-file__filename\" id=\"file-name\">{{ fieldConfig().acceptString }}</span>\n        }\n      </label>\n    }\n\n    @if (allFiles().length > 0) {\n      <div class=\"c-attachments\">\n        <p class=\"c-entry-text\">{{ 'files.attachedFiles' | translate }}</p>\n        \n        <ul class=\"c-attachments__list\">\n          @for (file of allFiles(); track $index; let i = $index) {\n            <li class=\"c-attachments__item\">\n              <div class=\"c-bulleted-text\">\n                @if(!isServerFile(file)) {\n                  <time>{{ getCurrentDate() }}</time>\n                  <span>{{ getCurrentUser() }}</span>\n                }\n              </div>\n              \n              <div class=\"c-attachments__holder\">\n                  @if(!isServerFile(file) && file.type.startsWith('image/') && fieldConfig().showPreview !== false) {\n                    <div class=\"c-attachments__content\">\n                      @if(getPreviewIndex(file) >= 0 && previewUrls()[getPreviewIndex(file)]) {\n                        <picture class=\"c-attachments__pic c-pic\">\n                          <img [src]=\"previewUrls()[getPreviewIndex(file)]\" [alt]=\"file.name\" loading=\"lazy\">\n                        </picture>\n                      }\n                      <div class=\"c-attachments__text\">\n                        <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n                        <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n                      </div>\n                    </div>\n                  } @else {\n                    <a class=\"c-attachments__content\">\n                      @if(isServerFile(file)) {\n                        <span class=\"icon-file\"></span>\n                        {{ file.filename }}\n                      } @else {\n                        <span [class]=\"getFileIcon(file)\"></span>\n                        <div class=\"c-attachments__text\">\n                          <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n                          <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n                        </div>\n                      }\n                    </a>\n                  }\n\n                  <div class=\"c-attachments__actions u-flex u-flex--wrap\">\n                    <button \n                      type=\"button\" \n                      class=\"c-link context:error\" \n                      (click)=\"removeFile(i)\"\n                      [title]=\"'files.remove' | translate\"\n                    >\n                      <span class=\"icon-delete\"></span>\n                      {{ 'files.remove' | translate }}\n                    </button>\n\n                    @if(fieldConfig().customActions) {\n                      @for(action of fieldConfig().customActions; track action.id) {\n                        <button \n                          type=\"button\"\n                          class=\"c-link c-link--underlined\" \n                          (click)=\"action.action(file)\"\n                          [title]=\"action.label | translate\"\n                        >\n                          {{ action.label | translate }}\n                          <span [ngClass]=\"action.icon | coreIconCompat\"></span>\n                        </button>\n                      }\n                    }\n                  </div>\n              </div>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n  @if(displayErrorMessage()) {\n    <span class=\"c-entry-error\">{{ displayErrorMessage()!.key | translate:displayErrorMessage()!.params }}</span>\n  }\n</label>\n" }]
+            args: [{ selector: 'core-file-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent, IconCompatPipe, ImagePreviewComponent], hostDirectives: [CoreHostDirective], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  @if (field().label) {\n    <span class=\"c-entry-text\">\n      {{ field().label | translate }}\n      @if (hasRequiredValidators()) {\n        <span class=\"c-required\">*</span>\n      }\n    </span>\n  }\n  <div class=\"c-entry-file\" [class.has-error]=\"hasError()\">\n    @if(fieldConfig().multiple || isEditMode() || allFiles().length === 0) {\n      <label class=\"c-entry-file__label\">\n        <span class=\"icon-upload c-entry-file__icon\"></span>\n        <input\n          type=\"file\"\n          class=\"c-entry-file__input\"\n          (change)=\"onFileSelected($event)\"\n          [accept]=\"fieldConfig().accept\"\n          [multiple]=\"fieldConfig().multiple\"\n          (blur)=\"onBlurInput()\"\n          [readonly]=\"isReadonly()\"\n        >\n        {{ fieldConfig().placeholder ?? fieldConfig().label | translate }}\n        @if(fieldConfig().acceptString) {\n          <br>\n          <span class=\"c-entry-file__filename\" id=\"file-name\">{{ fieldConfig().acceptString }}</span>\n        }\n      </label>\n    }\n\n    @if (allFiles().length > 0) {\n      <div class=\"c-attachments\">\n        <p class=\"c-entry-text\">{{ 'files.attachedFiles' | translate }}</p>\n        \n        <ul class=\"c-attachments__list\">\n          @for (file of allFiles(); track $index; let i = $index) {\n            <li class=\"c-attachments__item\">\n              <div class=\"c-bulleted-text\">\n                @if(!isServerFile(file)) {\n                  <time>{{ getCurrentDate() }}</time>\n                  <span>{{ getCurrentUser() }}</span>\n                }\n              </div>\n              \n              <div class=\"c-attachments__holder\">\n                  @if(!isServerFile(file) && file.type.startsWith('image/') && fieldConfig().showPreview !== false) {\n                    <div class=\"c-attachments__content\">\n                      @if(getPreviewIndex(file) >= 0 && previewUrls()[getPreviewIndex(file)]) {\n                        <core-image-preview\n                          [src]=\"previewUrls()[getPreviewIndex(file)]\"\n                          [alt]=\"file.name\"\n                          ></core-image-preview>\n                        <!-- <picture class=\"c-attachments__pic c-pic\">\n                          <img [src]=\"previewUrls()[getPreviewIndex(file)]\" [alt]=\"file.name\" loading=\"lazy\">\n                        </picture> -->\n                      }\n                      <div class=\"c-attachments__text\">\n                        <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n                        <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n                      </div>\n                    </div>\n                  } @else {\n                    <a class=\"c-attachments__content\">\n                      @if(isServerFile(file)) {\n                        <span class=\"icon-file\"></span>\n                        {{ file.filename }}\n                      } @else {\n                        <span [class]=\"getFileIcon(file)\"></span>\n                        <div class=\"c-attachments__text\">\n                          <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n                          <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n                        </div>\n                      }\n                    </a>\n                  }\n\n                  <div class=\"c-attachments__actions u-flex u-flex--wrap\">\n                    <button \n                      type=\"button\" \n                      class=\"c-link context:error\" \n                      (click)=\"removeFile(i)\"\n                      [title]=\"'files.remove' | translate\"\n                    >\n                      <span class=\"icon-delete\"></span>\n                      {{ 'files.remove' | translate }}\n                    </button>\n\n                    @if(fieldConfig().customActions) {\n                      @for(action of fieldConfig().customActions; track action.id) {\n                        <button \n                          type=\"button\"\n                          class=\"c-link c-link--underlined\" \n                          (click)=\"action.action(file)\"\n                          [title]=\"action.label | translate\"\n                        >\n                          {{ action.label | translate }}\n                          <span [ngClass]=\"action.icon | coreIconCompat\"></span>\n                        </button>\n                      }\n                    }\n                  </div>\n              </div>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n  @if(displayErrorMessage()) {\n    <span class=\"c-entry-error\">{{ displayErrorMessage()!.key | translate:displayErrorMessage()!.params }}</span>\n  }\n</label>\n" }]
         }] });
 
 var NumberFieldConfigType;
@@ -3903,6 +3959,20 @@ class GenericModalComponent {
             formGroup[fieldKey] = [newInstance[fieldKey], validators];
         });
         this.form.set(this.formBuilder.group(formGroup));
+        this.allFields().forEach(field => {
+            const fieldKey = field.key;
+            const payloadKey = (field.keyToPayload ?? field.key);
+            if ('dynamicValue' in field && typeof field.dynamicValue === 'function') {
+                const dynamicVal = field.dynamicValue(newInstance);
+                if (dynamicVal !== undefined) {
+                    newInstance[payloadKey] = dynamicVal;
+                    const control = this.form().get(fieldKey);
+                    if (control) {
+                        control.setValue(dynamicVal, { emitEvent: false });
+                    }
+                }
+            }
+        });
         setTimeout(() => {
             Object.values(this.form().controls).forEach(control => {
                 control.markAsUntouched();
@@ -8970,7 +9040,7 @@ class GenericTableComponent {
         this.tableDataService.updateRowData(rowId, updatedFields, updateFunction);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericTableComponent, isStandalone: true, selector: "core-generic-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, modalFields: { classPropertyName: "modalFields", publicName: "modalFields", isSignal: true, isRequired: false, transformFunction: null }, modalTabs: { classPropertyName: "modalTabs", publicName: "modalTabs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, filterButtonConfig: { classPropertyName: "filterButtonConfig", publicName: "filterButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonConfig: { classPropertyName: "createButtonConfig", publicName: "createButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "dataInput", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: true, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, customParams: { classPropertyName: "customParams", publicName: "customParams", isSignal: true, isRequired: false, transformFunction: null }, customArrayKey: { classPropertyName: "customArrayKey", publicName: "customArrayKey", isSignal: true, isRequired: false, transformFunction: null }, listTitle: { classPropertyName: "listTitle", publicName: "listTitle", isSignal: true, isRequired: false, transformFunction: null }, moreData: { classPropertyName: "moreData", publicName: "moreData", isSignal: true, isRequired: false, transformFunction: null }, inModal: { classPropertyName: "inModal", publicName: "inModal", isSignal: true, isRequired: false, transformFunction: null }, expansionConfig: { classPropertyName: "expansionConfig", publicName: "expansionConfig", isSignal: true, isRequired: false, transformFunction: null }, fileUploadConfig: { classPropertyName: "fileUploadConfig", publicName: "fileUploadConfig", isSignal: true, isRequired: false, transformFunction: null }, rowStyleConfigs: { classPropertyName: "rowStyleConfigs", publicName: "rowStyleConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnDisabledConfigs: { classPropertyName: "columnDisabledConfigs", publicName: "columnDisabledConfigs", isSignal: true, isRequired: false, transformFunction: null }, rowVisibilityConfigs: { classPropertyName: "rowVisibilityConfigs", publicName: "rowVisibilityConfigs", isSignal: true, isRequired: false, transformFunction: null }, headerOrder: { classPropertyName: "headerOrder", publicName: "headerOrder", isSignal: true, isRequired: false, transformFunction: null }, showActiveFilters: { classPropertyName: "showActiveFilters", publicName: "showActiveFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersConfig: { classPropertyName: "activeFiltersConfig", publicName: "activeFiltersConfig", isSignal: true, isRequired: false, transformFunction: null }, customEdit: { classPropertyName: "customEdit", publicName: "customEdit", isSignal: true, isRequired: false, transformFunction: null }, customDelete: { classPropertyName: "customDelete", publicName: "customDelete", isSignal: true, isRequired: false, transformFunction: null }, customView: { classPropertyName: "customView", publicName: "customView", isSignal: true, isRequired: false, transformFunction: null }, customSave: { classPropertyName: "customSave", publicName: "customSave", isSignal: true, isRequired: false, transformFunction: null }, useCustomSave: { classPropertyName: "useCustomSave", publicName: "useCustomSave", isSignal: true, isRequired: false, transformFunction: null }, onApiError: { classPropertyName: "onApiError", publicName: "onApiError", isSignal: true, isRequired: false, transformFunction: null }, inlineEditConfig: { classPropertyName: "inlineEditConfig", publicName: "inlineEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", selectionChanged: "selectionChanged", dataCreated: "dataCreated", dataUpdated: "dataUpdated", dataDeleted: "dataDeleted", dataFetched: "dataFetched", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)", "document:click": "closeSubmenu()" } }, providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\">\n  </core-active-filters>\n}\n\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <th class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n        </th>\n        }\n        @for (column of columns(); track $index) {\n        <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n          @if (column.sortable !== false) {\n          <!-- \u2705 Solcre: Agregado [title] din\u00E1mico y capacidad de volver al estado sin selecci\u00F3n -->\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\"\n            [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n            [title]=\"getSortTitle(column) | translate\" (click)=\"sortData(column)\">\n            {{ column.label | translate }}\n            <span class=\"c-table-order__controls\">\n              <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n              <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n            </span>\n          </button>\n          <!-- <button \n                class=\"c-table__order\" \n                [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\" \n                [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n                (click)=\"sortData(column)\">\n                {{ column.label | translate }}\n                <span class=\"icon-order-arrow\"></span>\n              </button> -->\n          } @else {\n          {{ column.label | translate }}\n          }\n        </th>\n        }\n        @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n        <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n      <tr [ngClass]=\"getRowClasses(row)\" \n          [class.is-editing-inline]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\">\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <td class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n        </td>\n        }\n        @for (column of columns(); track $index) {\n        <td [attr.data-label]=\"column.label | translate\" \n            [ngClass]=\"[\n              column.align ? 'u-align-' + column.align : '',\n              getCellDisabledClasses(row, column)\n            ]\" \n            [class.is-editing]=\"isColumnEditable(column, row)\"\n            [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n          @if (column.template) {\n          <!-- Todo: Ver qu\u00E9 es esto -->\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n          } @else if (isColumnEditable(column, row)) {\n            <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n            <div class=\"c-table__inline-edit\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n              <div\n                coreDynamicField\n                [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                [value]=\"getEditingValue(row, column)\"\n                [mode]=\"ModalMode.EDIT\"\n                [errors]=\"getCellErrors(row, column)\"\n                [rowData]=\"row\"\n                (valueChange)=\"onCellValueChange(row, column, $event)\"\n                (onBlurEvent)=\"onCellBlur(row, column)\"\n                (onEnterEvent)=\"onCellEnter(row, column)\"\n              ></div>\n            </div>\n          } @else {\n            <div class=\"c-table__content\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n              column) }}\n            </div>\n          }\n        </td>\n        }\n\n        <!-- Actions-->\n\n        @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n        <td class=\"u-align-right\">\n          <div class=\"c-table__actions\">\n\n            @for (actionConfig of regularDefaultActions(); track actionConfig.action) {\n              @if (hasPermission(actionConfig)) {\n                @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n                actionConfig.action === TableAction.DELETE) {\n                  <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig)\"\n                    (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n                  </core-generic-button>\n                }\n              }\n            }\n            @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n              @if (hasPermission(customAction)) {\n                <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n                  (buttonClick)=\"onButtonClick($event, customAction, row)\">\n                </core-generic-button>\n              }\n            }\n\n            @if (hasExtraActionsForRow(row)) {\n              <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n                (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n              </core-generic-button>\n              <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"extraDefaultActions()\"\n                [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n                [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n              </core-dropdown>\n            }\n\n            @if (expansionConfig()?.enabled) {\n              <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n              <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n              </core-generic-button>\n            }\n\n          </div> <!-- .c-table__actions -->\n        </td> <!-- td parent of .c-table__actions -->\n        } <!-- @if (showActions() -->\n\n\n      </tr>\n      @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n        <!-- Todo: Ver que es esto -->\n        <tr class=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\n            <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n        </tr>\n      }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<core-generic-pagination [tableId]=\"tableId\"></core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>", styles: [".in-modal .c-table thead th:last-child,.c-table tbody td:last-child{text-align:left}.c-table__order-btn--asc{transform:rotate(180deg)}.c-table__order-btn--desc{transform:rotate(0)}.c-table tr.is-editing-inline{background-color:#fff3cd;border-left:3px solid #ffc107}.c-table tr.is-editing-inline td{background-color:#fff3cd}.c-table tr.is-editing-inline:hover td{background-color:#ffecb5}.expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: GenericPaginationComponent, selector: "core-generic-pagination", inputs: ["tableId", "isServerSide"] }, { kind: "component", type: DropdownComponent, selector: "core-dropdown", inputs: ["rowId", "triggerElementId", "extraDefaultActions", "extraCustomActions", "row"], outputs: ["actionTriggered", "customActionTriggered"] }, { kind: "component", type: FilterModalComponent, selector: "core-filter-modal", inputs: ["isOpen", "filters", "currentFilterValues"], outputs: ["close", "filterChange", "clearFilters", "globalFilterChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: ActiveFiltersComponent, selector: "core-active-filters", inputs: ["activeFilters", "config"], outputs: ["onFilterRemove", "onClearAll"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericTableComponent, isStandalone: true, selector: "core-generic-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, modalFields: { classPropertyName: "modalFields", publicName: "modalFields", isSignal: true, isRequired: false, transformFunction: null }, modalTabs: { classPropertyName: "modalTabs", publicName: "modalTabs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, filterButtonConfig: { classPropertyName: "filterButtonConfig", publicName: "filterButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonConfig: { classPropertyName: "createButtonConfig", publicName: "createButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "dataInput", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: true, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, customParams: { classPropertyName: "customParams", publicName: "customParams", isSignal: true, isRequired: false, transformFunction: null }, customArrayKey: { classPropertyName: "customArrayKey", publicName: "customArrayKey", isSignal: true, isRequired: false, transformFunction: null }, listTitle: { classPropertyName: "listTitle", publicName: "listTitle", isSignal: true, isRequired: false, transformFunction: null }, moreData: { classPropertyName: "moreData", publicName: "moreData", isSignal: true, isRequired: false, transformFunction: null }, inModal: { classPropertyName: "inModal", publicName: "inModal", isSignal: true, isRequired: false, transformFunction: null }, expansionConfig: { classPropertyName: "expansionConfig", publicName: "expansionConfig", isSignal: true, isRequired: false, transformFunction: null }, fileUploadConfig: { classPropertyName: "fileUploadConfig", publicName: "fileUploadConfig", isSignal: true, isRequired: false, transformFunction: null }, rowStyleConfigs: { classPropertyName: "rowStyleConfigs", publicName: "rowStyleConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnDisabledConfigs: { classPropertyName: "columnDisabledConfigs", publicName: "columnDisabledConfigs", isSignal: true, isRequired: false, transformFunction: null }, rowVisibilityConfigs: { classPropertyName: "rowVisibilityConfigs", publicName: "rowVisibilityConfigs", isSignal: true, isRequired: false, transformFunction: null }, headerOrder: { classPropertyName: "headerOrder", publicName: "headerOrder", isSignal: true, isRequired: false, transformFunction: null }, showActiveFilters: { classPropertyName: "showActiveFilters", publicName: "showActiveFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersConfig: { classPropertyName: "activeFiltersConfig", publicName: "activeFiltersConfig", isSignal: true, isRequired: false, transformFunction: null }, customEdit: { classPropertyName: "customEdit", publicName: "customEdit", isSignal: true, isRequired: false, transformFunction: null }, customDelete: { classPropertyName: "customDelete", publicName: "customDelete", isSignal: true, isRequired: false, transformFunction: null }, customView: { classPropertyName: "customView", publicName: "customView", isSignal: true, isRequired: false, transformFunction: null }, customSave: { classPropertyName: "customSave", publicName: "customSave", isSignal: true, isRequired: false, transformFunction: null }, useCustomSave: { classPropertyName: "useCustomSave", publicName: "useCustomSave", isSignal: true, isRequired: false, transformFunction: null }, onApiError: { classPropertyName: "onApiError", publicName: "onApiError", isSignal: true, isRequired: false, transformFunction: null }, inlineEditConfig: { classPropertyName: "inlineEditConfig", publicName: "inlineEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", selectionChanged: "selectionChanged", dataCreated: "dataCreated", dataUpdated: "dataUpdated", dataDeleted: "dataDeleted", dataFetched: "dataFetched", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)", "document:click": "closeSubmenu()" } }, providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\">\n  </core-active-filters>\n}\n\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <th class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n        </th>\n        }\n        @for (column of columns(); track $index) {\n        <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n          @if (column.sortable !== false) {\n          <!-- \u2705 Solcre: Agregado [title] din\u00E1mico y capacidad de volver al estado sin selecci\u00F3n -->\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\"\n            [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n            [title]=\"getSortTitle(column) | translate\" (click)=\"sortData(column)\">\n            {{ column.label | translate }}\n            <span class=\"c-table-order__controls\">\n              <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n              <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n            </span>\n          </button>\n          <!-- <button \n                class=\"c-table__order\" \n                [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\" \n                [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n                (click)=\"sortData(column)\">\n                {{ column.label | translate }}\n                <span class=\"icon-order-arrow\"></span>\n              </button> -->\n          } @else {\n          {{ column.label | translate }}\n          }\n        </th>\n        }\n        @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n        <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n      <tr [ngClass]=\"getRowClasses(row)\" \n          [class.is-editing-inline]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\">\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <td class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n        </td>\n        }\n        @for (column of columns(); track $index) {\n        <td [attr.data-label]=\"column.label | translate\" \n            [ngClass]=\"[\n              column.align ? 'u-align-' + column.align : '',\n              getCellDisabledClasses(row, column)\n            ]\" \n            [class.is-editing]=\"isColumnEditable(column, row)\"\n            [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n          @if (column.template) {\n          <!-- Todo: Ver qu\u00E9 es esto -->\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n          } @else if (isColumnEditable(column, row)) {\n            <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n            <div class=\"c-table__inline-edit\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n              <div\n                coreDynamicField\n                [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                [value]=\"getEditingValue(row, column)\"\n                [mode]=\"ModalMode.EDIT\"\n                [errors]=\"getCellErrors(row, column)\"\n                [rowData]=\"row\"\n                (valueChange)=\"onCellValueChange(row, column, $event)\"\n                (onBlurEvent)=\"onCellBlur(row, column)\"\n                (onEnterEvent)=\"onCellEnter(row, column)\"\n              ></div>\n            </div>\n          } @else {\n            <div class=\"c-table__content\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n              column) }}\n            </div>\n          }\n        </td>\n        }\n\n        <!-- Actions-->\n\n        @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n        <td class=\"u-align-right\">\n          <div class=\"c-table__actions\">\n            <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"extraDefaultActions()\"\n                [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n                [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n              </core-dropdown>\n            @for (actionConfig of regularDefaultActions(); track actionConfig.action) {\n              @if (hasPermission(actionConfig)) {\n                @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n                actionConfig.action === TableAction.DELETE) {\n                  <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig)\"\n                    (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n                  </core-generic-button>\n                }\n              }\n            }\n            @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n              @if (hasPermission(customAction)) {\n                <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n                  (buttonClick)=\"onButtonClick($event, customAction, row)\">\n                </core-generic-button>\n              }\n            }\n\n            @if (hasExtraActionsForRow(row)) {\n              <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n                (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n              </core-generic-button>\n            }\n\n            @if (expansionConfig()?.enabled) {\n              <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n              <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n              </core-generic-button>\n            }\n\n          </div> <!-- .c-table__actions -->\n        </td> <!-- td parent of .c-table__actions -->\n        } <!-- @if (showActions() -->\n\n\n      </tr>\n      @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n        <!-- Todo: Ver que es esto -->\n        <tr class=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\n            <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n        </tr>\n      }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<core-generic-pagination [tableId]=\"tableId\"></core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>", styles: [".in-modal .c-table thead th:last-child,.c-table tbody td:last-child{text-align:left}.c-table__order-btn--asc{transform:rotate(180deg)}.c-table__order-btn--desc{transform:rotate(0)}.c-table tr.is-editing-inline{background-color:#fff3cd;border-left:3px solid #ffc107}.c-table tr.is-editing-inline td{background-color:#fff3cd}.c-table tr.is-editing-inline:hover td{background-color:#ffecb5}.expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: GenericPaginationComponent, selector: "core-generic-pagination", inputs: ["tableId", "isServerSide"] }, { kind: "component", type: DropdownComponent, selector: "core-dropdown", inputs: ["rowId", "triggerElementId", "extraDefaultActions", "extraCustomActions", "row"], outputs: ["actionTriggered", "customActionTriggered"] }, { kind: "component", type: FilterModalComponent, selector: "core-filter-modal", inputs: ["isOpen", "filters", "currentFilterValues"], outputs: ["close", "filterChange", "clearFilters", "globalFilterChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: ActiveFiltersComponent, selector: "core-active-filters", inputs: ["activeFilters", "config"], outputs: ["onFilterRemove", "onClearAll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
@@ -8984,7 +9054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         GenericButtonComponent,
                         DynamicFieldDirective,
                         ActiveFiltersComponent,
-                    ], hostDirectives: [CoreHostDirective], providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\">\n  </core-active-filters>\n}\n\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <th class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n        </th>\n        }\n        @for (column of columns(); track $index) {\n        <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n          @if (column.sortable !== false) {\n          <!-- \u2705 Solcre: Agregado [title] din\u00E1mico y capacidad de volver al estado sin selecci\u00F3n -->\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\"\n            [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n            [title]=\"getSortTitle(column) | translate\" (click)=\"sortData(column)\">\n            {{ column.label | translate }}\n            <span class=\"c-table-order__controls\">\n              <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n              <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n            </span>\n          </button>\n          <!-- <button \n                class=\"c-table__order\" \n                [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\" \n                [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n                (click)=\"sortData(column)\">\n                {{ column.label | translate }}\n                <span class=\"icon-order-arrow\"></span>\n              </button> -->\n          } @else {\n          {{ column.label | translate }}\n          }\n        </th>\n        }\n        @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n        <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n      <tr [ngClass]=\"getRowClasses(row)\" \n          [class.is-editing-inline]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\">\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <td class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n        </td>\n        }\n        @for (column of columns(); track $index) {\n        <td [attr.data-label]=\"column.label | translate\" \n            [ngClass]=\"[\n              column.align ? 'u-align-' + column.align : '',\n              getCellDisabledClasses(row, column)\n            ]\" \n            [class.is-editing]=\"isColumnEditable(column, row)\"\n            [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n          @if (column.template) {\n          <!-- Todo: Ver qu\u00E9 es esto -->\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n          } @else if (isColumnEditable(column, row)) {\n            <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n            <div class=\"c-table__inline-edit\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n              <div\n                coreDynamicField\n                [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                [value]=\"getEditingValue(row, column)\"\n                [mode]=\"ModalMode.EDIT\"\n                [errors]=\"getCellErrors(row, column)\"\n                [rowData]=\"row\"\n                (valueChange)=\"onCellValueChange(row, column, $event)\"\n                (onBlurEvent)=\"onCellBlur(row, column)\"\n                (onEnterEvent)=\"onCellEnter(row, column)\"\n              ></div>\n            </div>\n          } @else {\n            <div class=\"c-table__content\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n              column) }}\n            </div>\n          }\n        </td>\n        }\n\n        <!-- Actions-->\n\n        @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n        <td class=\"u-align-right\">\n          <div class=\"c-table__actions\">\n\n            @for (actionConfig of regularDefaultActions(); track actionConfig.action) {\n              @if (hasPermission(actionConfig)) {\n                @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n                actionConfig.action === TableAction.DELETE) {\n                  <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig)\"\n                    (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n                  </core-generic-button>\n                }\n              }\n            }\n            @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n              @if (hasPermission(customAction)) {\n                <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n                  (buttonClick)=\"onButtonClick($event, customAction, row)\">\n                </core-generic-button>\n              }\n            }\n\n            @if (hasExtraActionsForRow(row)) {\n              <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n                (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n              </core-generic-button>\n              <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"extraDefaultActions()\"\n                [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n                [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n              </core-dropdown>\n            }\n\n            @if (expansionConfig()?.enabled) {\n              <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n              <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n              </core-generic-button>\n            }\n\n          </div> <!-- .c-table__actions -->\n        </td> <!-- td parent of .c-table__actions -->\n        } <!-- @if (showActions() -->\n\n\n      </tr>\n      @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n        <!-- Todo: Ver que es esto -->\n        <tr class=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\n            <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n        </tr>\n      }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<core-generic-pagination [tableId]=\"tableId\"></core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>", styles: [".in-modal .c-table thead th:last-child,.c-table tbody td:last-child{text-align:left}.c-table__order-btn--asc{transform:rotate(180deg)}.c-table__order-btn--desc{transform:rotate(0)}.c-table tr.is-editing-inline{background-color:#fff3cd;border-left:3px solid #ffc107}.c-table tr.is-editing-inline td{background-color:#fff3cd}.c-table tr.is-editing-inline:hover td{background-color:#ffecb5}.expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}\n"] }]
+                    ], hostDirectives: [CoreHostDirective], providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\">\n  </core-active-filters>\n}\n\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <th class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n        </th>\n        }\n        @for (column of columns(); track $index) {\n        <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n          @if (column.sortable !== false) {\n          <!-- \u2705 Solcre: Agregado [title] din\u00E1mico y capacidad de volver al estado sin selecci\u00F3n -->\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\"\n            [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n            [title]=\"getSortTitle(column) | translate\" (click)=\"sortData(column)\">\n            {{ column.label | translate }}\n            <span class=\"c-table-order__controls\">\n              <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n              <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n            </span>\n          </button>\n          <!-- <button \n                class=\"c-table__order\" \n                [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\" \n                [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n                (click)=\"sortData(column)\">\n                {{ column.label | translate }}\n                <span class=\"icon-order-arrow\"></span>\n              </button> -->\n          } @else {\n          {{ column.label | translate }}\n          }\n        </th>\n        }\n        @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n        <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n      <tr [ngClass]=\"getRowClasses(row)\" \n          [class.is-editing-inline]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\">\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <td class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n        </td>\n        }\n        @for (column of columns(); track $index) {\n        <td [attr.data-label]=\"column.label | translate\" \n            [ngClass]=\"[\n              column.align ? 'u-align-' + column.align : '',\n              getCellDisabledClasses(row, column)\n            ]\" \n            [class.is-editing]=\"isColumnEditable(column, row)\"\n            [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n          @if (column.template) {\n          <!-- Todo: Ver qu\u00E9 es esto -->\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n          } @else if (isColumnEditable(column, row)) {\n            <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n            <div class=\"c-table__inline-edit\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n              <div\n                coreDynamicField\n                [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                [value]=\"getEditingValue(row, column)\"\n                [mode]=\"ModalMode.EDIT\"\n                [errors]=\"getCellErrors(row, column)\"\n                [rowData]=\"row\"\n                (valueChange)=\"onCellValueChange(row, column, $event)\"\n                (onBlurEvent)=\"onCellBlur(row, column)\"\n                (onEnterEvent)=\"onCellEnter(row, column)\"\n              ></div>\n            </div>\n          } @else {\n            <div class=\"c-table__content\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n              column) }}\n            </div>\n          }\n        </td>\n        }\n\n        <!-- Actions-->\n\n        @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n        <td class=\"u-align-right\">\n          <div class=\"c-table__actions\">\n            <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"extraDefaultActions()\"\n                [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n                [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n              </core-dropdown>\n            @for (actionConfig of regularDefaultActions(); track actionConfig.action) {\n              @if (hasPermission(actionConfig)) {\n                @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n                actionConfig.action === TableAction.DELETE) {\n                  <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig)\"\n                    (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n                  </core-generic-button>\n                }\n              }\n            }\n            @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n              @if (hasPermission(customAction)) {\n                <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n                  (buttonClick)=\"onButtonClick($event, customAction, row)\">\n                </core-generic-button>\n              }\n            }\n\n            @if (hasExtraActionsForRow(row)) {\n              <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n                (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n              </core-generic-button>\n            }\n\n            @if (expansionConfig()?.enabled) {\n              <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n              <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n              </core-generic-button>\n            }\n\n          </div> <!-- .c-table__actions -->\n        </td> <!-- td parent of .c-table__actions -->\n        } <!-- @if (showActions() -->\n\n\n      </tr>\n      @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n        <!-- Todo: Ver que es esto -->\n        <tr class=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\n            <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n        </tr>\n      }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<core-generic-pagination [tableId]=\"tableId\"></core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>", styles: [".in-modal .c-table thead th:last-child,.c-table tbody td:last-child{text-align:left}.c-table__order-btn--asc{transform:rotate(180deg)}.c-table__order-btn--desc{transform:rotate(0)}.c-table tr.is-editing-inline{background-color:#fff3cd;border-left:3px solid #ffc107}.c-table tr.is-editing-inline td{background-color:#fff3cd}.c-table tr.is-editing-inline:hover td{background-color:#ffecb5}.expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { sentinel: [{
                 type: ViewChild,
                 args: ['sentinel', { static: false }]
@@ -10520,11 +10590,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // Este archivo es generado automáticamente por scripts/update-version.js
 // No edites manualmente este archivo
 const VERSION = {
-    full: '2.11.31',
+    full: '2.11.33',
     major: 2,
     minor: 11,
-    patch: 31,
-    timestamp: '2025-09-01T11:31:01.284Z',
+    patch: 33,
+    timestamp: '2025-09-01T16:54:48.798Z',
     buildDate: '1/9/2025'
 };
 
@@ -10869,6 +10939,237 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class ImageModalComponent {
+    modalImage;
+    imageContainer;
+    imageModalService = inject(ImageModalService);
+    isVisible = this.imageModalService.isModalOpen;
+    currentImage = this.imageModalService.getCurrentImage;
+    modalClosed = output();
+    zoomLevel = signal(1);
+    isDragging = signal(false);
+    lastMouseX = signal(0);
+    lastMouseY = signal(0);
+    translateX = signal(0);
+    translateY = signal(0);
+    minZoom = 1;
+    maxZoom = 3;
+    zoomStep = 0.2;
+    targetTranslateX = 0;
+    targetTranslateY = 0;
+    velocityX = 0;
+    velocityY = 0;
+    friction = 0.9;
+    animationId = null;
+    constructor() {
+        effect(() => {
+            if (this.isVisible()) {
+                document.body.style.overflow = 'hidden';
+                this.resetZoom();
+            }
+            else {
+                document.body.style.overflow = '';
+                this.resetZoom();
+                this.stopAnimation();
+            }
+        });
+    }
+    startAnimation() {
+        if (this.animationId)
+            return;
+        const animate = () => {
+            if (!this.isDragging()) {
+                const currentX = this.translateX();
+                const currentY = this.translateY();
+                const newX = currentX + this.velocityX;
+                const newY = currentY + this.velocityY;
+                this.translateX.set(newX);
+                this.translateY.set(newY);
+                this.velocityX *= this.friction;
+                this.velocityY *= this.friction;
+                if (Math.abs(this.velocityX) < 0.1 && Math.abs(this.velocityY) < 0.1) {
+                    this.velocityX = 0;
+                    this.velocityY = 0;
+                    this.animationId = null;
+                    return;
+                }
+                this.animationId = requestAnimationFrame(animate);
+            }
+            else {
+                this.animationId = null;
+            }
+        };
+        this.animationId = requestAnimationFrame(animate);
+    }
+    stopAnimation() {
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+        this.velocityX = 0;
+        this.velocityY = 0;
+    }
+    resetZoom() {
+        this.zoomLevel.set(1);
+        this.translateX.set(0);
+        this.translateY.set(0);
+        this.isDragging.set(false);
+        this.velocityX = 0;
+        this.velocityY = 0;
+        this.stopAnimation();
+    }
+    closeModal() {
+        this.resetZoom();
+        this.imageModalService.closeImageModal();
+        this.modalClosed.emit();
+    }
+    onWheel(event) {
+        if (!this.isVisible())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const delta = event.deltaY > 0 ? -this.zoomStep : this.zoomStep;
+        const newZoom = Math.min(Math.max(this.zoomLevel() + delta, this.minZoom), this.maxZoom);
+        if (newZoom !== this.zoomLevel()) {
+            this.zoomLevel.set(newZoom);
+            if (newZoom === 1) {
+                this.translateX.set(0);
+                this.translateY.set(0);
+                this.velocityX = 0;
+                this.velocityY = 0;
+            }
+        }
+    }
+    onMouseDown(event) {
+        if (!this.isVisible() || this.zoomLevel() <= 1)
+            return;
+        event.preventDefault();
+        this.isDragging.set(true);
+        this.lastMouseX.set(event.clientX);
+        this.lastMouseY.set(event.clientY);
+        this.velocityX = 0;
+        this.velocityY = 0;
+    }
+    onMouseMove(event) {
+        if (!this.isDragging() || !this.isVisible())
+            return;
+        event.preventDefault();
+        const deltaX = event.clientX - this.lastMouseX();
+        const deltaY = event.clientY - this.lastMouseY();
+        const newX = this.translateX() + deltaX;
+        const newY = this.translateY() + deltaY;
+        this.translateX.set(newX);
+        this.translateY.set(newY);
+        this.velocityX = deltaX * 0.5;
+        this.velocityY = deltaY * 0.5;
+        this.lastMouseX.set(event.clientX);
+        this.lastMouseY.set(event.clientY);
+    }
+    onMouseUp() {
+        if (this.isDragging()) {
+            this.isDragging.set(false);
+            if (Math.abs(this.velocityX) > 1 || Math.abs(this.velocityY) > 1) {
+                this.startAnimation();
+            }
+        }
+    }
+    onDoubleClick() {
+        if (!this.isVisible())
+            return;
+        if (this.zoomLevel() > 1) {
+            this.resetZoom();
+        }
+        else {
+            this.zoomLevel.set(2);
+            this.translateX.set(0);
+            this.translateY.set(0);
+            this.velocityX = 0;
+            this.velocityY = 0;
+            this.stopAnimation();
+        }
+    }
+    getHolderTransform() {
+        return `scale(${this.zoomLevel()}) translate(${this.translateX()}px, ${this.translateY()}px)`;
+    }
+    getCursor() {
+        if (this.zoomLevel() > 1) {
+            return this.isDragging() ? 'grabbing' : 'grab';
+        }
+        return 'zoom-in';
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape' && this.isVisible()) {
+            this.closeModal();
+        }
+    }
+    onDocumentMouseMove(event) {
+        this.onMouseMove(event);
+    }
+    onDocumentMouseUp() {
+        this.onMouseUp();
+    }
+    onTouchStart(event) {
+        if (!this.isVisible() || this.zoomLevel() <= 1)
+            return;
+        event.preventDefault();
+        const touch = event.touches[0];
+        this.isDragging.set(true);
+        this.lastMouseX.set(touch.clientX);
+        this.lastMouseY.set(touch.clientY);
+        this.velocityX = 0;
+        this.velocityY = 0;
+    }
+    onTouchMove(event) {
+        if (!this.isDragging() || !this.isVisible())
+            return;
+        event.preventDefault();
+        const touch = event.touches[0];
+        const deltaX = touch.clientX - this.lastMouseX();
+        const deltaY = touch.clientY - this.lastMouseY();
+        const newX = this.translateX() + deltaX;
+        const newY = this.translateY() + deltaY;
+        this.translateX.set(newX);
+        this.translateY.set(newY);
+        this.velocityX = deltaX * 0.5;
+        this.velocityY = deltaY * 0.5;
+        this.lastMouseX.set(touch.clientX);
+        this.lastMouseY.set(touch.clientY);
+    }
+    onTouchEnd() {
+        if (this.isDragging()) {
+            this.isDragging.set(false);
+            if (Math.abs(this.velocityX) > 1 || Math.abs(this.velocityY) > 1) {
+                this.startAnimation();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.stopAnimation();
+        document.body.style.overflow = '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImageModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: ImageModalComponent, isStandalone: true, selector: "core-image-modal", outputs: { modalClosed: "modalClosed" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "document:mousemove": "onDocumentMouseMove($event)", "document:mouseup": "onDocumentMouseUp()" } }, viewQueries: [{ propertyName: "modalImage", first: true, predicate: ["modalImage"], descendants: true }, { propertyName: "imageContainer", first: true, predicate: ["imageContainer"], descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-img-modal js-img-modal\" [class.is-visible]=\"isVisible()\">\n  <span class=\"c-img-modal__close icon-cross-thin js-gallery-modal-close\" (click)=\"closeModal()\"></span>\n  <div class=\"c-img-modal__overlay js-img-modal-close\" (click)=\"closeModal()\"></div>\n  <div \n    class=\"c-img-modal__holder\" \n    #imageContainer\n    [style.transform]=\"getHolderTransform()\"\n    [style.cursor]=\"getCursor()\"\n    (mousedown)=\"onMouseDown($event)\"\n    (wheel)=\"onWheel($event)\"\n    (touchstart)=\"onTouchStart($event)\"\n    (touchmove)=\"onTouchMove($event)\"\n    (touchend)=\"onTouchEnd()\"\n    (dblclick)=\"onDoubleClick()\">\n    <img \n      #modalImage\n      [src]=\"currentImage()?.src || ''\" \n      [alt]=\"currentImage()?.alt || 'Imagen ampliada'\" \n      [title]=\"currentImage()?.title || ''\"\n      class=\"js-img-modal-img\"\n      draggable=\"false\">\n  </div>\n</div>\n", styles: [".c-img-modal__holder{transform-origin:center center;overflow:visible;will-change:transform}.c-img-modal__holder img{transform-origin:center center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.c-img-modal__holder[style*=transform]{backface-visibility:hidden;perspective:1000px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImageModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-image-modal', standalone: true, imports: [CommonModule], hostDirectives: [CoreHostDirective], template: "<div class=\"c-img-modal js-img-modal\" [class.is-visible]=\"isVisible()\">\n  <span class=\"c-img-modal__close icon-cross-thin js-gallery-modal-close\" (click)=\"closeModal()\"></span>\n  <div class=\"c-img-modal__overlay js-img-modal-close\" (click)=\"closeModal()\"></div>\n  <div \n    class=\"c-img-modal__holder\" \n    #imageContainer\n    [style.transform]=\"getHolderTransform()\"\n    [style.cursor]=\"getCursor()\"\n    (mousedown)=\"onMouseDown($event)\"\n    (wheel)=\"onWheel($event)\"\n    (touchstart)=\"onTouchStart($event)\"\n    (touchmove)=\"onTouchMove($event)\"\n    (touchend)=\"onTouchEnd()\"\n    (dblclick)=\"onDoubleClick()\">\n    <img \n      #modalImage\n      [src]=\"currentImage()?.src || ''\" \n      [alt]=\"currentImage()?.alt || 'Imagen ampliada'\" \n      [title]=\"currentImage()?.title || ''\"\n      class=\"js-img-modal-img\"\n      draggable=\"false\">\n  </div>\n</div>\n", styles: [".c-img-modal__holder{transform-origin:center center;overflow:visible;will-change:transform}.c-img-modal__holder img{transform-origin:center center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.c-img-modal__holder[style*=transform]{backface-visibility:hidden;perspective:1000px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { modalImage: [{
+                type: ViewChild,
+                args: ['modalImage', { static: false }]
+            }], imageContainer: [{
+                type: ViewChild,
+                args: ['imageContainer', { static: false }]
+            }], handleKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }], onDocumentMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onDocumentMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup']
+            }] } });
+
 class LayoutComponent {
     navItems = input([]);
     bottomNavItems = input([]);
@@ -11039,7 +11340,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=\"o-layout__header\"\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<!-- ! 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"], outputs: ["save", "close", "modalData"] }, { 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=\"o-layout__header\"\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"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: ImageModalComponent, selector: "core-image-modal", outputs: ["modalClosed"] }, { 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,
@@ -11050,8 +11351,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         ConfirmationDialogComponent,
                         GenericSidebarComponent,
                         GenericModalComponent,
+                        ImageModalComponent,
                         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=\"o-layout__header\"\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<!-- ! 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=\"o-layout__header\"\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 -->" }]
         }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -11733,236 +12035,460 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 }]
         }] });
 
-class ImageModalComponent {
-    modalImage;
-    imageContainer;
-    isVisible = input(false);
-    imageSrc = input('');
-    imageAlt = input('Imagen Ampliada');
-    modalClosed = output();
-    zoomLevel = signal(1);
+var SliderActionType;
+(function (SliderActionType) {
+    SliderActionType["CLICK"] = "click";
+    SliderActionType["CHANGE"] = "change";
+    SliderActionType["BEFORE_CHANGE"] = "beforeChange";
+    SliderActionType["AFTER_CHANGE"] = "afterChange";
+    SliderActionType["EDGE"] = "edge";
+    SliderActionType["SWIPE"] = "swipe";
+})(SliderActionType || (SliderActionType = {}));
+
+class SliderService {
+    currentIndex = signal(0);
+    items = signal([]);
+    config = signal({});
+    getCurrentIndex = computed(() => this.currentIndex());
+    getItems = computed(() => this.items());
+    getConfig = computed(() => this.config());
+    getTotalItems = computed(() => this.items().length);
+    getNavigation = computed(() => {
+        const current = this.currentIndex();
+        const total = this.items().length;
+        const infinite = this.config().infinite ?? false;
+        return {
+            currentIndex: current,
+            totalItems: total,
+            canGoPrev: infinite || current > 0,
+            canGoNext: infinite || current < total - 1
+        };
+    });
+    getCurrentItem = computed(() => {
+        const items = this.items();
+        const index = this.currentIndex();
+        return items[index] || null;
+    });
+    setItems(items) {
+        this.items.set(items);
+        if (this.currentIndex() >= items.length) {
+            this.currentIndex.set(Math.max(0, items.length - 1));
+        }
+    }
+    setConfig(config) {
+        this.config.set(config);
+    }
+    goToSlide(index) {
+        const items = this.items();
+        if (index >= 0 && index < items.length) {
+            this.currentIndex.set(index);
+        }
+    }
+    nextSlide() {
+        const current = this.currentIndex();
+        const total = this.items().length;
+        const infinite = this.config().infinite ?? false;
+        if (infinite) {
+            this.currentIndex.set((current + 1) % total);
+        }
+        else if (current < total - 1) {
+            this.currentIndex.set(current + 1);
+        }
+    }
+    prevSlide() {
+        const current = this.currentIndex();
+        const total = this.items().length;
+        const infinite = this.config().infinite ?? false;
+        if (infinite) {
+            this.currentIndex.set(current === 0 ? total - 1 : current - 1);
+        }
+        else if (current > 0) {
+            this.currentIndex.set(current - 1);
+        }
+    }
+    reset() {
+        this.currentIndex.set(0);
+    }
+    getSlidesByConfig() {
+        const items = this.items();
+        const slidesToShow = this.config().slidesToShow ?? 1;
+        const currentIndex = this.currentIndex();
+        if (slidesToShow === 1) {
+            return [items[currentIndex]].filter(Boolean);
+        }
+        const result = [];
+        for (let i = 0; i < slidesToShow; i++) {
+            const index = (currentIndex + i) % items.length;
+            if (items[index]) {
+                result.push(items[index]);
+            }
+        }
+        return result;
+    }
+    getThumbnails() {
+        return this.items().map(item => ({
+            ...item,
+            imageUrl: item.thumbnailUrl || item.imageUrl
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SliderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SliderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SliderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class GenericSliderComponent {
+    sliderService = inject(SliderService);
+    autoPlayInterval = null;
+    items = input([]);
+    config = input({
+        autoPlay: false,
+        autoPlayInterval: 3000,
+        showDots: true,
+        showArrows: true,
+        showThumbnails: false,
+        infinite: true,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        centerMode: false,
+        height: '400px',
+        thumbnailHeight: '80px',
+        showPreview: true,
+        enableKeyboard: true,
+        swipeToSlide: true,
+        pauseOnHover: true,
+        showCounter: false,
+        lazyLoad: true,
+        fadeEffect: false,
+        verticalThumbnails: false
+    });
+    actionTriggered = output();
+    slideChanged = output();
+    isHovered = signal(false);
     isDragging = signal(false);
-    lastMouseX = signal(0);
-    lastMouseY = signal(0);
-    translateX = signal(0);
-    translateY = signal(0);
-    minZoom = 1;
-    maxZoom = 3;
-    zoomStep = 0.2;
-    targetTranslateX = 0;
-    targetTranslateY = 0;
-    velocityX = 0;
-    velocityY = 0;
-    friction = 0.9;
-    animationId = null;
+    startX = signal(0);
+    currentX = signal(0);
+    currentIndex = computed(() => this.sliderService.getCurrentIndex());
+    totalItems = computed(() => this.sliderService.getTotalItems());
+    currentItem = computed(() => this.sliderService.getCurrentItem());
+    navigation = computed(() => this.sliderService.getNavigation());
+    visibleSlides = computed(() => this.sliderService.getSlidesByConfig());
+    thumbnails = computed(() => this.sliderService.getThumbnails());
+    mergedConfig = computed(() => ({
+        ...this.config(),
+        ...this.sliderService.getConfig()
+    }));
+    canAutoPlay = computed(() => {
+        const config = this.mergedConfig();
+        return config.autoPlay && !this.isHovered() && !this.isDragging();
+    });
+    showDots = computed(() => this.mergedConfig().showDots && this.totalItems() > 1);
+    showArrows = computed(() => this.mergedConfig().showArrows && this.totalItems() > 1);
+    showThumbnails = computed(() => this.mergedConfig().showThumbnails && this.totalItems() > 1);
+    showCounter = computed(() => this.mergedConfig().showCounter && this.totalItems() > 1);
+    containerStyles = computed(() => ({
+        height: this.mergedConfig().height || '400px',
+        position: 'relative',
+        overflow: 'hidden'
+    }));
+    slideStyles = computed(() => {
+        const config = this.mergedConfig();
+        const slidesToShow = config.slidesToShow || 1;
+        const currentIndex = this.currentIndex();
+        const totalItems = this.totalItems();
+        const totalWidth = (totalItems / slidesToShow) * 100;
+        const slideWidth = 100 / slidesToShow;
+        const translateX = -(currentIndex * slideWidth);
+        return {
+            transform: `translateX(${translateX}%)`,
+            transition: this.isDragging() ? 'none' : 'transform 0.3s ease-in-out',
+            display: 'flex',
+            width: `${totalWidth}%`
+        };
+    });
+    prevButtonConfig = computed(() => ({
+        type: ButtonType.PRIMARY,
+        context: ButtonContext.DEFAULT,
+        size: ButtonSize.SMALL,
+        text: '',
+        icon: 'icon-arrow-left',
+        disabled: !this.navigation().canGoPrev,
+        ariaLabel: 'slider.previous'
+    }));
+    nextButtonConfig = computed(() => ({
+        type: ButtonType.PRIMARY,
+        context: ButtonContext.DEFAULT,
+        size: ButtonSize.SMALL,
+        text: '',
+        icon: 'icon-arrow-right',
+        disabled: !this.navigation().canGoNext,
+        ariaLabel: 'slider.next'
+    }));
     constructor() {
         effect(() => {
-            if (this.isVisible()) {
-                document.body.style.overflow = 'hidden';
-                this.resetZoom();
-            }
-            else {
-                document.body.style.overflow = '';
-                this.resetZoom();
-                this.stopAnimation();
+            this.sliderService.setItems(this.items());
+        });
+        effect(() => {
+            this.sliderService.setConfig(this.config());
+        });
+        effect(() => {
+            const currentIndex = this.currentIndex();
+            const currentItem = this.currentItem();
+            if (currentItem) {
+                this.slideChanged.emit({ currentIndex, currentItem });
             }
         });
-    }
-    startAnimation() {
-        if (this.animationId)
-            return;
-        const animate = () => {
-            if (!this.isDragging()) {
-                const currentX = this.translateX();
-                const currentY = this.translateY();
-                const newX = currentX + this.velocityX;
-                const newY = currentY + this.velocityY;
-                this.translateX.set(newX);
-                this.translateY.set(newY);
-                this.velocityX *= this.friction;
-                this.velocityY *= this.friction;
-                if (Math.abs(this.velocityX) < 0.1 && Math.abs(this.velocityY) < 0.1) {
-                    this.velocityX = 0;
-                    this.velocityY = 0;
-                    this.animationId = null;
-                    return;
-                }
-                this.animationId = requestAnimationFrame(animate);
+        effect(() => {
+            if (this.canAutoPlay()) {
+                this.startAutoPlay();
             }
             else {
-                this.animationId = null;
+                this.stopAutoPlay();
             }
-        };
-        this.animationId = requestAnimationFrame(animate);
-    }
-    stopAnimation() {
-        if (this.animationId) {
-            cancelAnimationFrame(this.animationId);
-            this.animationId = null;
-        }
-        this.velocityX = 0;
-        this.velocityY = 0;
+        });
     }
-    resetZoom() {
-        this.zoomLevel.set(1);
-        this.translateX.set(0);
-        this.translateY.set(0);
-        this.isDragging.set(false);
-        this.velocityX = 0;
-        this.velocityY = 0;
-        this.stopAnimation();
+    ngOnInit() {
+        this.setupAutoPlay();
     }
-    closeModal() {
-        this.resetZoom();
-        this.modalClosed.emit();
+    ngOnDestroy() {
+        this.stopAutoPlay();
     }
-    onWheel(event) {
-        if (!this.isVisible())
+    onKeydown(event) {
+        if (!this.mergedConfig().enableKeyboard)
             return;
-        event.preventDefault();
-        event.stopPropagation();
-        const delta = event.deltaY > 0 ? -this.zoomStep : this.zoomStep;
-        const newZoom = Math.min(Math.max(this.zoomLevel() + delta, this.minZoom), this.maxZoom);
-        if (newZoom !== this.zoomLevel()) {
-            this.zoomLevel.set(newZoom);
-            if (newZoom === 1) {
-                this.translateX.set(0);
-                this.translateY.set(0);
-                this.velocityX = 0;
-                this.velocityY = 0;
-            }
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.goToPrevious();
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.goToNext();
+                break;
+            case ' ':
+                event.preventDefault();
+                this.toggleAutoPlay();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.goToSlide(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.goToSlide(this.totalItems() - 1);
+                break;
         }
     }
-    onMouseDown(event) {
-        if (!this.isVisible() || this.zoomLevel() <= 1)
-            return;
-        event.preventDefault();
-        this.isDragging.set(true);
-        this.lastMouseX.set(event.clientX);
-        this.lastMouseY.set(event.clientY);
-        this.velocityX = 0;
-        this.velocityY = 0;
-    }
-    onMouseMove(event) {
-        if (!this.isDragging() || !this.isVisible())
-            return;
-        event.preventDefault();
-        const deltaX = event.clientX - this.lastMouseX();
-        const deltaY = event.clientY - this.lastMouseY();
-        const newX = this.translateX() + deltaX;
-        const newY = this.translateY() + deltaY;
-        this.translateX.set(newX);
-        this.translateY.set(newY);
-        this.velocityX = deltaX * 0.5;
-        this.velocityY = deltaY * 0.5;
-        this.lastMouseX.set(event.clientX);
-        this.lastMouseY.set(event.clientY);
+    goToSlide(index) {
+        const previousIndex = this.currentIndex();
+        this.sliderService.goToSlide(index);
+        this.emitAction(SliderActionType.CHANGE, this.currentItem(), index);
+        if (previousIndex !== index) {
+            this.emitAction(SliderActionType.AFTER_CHANGE, this.currentItem(), index);
+        }
     }
-    onMouseUp() {
-        if (this.isDragging()) {
-            this.isDragging.set(false);
-            if (Math.abs(this.velocityX) > 1 || Math.abs(this.velocityY) > 1) {
-                this.startAnimation();
-            }
+    goToNext() {
+        const config = this.mergedConfig();
+        const current = this.currentIndex();
+        const total = this.totalItems();
+        const slidesToShow = config.slidesToShow || 1;
+        const slidesToScroll = config.slidesToScroll || 1;
+        let nextIndex;
+        if (config.infinite) {
+            nextIndex = (current + slidesToScroll) % total;
+        }
+        else {
+            const maxIndex = Math.max(0, total - slidesToShow);
+            nextIndex = Math.min(current + slidesToScroll, maxIndex);
         }
+        this.goToSlide(nextIndex);
     }
-    onDoubleClick() {
-        if (!this.isVisible())
-            return;
-        if (this.zoomLevel() > 1) {
-            this.resetZoom();
+    goToPrevious() {
+        const config = this.mergedConfig();
+        const current = this.currentIndex();
+        const total = this.totalItems();
+        const slidesToScroll = config.slidesToScroll || 1;
+        let prevIndex;
+        if (config.infinite) {
+            prevIndex = current - slidesToScroll < 0 ? total - slidesToScroll : current - slidesToScroll;
         }
         else {
-            this.zoomLevel.set(2);
-            this.translateX.set(0);
-            this.translateY.set(0);
-            this.velocityX = 0;
-            this.velocityY = 0;
-            this.stopAnimation();
+            prevIndex = Math.max(current - slidesToScroll, 0);
         }
+        this.goToSlide(prevIndex);
     }
-    getHolderTransform() {
-        return `scale(${this.zoomLevel()}) translate(${this.translateX()}px, ${this.translateY()}px)`;
+    setupAutoPlay() {
+        if (this.mergedConfig().autoPlay) {
+            this.startAutoPlay();
+        }
     }
-    getCursor() {
-        if (this.zoomLevel() > 1) {
-            return this.isDragging() ? 'grabbing' : 'grab';
+    startAutoPlay() {
+        this.stopAutoPlay();
+        if (this.canAutoPlay()) {
+            this.autoPlayInterval = setInterval(() => {
+                if (this.canAutoPlay()) {
+                    this.goToNext();
+                }
+            }, this.mergedConfig().autoPlayInterval || 3000);
         }
-        return 'zoom-in';
     }
-    handleKeydown(event) {
-        if (event.key === 'Escape' && this.isVisible()) {
-            this.closeModal();
+    stopAutoPlay() {
+        if (this.autoPlayInterval) {
+            clearInterval(this.autoPlayInterval);
+            this.autoPlayInterval = null;
         }
     }
-    onDocumentMouseMove(event) {
-        this.onMouseMove(event);
+    toggleAutoPlay() {
+        if (this.canAutoPlay()) {
+            this.stopAutoPlay();
+        }
+        else {
+            this.startAutoPlay();
+        }
     }
-    onDocumentMouseUp() {
-        this.onMouseUp();
+    onMouseEnter() {
+        if (this.mergedConfig().pauseOnHover) {
+            this.isHovered.set(true);
+        }
+    }
+    onMouseLeave() {
+        if (this.mergedConfig().pauseOnHover) {
+            this.isHovered.set(false);
+        }
     }
     onTouchStart(event) {
-        if (!this.isVisible() || this.zoomLevel() <= 1)
+        if (!this.mergedConfig().swipeToSlide)
             return;
-        event.preventDefault();
-        const touch = event.touches[0];
         this.isDragging.set(true);
-        this.lastMouseX.set(touch.clientX);
-        this.lastMouseY.set(touch.clientY);
-        this.velocityX = 0;
-        this.velocityY = 0;
+        this.startX.set(event.touches[0].clientX);
     }
     onTouchMove(event) {
-        if (!this.isDragging() || !this.isVisible())
+        if (!this.isDragging() || !this.mergedConfig().swipeToSlide)
             return;
+        this.currentX.set(event.touches[0].clientX);
         event.preventDefault();
-        const touch = event.touches[0];
-        const deltaX = touch.clientX - this.lastMouseX();
-        const deltaY = touch.clientY - this.lastMouseY();
-        const newX = this.translateX() + deltaX;
-        const newY = this.translateY() + deltaY;
-        this.translateX.set(newX);
-        this.translateY.set(newY);
-        this.velocityX = deltaX * 0.5;
-        this.velocityY = deltaY * 0.5;
-        this.lastMouseX.set(touch.clientX);
-        this.lastMouseY.set(touch.clientY);
     }
     onTouchEnd() {
-        if (this.isDragging()) {
-            this.isDragging.set(false);
-            if (Math.abs(this.velocityX) > 1 || Math.abs(this.velocityY) > 1) {
-                this.startAnimation();
+        if (!this.isDragging() || !this.mergedConfig().swipeToSlide)
+            return;
+        const diffX = this.startX() - this.currentX();
+        const threshold = 50;
+        if (Math.abs(diffX) > threshold) {
+            if (diffX > 0) {
+                this.goToNext();
             }
+            else {
+                this.goToPrevious();
+            }
+            this.emitAction(SliderActionType.SWIPE, this.currentItem(), this.currentIndex());
         }
+        this.isDragging.set(false);
+        this.startX.set(0);
+        this.currentX.set(0);
     }
-    ngOnDestroy() {
-        this.stopAnimation();
-        document.body.style.overflow = '';
+    onSlideClick(item, index) {
+        this.emitAction(SliderActionType.CLICK, item, index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImageModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: ImageModalComponent, isStandalone: true, selector: "core-image-modal", inputs: { isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalClosed: "modalClosed" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "document:mousemove": "onDocumentMouseMove($event)", "document:mouseup": "onDocumentMouseUp()" } }, viewQueries: [{ propertyName: "modalImage", first: true, predicate: ["modalImage"], descendants: true }, { propertyName: "imageContainer", first: true, predicate: ["imageContainer"], descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-img-modal js-img-modal\" [class.is-visible]=\"isVisible()\">\n  <span class=\"c-img-modal__close icon-cross-thin js-gallery-modal-close\" (click)=\"closeModal()\"></span>\n  <div class=\"c-img-modal__overlay js-img-modal-close\" (click)=\"closeModal()\"></div>\n  <div \n    class=\"c-img-modal__holder\" \n    #imageContainer\n    [style.transform]=\"getHolderTransform()\"\n    [style.cursor]=\"getCursor()\"\n    (mousedown)=\"onMouseDown($event)\"\n    (wheel)=\"onWheel($event)\"\n    (touchstart)=\"onTouchStart($event)\"\n    (touchmove)=\"onTouchMove($event)\"\n    (touchend)=\"onTouchEnd()\"\n    (dblclick)=\"onDoubleClick()\">\n    <img \n      #modalImage\n      [src]=\"imageSrc()\" \n      [alt]=\"imageAlt()\" \n      class=\"js-img-modal-img\"\n      draggable=\"false\">\n  </div>\n</div>\n", styles: [".c-img-modal__holder{transform-origin:center center;overflow:visible;will-change:transform}.c-img-modal__holder img{transform-origin:center center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.c-img-modal__holder[style*=transform]{backface-visibility:hidden;perspective:1000px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    onDotClick(index) {
+        this.goToSlide(index);
+    }
+    onThumbnailClick(index) {
+        this.goToSlide(index);
+    }
+    emitAction(type, item, index) {
+        this.actionTriggered.emit({ type, item, index });
+    }
+    getSlideImage(item) {
+        return item.imageUrl || '';
+    }
+    getSlideAlt(item) {
+        return item.alt || item.title || `Slide ${this.currentIndex() + 1}`;
+    }
+    isActiveSlide(index) {
+        const config = this.mergedConfig();
+        const current = this.currentIndex();
+        const slidesToShow = config.slidesToShow || 1;
+        if (slidesToShow === 1) {
+            return index === current;
+        }
+        else {
+            return index >= current && index < current + slidesToShow;
+        }
+    }
+    isActiveDot(index) {
+        return index === this.currentIndex();
+    }
+    isActiveThumbnail(index) {
+        return index === this.currentIndex();
+    }
+    getCounterText() {
+        return `${this.currentIndex() + 1} / ${this.totalItems()}`;
+    }
+    getSlideWidth() {
+        const config = this.mergedConfig();
+        const slidesToShow = config.slidesToShow || 1;
+        const totalItems = this.totalItems();
+        const widthPercentage = (100 / totalItems);
+        return `${widthPercentage}%`;
+    }
+    getFileTypeIcon(fileType) {
+        const typeMap = {
+            'pdf': 'icon-file-pdf',
+            'doc': 'icon-file-word',
+            'docx': 'icon-file-word',
+            'xls': 'icon-file-excel',
+            'xlsx': 'icon-file-excel',
+            'ppt': 'icon-file-powerpoint',
+            'pptx': 'icon-file-powerpoint',
+            'txt': 'icon-file-text',
+            'zip': 'icon-file-zip',
+            'rar': 'icon-file-zip',
+            'jpg': 'icon-file-image',
+            'jpeg': 'icon-file-image',
+            'png': 'icon-file-image',
+            'gif': 'icon-file-image',
+            'mp4': 'icon-file-video',
+            'avi': 'icon-file-video',
+            'mov': 'icon-file-video',
+            'mp3': 'icon-file-audio',
+            'wav': 'icon-file-audio'
+        };
+        return typeMap[fileType.toLowerCase()] || 'icon-file';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericSliderComponent, isStandalone: true, selector: "core-generic-slider", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", slideChanged: "slideChanged" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div class=\"c-slider\" \n     [style]=\"containerStyles()\"\n     (mouseenter)=\"onMouseEnter()\"\n     (mouseleave)=\"onMouseLeave()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (touchmove)=\"onTouchMove($event)\"\n     (touchend)=\"onTouchEnd()\">\n  \n  <!-- Main slider container -->\n  <div class=\"c-slider__container\">\n    \n    <!-- Previous arrow -->\n    @if (showArrows()) {\n      <div class=\"c-slider__arrow c-slider__arrow--prev\">\n        <core-generic-button\n          [config]=\"prevButtonConfig()\"\n          (buttonClick)=\"goToPrevious()\">\n        </core-generic-button>\n      </div>\n    }\n\n    <!-- Slides wrapper -->\n    <div class=\"c-slider__wrapper\">\n      <div class=\"c-slider__track\" [style]=\"slideStyles()\">\n        @for (slide of items(); track slide.id; let i = $index) {\n          <div class=\"c-slider__slide\" \n               [class.c-slider__slide--active]=\"isActiveSlide(i)\"\n               [style.width]=\"getSlideWidth()\"\n               (click)=\"onSlideClick(slide, i)\">\n            \n            <!-- Image -->\n            <div class=\"c-slider__image-container\">\n              @if (mergedConfig().lazyLoad) {\n                <img [src]=\"getSlideImage(slide)\" \n                     [alt]=\"getSlideAlt(slide)\"\n                     class=\"c-slider__image\"\n                     loading=\"lazy\">\n              } @else {\n                <img [src]=\"getSlideImage(slide)\" \n                     [alt]=\"getSlideAlt(slide)\"\n                     class=\"c-slider__image\">\n              }\n              \n              <!-- File Preview Icon -->\n              @if (mergedConfig().showFilePreview && slide.filePreview) {\n                <div class=\"c-slider__file-preview\">\n                  <div class=\"c-slider__file-icon\">\n                    <span class=\"icon-file\" [ngClass]=\"getFileTypeIcon(slide.filePreview.fileType)\"></span>\n                  </div>\n                  <div class=\"c-slider__file-info\">\n                    <span class=\"c-slider__file-name\">{{ slide.filePreview.fileName }}</span>\n                    @if (slide.filePreview.fileSize) {\n                      <span class=\"c-slider__file-size\">{{ slide.filePreview.fileSize }}</span>\n                    }\n                  </div>\n                </div>\n              }\n              \n              <!-- Overlay content -->\n              @if (slide.title || slide.description) {\n                <div class=\"c-slider__overlay\">\n                  @if (slide.title) {\n                    <h3 class=\"c-slider__title\">{{ slide.title }}</h3>\n                  }\n                  @if (slide.description) {\n                    <p class=\"c-slider__description\">{{ slide.description }}</p>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Next arrow -->\n    @if (showArrows()) {\n      <div class=\"c-slider__arrow c-slider__arrow--next\">\n        <core-generic-button\n          [config]=\"nextButtonConfig()\"\n          (buttonClick)=\"goToNext()\">\n        </core-generic-button>\n      </div>\n    }\n  </div>\n\n  <!-- Counter -->\n  @if (showCounter()) {\n    <div class=\"c-slider__counter\">\n      <span class=\"c-slider__counter-text\">{{ getCounterText() }}</span>\n    </div>\n  }\n\n  <!-- Dots navigation -->\n  @if (showDots()) {\n    <div class=\"c-slider__dots\">\n      @for (item of items(); track item.id; let i = $index) {\n        <button type=\"button\"\n                class=\"c-slider__dot\"\n                [class.c-slider__dot--active]=\"isActiveDot(i)\"\n                [attr.aria-label]=\"'slider.go-to-slide' | translate: {number: i + 1}\"\n                (click)=\"onDotClick(i)\">\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Thumbnails -->\n  @if (showThumbnails()) {\n    <div class=\"c-slider__thumbnails\" \n         [class.c-slider__thumbnails--vertical]=\"mergedConfig().verticalThumbnails\">\n      @for (thumbnail of thumbnails(); track thumbnail.id; let i = $index) {\n        <button type=\"button\"\n                class=\"c-slider__thumbnail\"\n                [class.c-slider__thumbnail--active]=\"isActiveThumbnail(i)\"\n                [style.height]=\"mergedConfig().thumbnailHeight\"\n                (click)=\"onThumbnailClick(i)\">\n          <img [src]=\"thumbnail.imageUrl\" \n               [alt]=\"thumbnail.alt || thumbnail.title\"\n               class=\"c-slider__thumbnail-image\">\n          @if (thumbnail.title) {\n            <span class=\"c-slider__thumbnail-title\">{{ thumbnail.title }}</span>\n          }\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Empty state -->\n  @if (totalItems() === 0) {\n    <div class=\"c-slider__empty\">\n      <div class=\"c-slider__empty-icon\">\n        <i class=\"icon-image\" aria-hidden=\"true\"></i>\n      </div>\n      <p class=\"c-slider__empty-text\">{{ 'slider.no-items' | translate }}</p>\n    </div>\n  }\n\n  <!-- Loading state -->\n  @if (isDragging()) {\n    <div class=\"c-slider__loading\">\n      <div class=\"c-slider__loading-spinner\"></div>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImageModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-image-modal', standalone: true, imports: [CommonModule], hostDirectives: [CoreHostDirective], template: "<div class=\"c-img-modal js-img-modal\" [class.is-visible]=\"isVisible()\">\n  <span class=\"c-img-modal__close icon-cross-thin js-gallery-modal-close\" (click)=\"closeModal()\"></span>\n  <div class=\"c-img-modal__overlay js-img-modal-close\" (click)=\"closeModal()\"></div>\n  <div \n    class=\"c-img-modal__holder\" \n    #imageContainer\n    [style.transform]=\"getHolderTransform()\"\n    [style.cursor]=\"getCursor()\"\n    (mousedown)=\"onMouseDown($event)\"\n    (wheel)=\"onWheel($event)\"\n    (touchstart)=\"onTouchStart($event)\"\n    (touchmove)=\"onTouchMove($event)\"\n    (touchend)=\"onTouchEnd()\"\n    (dblclick)=\"onDoubleClick()\">\n    <img \n      #modalImage\n      [src]=\"imageSrc()\" \n      [alt]=\"imageAlt()\" \n      class=\"js-img-modal-img\"\n      draggable=\"false\">\n  </div>\n</div>\n", styles: [".c-img-modal__holder{transform-origin:center center;overflow:visible;will-change:transform}.c-img-modal__holder img{transform-origin:center center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.c-img-modal__holder[style*=transform]{backface-visibility:hidden;perspective:1000px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { modalImage: [{
-                type: ViewChild,
-                args: ['modalImage', { static: false }]
-            }], imageContainer: [{
-                type: ViewChild,
-                args: ['imageContainer', { static: false }]
-            }], handleKeydown: [{
+            args: [{ selector: 'core-generic-slider', standalone: true, imports: [CommonModule, TranslateModule, GenericButtonComponent], template: "<div class=\"c-slider\" \n     [style]=\"containerStyles()\"\n     (mouseenter)=\"onMouseEnter()\"\n     (mouseleave)=\"onMouseLeave()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (touchmove)=\"onTouchMove($event)\"\n     (touchend)=\"onTouchEnd()\">\n  \n  <!-- Main slider container -->\n  <div class=\"c-slider__container\">\n    \n    <!-- Previous arrow -->\n    @if (showArrows()) {\n      <div class=\"c-slider__arrow c-slider__arrow--prev\">\n        <core-generic-button\n          [config]=\"prevButtonConfig()\"\n          (buttonClick)=\"goToPrevious()\">\n        </core-generic-button>\n      </div>\n    }\n\n    <!-- Slides wrapper -->\n    <div class=\"c-slider__wrapper\">\n      <div class=\"c-slider__track\" [style]=\"slideStyles()\">\n        @for (slide of items(); track slide.id; let i = $index) {\n          <div class=\"c-slider__slide\" \n               [class.c-slider__slide--active]=\"isActiveSlide(i)\"\n               [style.width]=\"getSlideWidth()\"\n               (click)=\"onSlideClick(slide, i)\">\n            \n            <!-- Image -->\n            <div class=\"c-slider__image-container\">\n              @if (mergedConfig().lazyLoad) {\n                <img [src]=\"getSlideImage(slide)\" \n                     [alt]=\"getSlideAlt(slide)\"\n                     class=\"c-slider__image\"\n                     loading=\"lazy\">\n              } @else {\n                <img [src]=\"getSlideImage(slide)\" \n                     [alt]=\"getSlideAlt(slide)\"\n                     class=\"c-slider__image\">\n              }\n              \n              <!-- File Preview Icon -->\n              @if (mergedConfig().showFilePreview && slide.filePreview) {\n                <div class=\"c-slider__file-preview\">\n                  <div class=\"c-slider__file-icon\">\n                    <span class=\"icon-file\" [ngClass]=\"getFileTypeIcon(slide.filePreview.fileType)\"></span>\n                  </div>\n                  <div class=\"c-slider__file-info\">\n                    <span class=\"c-slider__file-name\">{{ slide.filePreview.fileName }}</span>\n                    @if (slide.filePreview.fileSize) {\n                      <span class=\"c-slider__file-size\">{{ slide.filePreview.fileSize }}</span>\n                    }\n                  </div>\n                </div>\n              }\n              \n              <!-- Overlay content -->\n              @if (slide.title || slide.description) {\n                <div class=\"c-slider__overlay\">\n                  @if (slide.title) {\n                    <h3 class=\"c-slider__title\">{{ slide.title }}</h3>\n                  }\n                  @if (slide.description) {\n                    <p class=\"c-slider__description\">{{ slide.description }}</p>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Next arrow -->\n    @if (showArrows()) {\n      <div class=\"c-slider__arrow c-slider__arrow--next\">\n        <core-generic-button\n          [config]=\"nextButtonConfig()\"\n          (buttonClick)=\"goToNext()\">\n        </core-generic-button>\n      </div>\n    }\n  </div>\n\n  <!-- Counter -->\n  @if (showCounter()) {\n    <div class=\"c-slider__counter\">\n      <span class=\"c-slider__counter-text\">{{ getCounterText() }}</span>\n    </div>\n  }\n\n  <!-- Dots navigation -->\n  @if (showDots()) {\n    <div class=\"c-slider__dots\">\n      @for (item of items(); track item.id; let i = $index) {\n        <button type=\"button\"\n                class=\"c-slider__dot\"\n                [class.c-slider__dot--active]=\"isActiveDot(i)\"\n                [attr.aria-label]=\"'slider.go-to-slide' | translate: {number: i + 1}\"\n                (click)=\"onDotClick(i)\">\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Thumbnails -->\n  @if (showThumbnails()) {\n    <div class=\"c-slider__thumbnails\" \n         [class.c-slider__thumbnails--vertical]=\"mergedConfig().verticalThumbnails\">\n      @for (thumbnail of thumbnails(); track thumbnail.id; let i = $index) {\n        <button type=\"button\"\n                class=\"c-slider__thumbnail\"\n                [class.c-slider__thumbnail--active]=\"isActiveThumbnail(i)\"\n                [style.height]=\"mergedConfig().thumbnailHeight\"\n                (click)=\"onThumbnailClick(i)\">\n          <img [src]=\"thumbnail.imageUrl\" \n               [alt]=\"thumbnail.alt || thumbnail.title\"\n               class=\"c-slider__thumbnail-image\">\n          @if (thumbnail.title) {\n            <span class=\"c-slider__thumbnail-title\">{{ thumbnail.title }}</span>\n          }\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Empty state -->\n  @if (totalItems() === 0) {\n    <div class=\"c-slider__empty\">\n      <div class=\"c-slider__empty-icon\">\n        <i class=\"icon-image\" aria-hidden=\"true\"></i>\n      </div>\n      <p class=\"c-slider__empty-text\">{{ 'slider.no-items' | translate }}</p>\n    </div>\n  }\n\n  <!-- Loading state -->\n  @if (isDragging()) {\n    <div class=\"c-slider__loading\">\n      <div class=\"c-slider__loading-spinner\"></div>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { onKeydown: [{
                 type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }], onDocumentMouseMove: [{
-                type: HostListener,
-                args: ['document:mousemove', ['$event']]
-            }], onDocumentMouseUp: [{
-                type: HostListener,
-                args: ['document:mouseup']
+                args: ['keydown', ['$event']]
             }] } });
 
+var SliderDirection;
+(function (SliderDirection) {
+    SliderDirection["HORIZONTAL"] = "horizontal";
+    SliderDirection["VERTICAL"] = "vertical";
+})(SliderDirection || (SliderDirection = {}));
+var SliderTransition;
+(function (SliderTransition) {
+    SliderTransition["SLIDE"] = "slide";
+    SliderTransition["FADE"] = "fade";
+    SliderTransition["SCALE"] = "scale";
+})(SliderTransition || (SliderTransition = {}));
+var SliderNavigationType;
+(function (SliderNavigationType) {
+    SliderNavigationType["DOTS"] = "dots";
+    SliderNavigationType["ARROWS"] = "arrows";
+    SliderNavigationType["THUMBNAILS"] = "thumbnails";
+    SliderNavigationType["COUNTER"] = "counter";
+})(SliderNavigationType || (SliderNavigationType = {}));
+
 class CacheBustingInterceptor {
     intercept(req, next) {
         if (req.url.includes('/assets/i18n/') && req.url.endsWith('.json')) {
@@ -12290,5 +12816,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, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SmartFieldComponent, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, 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, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericSliderComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SliderActionType, SliderDirection, SliderNavigationType, SliderService, SliderTransition, SmartFieldComponent, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, 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