@solcre-org/core-ui 2.11.42 → 2.12.0

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

@@ -989,6 +989,7 @@ class FileFieldComponent extends BaseFieldComponent {
     selectedFiles = signal([]);
     existingFiles = signal([]);
     previewUrls = signal([]);
+    newFilesPreviews = signal([]);
     previewBlobs = signal([]);
     previewFileIds = signal(new Map());
     errorMessage = signal('');
@@ -1005,10 +1006,18 @@ class FileFieldComponent extends BaseFieldComponent {
         const existing = this.existingFiles();
         const selected = this.selectedFiles();
         const blobs = this.previewBlobs();
-        if (blobs.length > 0) {
-            return [...selected, ...blobs];
+        const hasPreviewUrls = this.getPreviewUrls().length > 0;
+        if (hasPreviewUrls) {
+            return [...blobs, ...selected];
+        }
+        else {
+            return [...existing, ...selected];
         }
-        return [...existing, ...selected];
+    });
+    allPreviewUrls = computed(() => {
+        const remoteUrls = this.previewUrls();
+        const newFileUrls = this.newFilesPreviews();
+        return [...remoteUrls, ...newFileUrls];
     });
     previewUrlsEffect = effect(() => {
         const previewUrls = this.getPreviewUrls();
@@ -1018,17 +1027,8 @@ class FileFieldComponent extends BaseFieldComponent {
     });
     valueChangeEffect = effect(() => {
         const currentValue = this.value();
-        const field = this.field();
-        const syncEnabled = field.syncWithValue !== false;
-        if (syncEnabled) {
-            this.reinitializeFilesFromValue(currentValue, field);
-        }
-    });
-    refreshTriggerEffect = effect(() => {
-        const field = this.field();
-        if (field.refreshTrigger !== undefined) {
-            const currentValue = this.value();
-            this.reinitializeFilesFromValue(currentValue, field);
+        if (currentValue) {
+            setTimeout(() => this.regeneratePreviewsIfNeeded(), 0);
         }
     });
     getPreviewUrls() {
@@ -1098,6 +1098,10 @@ class FileFieldComponent extends BaseFieldComponent {
     ngOnInit() {
         super.ngOnInit();
         this.initializeFiles();
+        setTimeout(() => this.regeneratePreviewsIfNeeded(), 100);
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.regeneratePreviewsIfNeeded(), 200);
     }
     initializeFormControl() {
         const modeConfig = this.field().modes?.[this.mode()];
@@ -1151,53 +1155,71 @@ class FileFieldComponent extends BaseFieldComponent {
             this.existingFiles.set([]);
         }
     }
-    reinitializeFilesFromValue(currentValue, field) {
-        this.selectedFiles.set([]);
-        this.existingFiles.set([]);
-        this.previewUrls.set([]);
-        this.previewBlobs.set([]);
-        this.previewFileIds.set(new Map());
-        this.clearLocalError();
+    regeneratePreviewsIfNeeded() {
+        const currentValue = this.value();
+        const field = this.field();
         const hasPreviewUrls = field.previewUrls && ((Array.isArray(field.previewUrls) && field.previewUrls.length > 0) ||
             (typeof field.previewUrls === 'function'));
-        if (currentValue && !hasPreviewUrls) {
+        if (currentValue) {
+            const currentNewPreviews = this.newFilesPreviews();
+            const currentSelected = this.selectedFiles();
             if (currentValue instanceof File) {
-                this.selectedFiles.set([currentValue]);
-                this.generatePreviews([currentValue]);
+                if (!currentSelected.includes(currentValue) || currentNewPreviews.length === 0) {
+                    this.selectedFiles.set([currentValue]);
+                    this.generatePreviews([currentValue]);
+                }
             }
             else if (Array.isArray(currentValue)) {
                 const files = currentValue.filter(v => v instanceof File);
                 const serverFiles = currentValue.filter(v => this.isServerFile(v));
-                this.selectedFiles.set(files);
-                this.existingFiles.set(serverFiles);
-                this.generatePreviews(files);
-            }
-            else if (this.isServerFile(currentValue)) {
-                this.existingFiles.set([currentValue]);
+                const filesMatch = files.length === currentSelected.length &&
+                    files.every(file => currentSelected.includes(file));
+                if (!filesMatch || (files.length > 0 && currentNewPreviews.length === 0)) {
+                    this.selectedFiles.set(files);
+                    if (!hasPreviewUrls) {
+                        this.existingFiles.set(serverFiles);
+                    }
+                    this.generatePreviews(files);
+                }
+                else if (files.length === 0 && serverFiles.length > 0 && currentSelected.length > 0) {
+                    this.selectedFiles.set([]);
+                    if (!hasPreviewUrls) {
+                        this.existingFiles.set(serverFiles);
+                    }
+                    this.newFilesPreviews.set([]);
+                }
             }
         }
-        else if (hasPreviewUrls) {
-            this.selectedFiles.set([]);
-            this.existingFiles.set([]);
-        }
     }
     isServerFile(value) {
         return value && typeof value === 'object' && 'id' in value && 'filename' in value;
     }
-    forceRefresh() {
-        const currentValue = this.value();
-        const field = this.field();
-        this.reinitializeFilesFromValue(currentValue, field);
-    }
     generatePreviews(files) {
+        if (!files.length)
+            return;
         const urls = [];
-        files.forEach(file => {
+        let processedCount = 0;
+        const totalFiles = files.filter(file => file.type.startsWith('image/')).length;
+        if (totalFiles === 0)
+            return;
+        files.forEach((file, index) => {
             if (file.type.startsWith('image/')) {
                 const reader = new FileReader();
                 reader.onload = (e) => {
                     if (e.target?.result) {
-                        urls.push(e.target.result);
-                        this.previewUrls.set([...urls]);
+                        urls[index] = e.target.result;
+                        processedCount++;
+                        if (processedCount === totalFiles) {
+                            const validUrls = urls.filter(url => url);
+                            this.newFilesPreviews.set(validUrls);
+                        }
+                    }
+                };
+                reader.onerror = () => {
+                    processedCount++;
+                    if (processedCount === totalFiles) {
+                        const validUrls = urls.filter(url => url);
+                        this.newFilesPreviews.set(validUrls);
                     }
                 };
                 reader.readAsDataURL(file);
@@ -1412,6 +1434,31 @@ class FileFieldComponent extends BaseFieldComponent {
             return -1;
         return this.selectedFiles().indexOf(file);
     }
+    getPreviewUrlForFile(file) {
+        if (this.isPreviewFile(file)) {
+            return this.getOriginalUrl(file);
+        }
+        if (!this.isServerFile(file)) {
+            const fileIndex = this.selectedFiles().indexOf(file);
+            if (fileIndex >= 0) {
+                const newFilePreviews = this.newFilesPreviews();
+                return newFilePreviews[fileIndex] || null;
+            }
+        }
+        return null;
+    }
+    getPreviewUrl(file) {
+        if (this.isServerFile(file))
+            return null;
+        if (this.isPreviewFile(file))
+            return this.getOriginalUrl(file);
+        const fileIndex = this.selectedFiles().indexOf(file);
+        if (fileIndex >= 0) {
+            const newFilePreviews = this.newFilesPreviews();
+            return newFilePreviews[fileIndex] || null;
+        }
+        return null;
+    }
     isPreviewFile(file) {
         return !this.isServerFile(file) && file.__isPreviewFile === true;
     }
@@ -1422,11 +1469,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                      <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(getPreviewIndex(file) >= 0 && previewUrls()[getPreviewIndex(file)]) {\n                          <core-image-preview\n                            [src]=\"previewUrls()[getPreviewIndex(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"] }] });
 }
 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, 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                      <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(getPreviewIndex(file) >= 0 && previewUrls()[getPreviewIndex(file)]) {\n                          <core-image-preview\n                            [src]=\"previewUrls()[getPreviewIndex(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" }]
+            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                      <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" }]
         }] });
 
 var NumberFieldConfigType;
@@ -10783,11 +10830,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.42',
+    full: '2.12.0',
     major: 2,
-    minor: 11,
-    patch: 42,
-    timestamp: '2025-09-02T17:49:00.511Z',
+    minor: 12,
+    patch: 0,
+    timestamp: '2025-09-02T20:07:18.238Z',
     buildDate: '2/9/2025'
 };
 
@@ -12685,6 +12732,171 @@ var SliderNavigationType;
     SliderNavigationType["COUNTER"] = "counter";
 })(SliderNavigationType || (SliderNavigationType = {}));
 
