@dataclouder/ngx-cloud-storage 0.0.31 → 0.0.35

package/fesm2022/dataclouder-ngx-cloud-storage.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, output, ViewChild, Component, Pipe, ChangeDetectorRef, Input, signal, computed } from '@angular/core';
+import { inject, Injectable, input, output, ViewChild, Component, Pipe, ChangeDetectorRef, Input, InjectionToken, signal, EventEmitter, Output, computed } from '@angular/core';
 import { ImageCropperComponent } from 'ngx-image-cropper';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AngularFireStorage } from '@angular/fire/compat/storage';
 import { getStorage, ref, listAll, deleteObject, getDownloadURL, Storage } from '@angular/fire/storage';
-import { lastValueFrom, BehaviorSubject } from 'rxjs';
+import { lastValueFrom, BehaviorSubject, firstValueFrom } from 'rxjs';
 import * as i4 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i5 from 'primeng/tooltip';
@@ -18,11 +18,21 @@ import * as i7 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i8 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import { MoodStateOptions, CharacterEventActions } from '@dataclouder/ngx-core';
+import { MoodStateOptions, APP_CONFIG, CharacterEventActions } from '@dataclouder/ngx-core';
 import * as i1$1 from '@angular/platform-browser';
 import * as i3 from 'primeng/api';
+import * as i1$2 from '@angular/common';
 import { AsyncPipe, CommonModule } from '@angular/common';
-import * as i3$1 from 'primeng/tag';
+import { HttpClient } from '@angular/common/http';
+import * as i2$1 from 'primeng/fileupload';
+import { FileUploadModule } from 'primeng/fileupload';
+import * as i3$1 from 'primeng/toast';
+import { ToastModule } from 'primeng/toast';
+import * as i4$1 from 'primeng/progressbar';
+import { ProgressBarModule } from 'primeng/progressbar';
+import * as i5$1 from 'primeng/badge';
+import { BadgeModule } from 'primeng/badge';
+import * as i3$2 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 
 const AspectRatioOptions = [
@@ -377,10 +387,10 @@ class MultiImagesStorageService {
             return null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MultiImagesStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MultiImagesStorageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MultiImagesStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MultiImagesStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MultiImagesStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MultiImagesStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -449,13 +459,13 @@ class CropperComponent {
     closeModal() {
         this.showModal = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CropperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CropperComponent, isStandalone: true, selector: "app-cropper", inputs: { imageSettings: { classPropertyName: "imageSettings", publicName: "imageSettings", isSignal: true, isRequired: false, transformFunction: null }, ratioType: { classPropertyName: "ratioType", publicName: "ratioType", isSignal: true, isRequired: false, transformFunction: null }, resolutions: { classPropertyName: "resolutions", publicName: "resolutions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUploaded: "imageUploaded", onImageCropped: "onImageCropped", onFileSelected: "onFileSelected" }, viewQueries: [{ propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true }], ngImport: i0, template: "<div> path: {{ storagePath }} </div>\n\n<div class=\"options\">\n  @if (!isUploaded) {\n    <div>\n      <input type=\"file\" id=\"file-upload\" class=\"file-input\" (change)=\"fileChangeEvent($event)\" />\n      <label for=\"file-upload\" class=\"btn-upload\">Seleccionar archivo</label>\n      @if (!fileMetadata) {\n        <em>Carga una imagen para comenzar</em>\n      }\n    </div>\n  }\n\n  @if (fileMetadata) {\n    <span>\n      <span style=\"margin: 1px 20px\"> tipo: {{ fileMetadata.type }} </span>\n      <span style=\"margin: 1px 20px\"> tama\u00F1o {{ fileMetadata.size }} </span>\n      <br />\n      <input\n        [disabled]=\"imageSettings()?.fileName\"\n        style=\"margin: 1px 20px; width: 400px\"\n        [(ngModel)]=\"renameFile\"\n        type=\"text\"\n        placeholder=\"Rename File\"\n        (ngModelChange)=\"reloadPath()\" />\n      <button class=\"btn-crop\" (click)=\"closeModal()\"> Recortar y Subir </button>\n    </span>\n  }\n</div>\n\n@if (fileMetadata && !isUploaded) {\n  <div class=\"modal\" [class.show-modal]=\"showModal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h3>Recortar imagen</h3>\n        <button class=\"close-button\" (click)=\"closeModal()\">\u00D7</button>\n      </div>\n      <div class=\"modal-body\">\n        <h1>Hlloa</h1>\n        <image-cropper\n          [imageChangedEvent]=\"imageChangedEvent\"\n          [maintainAspectRatio]=\"true\"\n          [aspectRatio]=\"aspectRatio\"\n          format=\"webp\"\n          [resizeToWidth]=\"450\"\n          (imageCropped)=\"onInnerImageCropped($event)\"\n          (loadImageFailed)=\"loadImageFailed()\"\n          (imageLoaded)=\"imageLoaded($event)\"\n        [autoCrop]=\"false\"></image-cropper>\n        <div class=\"modal-footer\">\n          <button class=\"btn-crop\" (click)=\"simpleCropAndUpload()\">Recortar y Subir</button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n@if (croppedImage && !isUploaded) {\n  <button [disabled]=\"isLoading\" nbButton status=\"info\"> upload </button>\n}\n", styles: [".options{display:flex}.btn-crop{cursor:pointer;outline:0;display:inline-block;font-weight:400;line-height:1.5;text-align:center;background-color:transparent;border:1px solid transparent;padding:6px 12px;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#0d6efd;border-color:#0d6efd}.btn-crop :hover{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.file-input{display:none}.btn-upload{cursor:pointer;outline:0;display:inline-block;font-weight:400;line-height:1.5;text-align:center;background-color:transparent;border:1px solid #0d6efd;padding:6px 12px;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#0d6efd}.btn-upload:hover{color:#fff;background-color:#0d6efd}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000}.modal.show-modal{display:flex;align-items:center;justify-content:center}.modal .modal-content{background-color:#fff;border-radius:8px;width:90%;max-width:800px;max-height:90vh;overflow-y:auto;position:relative}.modal .modal-header{padding:1rem;border-bottom:1px solid #dee2e6;display:flex;justify-content:space-between;align-items:center}.modal .modal-header h3{margin:0}.modal .modal-header .close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;color:#6c757d}.modal .modal-header .close-button:hover{color:#343a40}.modal .modal-body{padding:1rem}.modal .modal-footer{padding:1rem;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CropperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CropperComponent, isStandalone: true, selector: "app-cropper", inputs: { imageSettings: { classPropertyName: "imageSettings", publicName: "imageSettings", isSignal: true, isRequired: false, transformFunction: null }, ratioType: { classPropertyName: "ratioType", publicName: "ratioType", isSignal: true, isRequired: false, transformFunction: null }, resolutions: { classPropertyName: "resolutions", publicName: "resolutions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUploaded: "imageUploaded", onImageCropped: "onImageCropped", onFileSelected: "onFileSelected" }, viewQueries: [{ propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true }], ngImport: i0, template: "<div> path: {{ storagePath }} </div>\n\n<div class=\"options\">\n  @if (!isUploaded) {\n    <div>\n      <input type=\"file\" id=\"file-upload\" class=\"file-input\" (change)=\"fileChangeEvent($event)\" />\n      <label for=\"file-upload\" class=\"btn-upload\">Seleccionar archivo</label>\n      @if (!fileMetadata) {\n        <em>Carga una imagen para comenzar</em>\n      }\n    </div>\n  }\n\n  @if (fileMetadata) {\n    <span>\n      <span style=\"margin: 1px 20px\"> tipo: {{ fileMetadata.type }} </span>\n      <span style=\"margin: 1px 20px\"> tama\u00F1o {{ fileMetadata.size }} </span>\n      <br />\n      <input\n        [disabled]=\"imageSettings()?.fileName\"\n        style=\"margin: 1px 20px; width: 400px\"\n        [(ngModel)]=\"renameFile\"\n        type=\"text\"\n        placeholder=\"Rename File\"\n        (ngModelChange)=\"reloadPath()\" />\n      <button class=\"btn-crop\" (click)=\"closeModal()\"> Recortar y Subir </button>\n    </span>\n  }\n</div>\n\n@if (fileMetadata && !isUploaded) {\n  <div class=\"modal\" [class.show-modal]=\"showModal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h3>Recortar imagen</h3>\n        <button class=\"close-button\" (click)=\"closeModal()\">\u00D7</button>\n      </div>\n      <div class=\"modal-body\">\n        <h1>Hlloa</h1>\n        <image-cropper\n          [imageChangedEvent]=\"imageChangedEvent\"\n          [maintainAspectRatio]=\"true\"\n          [aspectRatio]=\"aspectRatio\"\n          format=\"webp\"\n          [resizeToWidth]=\"450\"\n          (imageCropped)=\"onInnerImageCropped($event)\"\n          (loadImageFailed)=\"loadImageFailed()\"\n          (imageLoaded)=\"imageLoaded($event)\"\n        [autoCrop]=\"false\"></image-cropper>\n        <div class=\"modal-footer\">\n          <button class=\"btn-crop\" (click)=\"simpleCropAndUpload()\">Recortar y Subir</button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n@if (croppedImage && !isUploaded) {\n  <button [disabled]=\"isLoading\" nbButton status=\"info\"> upload </button>\n}\n", styles: [".options{display:flex}.btn-crop{cursor:pointer;outline:0;display:inline-block;font-weight:400;line-height:1.5;text-align:center;background-color:transparent;border:1px solid transparent;padding:6px 12px;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#0d6efd;border-color:#0d6efd}.btn-crop :hover{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.file-input{display:none}.btn-upload{cursor:pointer;outline:0;display:inline-block;font-weight:400;line-height:1.5;text-align:center;background-color:transparent;border:1px solid #0d6efd;padding:6px 12px;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#0d6efd}.btn-upload:hover{color:#fff;background-color:#0d6efd}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000}.modal.show-modal{display:flex;align-items:center;justify-content:center}.modal .modal-content{background-color:#fff;border-radius:8px;width:90%;max-width:800px;max-height:90vh;overflow-y:auto;position:relative}.modal .modal-header{padding:1rem;border-bottom:1px solid #dee2e6;display:flex;justify-content:space-between;align-items:center}.modal .modal-header h3{margin:0}.modal .modal-header .close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;color:#6c757d}.modal .modal-header .close-button:hover{color:#343a40}.modal .modal-body{padding:1rem}.modal .modal-footer{padding:1rem;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CropperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CropperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-cropper', standalone: true, imports: [FormsModule, ImageCropperComponent], template: "<div> path: {{ storagePath }} </div>\n\n<div class=\"options\">\n  @if (!isUploaded) {\n    <div>\n      <input type=\"file\" id=\"file-upload\" class=\"file-input\" (change)=\"fileChangeEvent($event)\" />\n      <label for=\"file-upload\" class=\"btn-upload\">Seleccionar archivo</label>\n      @if (!fileMetadata) {\n        <em>Carga una imagen para comenzar</em>\n      }\n    </div>\n  }\n\n  @if (fileMetadata) {\n    <span>\n      <span style=\"margin: 1px 20px\"> tipo: {{ fileMetadata.type }} </span>\n      <span style=\"margin: 1px 20px\"> tama\u00F1o {{ fileMetadata.size }} </span>\n      <br />\n      <input\n        [disabled]=\"imageSettings()?.fileName\"\n        style=\"margin: 1px 20px; width: 400px\"\n        [(ngModel)]=\"renameFile\"\n        type=\"text\"\n        placeholder=\"Rename File\"\n        (ngModelChange)=\"reloadPath()\" />\n      <button class=\"btn-crop\" (click)=\"closeModal()\"> Recortar y Subir </button>\n    </span>\n  }\n</div>\n\n@if (fileMetadata && !isUploaded) {\n  <div class=\"modal\" [class.show-modal]=\"showModal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h3>Recortar imagen</h3>\n        <button class=\"close-button\" (click)=\"closeModal()\">\u00D7</button>\n      </div>\n      <div class=\"modal-body\">\n        <h1>Hlloa</h1>\n        <image-cropper\n          [imageChangedEvent]=\"imageChangedEvent\"\n          [maintainAspectRatio]=\"true\"\n          [aspectRatio]=\"aspectRatio\"\n          format=\"webp\"\n          [resizeToWidth]=\"450\"\n          (imageCropped)=\"onInnerImageCropped($event)\"\n          (loadImageFailed)=\"loadImageFailed()\"\n          (imageLoaded)=\"imageLoaded($event)\"\n        [autoCrop]=\"false\"></image-cropper>\n        <div class=\"modal-footer\">\n          <button class=\"btn-crop\" (click)=\"simpleCropAndUpload()\">Recortar y Subir</button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n@if (croppedImage && !isUploaded) {\n  <button [disabled]=\"isLoading\" nbButton status=\"info\"> upload </button>\n}\n", styles: [".options{display:flex}.btn-crop{cursor:pointer;outline:0;display:inline-block;font-weight:400;line-height:1.5;text-align:center;background-color:transparent;border:1px solid transparent;padding:6px 12px;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#0d6efd;border-color:#0d6efd}.btn-crop :hover{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.file-input{display:none}.btn-upload{cursor:pointer;outline:0;display:inline-block;font-weight:400;line-height:1.5;text-align:center;background-color:transparent;border:1px solid #0d6efd;padding:6px 12px;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#0d6efd}.btn-upload:hover{color:#fff;background-color:#0d6efd}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000}.modal.show-modal{display:flex;align-items:center;justify-content:center}.modal .modal-content{background-color:#fff;border-radius:8px;width:90%;max-width:800px;max-height:90vh;overflow-y:auto;position:relative}.modal .modal-header{padding:1rem;border-bottom:1px solid #dee2e6;display:flex;justify-content:space-between;align-items:center}.modal .modal-header h3{margin:0}.modal .modal-header .close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;color:#6c757d}.modal .modal-header .close-button:hover{color:#343a40}.modal .modal-body{padding:1rem}.modal .modal-footer{padding:1rem;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end}\n"] }]
-        }], propDecorators: { imageCropper: [{
+        }], propDecorators: { imageSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSettings", required: false }] }], ratioType: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratioType", required: false }] }], resolutions: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolutions", required: false }] }], imageUploaded: [{ type: i0.Output, args: ["imageUploaded"] }], onImageCropped: [{ type: i0.Output, args: ["onImageCropped"] }], onFileSelected: [{ type: i0.Output, args: ["onFileSelected"] }], imageCropper: [{
                 type: ViewChild,
                 args: [ImageCropperComponent]
             }] } });
