@dataclouder/ngx-cloud-storage 0.0.27 → 0.0.29

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

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, output, ViewChild, Component, ChangeDetectorRef, Input, signal, computed } from '@angular/core';
+import { inject, Injectable, input, output, ViewChild, Component, Pipe, ChangeDetectorRef, Input, signal, 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, listAll, deleteObject, getDownloadURL, Storage, ref as ref$1 } from '@angular/fire/storage';
-import { ref, getStorage as getStorage$1, listAll as listAll$1, getDownloadURL as getDownloadURL$1 } from 'firebase/storage';
+import { getStorage, ref, listAll, deleteObject, getDownloadURL, Storage } from '@angular/fire/storage';
 import { lastValueFrom, BehaviorSubject } from 'rxjs';
 import * as i4 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
@@ -19,43 +18,209 @@ import * as i7 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i8 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import { MoodStateOptions } from '@dataclouder/ngx-core';
+import { MoodStateOptions, CharacterEventActions } from '@dataclouder/ngx-core';
+import * as i1$1 from '@angular/platform-browser';
 import * as i3 from 'primeng/api';
 import { AsyncPipe, CommonModule } from '@angular/common';
+import * as i3$1 from 'primeng/tag';
+import { TagModule } from 'primeng/tag';
 
 const AspectRatioOptions = [
-    { value: '1:1', label: 'square', description: 'Square (1:1)', valueRatio: 1 / 1 },
-    { value: '1:2', label: 'vertical_1_2', description: 'Vertical (1:2)', valueRatio: 1 / 2 },
-    { value: '2:3', label: 'vertical_2_3', description: 'Vertical (2:3)', valueRatio: 2 / 3 },
-    { value: '3:4', label: 'vertical_3_4', description: 'Vertical (3:4)', valueRatio: 3 / 4 },
-    { value: '4:5', label: 'vertical_4_5', description: 'Vertical (4:5)', valueRatio: 4 / 5 },
-    { value: '9:16', label: 'vertical_9_16', description: 'Vertical (9:16)', valueRatio: 9 / 16 },
-    { value: '2:1', label: 'horizontal_2_1', description: 'Horizontal (2:1)', valueRatio: 2 / 1 },
-    { value: '3:2', label: 'horizontal_3_2', description: 'Horizontal (3:2)', valueRatio: 3 / 2 },
-    { value: '4:3', label: 'horizontal_4_3', description: 'Horizontal (4:3)', valueRatio: 4 / 3 },
-    { value: '5:4', label: 'horizontal_5_4', description: 'Horizontal (5:4)', valueRatio: 5 / 4 },
-    { value: '16:9', label: 'horizontal_16_9', description: 'Horizontal (16:9)', valueRatio: 16 / 9 },
+    {
+        value: '1:1',
+        label: 'square',
+        description: 'Square (1:1)',
+        valueRatio: 1 / 1,
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" /></svg>`,
+        resolution: {
+            veryLow: { w: 240, h: 240 },
+            low: { w: 360, h: 360 },
+            sd: { w: 480, h: 480 },
+            sdLarge: { w: 540, h: 540 },
+            hd: { w: 720, h: 720 },
+            fullhd: { w: 1080, h: 1080 },
+            '4k': { w: 2160, h: 2160 },
+        },
+    },
+    {
+        value: '1:2',
+        label: 'vertical_1_2',
+        description: 'Vertical (1:2)',
+        valueRatio: 1 / 2,
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="4" width="9" height="18" rx="2" /></svg>`,
+        resolution: {
+            veryLow: { w: 240, h: 480 },
+            low: { w: 360, h: 720 },
+            sd: { w: 480, h: 960 },
+            sdLarge: { w: 540, h: 1080 },
+            hd: { w: 720, h: 1440 },
+            fullhd: { w: 1080, h: 2160 },
+            '4k': { w: 2160, h: 4320 },
+        },
+    },
+    {
+        value: '9:16',
+        label: 'vertical_9_16',
+        description: 'Vertical (9:16)',
+        valueRatio: 9 / 16,
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="4" width="9" height="16" rx="2" /></svg>`,
+        resolution: {
+            veryLow: { w: 240, h: 427 },
+            low: { w: 360, h: 640 },
+            sd: { w: 450, h: 800 },
+            sdLarge: { w: 540, h: 960 },
+            hd: { w: 720, h: 1280 },
+            fullhd: { w: 1080, h: 1920 },
+            '4k': { w: 2160, h: 3840 },
+        },
+    },
+    {
+        value: '2:3',
+        label: 'vertical_2_3',
+        description: 'Vertical (2:3)',
+        valueRatio: 2 / 3,
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="12" height="18" rx="2" /></svg>`,
+        resolution: {
+            veryLow: { w: 240, h: 360 },
+            low: { w: 360, h: 540 },
+            sd: { w: 480, h: 720 },
+            sdLarge: { w: 540, h: 810 },
+            hd: { w: 720, h: 1080 },
+            fullhd: { w: 1080, h: 1620 },
+            '4k': { w: 2160, h: 3240 },
+        },
+    },
+    {
+        value: '3:4',
+        label: 'vertical_3_4',
+        description: 'Vertical (3:4)',
+        valueRatio: 3 / 4,
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="4" width="12" height="16" rx="2" /></svg>`,
+        resolution: {
+            veryLow: { w: 240, h: 320 },
+            low: { w: 360, h: 480 },
+            sd: { w: 480, h: 640 },
+            sdLarge: { w: 540, h: 720 },
+            hd: { w: 720, h: 960 },
+            fullhd: { w: 1080, h: 1440 },
+            '4k': { w: 2160, h: 2880 },
+        },
+    },
+    {
+        value: '4:5',
+        label: 'vertical_4_5',
+        description: 'Vertical (4:5)',
+        valueRatio: 4 / 5,
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="12" height="15" rx="2" /></svg>`,
+        resolution: {
+            veryLow: { w: 240, h: 300 },
+            low: { w: 360, h: 450 },
+            sd: { w: 480, h: 600 },
+            sdLarge: { w: 540, h: 675 },
+            hd: { w: 720, h: 900 },
+            fullhd: { w: 1080, h: 1350 },
+            '4k': { w: 2160, h: 2700 },
+        },
+    },
+    {
+        value: '2:1',
+        label: 'horizontal_2_1',
+        description: 'Horizontal (2:1)',
+        valueRatio: 2 / 1,
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="9" rx="2" /></svg>`,
+        resolution: {
+            veryLow: { w: 480, h: 240 },
+            low: { w: 720, h: 360 },
+            sd: { w: 960, h: 480 },
+            sdLarge: { w: 1080, h: 540 },
+            hd: { w: 1440, h: 720 },
+            fullhd: { w: 2160, h: 1080 },
+            '4k': { w: 4320, h: 2160 },
+        },
+    },
+    {
+        value: '16:9',
+        label: 'horizontal_16_9',
+        description: 'Horizontal (16:9)',
+        valueRatio: 16 / 9,
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7.5" width="18" height="10.125" rx="2" /></svg>`,
+        resolution: {
+            veryLow: { w: 240, h: 426 },
+            low: { w: 360, h: 640 },
+            sd: { w: 468, h: 832 },
+            sdLarge: { w: 540, h: 960 },
+            hd: { w: 720, h: 1280 },
+            fullhd: { w: 1080, h: 1920 },
+            '4k': { w: 2160, h: 3840 },
+        },
+    },
+    {
+        value: '3:2',
+        label: 'horizontal_3_2',
+        description: 'Horizontal (3:2)',
+        valueRatio: 3 / 2,
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="12" rx="2" /></svg>`,
+        resolution: {
+            veryLow: { w: 360, h: 240 },
+            low: { w: 540, h: 360 },
+            sd: { w: 720, h: 480 },
+            sdLarge: { w: 810, h: 540 },
+            hd: { w: 1080, h: 720 },
+            fullhd: { w: 1620, h: 1080 },
+            '4k': { w: 3240, h: 2160 },
+        },
+    },
+    {
+        value: '4:3',
+        label: 'horizontal_4_3',
+        description: 'Horizontal (4:3)',
+        valueRatio: 4 / 3,
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="6" width="16" height="12" rx="2" /></svg>`,
+        resolution: {
+            veryLow: { w: 320, h: 240 },
+            low: { w: 480, h: 360 },
+            sd: { w: 640, h: 480 },
+            sdLarge: { w: 720, h: 540 },
+            hd: { w: 960, h: 720 },
+            fullhd: { w: 1440, h: 1080 },
+            '4k': { w: 2880, h: 2160 },
+        },
+    },
+    {
+        value: '5:4',
+        label: 'horizontal_5_4',
+        description: 'Horizontal (5:4)',
+        valueRatio: 5 / 4,
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5.6" width="16" height="12.8" rx="2" /></svg>`,
+        resolution: {
+            veryLow: { w: 300, h: 240 },
+            low: { w: 450, h: 360 },
+            sd: { w: 600, h: 480 },
+            sdLarge: { w: 675, h: 540 },
+            hd: { w: 900, h: 720 },
+            fullhd: { w: 1350, h: 1080 },
+            '4k': { w: 2700, h: 2160 },
+        },
+    },
 ];