+class CarouselComponent {
+    images = input([]);
+    config = input({});
+    carouselHolder = viewChild('carouselHolder');
+    carouselViewport = viewChild('carouselViewport');
+    currentIndex = signal(0);
+    timer = signal(null);
+    autoplay = computed(() => this.config().autoplay ?? false);
+    interval = computed(() => this.config().interval ?? 3000);
+    perView = computed(() => Math.max(1, this.config().perView ?? 1));
+    step = computed(() => Math.max(1, this.config().step ?? this.perView()));
+    showDots = computed(() => this.config().showDots ?? true);
+    showArrows = computed(() => this.config().showArrows ?? true);
+    arrowsOutside = computed(() => this.config().arrowsOutside ?? false);
+    itemsGap = computed(() => this.config().itemsGap ?? '0px');
+    controlsOffset = computed(() => this.config().controlsOffset ?? '2rem');
+    controlsSize = computed(() => this.config().controlsSize ?? '2.5rem');
+    ariaLabel = computed(() => this.config().ariaLabel ?? 'Galería de imágenes');
+    maxIndex = computed(() => Math.max(0, this.images().length - this.perView()));
+    pagesLength = computed(() => Math.max(1, Math.ceil(this.images().length / this.perView())));
+    dots = computed(() => Array.from({ length: this.pagesLength() }, (_, i) => i));
+    currentPage = computed(() => Math.min(this.pagesLength() - 1, Math.floor(this.currentIndex() / this.perView())));
+    carouselClasses = computed(() => {
+        const classes = ['c-img-carousel', 'js-img-carousel'];
+        if (this.arrowsOutside()) {
+            classes.push('c-img-carousel--arrows-out');
+        }
+        return classes;
+    });
+    constructor() {
+        effect(() => {
+            const viewport = this.carouselViewport();
+            if (viewport) {
+                const element = viewport.nativeElement;
+                element.style.setProperty('--per-view', this.perView().toString());
+                element.style.setProperty('--items-gap', this.itemsGap());
+                element.style.setProperty('--controls-offset', this.controlsOffset());
+                element.style.setProperty('--controls-size', this.controlsSize());
+            }
+        });
+        effect(() => {
+            const shouldAutoplay = this.autoplay() && this.images().length > 1;
+            const currentTimer = this.timer();
+            if (shouldAutoplay && !currentTimer) {
+                this.startAutoplay();
+            }
+            else if (!shouldAutoplay && currentTimer) {
+                this.stopAutoplay();
+            }
+        });
+        effect(() => {
+            const holder = this.carouselHolder();
+            const index = this.currentIndex();
+            if (holder) {
+                const element = holder.nativeElement;
+                const percentage = -(index * (100 / this.perView()));
+                element.style.transform = `translateX(${percentage}%)`;
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.goToSlide(0, false);
+    }
+    ngOnDestroy() {
+        this.stopAutoplay();
+    }
+    goToSlide(index, animate = true, fromAutoplay = false) {
+        if (index < 0) {
+            index = this.maxIndex();
+        }
+        else if (index > this.maxIndex()) {
+            index = 0;
+        }
+        const holder = this.carouselHolder();
+        if (holder) {
+            holder.nativeElement.style.transition = animate ? 'transform 350ms ease' : 'none';
+        }
+        this.currentIndex.set(index);
+        if (!fromAutoplay && this.autoplay()) {
+            this.restartAutoplay();
+        }
+    }
+    goToPage(pageIndex) {
+        const targetSlide = Math.min(this.maxIndex(), Math.max(0, pageIndex * this.perView()));
+        this.goToSlide(targetSlide, true, false);
+    }
+    goToNextSlide(fromAutoplay = false) {
+        this.goToSlide(this.currentIndex() + this.step(), true, fromAutoplay);
+    }
+    goToPrevSlide() {
+        this.goToSlide(this.currentIndex() - this.step(), true, false);
+    }
+    isDotActive(dotIndex) {
+        return dotIndex === this.currentPage();
+    }
+    startAutoplay() {
+        const currentTimer = this.timer();
+        if (currentTimer) {
+            clearInterval(currentTimer);
+        }
+        const intervalId = setInterval(() => {
+            this.goToNextSlide(true);
+        }, this.interval());
+        this.timer.set(intervalId);
+    }
+    stopAutoplay() {
+        const timerId = this.timer();
+        if (timerId) {
+            clearInterval(timerId);
+            this.timer.set(null);
+        }
+    }
+    restartAutoplay() {
+        if (this.autoplay()) {
+            this.startAutoplay();
+        }
+    }
+    onResize() {
+        this.goToSlide(this.currentIndex(), false);
+    }
+    onKeyDown(event) {
+        if (event.key === 'ArrowLeft') {
+            this.goToPrevSlide();
+        }
+        else if (event.key === 'ArrowRight') {
+            this.goToNextSlide();
+        }
+    }
+    getSlideStyle(index) {
+        return {
+            '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 });
+}
+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>" }]
+        }], ctorParameters: () => [], propDecorators: { onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
 class CacheBustingInterceptor {
     intercept(req, next) {
         if (req.url.includes('/assets/i18n/') && req.url.endsWith('.json')) {
@@ -13012,5 +13224,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, 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 };
+export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CarouselComponent, 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