@@ -467,10 +477,10 @@ class SafeHtmlPipe {
     transform(value) {
         return this.sanitizer.bypassSecurityTrustHtml(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safeHtml',
@@ -598,15 +608,15 @@ class CropperComponentModal {
         console.log('addEmotion', event);
         this.emotionSelected = event;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CropperComponentModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CropperComponentModal, isStandalone: true, selector: "dc-cropper-modal", inputs: { imgStorageSettings: { classPropertyName: "imgStorageSettings", publicName: "imgStorageSettings", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, currentStorage: { classPropertyName: "currentStorage", publicName: "currentStorage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { imageUploaded: "imageUploaded", onImageCropped: "onImageCropped", onFileSelected: "onFileSelected" }, viewQueries: [{ propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"upload-section\">\n  <input type=\"file\" [id]=\"fileInputId\" class=\"file-input\" (change)=\"fileChangeEvent($event)\" />\n  <label pButton [for]=\"fileInputId\" [pTooltip]=\"storagePath\" class=\"upload-button\">\n    {{ buttonLabel() }}\n  </label>\n</div>\n@if(displayDialog) {\n<!-- Cropper Dialog -->\n\n<p-dialog\n  header=\"Recortar y subir imagen\"\n  [maximizable]=\"true\"\n  [(visible)]=\"displayDialog\"\n  [modal]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  styleClass=\"cropper-dialog\">\n  <!-- Image Settings Section -->\n  <div class=\"settings-section\">\n    @if(!imgStorageSettings().path) {\n    <p-message severity=\"warn\">Developer Note: make sure you have a path to save the image pass object imgStorageSettings</p-message>\n    } @if(currentStorage?.url) {\n    <p-message severity=\"warn\" variant=\"outlined\">\n      <div>\n        <span class=\"setting-label\">Image will be replaced:</span>\n        <img width=\"100\" height=\"Auto\" [src]=\"currentStorage?.url\" />\n      </div>\n    </p-message>\n    }\n\n    <div class=\"grid\">\n      <div class=\"col-12 md:col-6\">\n        <p-message>\n          <b>Estas opciones estan preconfiguradas y no se pueden cambiar</b>\n          <ul>\n            <li><b>Path to save:</b> {{ storagePath }}</li>\n            <li>\n              <b>Resoluciones:</b>\n              <span>{{ imgStorageSettings()?.cropSettings?.resolutions }}</span>\n            </li>\n          </ul>\n        </p-message>\n\n        <div class=\"setting-item\">\n          <span class=\"setting-label\">Aspecto:</span>\n          <p class=\"setting-value\">{{ imgStorageSettings()?.cropSettings?.aspectRatio }}</p>\n        </div>\n\n        @if (fileMetadata) {\n        <div class=\"metadata-section\">\n          <span class=\"metadata-item\">tipo: {{ fileMetadata.type }}</span>\n          <span class=\"metadata-item\">tama\u00F1o: {{ fileMetadata.size }}</span>\n        </div>\n        }\n      </div>\n      <div class=\"col-12 md:col-6\">\n        <div class=\"flex flex-column gap-2\">\n          <div>\n            <span>Nombre del archivo</span>\n            <p-select\n              [options]=\"aspectRatioOptions\"\n              [ngModel]=\"ratioSelected\"\n              (ngModelChange)=\"changeRatio($event)\"\n              optionLabel=\"description\"\n              placeholder=\"Select a ratio\">\n              <ng-template pTemplate=\"selectedItem\" let-selectedOption>\n                @if(selectedOption) {\n                <div class=\"flex items-center gap-2\">\n                  <div [innerHTML]=\"selectedOption.icon | safeHtml\"></div>\n                  <div>{{ selectedOption.description }}</div>\n                </div>\n                }\n              </ng-template>\n              <ng-template let-ratio pTemplate=\"item\">\n                <div class=\"flex items-center gap-2\">\n                  <div [innerHTML]=\"ratio.icon | safeHtml\"></div>\n                  <div>{{ ratio.description }}</div>\n                </div>\n              </ng-template>\n            </p-select>\n          </div>\n\n          <div>\n            <span>Nombre del archivo</span>\n            <input\n              pInputText\n              [disabled]=\"imgStorageSettings()?.fileName\"\n              [(ngModel)]=\"renameFile\"\n              type=\"text\"\n              placeholder=\"Rename File\"\n              (ngModelChange)=\"reloadPath()\"\n              class=\"rename-input\" />\n          </div>\n\n          <div>\n            <span>Datos adicionales</span>\n            <p-select\n              [options]=\"MoodStateOptions\"\n              [(ngModel)]=\"emotionSelected\"\n              (ngModelChange)=\"addEmotion($event)\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              placeholder=\"Select an emotion\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Image Cropper -->\n\n  <hr />\n\n  <div class=\"cropper-container-father\">\n    <image-cropper\n      [imageChangedEvent]=\"imageChangedEvent\"\n      [maintainAspectRatio]=\"true\"\n      [aspectRatio]=\"aspectRatioValue\"\n      format=\"webp\"\n      [resizeToWidth]=\"resizeToWidth\"\n      (imageCropped)=\"onInnerImageCropped($event)\"\n      (loadImageFailed)=\"loadImageFailed()\"\n      (cropperReady)=\"cropperReady()\"\n      [autoCrop]=\"false\">\n    </image-cropper>\n  </div>\n  <!-- Dialog Footer -->\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <button pButton class=\"p-button-primary\" (click)=\"simpleCropAndUpload()\"> Recortar y Subir </button>\n    </div>\n  </ng-template>\n</p-dialog>\n}\n", styles: [":host{display:block}:host ::ng-deep .ngx-ic-overlay{width:100%!important}.upload-section{margin-bottom:1rem}.upload-section .file-input{display:none}.upload-section .upload-button{cursor:pointer}::ng-deep .cropper-dialog{max-width:90vw;width:800px}::ng-deep .cropper-dialog .p-dialog-content{padding:1.5rem}.settings-section{margin-bottom:1.5rem}.settings-section .grid .col-12{padding-top:0;padding-bottom:0}.settings-section .settings-header{color:var(--text-color-secondary);margin-bottom:1rem}.settings-section .settings-grid{display:grid;gap:1rem;margin-bottom:1.5rem}.settings-section .settings-grid .setting-item .setting-label{font-weight:600;color:var(--text-color);display:block;margin-bottom:.5rem}.settings-section .settings-grid .setting-item .setting-value{color:var(--text-color-secondary);margin:0}.metadata-section{display:flex;gap:1.5rem;margin-bottom:1rem}.metadata-section .metadata-item{color:var(--text-color-secondary)}.rename-section{margin-bottom:5px}.rename-section .rename-input{width:100%;padding:.5rem;border:1px solid var(--surface-border);border-radius:4px}.rename-section .rename-input:disabled{background-color:var(--surface-200);cursor:not-allowed}.cropper-container-father{display:flex;justify-content:center;align-items:center;height:65vh}.dialog-footer{display:flex;justify-content:flex-end;gap:1rem}.btn-crop{cursor:pointer;outline:0;display:inline-block;font-weight:400;line-height:1.5;text-align:center;background-color:transparent;border:1px solid transparent;padding:6px 12px;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#0d6efd;border-color:#0d6efd}.btn-crop :hover{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.file-input{display:none}.btn-upload{cursor:pointer;outline:0;display:inline-block;font-weight:400;line-height:1.5;text-align:center;background-color:transparent;border:1px solid #0d6efd;padding:6px 12px;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#0d6efd}.btn-upload:hover{color:#fff;background-color:#0d6efd}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000}.modal.show-modal{display:flex;align-items:center;justify-content:center}.modal .modal-content{background-color:#fff;border-radius:8px;width:90%;max-width:800px;max-height:90vh;overflow-y:auto;position:relative}.modal .modal-header{padding:1rem;border-bottom:1px solid #dee2e6;display:flex;justify-content:space-between;align-items:center}.modal .modal-header h3{margin:0}.modal .modal-header .close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;color:#6c757d}.modal .modal-header .close-button:hover{color:#343a40}.modal .modal-body{padding:1rem;height:100vh;display:flex;flex-direction:column}.modal .modal-footer{padding:1rem;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i6.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i7.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CropperComponentModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CropperComponentModal, isStandalone: true, selector: "dc-cropper-modal", inputs: { imgStorageSettings: { classPropertyName: "imgStorageSettings", publicName: "imgStorageSettings", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, currentStorage: { classPropertyName: "currentStorage", publicName: "currentStorage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { imageUploaded: "imageUploaded", onImageCropped: "onImageCropped", onFileSelected: "onFileSelected" }, viewQueries: [{ propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"upload-section\">\n  <input type=\"file\" [id]=\"fileInputId\" class=\"file-input\" (change)=\"fileChangeEvent($event)\" />\n  <label pButton [for]=\"fileInputId\" [pTooltip]=\"storagePath\" class=\"upload-button\">\n    {{ buttonLabel() }}\n  </label>\n</div>\n@if(displayDialog) {\n<!-- Cropper Dialog -->\n\n<p-dialog\n  header=\"Recortar y subir imagen\"\n  [maximizable]=\"true\"\n  [(visible)]=\"displayDialog\"\n  [modal]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  styleClass=\"cropper-dialog\">\n  <!-- Image Settings Section -->\n  <div class=\"settings-section\">\n    @if(!imgStorageSettings().path) {\n    <p-message severity=\"warn\">Developer Note: make sure you have a path to save the image pass object imgStorageSettings</p-message>\n    } @if(currentStorage?.url) {\n    <p-message severity=\"warn\" variant=\"outlined\">\n      <div>\n        <span class=\"setting-label\">Image will be replaced:</span>\n        <img width=\"100\" height=\"Auto\" [src]=\"currentStorage?.url\" />\n      </div>\n    </p-message>\n    }\n\n    <div class=\"grid\">\n      <div class=\"col-12 md:col-6\">\n        <p-message>\n          <b>Estas opciones estan preconfiguradas y no se pueden cambiar</b>\n          <ul>\n            <li><b>Path to save:</b> {{ storagePath }}</li>\n            <li>\n              <b>Resoluciones:</b>\n              <span>{{ imgStorageSettings()?.cropSettings?.resolutions }}</span>\n            </li>\n          </ul>\n        </p-message>\n\n        <div class=\"setting-item\">\n          <span class=\"setting-label\">Aspecto:</span>\n          <p class=\"setting-value\">{{ imgStorageSettings()?.cropSettings?.aspectRatio }}</p>\n        </div>\n\n        @if (fileMetadata) {\n        <div class=\"metadata-section\">\n          <span class=\"metadata-item\">tipo: {{ fileMetadata.type }}</span>\n          <span class=\"metadata-item\">tama\u00F1o: {{ fileMetadata.size }}</span>\n        </div>\n        }\n      </div>\n      <div class=\"col-12 md:col-6\">\n        <div class=\"flex flex-column gap-2\">\n          <div>\n            <span>Nombre del archivo</span>\n            <p-select\n              [options]=\"aspectRatioOptions\"\n              [ngModel]=\"ratioSelected\"\n              (ngModelChange)=\"changeRatio($event)\"\n              optionLabel=\"description\"\n              placeholder=\"Select a ratio\">\n              <ng-template pTemplate=\"selectedItem\" let-selectedOption>\n                @if(selectedOption) {\n                <div class=\"flex items-center gap-2\">\n                  <div [innerHTML]=\"selectedOption.icon | safeHtml\"></div>\n                  <div>{{ selectedOption.description }}</div>\n                </div>\n                }\n              </ng-template>\n              <ng-template let-ratio pTemplate=\"item\">\n                <div class=\"flex items-center gap-2\">\n                  <div [innerHTML]=\"ratio.icon | safeHtml\"></div>\n                  <div>{{ ratio.description }}</div>\n                </div>\n              </ng-template>\n            </p-select>\n          </div>\n\n          <div>\n            <span>Nombre del archivo</span>\n            <input\n              pInputText\n              [disabled]=\"imgStorageSettings()?.fileName\"\n              [(ngModel)]=\"renameFile\"\n              type=\"text\"\n              placeholder=\"Rename File\"\n              (ngModelChange)=\"reloadPath()\"\n              class=\"rename-input\" />\n          </div>\n\n          <div>\n            <span>Datos adicionales</span>\n            <p-select\n              [options]=\"MoodStateOptions\"\n              [(ngModel)]=\"emotionSelected\"\n              (ngModelChange)=\"addEmotion($event)\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              placeholder=\"Select an emotion\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Image Cropper -->\n\n  <hr />\n\n  <div class=\"cropper-container-father\">\n    <image-cropper\n      [imageChangedEvent]=\"imageChangedEvent\"\n      [maintainAspectRatio]=\"true\"\n      [aspectRatio]=\"aspectRatioValue\"\n      format=\"webp\"\n      [resizeToWidth]=\"resizeToWidth\"\n      (imageCropped)=\"onInnerImageCropped($event)\"\n      (loadImageFailed)=\"loadImageFailed()\"\n      (cropperReady)=\"cropperReady()\"\n      [autoCrop]=\"false\">\n    </image-cropper>\n  </div>\n  <!-- Dialog Footer -->\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <button pButton class=\"p-button-primary\" (click)=\"simpleCropAndUpload()\"> Recortar y Subir </button>\n    </div>\n  </ng-template>\n</p-dialog>\n}\n", styles: [":host{display:block}:host ::ng-deep .ngx-ic-overlay{width:100%!important}.upload-section{margin-bottom:1rem}.upload-section .file-input{display:none}.upload-section .upload-button{cursor:pointer}::ng-deep .cropper-dialog{max-width:90vw;width:800px}::ng-deep .cropper-dialog .p-dialog-content{padding:1.5rem}.settings-section{margin-bottom:1.5rem}.settings-section .grid .col-12{padding-top:0;padding-bottom:0}.settings-section .settings-header{color:var(--text-color-secondary);margin-bottom:1rem}.settings-section .settings-grid{display:grid;gap:1rem;margin-bottom:1.5rem}.settings-section .settings-grid .setting-item .setting-label{font-weight:600;color:var(--text-color);display:block;margin-bottom:.5rem}.settings-section .settings-grid .setting-item .setting-value{color:var(--text-color-secondary);margin:0}.metadata-section{display:flex;gap:1.5rem;margin-bottom:1rem}.metadata-section .metadata-item{color:var(--text-color-secondary)}.rename-section{margin-bottom:5px}.rename-section .rename-input{width:100%;padding:.5rem;border:1px solid var(--surface-border);border-radius:4px}.rename-section .rename-input:disabled{background-color:var(--surface-200);cursor:not-allowed}.cropper-container-father{display:flex;justify-content:center;align-items:center;height:65vh}.dialog-footer{display:flex;justify-content:flex-end;gap:1rem}.btn-crop{cursor:pointer;outline:0;display:inline-block;font-weight:400;line-height:1.5;text-align:center;background-color:transparent;border:1px solid transparent;padding:6px 12px;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#0d6efd;border-color:#0d6efd}.btn-crop :hover{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.file-input{display:none}.btn-upload{cursor:pointer;outline:0;display:inline-block;font-weight:400;line-height:1.5;text-align:center;background-color:transparent;border:1px solid #0d6efd;padding:6px 12px;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#0d6efd}.btn-upload:hover{color:#fff;background-color:#0d6efd}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000}.modal.show-modal{display:flex;align-items:center;justify-content:center}.modal .modal-content{background-color:#fff;border-radius:8px;width:90%;max-width:800px;max-height:90vh;overflow-y:auto;position:relative}.modal .modal-header{padding:1rem;border-bottom:1px solid #dee2e6;display:flex;justify-content:space-between;align-items:center}.modal .modal-header h3{margin:0}.modal .modal-header .close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;color:#6c757d}.modal .modal-header .close-button:hover{color:#343a40}.modal .modal-body{padding:1rem;height:100vh;display:flex;flex-direction:column}.modal .modal-footer{padding:1rem;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i6.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i7.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CropperComponentModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CropperComponentModal, decorators: [{
             type: Component,
             args: [{ selector: 'dc-cropper-modal', standalone: true, imports: [FormsModule, ImageCropperComponent, ButtonModule, DialogModule, TooltipModule, MessageModule, SelectModule, InputTextModule, SafeHtmlPipe], template: "<div class=\"upload-section\">\n  <input type=\"file\" [id]=\"fileInputId\" class=\"file-input\" (change)=\"fileChangeEvent($event)\" />\n  <label pButton [for]=\"fileInputId\" [pTooltip]=\"storagePath\" class=\"upload-button\">\n    {{ buttonLabel() }}\n  </label>\n</div>\n@if(displayDialog) {\n<!-- Cropper Dialog -->\n\n<p-dialog\n  header=\"Recortar y subir imagen\"\n  [maximizable]=\"true\"\n  [(visible)]=\"displayDialog\"\n  [modal]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  styleClass=\"cropper-dialog\">\n  <!-- Image Settings Section -->\n  <div class=\"settings-section\">\n    @if(!imgStorageSettings().path) {\n    <p-message severity=\"warn\">Developer Note: make sure you have a path to save the image pass object imgStorageSettings</p-message>\n    } @if(currentStorage?.url) {\n    <p-message severity=\"warn\" variant=\"outlined\">\n      <div>\n        <span class=\"setting-label\">Image will be replaced:</span>\n        <img width=\"100\" height=\"Auto\" [src]=\"currentStorage?.url\" />\n      </div>\n    </p-message>\n    }\n\n    <div class=\"grid\">\n      <div class=\"col-12 md:col-6\">\n        <p-message>\n          <b>Estas opciones estan preconfiguradas y no se pueden cambiar</b>\n          <ul>\n            <li><b>Path to save:</b> {{ storagePath }}</li>\n            <li>\n              <b>Resoluciones:</b>\n              <span>{{ imgStorageSettings()?.cropSettings?.resolutions }}</span>\n            </li>\n          </ul>\n        </p-message>\n\n        <div class=\"setting-item\">\n          <span class=\"setting-label\">Aspecto:</span>\n          <p class=\"setting-value\">{{ imgStorageSettings()?.cropSettings?.aspectRatio }}</p>\n        </div>\n\n        @if (fileMetadata) {\n        <div class=\"metadata-section\">\n          <span class=\"metadata-item\">tipo: {{ fileMetadata.type }}</span>\n          <span class=\"metadata-item\">tama\u00F1o: {{ fileMetadata.size }}</span>\n        </div>\n        }\n      </div>\n      <div class=\"col-12 md:col-6\">\n        <div class=\"flex flex-column gap-2\">\n          <div>\n            <span>Nombre del archivo</span>\n            <p-select\n              [options]=\"aspectRatioOptions\"\n              [ngModel]=\"ratioSelected\"\n              (ngModelChange)=\"changeRatio($event)\"\n              optionLabel=\"description\"\n              placeholder=\"Select a ratio\">\n              <ng-template pTemplate=\"selectedItem\" let-selectedOption>\n                @if(selectedOption) {\n                <div class=\"flex items-center gap-2\">\n                  <div [innerHTML]=\"selectedOption.icon | safeHtml\"></div>\n                  <div>{{ selectedOption.description }}</div>\n                </div>\n                }\n              </ng-template>\n              <ng-template let-ratio pTemplate=\"item\">\n                <div class=\"flex items-center gap-2\">\n                  <div [innerHTML]=\"ratio.icon | safeHtml\"></div>\n                  <div>{{ ratio.description }}</div>\n                </div>\n              </ng-template>\n            </p-select>\n          </div>\n\n          <div>\n            <span>Nombre del archivo</span>\n            <input\n              pInputText\n              [disabled]=\"imgStorageSettings()?.fileName\"\n              [(ngModel)]=\"renameFile\"\n              type=\"text\"\n              placeholder=\"Rename File\"\n              (ngModelChange)=\"reloadPath()\"\n              class=\"rename-input\" />\n          </div>\n\n          <div>\n            <span>Datos adicionales</span>\n            <p-select\n              [options]=\"MoodStateOptions\"\n              [(ngModel)]=\"emotionSelected\"\n              (ngModelChange)=\"addEmotion($event)\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              placeholder=\"Select an emotion\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Image Cropper -->\n\n  <hr />\n\n  <div class=\"cropper-container-father\">\n    <image-cropper\n      [imageChangedEvent]=\"imageChangedEvent\"\n      [maintainAspectRatio]=\"true\"\n      [aspectRatio]=\"aspectRatioValue\"\n      format=\"webp\"\n      [resizeToWidth]=\"resizeToWidth\"\n      (imageCropped)=\"onInnerImageCropped($event)\"\n      (loadImageFailed)=\"loadImageFailed()\"\n      (cropperReady)=\"cropperReady()\"\n      [autoCrop]=\"false\">\n    </image-cropper>\n  </div>\n  <!-- Dialog Footer -->\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <button pButton class=\"p-button-primary\" (click)=\"simpleCropAndUpload()\"> Recortar y Subir </button>\n    </div>\n  </ng-template>\n</p-dialog>\n}\n", styles: [":host{display:block}:host ::ng-deep .ngx-ic-overlay{width:100%!important}.upload-section{margin-bottom:1rem}.upload-section .file-input{display:none}.upload-section .upload-button{cursor:pointer}::ng-deep .cropper-dialog{max-width:90vw;width:800px}::ng-deep .cropper-dialog .p-dialog-content{padding:1.5rem}.settings-section{margin-bottom:1.5rem}.settings-section .grid .col-12{padding-top:0;padding-bottom:0}.settings-section .settings-header{color:var(--text-color-secondary);margin-bottom:1rem}.settings-section .settings-grid{display:grid;gap:1rem;margin-bottom:1.5rem}.settings-section .settings-grid .setting-item .setting-label{font-weight:600;color:var(--text-color);display:block;margin-bottom:.5rem}.settings-section .settings-grid .setting-item .setting-value{color:var(--text-color-secondary);margin:0}.metadata-section{display:flex;gap:1.5rem;margin-bottom:1rem}.metadata-section .metadata-item{color:var(--text-color-secondary)}.rename-section{margin-bottom:5px}.rename-section .rename-input{width:100%;padding:.5rem;border:1px solid var(--surface-border);border-radius:4px}.rename-section .rename-input:disabled{background-color:var(--surface-200);cursor:not-allowed}.cropper-container-father{display:flex;justify-content:center;align-items:center;height:65vh}.dialog-footer{display:flex;justify-content:flex-end;gap:1rem}.btn-crop{cursor:pointer;outline:0;display:inline-block;font-weight:400;line-height:1.5;text-align:center;background-color:transparent;border:1px solid transparent;padding:6px 12px;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#0d6efd;border-color:#0d6efd}.btn-crop :hover{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.file-input{display:none}.btn-upload{cursor:pointer;outline:0;display:inline-block;font-weight:400;line-height:1.5;text-align:center;background-color:transparent;border:1px solid #0d6efd;padding:6px 12px;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#0d6efd}.btn-upload:hover{color:#fff;background-color:#0d6efd}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000}.modal.show-modal{display:flex;align-items:center;justify-content:center}.modal .modal-content{background-color:#fff;border-radius:8px;width:90%;max-width:800px;max-height:90vh;overflow-y:auto;position:relative}.modal .modal-header{padding:1rem;border-bottom:1px solid #dee2e6;display:flex;justify-content:space-between;align-items:center}.modal .modal-header h3{margin:0}.modal .modal-header .close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;color:#6c757d}.modal .modal-header .close-button:hover{color:#343a40}.modal .modal-body{padding:1rem;height:100vh;display:flex;flex-direction:column}.modal .modal-footer{padding:1rem;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { currentStorage: [{
+        }], ctorParameters: () => [], propDecorators: { imgStorageSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgStorageSettings", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], currentStorage: [{
                 type: Input
-            }], imageCropper: [{
+            }], imageUploaded: [{ type: i0.Output, args: ["imageUploaded"] }], onImageCropped: [{ type: i0.Output, args: ["onImageCropped"] }], onFileSelected: [{ type: i0.Output, args: ["onFileSelected"] }], imageCropper: [{
                 type: ViewChild,
                 args: [ImageCropperComponent]
             }] } });
@@ -684,22 +694,214 @@ class ImageStoragePreviewComponent {
     selectImage(image) {
         this.imageSelected.emit(image);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ImageStoragePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ImageStoragePreviewComponent, isStandalone: true, selector: "dc-image-storage-preview", outputs: { imageSelected: "imageSelected" }, ngImport: i0, template: "<div class=\"image-storage-preview-container\">\n  <div class=\"header\">\n    <h2>Storage Images</h2>\n    <button class=\"refresh-btn\" (click)=\"refreshImages()\" [disabled]=\"loading$ | async\">\n      @if (!(loading$ | async)) {\n        <span>Refresh</span>\n      }\n      @if (loading$ | async) {\n        <span>Loading...</span>\n      }\n    </button>\n  </div>\n\n  @if (loading$ | async) {\n    <div class=\"loading-container\">\n      <div class=\"spinner\"></div>\n      <p>Loading images...</p>\n    </div>\n  }\n\n  @if (error$ | async) {\n    <div class=\"error-container\">\n      <p class=\"error-message\">{{ error$ | async }}</p>\n      <button (click)=\"refreshImages()\">Try Again</button>\n    </div>\n  }\n\n  @if (!(loading$ | async) && !(error$ | async)) {\n    <div class=\"images-grid\">\n      @if ((images$ | async)?.length) {\n        @for (image of images$ | async; track image) {\n          <div class=\"image-card\">\n            <div class=\"image-container\">\n              <img [src]=\"image.url\" [alt]=\"image.name || 'Storage image'\" loading=\"lazy\" />\n            </div>\n            <div class=\"image-info\">\n              <p class=\"image-name\" [title]=\"image.name\">{{ image.name }}</p>\n              <div class=\"image-actions\">\n                <a [href]=\"image.url\" target=\"_blank\" class=\"action-btn\">View</a>\n                <button (click)=\"selectImage(image)\" class=\"action-btn\">Select</button>\n              </div>\n            </div>\n          </div>\n        }\n      } @else {\n        <div class=\"no-images\">\n          <p>No images found in the storage path: {{ storagePath }}</p>\n        </div>\n      }\n      <dc-cropper-modal [imgStorageSettings]=\"imgStorageSettings\"></dc-cropper-modal>\n    </div>\n  }\n</div>\n", styles: [".image-storage-preview-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;padding:20px;max-width:1200px;margin:0 auto}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.header h2{margin:0;color:#333}.refresh-btn{background-color:#4285f4;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:14px;transition:background-color .2s}.refresh-btn:hover{background-color:#3367d6}.refresh-btn:disabled{background-color:#a9a9a9;cursor:not-allowed}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0}.spinner{border:4px solid rgba(0,0,0,.1);border-radius:50%;border-top:4px solid #4285f4;width:30px;height:30px;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-container{background-color:#ffebee;border:1px solid #ffcdd2;border-radius:4px;padding:16px;margin:20px 0;text-align:center}.error-message{color:#d32f2f;margin-bottom:10px}.error-container button{background-color:#d32f2f;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:14px}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.image-card{border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a;transition:transform .2s,box-shadow .2s;background-color:#fff}.image-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px #00000026}.image-container{height:200px;overflow:hidden;position:relative;background-color:#f5f5f5}.image-container img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.image-card:hover .image-container img{transform:scale(1.05)}.image-info{padding:15px}.image-name{margin:0 0 10px;font-size:14px;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-actions{display:flex;justify-content:flex-end}.action-btn{background-color:#4285f4;color:#fff;text-decoration:none;border-radius:4px;padding:6px 12px;font-size:12px;transition:background-color .2s}.action-btn:hover{background-color:#3367d6}.no-images{grid-column:1 / -1;text-align:center;padding:40px 0;color:#757575;background-color:#f5f5f5;border-radius:8px}\n"], dependencies: [{ kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ImageStoragePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ImageStoragePreviewComponent, isStandalone: true, selector: "dc-image-storage-preview", outputs: { imageSelected: "imageSelected" }, ngImport: i0, template: "<div class=\"image-storage-preview-container\">\n  <div class=\"header\">\n    <h2>Storage Images</h2>\n    <button class=\"refresh-btn\" (click)=\"refreshImages()\" [disabled]=\"loading$ | async\">\n      @if (!(loading$ | async)) {\n        <span>Refresh</span>\n      }\n      @if (loading$ | async) {\n        <span>Loading...</span>\n      }\n    </button>\n  </div>\n\n  @if (loading$ | async) {\n    <div class=\"loading-container\">\n      <div class=\"spinner\"></div>\n      <p>Loading images...</p>\n    </div>\n  }\n\n  @if (error$ | async) {\n    <div class=\"error-container\">\n      <p class=\"error-message\">{{ error$ | async }}</p>\n      <button (click)=\"refreshImages()\">Try Again</button>\n    </div>\n  }\n\n  @if (!(loading$ | async) && !(error$ | async)) {\n    <div class=\"images-grid\">\n      @if ((images$ | async)?.length) {\n        @for (image of images$ | async; track image) {\n          <div class=\"image-card\">\n            <div class=\"image-container\">\n              <img [src]=\"image.url\" [alt]=\"image.name || 'Storage image'\" loading=\"lazy\" />\n            </div>\n            <div class=\"image-info\">\n              <p class=\"image-name\" [title]=\"image.name\">{{ image.name }}</p>\n              <div class=\"image-actions\">\n                <a [href]=\"image.url\" target=\"_blank\" class=\"action-btn\">View</a>\n                <button (click)=\"selectImage(image)\" class=\"action-btn\">Select</button>\n              </div>\n            </div>\n          </div>\n        }\n      } @else {\n        <div class=\"no-images\">\n          <p>No images found in the storage path: {{ storagePath }}</p>\n        </div>\n      }\n      <dc-cropper-modal [imgStorageSettings]=\"imgStorageSettings\"></dc-cropper-modal>\n    </div>\n  }\n</div>\n", styles: [".image-storage-preview-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;padding:20px;max-width:1200px;margin:0 auto}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.header h2{margin:0;color:#333}.refresh-btn{background-color:#4285f4;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:14px;transition:background-color .2s}.refresh-btn:hover{background-color:#3367d6}.refresh-btn:disabled{background-color:#a9a9a9;cursor:not-allowed}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0}.spinner{border:4px solid rgba(0,0,0,.1);border-radius:50%;border-top:4px solid #4285f4;width:30px;height:30px;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-container{background-color:#ffebee;border:1px solid #ffcdd2;border-radius:4px;padding:16px;margin:20px 0;text-align:center}.error-message{color:#d32f2f;margin-bottom:10px}.error-container button{background-color:#d32f2f;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:14px}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.image-card{border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a;transition:transform .2s,box-shadow .2s;background-color:#fff}.image-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px #00000026}.image-container{height:200px;overflow:hidden;position:relative;background-color:#f5f5f5}.image-container img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.image-card:hover .image-container img{transform:scale(1.05)}.image-info{padding:15px}.image-name{margin:0 0 10px;font-size:14px;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-actions{display:flex;justify-content:flex-end}.action-btn{background-color:#4285f4;color:#fff;text-decoration:none;border-radius:4px;padding:6px 12px;font-size:12px;transition:background-color .2s}.action-btn:hover{background-color:#3367d6}.no-images{grid-column:1 / -1;text-align:center;padding:40px 0;color:#757575;background-color:#f5f5f5;border-radius:8px}\n"], dependencies: [{ kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ImageStoragePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ImageStoragePreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-image-storage-preview', standalone: true, imports: [AsyncPipe, CropperComponentModal], template: "<div class=\"image-storage-preview-container\">\n  <div class=\"header\">\n    <h2>Storage Images</h2>\n    <button class=\"refresh-btn\" (click)=\"refreshImages()\" [disabled]=\"loading$ | async\">\n      @if (!(loading$ | async)) {\n        <span>Refresh</span>\n      }\n      @if (loading$ | async) {\n        <span>Loading...</span>\n      }\n    </button>\n  </div>\n\n  @if (loading$ | async) {\n    <div class=\"loading-container\">\n      <div class=\"spinner\"></div>\n      <p>Loading images...</p>\n    </div>\n  }\n\n  @if (error$ | async) {\n    <div class=\"error-container\">\n      <p class=\"error-message\">{{ error$ | async }}</p>\n      <button (click)=\"refreshImages()\">Try Again</button>\n    </div>\n  }\n\n  @if (!(loading$ | async) && !(error$ | async)) {\n    <div class=\"images-grid\">\n      @if ((images$ | async)?.length) {\n        @for (image of images$ | async; track image) {\n          <div class=\"image-card\">\n            <div class=\"image-container\">\n              <img [src]=\"image.url\" [alt]=\"image.name || 'Storage image'\" loading=\"lazy\" />\n            </div>\n            <div class=\"image-info\">\n              <p class=\"image-name\" [title]=\"image.name\">{{ image.name }}</p>\n              <div class=\"image-actions\">\n                <a [href]=\"image.url\" target=\"_blank\" class=\"action-btn\">View</a>\n                <button (click)=\"selectImage(image)\" class=\"action-btn\">Select</button>\n              </div>\n            </div>\n          </div>\n        }\n      } @else {\n        <div class=\"no-images\">\n          <p>No images found in the storage path: {{ storagePath }}</p>\n        </div>\n      }\n      <dc-cropper-modal [imgStorageSettings]=\"imgStorageSettings\"></dc-cropper-modal>\n    </div>\n  }\n</div>\n", styles: [".image-storage-preview-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;padding:20px;max-width:1200px;margin:0 auto}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.header h2{margin:0;color:#333}.refresh-btn{background-color:#4285f4;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:14px;transition:background-color .2s}.refresh-btn:hover{background-color:#3367d6}.refresh-btn:disabled{background-color:#a9a9a9;cursor:not-allowed}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0}.spinner{border:4px solid rgba(0,0,0,.1);border-radius:50%;border-top:4px solid #4285f4;width:30px;height:30px;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-container{background-color:#ffebee;border:1px solid #ffcdd2;border-radius:4px;padding:16px;margin:20px 0;text-align:center}.error-message{color:#d32f2f;margin-bottom:10px}.error-container button{background-color:#d32f2f;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:14px}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.image-card{border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a;transition:transform .2s,box-shadow .2s;background-color:#fff}.image-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px #00000026}.image-container{height:200px;overflow:hidden;position:relative;background-color:#f5f5f5}.image-container img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.image-card:hover .image-container img{transform:scale(1.05)}.image-info{padding:15px}.image-name{margin:0 0 10px;font-size:14px;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-actions{display:flex;justify-content:flex-end}.action-btn{background-color:#4285f4;color:#fff;text-decoration:none;border-radius:4px;padding:6px 12px;font-size:12px;transition:background-color .2s}.action-btn:hover{background-color:#3367d6}.no-images{grid-column:1 / -1;text-align:center;padding:40px 0;color:#757575;background-color:#f5f5f5;border-radius:8px}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { imageSelected: [{ type: i0.Output, args: ["imageSelected"] }] } });
+
+class FirebaseStorageProvider {
+    constructor() {
+        this.storage = inject(AngularFireStorage);
+    }
+    async uploadImage(image, path, provider) {
+        try {
+            const refStorage = this.storage.ref(path);
+            const task = await refStorage.put(image);
+            const url = await lastValueFrom(refStorage.getDownloadURL());
+            return {
+                url,
+                name: task.metadata.name,
+                type: task.metadata.contentType,
+                size: task.metadata.size,
+            };
+        }
+        catch (error) {
+            console.error('Firebase upload image error:', error);
+            return null;
+        }
+    }
+    async uploadGenericFile(file, storagePath, metadata, keepOriginalName, provider) {
+        try {
+            const fileName = keepOriginalName ? file.name : `${Date.now()}-${file.name}`;
+            const fullFilePath = `${storagePath.replace(/\/$/, '')}/${fileName}`;
+            const refStorage = this.storage.ref(fullFilePath);
+            const task = await refStorage.put(file, { customMetadata: metadata });
+            const url = await lastValueFrom(refStorage.getDownloadURL());
+            return {
+                url,
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                metadata: task.metadata,
+            };
+        }
+        catch (error) {
+            console.error('Firebase upload generic file error:', error);
+            return null;
+        }
+    }
+    async uploadMultipleFiles(files, storagePath, metadata, keepOriginalName, provider) {
+        try {
+            const uploadPromises = files.map(file => this.uploadGenericFile(file, storagePath, metadata, keepOriginalName));
+            const results = await Promise.all(uploadPromises);
+            return results.filter((r) => r !== null);
+        }
+        catch (error) {
+            console.error('Firebase upload multiple files error:', error);
+            return null;
+        }
+    }
+    async deleteImage(imagePath) {
+        const storageRef = this.storage.ref(imagePath);
+        await lastValueFrom(storageRef.delete());
+    }
+    async deleteDirectory(directoryPath) {
+        const storage = getStorage();
+        const directoryRef = ref(storage, directoryPath);
+        const res = await listAll(directoryRef);
+        const promises = res.items.map((itemRef) => deleteObject(itemRef));
+        await Promise.all(promises);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FirebaseStorageProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FirebaseStorageProvider, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FirebaseStorageProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class BackendStorageProvider {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.appConfig = inject(APP_CONFIG);
+        this.apiUrl = this.appConfig.backendNodeUrl + '/storage'; // This should ideally come from an environment config
+    }
+    async uploadImage(image, path, provider = 'GOOGLE') {
+        const formData = new FormData();
+        formData.append('file', image, 'image.webp');
+        const params = {
+            path,
+            provider
+        };
+        try {
+            return await firstValueFrom(this.http.post(`${this.apiUrl}/upload`, formData, { params }));
+        }
+        catch (error) {
+            console.error('Backend upload image error:', error);
+            return null;
+        }
+    }
+    async uploadGenericFile(file, storagePath, metadata, keepOriginalName, provider = 'GOOGLE') {
+        const formData = new FormData();
+        if (metadata) {
+            formData.append('metadata', JSON.stringify(metadata));
+        }
+        formData.append('file', file);
+        const params = {
+            path: storagePath,
+            provider
+        };
+        if (keepOriginalName) {
+            params.keepOriginalName = 'true';
+        }
+        try {
+            return await firstValueFrom(this.http.post(`${this.apiUrl}/upload`, formData, { params }));
+        }
+        catch (error) {
+            console.error('Backend upload generic file error:', error);
+            return null;
+        }
+    }
+    async uploadMultipleFiles(files, storagePath, metadata, keepOriginalName, provider = 'GOOGLE') {
+        const formData = new FormData();
+        if (metadata) {
+            formData.append('metadata', JSON.stringify(metadata));
+        }
+        files.forEach(file => {
+            formData.append('file', file, file.name);
+        });
+        const params = {
+            path: storagePath,
+            provider
+        };
+        if (keepOriginalName) {
+            params.keepOriginalName = 'true';
+        }
+        try {
+            return await firstValueFrom(this.http.post(`${this.apiUrl}/upload-multiple`, formData, { params }));
+        }
+        catch (error) {
+            console.error('Backend upload multiple files error:', error);
+            return null;
+        }
+    }
+    async deleteImage(imagePath) {
+        // Implement delete if the backend controller supports it
+        console.warn('Backend delete image not implemented yet');
+    }
+    async deleteDirectory(directoryPath) {
+        // Implement delete directory if the backend controller supports it
+        console.warn('Backend delete directory not implemented yet');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BackendStorageProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BackendStorageProvider, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BackendStorageProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const STORAGE_PROVIDER_TYPE = new InjectionToken('STORAGE_PROVIDER_TYPE');
+class UniversalStorageService {
+    constructor() {
+        this.firebaseProvider = inject(FirebaseStorageProvider);
+        this.backendProvider = inject(BackendStorageProvider);
+        this.providerType = inject(STORAGE_PROVIDER_TYPE, { optional: true }) || 'FIREBASE';
+    }
+    get provider() {
+        return this.providerType === 'BACKEND' ? this.backendProvider : this.firebaseProvider;
+    }
+    async uploadImage(image, path, provider) {
+        return this.provider.uploadImage(image, path, provider);
+    }
+    uploadGenericFile(file, storagePath, metadata, keepOriginalName, provider) {
+        return this.provider.uploadGenericFile(file, storagePath, metadata, keepOriginalName, provider);
+    }
+    uploadMultipleFiles(files, storagePath, metadata, keepOriginalName, provider) {
+        return this.provider.uploadMultipleFiles(files, storagePath, metadata, keepOriginalName, provider);
+    }
+    async deleteImage(imagePath) {
+        return this.provider.deleteImage(imagePath);
+    }
+    async deleteDirectory(directoryPath) {
+        return this.provider.deleteDirectory(directoryPath);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: UniversalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: UniversalStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: UniversalStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 class SimpleUploaderComponent {
     constructor() {
-        this.multiImagesStorageService = inject(MultiImagesStorageService);
+        this.universalStorageService = inject(UniversalStorageService);
         this.storagePath = input.required(...(ngDevMode ? [{ debugName: "storagePath" }] : []));
         this.buttonLabel = input('Upload File', ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
         this.accept = input('*/*', ...(ngDevMode ? [{ debugName: "accept" }] : []));
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.metadata = input({}, ...(ngDevMode ? [{ debugName: "metadata" }] : []));
+        this.provider = input('GOOGLE', ...(ngDevMode ? [{ debugName: "provider" }] : []));
         this.fileUploaded = output();
         this.uploadError = output();
         this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
@@ -739,9 +941,9 @@ class SimpleUploaderComponent {
                 event: this.eventSelected(),
             };
             try {
-                const result = await this.multiImagesStorageService.uploadGenericFile(file, this.storagePath(), metadata);
-                result.metadata = metadata;
+                const result = await this.universalStorageService.uploadGenericFile(file, this.storagePath(), metadata, false, this.provider());
                 if (result) {
+                    result.metadata = metadata;
                     this.fileUploaded.emit(result);
                 }
                 else {
@@ -761,13 +963,13 @@ class SimpleUploaderComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SimpleUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: SimpleUploaderComponent, isStandalone: true, selector: "dc-simple-uploader", inputs: { storagePath: { classPropertyName: "storagePath", publicName: "storagePath", isSignal: true, isRequired: true, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileUploaded: "fileUploaded", uploadError: "uploadError" }, ngImport: i0, template: "<p-button\n  size=\"large\"\n  [label]=\"buttonLabel()\"\n  (click)=\"openDialog()\"\n  [loading]=\"isLoading()\"\n  [disabled]=\"disabled() || isLoading()\"\n  pTooltip=\"Upload a file with metadata\"></p-button>\n\n@if(displayDialog()){\n<p-dialog\n  header=\"Upload File\"\n  [(visible)]=\"displayDialog\"\n  [modal]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [contentStyle]=\"{ width: '50vw', height: '50vh' }\">\n  <div class=\"upload-dialog\">\n    @if(!fileSelected()){\n    <div class=\"file-input-container\">\n      <input #fileInput type=\"file\" [id]=\"fileInputId\" (change)=\"onFileSelected($event)\" [accept]=\"accept()\" style=\"display: none\" />\n      <p-button label=\"Select File\" (click)=\"triggerFileInputClick(fileInput)\"></p-button>\n    </div>\n    } @else {\n    <div class=\"file-details\">\n      <p>File: {{ fileSelected()?.name }}</p>\n      <p>Size: {{ fileSelected()?.size }} bytes</p>\n    </div>\n\n    <div class=\"metadata-container\">\n      <h5>Metadata</h5>\n      <div class=\"p-fluid\">\n        @for (key of objectKeys(metadata()); track key) {\n        <div class=\"p-field\">\n          <label [for]=\"key\">{{ key }}</label>\n          <input pInputText [id]=\"key\" [(ngModel)]=\"metadataInput[key]\" />\n        </div>\n        }\n\n        <div class=\"p-field\">\n          <label for=\"emotion\">Emotion</label>\n          <br />\n          <p-select [options]=\"MoodStateOptions\" [(ngModel)]=\"moodSelected\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select an emotion\"></p-select>\n        </div>\n        <div class=\"p-field\">\n          <label for=\"emotion\">Event</label>\n          <br />\n          <p-select\n            [options]=\"CharacterEventActions\"\n            [(ngModel)]=\"eventSelected\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            placeholder=\"Select an event\"></p-select>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <p-button label=\"Cancel\" styleClass=\"p-button-secondary\" (click)=\"displayDialog.set(false)\"></p-button>\n      <p-button label=\"Upload\" (click)=\"uploadFile()\" [disabled]=\"!fileSelected() || isLoading()\"></p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i7.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SimpleUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SimpleUploaderComponent, isStandalone: true, selector: "dc-simple-uploader", inputs: { storagePath: { classPropertyName: "storagePath", publicName: "storagePath", isSignal: true, isRequired: true, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null }, provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileUploaded: "fileUploaded", uploadError: "uploadError" }, ngImport: i0, template: "<p-button\n  size=\"large\"\n  [label]=\"buttonLabel()\"\n  (click)=\"openDialog()\"\n  [loading]=\"isLoading()\"\n  [disabled]=\"disabled() || isLoading()\"\n  pTooltip=\"Upload a file with metadata\"></p-button>\n\n@if(displayDialog()){\n<p-dialog\n  header=\"Upload File\"\n  [(visible)]=\"displayDialog\"\n  [modal]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [contentStyle]=\"{ width: '50vw', height: '50vh' }\">\n  <div class=\"upload-dialog\">\n    @if(!fileSelected()){\n    <div class=\"file-input-container\">\n      <input #fileInput type=\"file\" [id]=\"fileInputId\" (change)=\"onFileSelected($event)\" [accept]=\"accept()\" style=\"display: none\" />\n      <p-button label=\"Select File\" (click)=\"triggerFileInputClick(fileInput)\"></p-button>\n    </div>\n    } @else {\n    <div class=\"file-details\">\n      <p>File: {{ fileSelected()?.name }}</p>\n      <p>Size: {{ fileSelected()?.size }} bytes</p>\n    </div>\n\n    <div class=\"metadata-container\">\n      <h5>Metadata</h5>\n      <div class=\"p-fluid\">\n        @for (key of objectKeys(metadata()); track key) {\n        <div class=\"p-field\">\n          <label [for]=\"key\">{{ key }}</label>\n          <input pInputText [id]=\"key\" [(ngModel)]=\"metadataInput[key]\" />\n        </div>\n        }\n\n        <div class=\"p-field\">\n          <label for=\"emotion\">Emotion</label>\n          <br />\n          <p-select [options]=\"MoodStateOptions\" [(ngModel)]=\"moodSelected\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select an emotion\"></p-select>\n        </div>\n        <div class=\"p-field\">\n          <label for=\"emotion\">Event</label>\n          <br />\n          <p-select\n            [options]=\"CharacterEventActions\"\n            [(ngModel)]=\"eventSelected\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            placeholder=\"Select an event\"></p-select>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <p-button label=\"Cancel\" styleClass=\"p-button-secondary\" (click)=\"displayDialog.set(false)\"></p-button>\n      <p-button label=\"Upload\" (click)=\"uploadFile()\" [disabled]=\"!fileSelected() || isLoading()\"></p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i7.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SimpleUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SimpleUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-simple-uploader', standalone: true, imports: [CommonModule, FormsModule, ButtonModule, TooltipModule, DialogModule, InputTextModule, SelectModule], template: "<p-button\n  size=\"large\"\n  [label]=\"buttonLabel()\"\n  (click)=\"openDialog()\"\n  [loading]=\"isLoading()\"\n  [disabled]=\"disabled() || isLoading()\"\n  pTooltip=\"Upload a file with metadata\"></p-button>\n\n@if(displayDialog()){\n<p-dialog\n  header=\"Upload File\"\n  [(visible)]=\"displayDialog\"\n  [modal]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [contentStyle]=\"{ width: '50vw', height: '50vh' }\">\n  <div class=\"upload-dialog\">\n    @if(!fileSelected()){\n    <div class=\"file-input-container\">\n      <input #fileInput type=\"file\" [id]=\"fileInputId\" (change)=\"onFileSelected($event)\" [accept]=\"accept()\" style=\"display: none\" />\n      <p-button label=\"Select File\" (click)=\"triggerFileInputClick(fileInput)\"></p-button>\n    </div>\n    } @else {\n    <div class=\"file-details\">\n      <p>File: {{ fileSelected()?.name }}</p>\n      <p>Size: {{ fileSelected()?.size }} bytes</p>\n    </div>\n\n    <div class=\"metadata-container\">\n      <h5>Metadata</h5>\n      <div class=\"p-fluid\">\n        @for (key of objectKeys(metadata()); track key) {\n        <div class=\"p-field\">\n          <label [for]=\"key\">{{ key }}</label>\n          <input pInputText [id]=\"key\" [(ngModel)]=\"metadataInput[key]\" />\n        </div>\n        }\n\n        <div class=\"p-field\">\n          <label for=\"emotion\">Emotion</label>\n          <br />\n          <p-select [options]=\"MoodStateOptions\" [(ngModel)]=\"moodSelected\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select an emotion\"></p-select>\n        </div>\n        <div class=\"p-field\">\n          <label for=\"emotion\">Event</label>\n          <br />\n          <p-select\n            [options]=\"CharacterEventActions\"\n            [(ngModel)]=\"eventSelected\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            placeholder=\"Select an event\"></p-select>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <p-button label=\"Cancel\" styleClass=\"p-button-secondary\" (click)=\"displayDialog.set(false)\"></p-button>\n      <p-button label=\"Upload\" (click)=\"uploadFile()\" [disabled]=\"!fileSelected() || isLoading()\"></p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n}\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { storagePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "storagePath", required: true }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }], provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }], fileUploaded: [{ type: i0.Output, args: ["fileUploaded"] }], uploadError: [{ type: i0.Output, args: ["uploadError"] }] } });
 
 class DCFilesCacheService {
     constructor() {
@@ -805,10 +1007,10 @@ class DCFilesCacheService {
         const blob = await this.getBlob(url);
         return URL.createObjectURL(blob);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCFilesCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCFilesCacheService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DCFilesCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DCFilesCacheService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCFilesCacheService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DCFilesCacheService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -903,16 +1105,149 @@ class MultiObjectStorageService {
         };
         return meta;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MultiObjectStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MultiObjectStorageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MultiObjectStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MultiObjectStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MultiObjectStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MultiObjectStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
+class BackendUploadComponent {
+    constructor() {
+        this.storageService = inject(UniversalStorageService);
+        this.onUploadFinish = new EventEmitter();
+        this.storagePath = 'test-uploads';
+        this.keepOriginalNames = true;
+        this.provider = 'GOOGLE';
+        this.uploading = signal(false, ...(ngDevMode ? [{ debugName: "uploading" }] : []));
+        this.status = signal(null, ...(ngDevMode ? [{ debugName: "status" }] : []));
+        this.message = signal('', ...(ngDevMode ? [{ debugName: "message" }] : []));
+        this.uploadedFileUrls = signal([], ...(ngDevMode ? [{ debugName: "uploadedFileUrls" }] : []));
+        this.totalSize = signal(0, ...(ngDevMode ? [{ debugName: "totalSize" }] : []));
+        this.totalSizePercent = signal(0, ...(ngDevMode ? [{ debugName: "totalSizePercent" }] : []));
+    }
+    async onUpload(event) {
+        console.log('Upload event:', event);
+        const files = event.files;
+        if (!files || files.length === 0)
+            return;
+        this.uploading.set(true);
+        this.status.set(null);
+        this.message.set('Uploading...');
+        try {
+            // Group files by upload path to use multi-file upload where possible
+            const groupedFiles = {};
+            files.forEach(file => {
+                let uploadPath = this.storagePath;
+                if (file.webkitRelativePath) {
+                    const relativeDir = file.webkitRelativePath.substring(0, file.webkitRelativePath.lastIndexOf('/'));
+                    if (relativeDir) {
+                        uploadPath = `${this.storagePath}/${relativeDir}`;
+                    }
+                }
+                if (!groupedFiles[uploadPath]) {
+                    groupedFiles[uploadPath] = [];
+                }
+                groupedFiles[uploadPath].push(file);
+            });
+            const uploadPromises = Object.entries(groupedFiles).map(([path, pathFiles]) => {
+                return this.storageService.uploadMultipleFiles(pathFiles, path, null, this.keepOriginalNames, this.provider);
+            });
+            const results = await Promise.all(uploadPromises);
+            const flattenedResults = results.flat().filter(result => result && result.url);
+            const urls = flattenedResults.map(result => result.url);
+            if (urls.length > 0) {
+                this.status.set('success');
+                this.message.set(`${urls.length} file(s) uploaded successfully!`);
+                this.uploadedFileUrls.update(current => [...current, ...urls]);
+                this.onUploadFinish.emit(flattenedResults);
+            }
+            else {
+                throw new Error('Upload failed: No files were uploaded');
+            }
+        }
+        catch (error) {
+            console.error('Upload component error:', error);
+            this.status.set('error');
+            this.message.set(error.message || 'Error uploading files');
+        }
+        finally {
+            this.uploading.set(false);
+        }
+    }
+    onSelect(event) {
+        console.log('Select event:', event);
+        this.totalSize.set(0);
+        event.currentFiles.forEach((file) => {
+            this.totalSize.update(total => total + file.size);
+        });
+        this.totalSizePercent.set(Math.min((this.totalSize() / 10000000) * 100, 100)); // 10MB limit
+    }
+    onRemove(event) {
+        this.totalSize.update(total => total - event.file.size);
+        this.totalSizePercent.set(Math.min((this.totalSize() / 10000000) * 100, 100)); // 10MB limit
+    }
+    onClear() {
+        this.totalSize.set(0);
+        this.totalSizePercent.set(0);
+    }
+    choose(event, callback) {
+        callback();
+    }
+    onFolderSelect(event) {
+        const files = event.target.files;
+        if (files && files.length > 0) {
+            const fileList = Array.from(files);
+            // Generate object URLs for preview
+            fileList.forEach(file => {
+                file.objectURL = URL.createObjectURL(file);
+            });
+            if (this.fileUpload) {
+                this.fileUpload.files = [...this.fileUpload.files, ...fileList];
+                // Let's also update our total size and UI signals
+                this.onSelect({ currentFiles: this.fileUpload.files });
+            }
+            // Reset input value so same folder can be selected again
+            event.target.value = '';
+        }
+    }
+    formatSize(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const dm = 2;
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BackendUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: BackendUploadComponent, isStandalone: true, selector: "dc-backend-upload", inputs: { storagePath: "storagePath", keepOriginalNames: "keepOriginalNames", provider: "provider" }, outputs: { onUploadFinish: "onUploadFinish" }, providers: [
+            { provide: STORAGE_PROVIDER_TYPE, useValue: 'BACKEND' },
+            UniversalStorageService
+        ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fu"], descendants: true }], ngImport: i0, template: "<div class=\"card p-4\">\n    <p-toast />\n    \n    <p-fileupload \n        #fu\n        name=\"file\" \n        [customUpload]=\"true\" \n        (uploadHandler)=\"onUpload($event)\"\n        (onSelect)=\"onSelect($event)\"\n        (onRemove)=\"onRemove($event)\"\n        (onClear)=\"onClear()\"\n        [multiple]=\"true\" \n        [maxFileSize]=\"10000000\" \n        mode=\"advanced\">\n        \n        <ng-template #header let-files let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\" let-uploadCallback=\"uploadCallback\">\n            <div class=\"flex flex-wrap justify-between items-center flex-1 gap-4\">\n                <div class=\"flex gap-2\">\n                    <p-button (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-plus\" [rounded]=\"true\" [outlined]=\"true\" label=\"Choose\" />\n                    <input #folderInput type=\"file\" webkitdirectory directory multiple style=\"display: none\" (change)=\"onFolderSelect($event)\">\n                    <p-button (onClick)=\"folderInput.click()\" icon=\"pi pi-folder-open\" [rounded]=\"true\" [outlined]=\"true\" label=\"Upload Folder\" severity=\"secondary\" />\n                    <p-button (onClick)=\"uploadCallback()\" icon=\"pi pi-cloud-upload\" [rounded]=\"true\" [outlined]=\"true\" severity=\"success\" [disabled]=\"!files || files.length === 0\" label=\"Upload\" />\n                    <p-button (onClick)=\"clearCallback()\" icon=\"pi pi-times\" [rounded]=\"true\" [outlined]=\"true\" severity=\"danger\" [disabled]=\"!files || files.length === 0\" label=\"Clear\" />\n                </div>\n                <div class=\"flex items-center gap-3 ml-auto\">\n                    <p-progressbar [value]=\"totalSizePercent()\" [showValue]=\"false\" class=\"w-full md:w-20rem h-1\">\n                    </p-progressbar>\n                    <span class=\"whitespace-nowrap text-sm text-secondary\">{{ formatSize(totalSize()) }} / 10MB</span>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-template #content let-files let-uploadedFiles=\"uploadedFiles\" let-removeFileCallback=\"removeFileCallback\" let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\n            <div class=\"flex flex-col gap-4 pt-4\">\n                @if (files?.length > 0) {\n                    <div>\n                        <h5 class=\"mb-3 text-lg font-medium\">Pending Uploads</h5>\n                        <div class=\"flex flex-wrap gap-4\">\n                            @for (file of files; track file.name; let i = $index) {\n                                <div class=\"p-4 border rounded-lg border-surface-200 dark:border-surface-700 flex flex-col items-center gap-3 bg-surface-50 dark:bg-surface-900 w-48\">\n                                    <div class=\"w-full h-24 flex items-center justify-center bg-surface-100 dark:bg-surface-800 rounded\">\n                                        @if (file.objectURL) {\n                                            <img role=\"presentation\" [alt]=\"file.name\" [src]=\"file.objectURL\" class=\"max-w-full max-h-full object-contain\" />\n                                        } @else {\n                                            <i class=\"pi pi-file text-4xl text-surface-400\"></i>\n                                        }\n                                    </div>\n                                    <span class=\"font-semibold text-sm truncate w-full text-center\" [title]=\"file.webkitRelativePath || file.name\">\n                                        {{ file.webkitRelativePath || file.name }}\n                                    </span>\n                                    <div class=\"text-xs text-secondary\">{{ formatSize(file.size) }}</div>\n                                    <p-badge value=\"Pending\" severity=\"warn\" />\n                                    <p-button icon=\"pi pi-times\" (onClick)=\"removeFileCallback($event, i)\" [outlined]=\"true\" [rounded]=\"true\" severity=\"danger\" size=\"small\" />\n                                </div>\n                            }\n                        </div>\n                    </div>\n                }\n\n                @if (uploadedFileUrls().length > 0) {\n                    <div class=\"mt-4\">\n                        <h5 class=\"mb-3 text-lg font-medium text-green-600\">Completed Uploads</h5>\n                        <div class=\"flex flex-wrap gap-4\">\n                            @for (url of uploadedFileUrls(); track url; let i = $index) {\n                                <div class=\"p-4 border rounded-lg border-green-200 dark:border-green-800 flex flex-col items-center gap-3 bg-green-50 dark:bg-green-900/20 w-48\">\n                                    <div class=\"w-full h-24 flex items-center justify-center bg-surface-100 dark:bg-surface-800 rounded\">\n                                        @if (url.toLowerCase().endsWith('.png') || url.toLowerCase().endsWith('.jpg') || url.toLowerCase().endsWith('.jpeg') || url.toLowerCase().endsWith('.webp')) {\n                                            <img [src]=\"url\" class=\"max-w-full max-h-full object-contain\" />\n                                        } @else {\n                                            <i class=\"pi pi-check-circle text-4xl text-green-500\"></i>\n                                        }\n                                    </div>\n                                    <span class=\"font-semibold text-sm truncate w-full text-center\">Uploaded File {{ i + 1 }}</span>\n                                    <p-badge value=\"Completed\" severity=\"success\" />\n                                    <a [href]=\"url\" target=\"_blank\" class=\"text-xs text-primary underline\">View File</a>\n                                </div>\n                            }\n                        </div>\n                    </div>\n                }\n            </div>\n        </ng-template>\n\n        <ng-template #empty>\n            <div class=\"flex items-center justify-center flex-col py-8 border-2 border-dashed border-surface-300 dark:border-surface-600 rounded-xl bg-surface-50 dark:bg-surface-900/50\">\n                <i class=\"pi pi-cloud-upload text-5xl text-surface-400 mb-4\"></i>\n                <p class=\"text-surface-600 dark:text-surface-400 font-medium\">Drag and drop files here to upload</p>\n                <p class=\"text-surface-500 dark:text-surface-500 text-sm\">Any file type up to 10MB</p>\n            </div>\n        </ng-template>\n    </p-fileupload>\n\n    @if (status()) {\n        <div class=\"mt-4 p-3 rounded-lg flex items-center gap-3\" [ngClass]=\"status() === 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'\">\n            <i [class]=\"status() === 'success' ? 'pi pi-check-circle' : 'pi pi-exclamation-circle'\"></i>\n            <span>{{ message() }}</span>\n        </div>\n    }\n</div>\n", styles: [":host{display:block;margin:1rem 0}.upload-container{padding:1rem;border:1px dashed #ccc;border-radius:8px}.status-message{margin-top:1rem;padding:.5rem;border-radius:4px}.status-message.success{background-color:#d4edda;color:#155724}.status-message.error{background-color:#f8d7da;color:#721c24}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i2$1.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i3$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i4$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5$1.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BackendUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-backend-upload', standalone: true, imports: [CommonModule, FileUploadModule, ToastModule, ProgressBarModule, BadgeModule, ButtonModule], providers: [
+                        { provide: STORAGE_PROVIDER_TYPE, useValue: 'BACKEND' },
+                        UniversalStorageService
+                    ], template: "<div class=\"card p-4\">\n    <p-toast />\n    \n    <p-fileupload \n        #fu\n        name=\"file\" \n        [customUpload]=\"true\" \n        (uploadHandler)=\"onUpload($event)\"\n        (onSelect)=\"onSelect($event)\"\n        (onRemove)=\"onRemove($event)\"\n        (onClear)=\"onClear()\"\n        [multiple]=\"true\" \n        [maxFileSize]=\"10000000\" \n        mode=\"advanced\">\n        \n        <ng-template #header let-files let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\" let-uploadCallback=\"uploadCallback\">\n            <div class=\"flex flex-wrap justify-between items-center flex-1 gap-4\">\n                <div class=\"flex gap-2\">\n                    <p-button (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-plus\" [rounded]=\"true\" [outlined]=\"true\" label=\"Choose\" />\n                    <input #folderInput type=\"file\" webkitdirectory directory multiple style=\"display: none\" (change)=\"onFolderSelect($event)\">\n                    <p-button (onClick)=\"folderInput.click()\" icon=\"pi pi-folder-open\" [rounded]=\"true\" [outlined]=\"true\" label=\"Upload Folder\" severity=\"secondary\" />\n                    <p-button (onClick)=\"uploadCallback()\" icon=\"pi pi-cloud-upload\" [rounded]=\"true\" [outlined]=\"true\" severity=\"success\" [disabled]=\"!files || files.length === 0\" label=\"Upload\" />\n                    <p-button (onClick)=\"clearCallback()\" icon=\"pi pi-times\" [rounded]=\"true\" [outlined]=\"true\" severity=\"danger\" [disabled]=\"!files || files.length === 0\" label=\"Clear\" />\n                </div>\n                <div class=\"flex items-center gap-3 ml-auto\">\n                    <p-progressbar [value]=\"totalSizePercent()\" [showValue]=\"false\" class=\"w-full md:w-20rem h-1\">\n                    </p-progressbar>\n                    <span class=\"whitespace-nowrap text-sm text-secondary\">{{ formatSize(totalSize()) }} / 10MB</span>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-template #content let-files let-uploadedFiles=\"uploadedFiles\" let-removeFileCallback=\"removeFileCallback\" let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\n            <div class=\"flex flex-col gap-4 pt-4\">\n                @if (files?.length > 0) {\n                    <div>\n                        <h5 class=\"mb-3 text-lg font-medium\">Pending Uploads</h5>\n                        <div class=\"flex flex-wrap gap-4\">\n                            @for (file of files; track file.name; let i = $index) {\n                                <div class=\"p-4 border rounded-lg border-surface-200 dark:border-surface-700 flex flex-col items-center gap-3 bg-surface-50 dark:bg-surface-900 w-48\">\n                                    <div class=\"w-full h-24 flex items-center justify-center bg-surface-100 dark:bg-surface-800 rounded\">\n                                        @if (file.objectURL) {\n                                            <img role=\"presentation\" [alt]=\"file.name\" [src]=\"file.objectURL\" class=\"max-w-full max-h-full object-contain\" />\n                                        } @else {\n                                            <i class=\"pi pi-file text-4xl text-surface-400\"></i>\n                                        }\n                                    </div>\n                                    <span class=\"font-semibold text-sm truncate w-full text-center\" [title]=\"file.webkitRelativePath || file.name\">\n                                        {{ file.webkitRelativePath || file.name }}\n                                    </span>\n                                    <div class=\"text-xs text-secondary\">{{ formatSize(file.size) }}</div>\n                                    <p-badge value=\"Pending\" severity=\"warn\" />\n                                    <p-button icon=\"pi pi-times\" (onClick)=\"removeFileCallback($event, i)\" [outlined]=\"true\" [rounded]=\"true\" severity=\"danger\" size=\"small\" />\n                                </div>\n                            }\n                        </div>\n                    </div>\n                }\n\n                @if (uploadedFileUrls().length > 0) {\n                    <div class=\"mt-4\">\n                        <h5 class=\"mb-3 text-lg font-medium text-green-600\">Completed Uploads</h5>\n                        <div class=\"flex flex-wrap gap-4\">\n                            @for (url of uploadedFileUrls(); track url; let i = $index) {\n                                <div class=\"p-4 border rounded-lg border-green-200 dark:border-green-800 flex flex-col items-center gap-3 bg-green-50 dark:bg-green-900/20 w-48\">\n                                    <div class=\"w-full h-24 flex items-center justify-center bg-surface-100 dark:bg-surface-800 rounded\">\n                                        @if (url.toLowerCase().endsWith('.png') || url.toLowerCase().endsWith('.jpg') || url.toLowerCase().endsWith('.jpeg') || url.toLowerCase().endsWith('.webp')) {\n                                            <img [src]=\"url\" class=\"max-w-full max-h-full object-contain\" />\n                                        } @else {\n                                            <i class=\"pi pi-check-circle text-4xl text-green-500\"></i>\n                                        }\n                                    </div>\n                                    <span class=\"font-semibold text-sm truncate w-full text-center\">Uploaded File {{ i + 1 }}</span>\n                                    <p-badge value=\"Completed\" severity=\"success\" />\n                                    <a [href]=\"url\" target=\"_blank\" class=\"text-xs text-primary underline\">View File</a>\n                                </div>\n                            }\n                        </div>\n                    </div>\n                }\n            </div>\n        </ng-template>\n\n        <ng-template #empty>\n            <div class=\"flex items-center justify-center flex-col py-8 border-2 border-dashed border-surface-300 dark:border-surface-600 rounded-xl bg-surface-50 dark:bg-surface-900/50\">\n                <i class=\"pi pi-cloud-upload text-5xl text-surface-400 mb-4\"></i>\n                <p class=\"text-surface-600 dark:text-surface-400 font-medium\">Drag and drop files here to upload</p>\n                <p class=\"text-surface-500 dark:text-surface-500 text-sm\">Any file type up to 10MB</p>\n            </div>\n        </ng-template>\n    </p-fileupload>\n\n    @if (status()) {\n        <div class=\"mt-4 p-3 rounded-lg flex items-center gap-3\" [ngClass]=\"status() === 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'\">\n            <i [class]=\"status() === 'success' ? 'pi pi-check-circle' : 'pi pi-exclamation-circle'\"></i>\n            <span>{{ message() }}</span>\n        </div>\n    }\n</div>\n", styles: [":host{display:block;margin:1rem 0}.upload-container{padding:1rem;border:1px dashed #ccc;border-radius:8px}.status-message{margin-top:1rem;padding:.5rem;border-radius:4px}.status-message.success{background-color:#d4edda;color:#155724}.status-message.error{background-color:#f8d7da;color:#721c24}\n"] }]
+        }], propDecorators: { fileUpload: [{
+                type: ViewChild,
+                args: ['fu']
+            }], onUploadFinish: [{
+                type: Output
+            }], storagePath: [{
+                type: Input
+            }], keepOriginalNames: [{
+                type: Input
+            }], provider: [{
+                type: Input
+            }] } });
+
 class AssetsLoaderComponent {
     constructor() {
         this.assets = input.required(...(ngDevMode ? [{ debugName: "assets" }] : []));
@@ -1030,13 +1365,13 @@ class AssetsLoaderComponent {
             clearInterval(this.reverseInterval);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AssetsLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AssetsLoaderComponent, isStandalone: true, selector: "assets-loader", inputs: { assets: { classPropertyName: "assets", publicName: "assets", isSignal: true, isRequired: true, transformFunction: null }, storagePath: { classPropertyName: "storagePath", publicName: "storagePath", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { assetsChange: "assetsChange", assetUpdate: "assetUpdate", onFileSelected: "onFileSelected" }, ngImport: i0, template: "<div class=\"assets-container\">\n  <div class=\"assets-card\">\n    <p-message severity=\"info\">\n      <div class=\"upload-buttons\">\n        <div>\n          <dc-cropper-modal\n            id=\"cropperCardImage\"\n            #cropperCardImage\n            [buttonLabel]=\"assets()?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n            [imgStorageSettings]=\"imageStorageSettings()\"\n            [currentStorage]=\"assets()?.image\"\n            (imageUploaded)=\"onImageUploaded($event, 'image')\"\n            (onFileSelected)=\"onFileSelected.emit($event)\"></dc-cropper-modal>\n        </div>\n\n        <dc-simple-uploader\n          [buttonLabel]=\"assets()?.motion?.url ? 'Cambiar video principal' : 'Agregar video principal'\"\n          (fileUploaded)=\"onMotionUploaded($event)\"\n          [storagePath]=\"storagePath() + '/motions/file'\"\n          [accept]=\"'video/*'\"></dc-simple-uploader>\n\n        <dc-simple-uploader\n          [buttonLabel]=\"'Agregar Movimientos'\"\n          (fileUploaded)=\"onMotionAdded($event)\"\n          [storagePath]=\"storagePath() + '/motions/file'\"\n          [accept]=\"'video/*'\"></dc-simple-uploader>\n\n        <dc-cropper-modal\n          #cropperBanner\n          id=\"cropperBanner\"\n          [buttonLabel]=\"assets()?.banner?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n          [imgStorageSettings]=\"bannerImgSettings()\"\n          [currentStorage]=\"assets()?.banner\"\n          (imageUploaded)=\"onImageUploaded($event, 'banner')\"></dc-cropper-modal>\n\n        <dc-cropper-modal\n          id=\"cropperStickers\"\n          #cropperStickers\n          [buttonLabel]=\"'Agregar sticker'\"\n          [imgStorageSettings]=\"stickerStorageSettings()\"\n          (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n      </div>\n    </p-message>\n    <!-- Banner -->\n\n    <div class=\"preview-container\">\n      <img [src]=\"assets()?.banner?.url || 'assets/defaults/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n      <div class=\"main-image-card\">\n        <img [src]=\"assets()?.image?.url || 'assets/defaults/images/default_2_3.webp'\" />\n      </div>\n\n      <div class=\"motion-container\">\n        <video #videoPlayer class=\"main-motion-card\" [src]=\"assets()?.motion?.url\" (ended)=\"onVideoEnded(videoPlayer)\" autoplay muted playsinline></video>\n        @if(assets()?.motion?.url){\n        <p-button class=\"remove-main-motion-button\" (click)=\"removeMainMotion()\" [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-trash\" severity=\"danger\"></p-button>\n        }\n      </div>\n    </div>\n\n    <div class=\"stickers-container\">\n      @for (sticker of assets()?.stickers; track sticker.url) {\n      <div class=\"sticker-wrapper\">\n        <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n        <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n      </div>\n      }\n    </div>\n\n    <div class=\"motions-container\">\n      @for (motion of assets()?.motions; track motion.url) {\n      <div class=\"motion-wrapper\">\n        <video width=\"150\" [src]=\"motion.url\" controls playsinline preload=\"none\"></video>\n        <p-button (click)=\"removeMotion(motion)\" class=\"remove-motion-button\" icon=\"pi pi-trash\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\"></p-button>\n        @if(motion.metadata?.moodState){\n        <p-tag style=\"position: absolute; top: 4px; left: 4px\" severity=\"secondary\" [value]=\"motion.metadata?.moodState\" />\n        } @if(motion.metadata?.event){\n        <p-tag style=\"position: absolute; top: 4px; left: 4px\" severity=\"warn\" [value]=\"motion.metadata?.event\" />\n        }\n      </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".main-image-card{max-width:220px;display:block;border-radius:8px;position:absolute;bottom:-100px;left:20px;transform:none;z-index:1;box-shadow:0 4px 8px #0003;overflow:hidden}@media (max-width: 1300px){.main-image-card{max-width:170px}}@media (max-width: 768px){.main-image-card{max-width:130px}}.main-motion-card{max-width:100%;display:block;border-radius:8px}.main-banner-image-card{display:block;width:100%;max-height:400px;object-fit:cover;border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.assets-container{position:relative;min-height:60px}.assets-card{border:1px dashed rgba(12,19,142,.1215686275);padding:4px;border-radius:15px}.upload-buttons{display:flex;gap:10px}.preview-container{position:relative;margin-bottom:100px}.stickers-container{display:flex;flex-wrap:wrap;gap:10px}.sticker-wrapper{position:relative}.motion-container{position:absolute;bottom:-100px;right:20px;z-index:1;box-shadow:0 4px 8px #0003;max-width:220px;border-radius:8px;overflow:hidden}@media (max-width: 1300px){.motion-container{max-width:170px}}@media (max-width: 768px){.motion-container{max-width:130px}}.remove-main-motion-button{position:absolute;top:10px;right:10px;z-index:2}.motions-container{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.motion-wrapper{position:relative;width:150px;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a}.motion-wrapper video{min-height:220px;display:block;background-color:#f0f0f0}.remove-motion-button{position:absolute;top:5px;right:5px;z-index:2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "component", type: SimpleUploaderComponent, selector: "dc-simple-uploader", inputs: ["storagePath", "buttonLabel", "accept", "disabled", "metadata"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i6.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AssetsLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AssetsLoaderComponent, isStandalone: true, selector: "assets-loader", inputs: { assets: { classPropertyName: "assets", publicName: "assets", isSignal: true, isRequired: true, transformFunction: null }, storagePath: { classPropertyName: "storagePath", publicName: "storagePath", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { assetsChange: "assetsChange", assetUpdate: "assetUpdate", onFileSelected: "onFileSelected" }, ngImport: i0, template: "<div class=\"assets-container\">\n  <div class=\"assets-card\">\n    <p-message severity=\"info\">\n      <div class=\"upload-buttons\">\n        <div>\n          <dc-cropper-modal\n            id=\"cropperCardImage\"\n            #cropperCardImage\n            [buttonLabel]=\"assets()?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n            [imgStorageSettings]=\"imageStorageSettings()\"\n            [currentStorage]=\"assets()?.image\"\n            (imageUploaded)=\"onImageUploaded($event, 'image')\"\n            (onFileSelected)=\"onFileSelected.emit($event)\"></dc-cropper-modal>\n        </div>\n\n        <dc-simple-uploader\n          [buttonLabel]=\"assets()?.motion?.url ? 'Cambiar video principal' : 'Agregar video principal'\"\n          (fileUploaded)=\"onMotionUploaded($event)\"\n          [storagePath]=\"storagePath() + '/motions/file'\"\n          [accept]=\"'video/*'\"></dc-simple-uploader>\n\n        <dc-simple-uploader\n          [buttonLabel]=\"'Agregar Movimientos'\"\n          (fileUploaded)=\"onMotionAdded($event)\"\n          [storagePath]=\"storagePath() + '/motions/file'\"\n          [accept]=\"'video/*'\"></dc-simple-uploader>\n\n        <dc-cropper-modal\n          #cropperBanner\n          id=\"cropperBanner\"\n          [buttonLabel]=\"assets()?.banner?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n          [imgStorageSettings]=\"bannerImgSettings()\"\n          [currentStorage]=\"assets()?.banner\"\n          (imageUploaded)=\"onImageUploaded($event, 'banner')\"></dc-cropper-modal>\n\n        <dc-cropper-modal\n          id=\"cropperStickers\"\n          #cropperStickers\n          [buttonLabel]=\"'Agregar sticker'\"\n          [imgStorageSettings]=\"stickerStorageSettings()\"\n          (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n      </div>\n    </p-message>\n    <!-- Banner -->\n\n    <div class=\"preview-container\">\n      <img [src]=\"assets()?.banner?.url || 'defaults/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n      <div class=\"main-image-card\">\n        <img [src]=\"assets()?.image?.url || 'defaults/images/default_2_3.webp'\" />\n      </div>\n\n      <div class=\"motion-container\">\n        <video #videoPlayer class=\"main-motion-card\" [src]=\"assets()?.motion?.url\" (ended)=\"onVideoEnded(videoPlayer)\" autoplay muted playsinline></video>\n        @if(assets()?.motion?.url){\n        <p-button class=\"remove-main-motion-button\" (click)=\"removeMainMotion()\" [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-trash\" severity=\"danger\"></p-button>\n        }\n      </div>\n    </div>\n\n    <div class=\"stickers-container\">\n      @for (sticker of assets()?.stickers; track sticker.url) {\n      <div class=\"sticker-wrapper\">\n        <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n        <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n      </div>\n      }\n    </div>\n\n    <div class=\"motions-container\">\n      @for (motion of assets()?.motions; track motion.url) {\n      <div class=\"motion-wrapper\">\n        <video width=\"150\" [src]=\"motion.url\" controls playsinline preload=\"none\"></video>\n        <p-button (click)=\"removeMotion(motion)\" class=\"remove-motion-button\" icon=\"pi pi-trash\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\"></p-button>\n        @if(motion.metadata?.moodState){\n        <p-tag style=\"position: absolute; top: 4px; left: 4px\" severity=\"secondary\" [value]=\"motion.metadata?.moodState\" />\n        } @if(motion.metadata?.event){\n        <p-tag style=\"position: absolute; top: 4px; left: 4px\" severity=\"warn\" [value]=\"motion.metadata?.event\" />\n        }\n      </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".main-image-card{max-width:220px;display:block;border-radius:8px;position:absolute;bottom:-100px;left:20px;transform:none;z-index:1;box-shadow:0 4px 8px #0003;overflow:hidden}@media(max-width:1300px){.main-image-card{max-width:170px}}@media(max-width:768px){.main-image-card{max-width:130px}}.main-motion-card{max-width:100%;display:block;border-radius:8px}.main-banner-image-card{display:block;width:100%;max-height:400px;object-fit:cover;border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.assets-container{position:relative;min-height:60px}.assets-card{border:1px dashed rgba(12,19,142,.1215686275);padding:4px;border-radius:15px}.upload-buttons{display:flex;gap:10px}.preview-container{position:relative;margin-bottom:100px}.stickers-container{display:flex;flex-wrap:wrap;gap:10px}.sticker-wrapper{position:relative}.motion-container{position:absolute;bottom:-100px;right:20px;z-index:1;box-shadow:0 4px 8px #0003;max-width:220px;border-radius:8px;overflow:hidden}@media(max-width:1300px){.motion-container{max-width:170px}}@media(max-width:768px){.motion-container{max-width:130px}}.remove-main-motion-button{position:absolute;top:10px;right:10px;z-index:2}.motions-container{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.motion-wrapper{position:relative;width:150px;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a}.motion-wrapper video{min-height:220px;display:block;background-color:#f0f0f0}.remove-motion-button{position:absolute;top:5px;right:5px;z-index:2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "component", type: SimpleUploaderComponent, selector: "dc-simple-uploader", inputs: ["storagePath", "buttonLabel", "accept", "disabled", "metadata", "provider"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i6.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AssetsLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AssetsLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'assets-loader', standalone: true, imports: [CommonModule, CropperComponentModal, SimpleUploaderComponent, ButtonModule, MessageModule, TagModule], template: "<div class=\"assets-container\">\n  <div class=\"assets-card\">\n    <p-message severity=\"info\">\n      <div class=\"upload-buttons\">\n        <div>\n          <dc-cropper-modal\n            id=\"cropperCardImage\"\n            #cropperCardImage\n            [buttonLabel]=\"assets()?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n            [imgStorageSettings]=\"imageStorageSettings()\"\n            [currentStorage]=\"assets()?.image\"\n            (imageUploaded)=\"onImageUploaded($event, 'image')\"\n            (onFileSelected)=\"onFileSelected.emit($event)\"></dc-cropper-modal>\n        </div>\n\n        <dc-simple-uploader\n          [buttonLabel]=\"assets()?.motion?.url ? 'Cambiar video principal' : 'Agregar video principal'\"\n          (fileUploaded)=\"onMotionUploaded($event)\"\n          [storagePath]=\"storagePath() + '/motions/file'\"\n          [accept]=\"'video/*'\"></dc-simple-uploader>\n\n        <dc-simple-uploader\n          [buttonLabel]=\"'Agregar Movimientos'\"\n          (fileUploaded)=\"onMotionAdded($event)\"\n          [storagePath]=\"storagePath() + '/motions/file'\"\n          [accept]=\"'video/*'\"></dc-simple-uploader>\n\n        <dc-cropper-modal\n          #cropperBanner\n          id=\"cropperBanner\"\n          [buttonLabel]=\"assets()?.banner?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n          [imgStorageSettings]=\"bannerImgSettings()\"\n          [currentStorage]=\"assets()?.banner\"\n          (imageUploaded)=\"onImageUploaded($event, 'banner')\"></dc-cropper-modal>\n\n        <dc-cropper-modal\n          id=\"cropperStickers\"\n          #cropperStickers\n          [buttonLabel]=\"'Agregar sticker'\"\n          [imgStorageSettings]=\"stickerStorageSettings()\"\n          (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n      </div>\n    </p-message>\n    <!-- Banner -->\n\n    <div class=\"preview-container\">\n      <img [src]=\"assets()?.banner?.url || 'assets/defaults/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n      <div class=\"main-image-card\">\n        <img [src]=\"assets()?.image?.url || 'assets/defaults/images/default_2_3.webp'\" />\n      </div>\n\n      <div class=\"motion-container\">\n        <video #videoPlayer class=\"main-motion-card\" [src]=\"assets()?.motion?.url\" (ended)=\"onVideoEnded(videoPlayer)\" autoplay muted playsinline></video>\n        @if(assets()?.motion?.url){\n        <p-button class=\"remove-main-motion-button\" (click)=\"removeMainMotion()\" [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-trash\" severity=\"danger\"></p-button>\n        }\n      </div>\n    </div>\n\n    <div class=\"stickers-container\">\n      @for (sticker of assets()?.stickers; track sticker.url) {\n      <div class=\"sticker-wrapper\">\n        <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n        <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n      </div>\n      }\n    </div>\n\n    <div class=\"motions-container\">\n      @for (motion of assets()?.motions; track motion.url) {\n      <div class=\"motion-wrapper\">\n        <video width=\"150\" [src]=\"motion.url\" controls playsinline preload=\"none\"></video>\n        <p-button (click)=\"removeMotion(motion)\" class=\"remove-motion-button\" icon=\"pi pi-trash\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\"></p-button>\n        @if(motion.metadata?.moodState){\n        <p-tag style=\"position: absolute; top: 4px; left: 4px\" severity=\"secondary\" [value]=\"motion.metadata?.moodState\" />\n        } @if(motion.metadata?.event){\n        <p-tag style=\"position: absolute; top: 4px; left: 4px\" severity=\"warn\" [value]=\"motion.metadata?.event\" />\n        }\n      </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".main-image-card{max-width:220px;display:block;border-radius:8px;position:absolute;bottom:-100px;left:20px;transform:none;z-index:1;box-shadow:0 4px 8px #0003;overflow:hidden}@media (max-width: 1300px){.main-image-card{max-width:170px}}@media (max-width: 768px){.main-image-card{max-width:130px}}.main-motion-card{max-width:100%;display:block;border-radius:8px}.main-banner-image-card{display:block;width:100%;max-height:400px;object-fit:cover;border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.assets-container{position:relative;min-height:60px}.assets-card{border:1px dashed rgba(12,19,142,.1215686275);padding:4px;border-radius:15px}.upload-buttons{display:flex;gap:10px}.preview-container{position:relative;margin-bottom:100px}.stickers-container{display:flex;flex-wrap:wrap;gap:10px}.sticker-wrapper{position:relative}.motion-container{position:absolute;bottom:-100px;right:20px;z-index:1;box-shadow:0 4px 8px #0003;max-width:220px;border-radius:8px;overflow:hidden}@media (max-width: 1300px){.motion-container{max-width:170px}}@media (max-width: 768px){.motion-container{max-width:130px}}.remove-main-motion-button{position:absolute;top:10px;right:10px;z-index:2}.motions-container{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.motion-wrapper{position:relative;width:150px;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a}.motion-wrapper video{min-height:220px;display:block;background-color:#f0f0f0}.remove-motion-button{position:absolute;top:5px;right:5px;z-index:2}\n"] }]
-        }] });
+            args: [{ selector: 'assets-loader', standalone: true, imports: [CommonModule, CropperComponentModal, SimpleUploaderComponent, ButtonModule, MessageModule, TagModule], template: "<div class=\"assets-container\">\n  <div class=\"assets-card\">\n    <p-message severity=\"info\">\n      <div class=\"upload-buttons\">\n        <div>\n          <dc-cropper-modal\n            id=\"cropperCardImage\"\n            #cropperCardImage\n            [buttonLabel]=\"assets()?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n            [imgStorageSettings]=\"imageStorageSettings()\"\n            [currentStorage]=\"assets()?.image\"\n            (imageUploaded)=\"onImageUploaded($event, 'image')\"\n            (onFileSelected)=\"onFileSelected.emit($event)\"></dc-cropper-modal>\n        </div>\n\n        <dc-simple-uploader\n          [buttonLabel]=\"assets()?.motion?.url ? 'Cambiar video principal' : 'Agregar video principal'\"\n          (fileUploaded)=\"onMotionUploaded($event)\"\n          [storagePath]=\"storagePath() + '/motions/file'\"\n          [accept]=\"'video/*'\"></dc-simple-uploader>\n\n        <dc-simple-uploader\n          [buttonLabel]=\"'Agregar Movimientos'\"\n          (fileUploaded)=\"onMotionAdded($event)\"\n          [storagePath]=\"storagePath() + '/motions/file'\"\n          [accept]=\"'video/*'\"></dc-simple-uploader>\n\n        <dc-cropper-modal\n          #cropperBanner\n          id=\"cropperBanner\"\n          [buttonLabel]=\"assets()?.banner?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n          [imgStorageSettings]=\"bannerImgSettings()\"\n          [currentStorage]=\"assets()?.banner\"\n          (imageUploaded)=\"onImageUploaded($event, 'banner')\"></dc-cropper-modal>\n\n        <dc-cropper-modal\n          id=\"cropperStickers\"\n          #cropperStickers\n          [buttonLabel]=\"'Agregar sticker'\"\n          [imgStorageSettings]=\"stickerStorageSettings()\"\n          (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n      </div>\n    </p-message>\n    <!-- Banner -->\n\n    <div class=\"preview-container\">\n      <img [src]=\"assets()?.banner?.url || 'defaults/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n      <div class=\"main-image-card\">\n        <img [src]=\"assets()?.image?.url || 'defaults/images/default_2_3.webp'\" />\n      </div>\n\n      <div class=\"motion-container\">\n        <video #videoPlayer class=\"main-motion-card\" [src]=\"assets()?.motion?.url\" (ended)=\"onVideoEnded(videoPlayer)\" autoplay muted playsinline></video>\n        @if(assets()?.motion?.url){\n        <p-button class=\"remove-main-motion-button\" (click)=\"removeMainMotion()\" [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-trash\" severity=\"danger\"></p-button>\n        }\n      </div>\n    </div>\n\n    <div class=\"stickers-container\">\n      @for (sticker of assets()?.stickers; track sticker.url) {\n      <div class=\"sticker-wrapper\">\n        <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n        <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n      </div>\n      }\n    </div>\n\n    <div class=\"motions-container\">\n      @for (motion of assets()?.motions; track motion.url) {\n      <div class=\"motion-wrapper\">\n        <video width=\"150\" [src]=\"motion.url\" controls playsinline preload=\"none\"></video>\n        <p-button (click)=\"removeMotion(motion)\" class=\"remove-motion-button\" icon=\"pi pi-trash\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\"></p-button>\n        @if(motion.metadata?.moodState){\n        <p-tag style=\"position: absolute; top: 4px; left: 4px\" severity=\"secondary\" [value]=\"motion.metadata?.moodState\" />\n        } @if(motion.metadata?.event){\n        <p-tag style=\"position: absolute; top: 4px; left: 4px\" severity=\"warn\" [value]=\"motion.metadata?.event\" />\n        }\n      </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".main-image-card{max-width:220px;display:block;border-radius:8px;position:absolute;bottom:-100px;left:20px;transform:none;z-index:1;box-shadow:0 4px 8px #0003;overflow:hidden}@media(max-width:1300px){.main-image-card{max-width:170px}}@media(max-width:768px){.main-image-card{max-width:130px}}.main-motion-card{max-width:100%;display:block;border-radius:8px}.main-banner-image-card{display:block;width:100%;max-height:400px;object-fit:cover;border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.assets-container{position:relative;min-height:60px}.assets-card{border:1px dashed rgba(12,19,142,.1215686275);padding:4px;border-radius:15px}.upload-buttons{display:flex;gap:10px}.preview-container{position:relative;margin-bottom:100px}.stickers-container{display:flex;flex-wrap:wrap;gap:10px}.sticker-wrapper{position:relative}.motion-container{position:absolute;bottom:-100px;right:20px;z-index:1;box-shadow:0 4px 8px #0003;max-width:220px;border-radius:8px;overflow:hidden}@media(max-width:1300px){.motion-container{max-width:170px}}@media(max-width:768px){.motion-container{max-width:130px}}.remove-main-motion-button{position:absolute;top:10px;right:10px;z-index:2}.motions-container{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.motion-wrapper{position:relative;width:150px;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a}.motion-wrapper video{min-height:220px;display:block;background-color:#f0f0f0}.remove-motion-button{position:absolute;top:5px;right:5px;z-index:2}\n"] }]
+        }], propDecorators: { assets: [{ type: i0.Input, args: [{ isSignal: true, alias: "assets", required: true }] }], storagePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "storagePath", required: true }] }], assetsChange: [{ type: i0.Output, args: ["assetsChange"] }], assetUpdate: [{ type: i0.Output, args: ["assetUpdate"] }], onFileSelected: [{ type: i0.Output, args: ["onFileSelected"] }] } });
 
 /*
  * Public API Surface of storage-uploader
@@ -1046,5 +1381,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AllAspectRatioOptions, AspectRatio, AspectRatioOptions, AspectType, AssetsLoaderComponent, CropperComponent, CropperComponentModal, DCFilesCacheService, DEFAULT_SETTINGS, ImageStoragePreviewComponent, MultiImagesStorageService, MultiObjectStorageService, ResolutionType, SafeHtmlPipe, SimpleUploaderComponent, extractBucket, extractPath };
+export { AllAspectRatioOptions, AspectRatio, AspectRatioOptions, AspectType, AssetsLoaderComponent, BackendUploadComponent, CropperComponent, CropperComponentModal, DCFilesCacheService, DEFAULT_SETTINGS, ImageStoragePreviewComponent, MultiImagesStorageService, MultiObjectStorageService, ResolutionType, STORAGE_PROVIDER_TYPE, SafeHtmlPipe, SimpleUploaderComponent, UniversalStorageService, extractBucket, extractPath };
 //# sourceMappingURL=dataclouder-ngx-cloud-storage.mjs.map