+const AllAspectRatioOptions = [...AspectRatioOptions];
 var AspectType;
 (function (AspectType) {
     AspectType["Square"] = "square";
     AspectType["Rectangle"] = "rectangle";
     AspectType["Banner"] = "banner";
     AspectType["RectangleLarge"] = "rectangleLarge";
-    AspectType["Vertical_9_16"] = "vertical_9_16";
-    AspectType["Vertical_3_5"] = "vertical_3_5";
-    AspectType["Vertical_2_3"] = "vertical_2_3";
+    AspectType["vertical_1_2"] = "vertical_1_2";
+    AspectType["vertical_9_16"] = "vertical_9_16";
+    AspectType["vertical_2_3"] = "vertical_2_3";
+    AspectType["vertical_3_4"] = "vertical_3_4";
+    AspectType["vertical_4_5"] = "vertical_4_5";
+    AspectType["horizontal_2_1"] = "horizontal_2_1";
+    AspectType["horizontal_16_9"] = "horizontal_16_9";
+    AspectType["horizontal_3_2"] = "horizontal_3_2";
+    AspectType["horizontal_4_3"] = "horizontal_4_3";
+    AspectType["horizontal_5_4"] = "horizontal_5_4";
 })(AspectType || (AspectType = {}));
-// Creo que seria bueno refactorizar para solo enviar aspect ratio asi
-var AspectRatio2;
-(function (AspectRatio2) {
-    // Vertical
-    AspectRatio2[AspectRatio2["9:16"] = 1.7777777777777777] = "9:16";
-    AspectRatio2[AspectRatio2["3:5"] = 0.6] = "3:5";
-    AspectRatio2[AspectRatio2["5:8"] = 0.625] = "5:8";
-    AspectRatio2[AspectRatio2["2:3"] = 0.6666666666666666] = "2:3";
-    AspectRatio2[AspectRatio2["1:1"] = 1] = "1:1";
-})(AspectRatio2 || (AspectRatio2 = {}));
 var ResolutionType;
 (function (ResolutionType) {
     ResolutionType[ResolutionType["Small"] = 200] = "Small";
@@ -67,11 +232,18 @@ var ResolutionType;
 const AspectRatio = {
     [AspectType.Square]: 1 / 1,
     [AspectType.Rectangle]: 16 / 9,
-    [AspectType.Vertical_9_16]: 9 / 16,
+    [AspectType.vertical_9_16]: 9 / 16,
     [AspectType.RectangleLarge]: 16 / 8,
     [AspectType.Banner]: 16 / 7,
-    [AspectType.Vertical_3_5]: 3 / 5,
-    [AspectType.Vertical_2_3]: 2 / 3,
+    [AspectType.vertical_1_2]: 1 / 2,
+    [AspectType.vertical_2_3]: 2 / 3,
+    [AspectType.vertical_3_4]: 3 / 4,
+    [AspectType.vertical_4_5]: 4 / 5,
+    [AspectType.horizontal_2_1]: 2 / 1,
+    [AspectType.horizontal_16_9]: 16 / 9,
+    [AspectType.horizontal_3_2]: 3 / 2,
+    [AspectType.horizontal_4_3]: 4 / 3,
+    [AspectType.horizontal_5_4]: 5 / 4,
 };
 const DEFAULT_SETTINGS = {
     path: '/default-collection/id/please-change-this-subcollection',
@@ -88,7 +260,7 @@ const FIREBASE_STORAGE_URL_REGEX = /https:\/\/firebasestorage\.googleapis\.com\/
  * The URL is expected to follow the pattern:
  * 'https://firebasestorage.googleapis.com/v0/b/&lt;bucket&gt;/&lt;path&gt;?&lt;query_params&gt;'
  *
- * @param data The CloudStorageData object containing the 'url' property.
+ * @param data The BasicStorage object containing the 'url' property.
  * @returns The bucket name (e.g., 'appingles-pro.appspot.com') or undefined if not found or URL is invalid.
  */
 function extractBucket(data) {
@@ -107,7 +279,7 @@ function extractBucket(data) {
  * 'https://firebasestorage.googleapis.com/v0/b/&lt;bucket&gt;/&lt;path&gt;?&lt;query_params&gt;'
  * The extracted path is the part after the bucket and before any query parameters.
  *
- * @param data The CloudStorageData object containing the 'url' property.
+ * @param data The BasicStorage object containing the 'url' property.
  * @returns The file path (e.g., 'scenarios/666506c3b9b5443f4bfab5e0/images/hairdresser.webp')
  *          or undefined if not found or URL is invalid.
  *          Note: This function does not perform URL decoding on the path. If URL-decoded paths
@@ -183,22 +355,6 @@ class MultiImagesStorageService {
             console.log('image deleted', res);
         });
     }
-    async uploadAndGetUrl(task, resolution) {
-        const snap = await task;
-        const { fullPath, bucket, name, contentType, size } = snap.metadata;
-        const storage = getStorage();
-        const storageRef = ref(storage, fullPath);
-        const url = await getDownloadURL(storageRef);
-        const meta = {
-            url,
-            name,
-            resolution,
-            type: contentType,
-            size,
-            resolutions: {}, // Default empty resolutions
-        };
-        return meta;
-    }
     async uploadGenericFile(file, storagePath, metadata) {
         try {
             // Ensure storagePath is a directory path, and append file.name
@@ -220,10 +376,10 @@ class MultiImagesStorageService {
             return null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MultiImagesStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MultiImagesStorageService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MultiImagesStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MultiImagesStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -234,9 +390,9 @@ class CropperComponent {
     constructor() {
         this.multiImagesStorageService = inject(MultiImagesStorageService);
         // overrides name, path and resizeToWidth
-        this.imageSettings = input({});
-        this.ratioType = input(AspectType.Square);
-        this.resolutions = input([ResolutionType.MediumLarge]);
+        this.imageSettings = input({}, ...(ngDevMode ? [{ debugName: "imageSettings" }] : []));
+        this.ratioType = input(AspectType.Square, ...(ngDevMode ? [{ debugName: "ratioType" }] : []));
+        this.resolutions = input([ResolutionType.MediumLarge], ...(ngDevMode ? [{ debugName: "resolutions" }] : []));
         // Outputs
         this.imageUploaded = output();
         this.onImageCropped = output();
@@ -292,10 +448,10 @@ class CropperComponent {
     closeModal() {
         this.showModal = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CropperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CropperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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: [{
@@ -303,13 +459,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 args: [ImageCropperComponent]
             }] } });
 
+class SafeHtmlPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    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" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safeHtml',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+
 class CropperComponentModal {
     constructor() {
         this.multiImagesStorageService = inject(MultiImagesStorageService);
         this.changeDetectorRef = inject(ChangeDetectorRef);
         // overrides name, path and resizeToWidth
-        this.imgStorageSettings = input(DEFAULT_SETTINGS);
-        this.buttonLabel = input('Seleccionar archivo');
+        this.imgStorageSettings = input(DEFAULT_SETTINGS, ...(ngDevMode ? [{ debugName: "imgStorageSettings" }] : []));
+        this.buttonLabel = input('Seleccionar archivo', ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
         this.currentStorage = {};
         this.imageUploaded = output();
         this.onImageCropped = output();
@@ -423,12 +597,12 @@ class CropperComponentModal {
         console.log('addEmotion', event);
         this.emotionSelected = event;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CropperComponentModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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 header=\"Recortar imagen\" [(visible)]=\"displayDialog\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" 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\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\n    <p-message>\n      <b>Estas opciones estan preconfiguradas y no se pueden cambiar</b>\n\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    <p-select\n      [options]=\"aspectRatioOptions\"\n      [ngModel]=\"ratioSelected\"\n      (ngModelChange)=\"changeRatio($event)\"\n      optionLabel=\"description\"\n      placeholder=\"Select a ratio\" />\n\n    <!-- File Metadata Section -->\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\n    <!-- Rename Input -->\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\n    <h5>Datos adicionales</h5>\n\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\n  <!-- Image Cropper -->\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 .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", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "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", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }] }); }
+    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 header=\"Recortar imagen\" [(visible)]=\"displayDialog\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" 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\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\n    <p-message>\n      <b>Estas opciones estan preconfiguradas y no se pueden cambiar</b>\n\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    <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\n    <!-- File Metadata Section -->\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\n    <!-- Rename Input -->\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\n    <h5>Datos adicionales</h5>\n\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\n  <!-- Image Cropper -->\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 .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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CropperComponentModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CropperComponentModal, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-cropper-modal', standalone: true, imports: [FormsModule, ImageCropperComponent, ButtonModule, DialogModule, TooltipModule, MessageModule, SelectModule, InputTextModule], 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 header=\"Recortar imagen\" [(visible)]=\"displayDialog\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" 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\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\n    <p-message>\n      <b>Estas opciones estan preconfiguradas y no se pueden cambiar</b>\n\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    <p-select\n      [options]=\"aspectRatioOptions\"\n      [ngModel]=\"ratioSelected\"\n      (ngModelChange)=\"changeRatio($event)\"\n      optionLabel=\"description\"\n      placeholder=\"Select a ratio\" />\n\n    <!-- File Metadata Section -->\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\n    <!-- Rename Input -->\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\n    <h5>Datos adicionales</h5>\n\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\n  <!-- Image Cropper -->\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 .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"] }]
+            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 header=\"Recortar imagen\" [(visible)]=\"displayDialog\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" 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\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\n    <p-message>\n      <b>Estas opciones estan preconfiguradas y no se pueden cambiar</b>\n\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    <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\n    <!-- File Metadata Section -->\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\n    <!-- Rename Input -->\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\n    <h5>Datos adicionales</h5>\n\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\n  <!-- Image Cropper -->\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 .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: [{
                 type: Input
             }], imageCropper: [{
@@ -466,9 +640,9 @@ class ImageStoragePreviewComponent {
         try {
             this.loading$.next(true);
             this.error$.next(null);
-            const storage = getStorage$1();
+            const storage = getStorage();
             const storageRef = ref(storage, this.storagePath);
-            const result = await listAll$1(storageRef);
+            const result = await listAll(storageRef);
             if (result.items.length === 0) {
                 this.images$.next([]);
                 this.loading$.next(false);
@@ -476,7 +650,7 @@ class ImageStoragePreviewComponent {
             }
             const imagePromises = result.items.map(async (itemRef) => {
                 try {
-                    const url = await getDownloadURL$1(itemRef);
+                    const url = await getDownloadURL(itemRef);
                     const image = {
                         url,
                         // fullPath: itemRef.fullPath,
@@ -509,10 +683,10 @@ class ImageStoragePreviewComponent {
     selectImage(image) {
         this.imageSelected.emit(image);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ImageStoragePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ImageStoragePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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: () => [] });
@@ -520,19 +694,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 class SimpleUploaderComponent {
     constructor() {
         this.multiImagesStorageService = inject(MultiImagesStorageService);
-        this.storagePath = input.required();
-        this.buttonLabel = input('Upload File');
-        this.accept = input('*/*');
-        this.disabled = input(false);
-        this.metadata = input({});
+        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.fileUploaded = output();
         this.uploadError = output();
-        this.isLoading = signal(false);
-        this.displayDialog = signal(false);
-        this.fileSelected = signal(null);
-        this.moodSelected = signal(null);
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.displayDialog = signal(false, ...(ngDevMode ? [{ debugName: "displayDialog" }] : []));
+        this.fileSelected = signal(null, ...(ngDevMode ? [{ debugName: "fileSelected" }] : []));
+        this.moodSelected = signal(null, ...(ngDevMode ? [{ debugName: "moodSelected" }] : []));
+        this.eventSelected = signal(null, ...(ngDevMode ? [{ debugName: "eventSelected" }] : []));
         this.metadataInput = {};
         this.MoodStateOptions = MoodStateOptions;
+        this.CharacterEventActions = CharacterEventActions;
         this.fileInputId = `file-upload-${Math.random().toString(36).substring(2, 11)}`;
     }
     objectKeys(obj) {
@@ -559,6 +735,7 @@ class SimpleUploaderComponent {
             const metadata = {
                 // ...this.metadataInput,
                 moodState: this.moodSelected(),
+                event: this.eventSelected(),
             };
             try {
                 const result = await this.multiImagesStorageService.uploadGenericFile(file, this.storagePath(), metadata);
@@ -579,15 +756,16 @@ class SimpleUploaderComponent {
                 this.displayDialog.set(false);
                 this.fileSelected.set(null);
                 this.moodSelected.set(null);
+                this.eventSelected.set(null);
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SimpleUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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          <p-select [options]=\"MoodStateOptions\" [(ngModel)]=\"moodSelected\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select an emotion\"></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", "autofocus", "fluid", "buttonProps"], 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", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "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: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i7.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SimpleUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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          <p-select [options]=\"MoodStateOptions\" [(ngModel)]=\"moodSelected\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select an emotion\"></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" }]
+            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: () => [] });
 
 class DCFilesCacheService {
@@ -600,7 +778,7 @@ class DCFilesCacheService {
             return this.files[path];
         }
         else {
-            const url = await getDownloadURL(ref$1(this.storage, path));
+            const url = await getDownloadURL(ref(this.storage, path));
             const localUrl = await this.donwloadFileAndGetLocalURL(url);
             this.files[path] = localUrl;
             return localUrl;
@@ -626,15 +804,15 @@ class DCFilesCacheService {
         const blob = await this.getBlob(url);
         return URL.createObjectURL(blob);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCFilesCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCFilesCacheService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCFilesCacheService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCFilesCacheService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class MultiObjectStorageService {
     constructor() {
@@ -724,10 +902,10 @@ class MultiObjectStorageService {
         };
         return meta;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MultiObjectStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MultiObjectStorageService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MultiObjectStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MultiObjectStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -736,8 +914,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 
 class AssetsLoaderComponent {
     constructor() {
-        this.assets = input.required();
-        this.storagePath = input.required();
+        this.assets = input.required(...(ngDevMode ? [{ debugName: "assets" }] : []));
+        this.storagePath = input.required(...(ngDevMode ? [{ debugName: "storagePath" }] : []));
         this.assetsChange = output();
         this.assetUpdate = output();
         this.onFileSelected = output();
@@ -745,18 +923,18 @@ class AssetsLoaderComponent {
         this.bannerImgSettings = computed(() => ({
             path: this.storagePath(),
             fileName: undefined,
-            cropSettings: { aspectRatio: AspectType.Rectangle, resolutions: [ResolutionType.MediumLarge], resizeToWidth: 700 },
-        }));
+            cropSettings: { aspectRatio: AspectType.Rectangle, resolutions: [ResolutionType.MediumLarge], resizeToWidth: 850 },
+        }), ...(ngDevMode ? [{ debugName: "bannerImgSettings" }] : []));
         this.imageStorageSettings = computed(() => ({
             path: this.storagePath(),
             fileName: undefined,
-            cropSettings: { aspectRatio: AspectType.Vertical_2_3, resolutions: [ResolutionType.MediumLarge], resizeToWidth: 500 },
-        }));
+            cropSettings: { aspectRatio: AspectType.vertical_2_3, resolutions: [ResolutionType.MediumLarge], resizeToWidth: 500 },
+        }), ...(ngDevMode ? [{ debugName: "imageStorageSettings" }] : []));
         this.stickerStorageSettings = computed(() => ({
             path: `${this.storagePath()}/stickers`,
             fileName: undefined,
             cropSettings: { aspectRatio: AspectType.Square, resolutions: [ResolutionType.MediumLarge], resizeToWidth: 400 },
-        }));
+        }), ...(ngDevMode ? [{ debugName: "stickerStorageSettings" }] : []));
     }
     onImageUploaded(event, type = 'image') {
         const currentAssets = this.assets() ?? { image: null, banner: null, stickers: [] };
@@ -851,12 +1029,12 @@ class AssetsLoaderComponent {
             clearInterval(this.reverseInterval);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AssetsLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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      </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", "autofocus", "fluid", "buttonProps"], 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"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AssetsLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AssetsLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'assets-loader', standalone: true, imports: [CommonModule, CropperComponentModal, SimpleUploaderComponent, ButtonModule, MessageModule], 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      </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 || '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"] }]
         }] });
 
 /*
@@ -867,5 +1045,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AspectRatio, AspectRatio2, AspectRatioOptions, AspectType, AssetsLoaderComponent, CropperComponent, CropperComponentModal, DCFilesCacheService, DEFAULT_SETTINGS, ImageStoragePreviewComponent, MultiImagesStorageService, MultiObjectStorageService, ResolutionType, SimpleUploaderComponent, extractBucket, extractPath };
+export { AllAspectRatioOptions, AspectRatio, AspectRatioOptions, AspectType, AssetsLoaderComponent, CropperComponent, CropperComponentModal, DCFilesCacheService, DEFAULT_SETTINGS, ImageStoragePreviewComponent, MultiImagesStorageService, MultiObjectStorageService, ResolutionType, SafeHtmlPipe, SimpleUploaderComponent, extractBucket, extractPath };
 //# sourceMappingURL=dataclouder-ngx-cloud-storage.mjs.map