@solcre-org/core-ui 2.12.0 → 2.12.1

package/assets/css/inc/components/image-preview.css

@@ -2,9 +2,9 @@
 /** COMPONENT: IMAGE PREVIEW
 /* ******************************************** */
 
-*:has(> .c-img-preview){
+/* *:has(> .c-img-preview){
     position: relative;
-}
+} */
 
 .c-img-preview{
     cursor: pointer;

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

@@ -969,6 +969,7 @@ class ImagePreviewComponent {
     borderRadius = input('4px');
     cursor = input('pointer');
     loading = input('lazy');
+    isRelative = input(false);
     onImageClick() {
         this.imageModalService.openImageModal({
             src: this.src(),
@@ -977,7 +978,7 @@ class ImagePreviewComponent {
         });
     }
     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     (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 }] });
+    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 }, isRelative: { classPropertyName: "isRelative", publicName: "isRelative", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-img-preview\" \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,
@@ -1469,7 +1470,7 @@ 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                      <div class=\"c-attachments__pic\">\n                        @if(isPreviewFile(file) && getOriginalUrl(file)) {\n                          <core-image-preview\n                            [src]=\"getOriginalUrl(file)!\"\n                            [alt]=\"file.name\"\n                          ></core-image-preview>\n                        } @else if(getPreviewUrl(file)) {\n                          <core-image-preview\n                            [src]=\"getPreviewUrl(file)!\"\n                            [alt]=\"file.name\"\n                          ></core-image-preview>\n                        }\n                      </div>\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"] }] });
+    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                      <div class=\"c-attachments__pic\">\n                        @if(isPreviewFile(file) && getOriginalUrl(file)) {\n                          <core-image-preview\n                            [src]=\"getOriginalUrl(file)!\"\n                            [alt]=\"file.name\"\n                          ></core-image-preview>\n                        } @else if(getPreviewUrl(file)) {\n                          <core-image-preview\n                            [src]=\"getPreviewUrl(file)!\"\n                            [alt]=\"file.name\"\n                          ></core-image-preview>\n                        }\n                      </div>\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", "isRelative"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileFieldComponent, decorators: [{
             type: Component,
@@ -10830,11 +10831,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.12.0',
+    full: '2.12.1',
     major: 2,
     minor: 12,
-    patch: 0,
-    timestamp: '2025-09-02T20:07:18.238Z',
+    patch: 1,
+    timestamp: '2025-09-02T20:43:25.016Z',
     buildDate: '2/9/2025'
 };
 
@@ -12746,7 +12747,7 @@ class CarouselComponent {
     showDots = computed(() => this.config().showDots ?? true);
     showArrows = computed(() => this.config().showArrows ?? true);
     arrowsOutside = computed(() => this.config().arrowsOutside ?? false);
-    itemsGap = computed(() => this.config().itemsGap ?? '0px');
+    itemsGap = computed(() => this.config().itemsGap ?? '10px');
     controlsOffset = computed(() => this.config().controlsOffset ?? '2rem');
     controlsSize = computed(() => this.config().controlsSize ?? '2.5rem');
     ariaLabel = computed(() => this.config().ariaLabel ?? 'Galería de imágenes');
@@ -12865,30 +12866,12 @@ class CarouselComponent {
             'flex': `0 0 ${100 / this.perView()}%`
         };
     }
-    getImages() {
-        return this.images();
-    }
-    getCarouselClasses() {
-        return this.carouselClasses();
-    }
-    getShowArrows() {
-        return this.showArrows() && this.images().length > this.perView();
-    }
-    getShowDots() {
-        return this.showDots() && this.pagesLength() > 1;
-    }
-    getDots() {
-        return this.dots();
-    }
-    getAriaLabel() {
-        return this.ariaLabel();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: CarouselComponent, isStandalone: true, selector: "core-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "carouselHolder", first: true, predicate: ["carouselHolder"], descendants: true, isSignal: true }, { propertyName: "carouselViewport", first: true, predicate: ["carouselViewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div \n  [ngClass]=\"getCarouselClasses()\"\n  [attr.aria-label]=\"getAriaLabel()\"\n  tabindex=\"0\"\n  #carouselViewport>\n  \n  <div class=\"c-img-carousel__viewport\">\n    <div class=\"c-img-carousel__holder js-img-carousel-holder\" #carouselHolder>\n      <div \n        *ngFor=\"let image of getImages(); let i = index\"\n        class=\"c-img-carousel__slide js-img-carousel-slide\"\n        [ngStyle]=\"getSlideStyle(i)\">\n        <div class=\"c-img-carousel__slide-inner\">\n          <img \n            [src]=\"image.url\" \n            [alt]=\"image.alt || 'Imagen ' + (i + 1)\"\n            loading=\"lazy\">\n        </div>\n      </div>\n    </div>\n    \n    <!-- Botones de navegaci\u00F3n -->\n    <button \n      *ngIf=\"getShowArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n      type=\"button\"\n      (click)=\"goToPrevSlide()\"\n      [attr.aria-label]=\"'Anterior'\"\n      data-control=\"prevBtn\">\n    </button>\n    \n    <button \n      *ngIf=\"getShowArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n      type=\"button\"\n      (click)=\"goToNextSlide()\"\n      [attr.aria-label]=\"'Siguiente'\"\n      data-control=\"nextBtn\">\n    </button>\n    \n    <!-- Indicadores de navegaci\u00F3n (dots) -->\n    <div \n      *ngIf=\"getShowDots()\"\n      class=\"c-img-carousel__dots js-img-carousel-nav\"\n      aria-label=\"Navegaci\u00F3n\">\n      <button\n        *ngFor=\"let dot of getDots(); let i = index\"\n        class=\"c-img-carousel__dot js-img-carousel-dot\"\n        type=\"button\"\n        (click)=\"goToPage(i)\"\n        [attr.aria-label]=\"'Ir a p\u00E1gina ' + (i + 1)\"\n        [attr.aria-current]=\"isDotActive(i) ? 'true' : 'false'\">\n      </button>\n    </div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CarouselComponent, isStandalone: true, selector: "core-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "carouselHolder", first: true, predicate: ["carouselHolder"], descendants: true, isSignal: true }, { propertyName: "carouselViewport", first: true, predicate: ["carouselViewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div \n  [ngClass]=\"carouselClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  #carouselViewport>\n  \n  <div class=\"c-img-carousel__viewport\">\n    <div class=\"c-img-carousel__holder js-img-carousel-holder\" #carouselHolder>\n      <div \n        *ngFor=\"let image of images(); let i = index\"\n        class=\"c-img-carousel__slide js-img-carousel-slide\">\n        <div class=\"c-img-carousel__slide-inner\">\n          <div>\n            <core-image-preview\n              [src]=\"image.url\"\n              [alt]=\"image.alt || 'Image ' + (i + 1)\"\n              [title]=\"image.title || image.alt || 'Image ' + (i + 1)\">\n            </core-image-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    @if (!config().arrowsOutside) {\n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n        type=\"button\"\n        (click)=\"goToPrevSlide()\"\n        [attr.aria-label]=\"'Anterior'\"\n        data-control=\"prevBtn\">\n      </button>\n      \n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n        type=\"button\"\n        (click)=\"goToNextSlide()\"\n        [attr.aria-label]=\"'Siguiente'\"\n        data-control=\"nextBtn\">\n      </button>\n    }\n    \n    <div \n      *ngIf=\"showDots()\"\n      class=\"c-img-carousel__dots js-img-carousel-nav\"\n      aria-label=\"Navegaci\u00F3n\">\n      <button\n        *ngFor=\"let page of dots(); let i = index\"\n        class=\"c-img-carousel__dot js-img-carousel-dot\"\n        type=\"button\"\n        (click)=\"goToPage(i)\"\n        [class.c-img-carousel__dot--active]=\"currentPage() === i\"\n        [attr.aria-label]=\"'Ir a p\u00E1gina ' + (i + 1)\"\n        [attr.aria-current]=\"currentPage() === i ? 'true' : 'false'\">\n      </button>\n    </div>\n  </div>\n  @if(config().arrowsOutside) {\n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n      type=\"button\"\n      (click)=\"goToPrevSlide()\"\n      [attr.aria-label]=\"'Anterior'\"\n      data-control=\"prevBtn\">\n    </button>\n    \n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n      type=\"button\"\n      (click)=\"goToNextSlide()\"\n      [attr.aria-label]=\"'Siguiente'\"\n      data-control=\"nextBtn\">\n    </button>\n  }\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImagePreviewComponent, selector: "core-image-preview", inputs: ["src", "alt", "title", "width", "height", "objectFit", "borderRadius", "cursor", "loading", "isRelative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-carousel', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  [ngClass]=\"getCarouselClasses()\"\n  [attr.aria-label]=\"getAriaLabel()\"\n  tabindex=\"0\"\n  #carouselViewport>\n  \n  <div class=\"c-img-carousel__viewport\">\n    <div class=\"c-img-carousel__holder js-img-carousel-holder\" #carouselHolder>\n      <div \n        *ngFor=\"let image of getImages(); let i = index\"\n        class=\"c-img-carousel__slide js-img-carousel-slide\"\n        [ngStyle]=\"getSlideStyle(i)\">\n        <div class=\"c-img-carousel__slide-inner\">\n          <img \n            [src]=\"image.url\" \n            [alt]=\"image.alt || 'Imagen ' + (i + 1)\"\n            loading=\"lazy\">\n        </div>\n      </div>\n    </div>\n    \n    <!-- Botones de navegaci\u00F3n -->\n    <button \n      *ngIf=\"getShowArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n      type=\"button\"\n      (click)=\"goToPrevSlide()\"\n      [attr.aria-label]=\"'Anterior'\"\n      data-control=\"prevBtn\">\n    </button>\n    \n    <button \n      *ngIf=\"getShowArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n      type=\"button\"\n      (click)=\"goToNextSlide()\"\n      [attr.aria-label]=\"'Siguiente'\"\n      data-control=\"nextBtn\">\n    </button>\n    \n    <!-- Indicadores de navegaci\u00F3n (dots) -->\n    <div \n      *ngIf=\"getShowDots()\"\n      class=\"c-img-carousel__dots js-img-carousel-nav\"\n      aria-label=\"Navegaci\u00F3n\">\n      <button\n        *ngFor=\"let dot of getDots(); let i = index\"\n        class=\"c-img-carousel__dot js-img-carousel-dot\"\n        type=\"button\"\n        (click)=\"goToPage(i)\"\n        [attr.aria-label]=\"'Ir a p\u00E1gina ' + (i + 1)\"\n        [attr.aria-current]=\"isDotActive(i) ? 'true' : 'false'\">\n      </button>\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'core-carousel', standalone: true, imports: [CommonModule, ImagePreviewComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  [ngClass]=\"carouselClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  #carouselViewport>\n  \n  <div class=\"c-img-carousel__viewport\">\n    <div class=\"c-img-carousel__holder js-img-carousel-holder\" #carouselHolder>\n      <div \n        *ngFor=\"let image of images(); let i = index\"\n        class=\"c-img-carousel__slide js-img-carousel-slide\">\n        <div class=\"c-img-carousel__slide-inner\">\n          <div>\n            <core-image-preview\n              [src]=\"image.url\"\n              [alt]=\"image.alt || 'Image ' + (i + 1)\"\n              [title]=\"image.title || image.alt || 'Image ' + (i + 1)\">\n            </core-image-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    @if (!config().arrowsOutside) {\n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n        type=\"button\"\n        (click)=\"goToPrevSlide()\"\n        [attr.aria-label]=\"'Anterior'\"\n        data-control=\"prevBtn\">\n      </button>\n      \n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n        type=\"button\"\n        (click)=\"goToNextSlide()\"\n        [attr.aria-label]=\"'Siguiente'\"\n        data-control=\"nextBtn\">\n      </button>\n    }\n    \n    <div \n      *ngIf=\"showDots()\"\n      class=\"c-img-carousel__dots js-img-carousel-nav\"\n      aria-label=\"Navegaci\u00F3n\">\n      <button\n        *ngFor=\"let page of dots(); let i = index\"\n        class=\"c-img-carousel__dot js-img-carousel-dot\"\n        type=\"button\"\n        (click)=\"goToPage(i)\"\n        [class.c-img-carousel__dot--active]=\"currentPage() === i\"\n        [attr.aria-label]=\"'Ir a p\u00E1gina ' + (i + 1)\"\n        [attr.aria-current]=\"currentPage() === i ? 'true' : 'false'\">\n      </button>\n    </div>\n  </div>\n  @if(config().arrowsOutside) {\n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n      type=\"button\"\n      (click)=\"goToPrevSlide()\"\n      [attr.aria-label]=\"'Anterior'\"\n      data-control=\"prevBtn\">\n    </button>\n    \n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n      type=\"button\"\n      (click)=\"goToNextSlide()\"\n      [attr.aria-label]=\"'Siguiente'\"\n      data-control=\"nextBtn\">\n    </button>\n  }\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']