@dataclouder/ngx-cloud-storage 0.0.21

package/README.md

@@ -0,0 +1,24 @@
+# StorageUploader
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project storage-uploader` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project storage-uploader`.
+> Note: Don't forget to add `--project storage-uploader` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build storage-uploader` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build storage-uploader`, go to the dist folder `cd dist/storage-uploader` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test storage-uploader` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

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

@@ -0,0 +1,482 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, ViewChild } from '@angular/core';
+import { ImageCropperComponent } from 'ngx-image-cropper';
+import { NgIf } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/fire/storage';
+import { getStorage, listAll, deleteObject, getDownloadURL, ref as ref$1 } from '@angular/fire/storage';
+import { ref } from 'firebase/storage';
+import { lastValueFrom } from 'rxjs';
+import * as i1 from '@angular/fire/compat/storage';
+import * as i5 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i6 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i3 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i7 from 'primeng/message';
+import { MessageModule } from 'primeng/message';
+import * as i8 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
+import * as i9 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i4 from 'primeng/api';
+
+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 },
+];
+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 || (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";
+    ResolutionType[ResolutionType["Medium"] = 400] = "Medium";
+    ResolutionType[ResolutionType["MediumLarge"] = 800] = "MediumLarge";
+    ResolutionType[ResolutionType["Large"] = 1200] = "Large";
+    ResolutionType[ResolutionType["VeryLarge"] = 1600] = "VeryLarge";
+})(ResolutionType || (ResolutionType = {}));
+const AspectRatio = {
+    [AspectType.Square]: 1 / 1,
+    [AspectType.Rectangle]: 16 / 9,
+    [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,
+};
+const DEFAULT_SETTINGS = {
+    path: '/default-collection/id/please-change-this-subcollection',
+    fileName: 'image',
+    cropSettings: {
+        aspectRatio: AspectType.Square,
+        resolutions: [ResolutionType.Small, ResolutionType.MediumLarge],
+        resizeToWidth: 450,
+    },
+};
+
+class MultiImagesStorageService {
+    constructor(storage) {
+        this.storage = storage;
+    }
+    async uploadImage(image, path) {
+        try {
+            const refStorage = this.storage.ref(path);
+            const task = await refStorage.put(image);
+            const { fullPath, bucket } = task.metadata;
+            const url = await lastValueFrom(refStorage.getDownloadURL());
+            const imageStorage = { url, path: fullPath, bucket };
+            return imageStorage;
+        }
+        catch (error) {
+            console.error('uploading image error: ', error);
+            return null;
+        }
+    }
+    uploadImage2(imageMulticrops, path) {
+        // path is usually [products/id] will create a new folder with the name and upload the images
+        const blobs = imageMulticrops.imagesBlobs;
+        const tasks = [];
+        let fileName = imageMulticrops.settings?.renameFile ?? imageMulticrops.file.name;
+        fileName = fileName.split('.')[0];
+        // load the default image jpeg
+        path = `${path}/${fileName}`;
+        const defaultImagePath = `${path}/${fileName}-400W.jpeg`;
+        const refStorage = this.storage.ref(defaultImagePath);
+        const task = refStorage.put(imageMulticrops.defaultImageBlob);
+        tasks.push(this.uploadAndGetUrl(task, 'default'));
+        // Upload webp images
+        for (const resolutionStr of Object.keys(blobs)) {
+            const fullName = `${fileName}-${resolutionStr}W.webp`;
+            const filePath = `${path}/${fullName}`;
+            const refStorage = this.storage.ref(filePath);
+            const resolution = Number(resolutionStr);
+            const task = refStorage.put(blobs[resolution]);
+            tasks.push(this.uploadAndGetUrl(task, resolution + 'W'));
+        }
+        return Promise.all(tasks).then(async (upladedImages) => {
+            let defaultImage = {};
+            let resolutionsUrls = {};
+            for (const image of upladedImages) {
+                if (image.resolution === 'default') {
+                    defaultImage = image;
+                }
+                else {
+                    resolutionsUrls[image.resolution] = image.url;
+                }
+            }
+            defaultImage['resolutions'] = resolutionsUrls;
+            defaultImage['path'] = path;
+            return defaultImage;
+        });
+    }
+    async delete_directory(imagePath) {
+        // WARNING!!  user very carefully could delete whatever folder
+        const storage = getStorage();
+        const directoryRef = ref(storage, imagePath);
+        listAll(directoryRef)
+            .then((res) => {
+            res.items.forEach((itemRef) => {
+                console.log(itemRef);
+                deleteObject(itemRef);
+            });
+        })
+            .catch((error) => {
+            console.error('error al eliminar imagenes de cloud storage', error);
+        });
+    }
+    async deleteImage(imagePath) {
+        const storageRef = this.storage.ref(imagePath);
+        storageRef.delete().subscribe((res) => {
+            console.log('image deleted', res);
+        });
+    }
+    async uploadAndGetUrl(task, resolution) {
+        const snap = await task;
+        const { fullPath, bucket, name } = snap.metadata;
+        const storage = getStorage();
+        const storageRef = ref(storage, fullPath);
+        const url = await getDownloadURL(storageRef);
+        const meta = {
+            url,
+            fullPath,
+            bucket,
+            name,
+            resolution,
+            path: '',
+            resolutions: {},
+        };
+        return meta;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MultiImagesStorageService, deps: [{ token: i1.AngularFireStorage }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MultiImagesStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MultiImagesStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.AngularFireStorage }] });
+
+class CropperComponent {
+    constructor(multiImagesStorageService) {
+        this.multiImagesStorageService = multiImagesStorageService;
+        // overrides name, path and resizeToWidth
+        this.imageSettings = {};
+        this.ratioType = AspectType.Square;
+        this.resolutions = [ResolutionType.MediumLarge];
+        this.imageUploaded = new EventEmitter();
+        this.onImageCropped = new EventEmitter();
+        this.onFileSelected = new EventEmitter();
+        this.fileMetadata = null;
+        this.aspectRatio = 1;
+        this.croppedImage = '';
+        this.isLoading = false;
+        this.isUploaded = false;
+        this.renameFile = '';
+        this.storagePath = '';
+        this.showModal = false;
+    }
+    ngOnInit() {
+        this.aspectRatio = AspectRatio[this.ratioType];
+        if (this.imageSettings.path) {
+            this.storagePath = `${this.imageSettings.path}/${this.imageSettings.fileName}.webp`;
+        }
+    }
+    reloadPath() {
+        this.storagePath = `${this.imageSettings.path}/${this.renameFile}.webp`;
+    }
+    async fileChangeEvent(event) {
+        this.imageChangedEvent = event;
+        const file = event?.target?.files[0];
+        if (file) {
+            this.fileMetadata = file;
+            this.onFileSelected.emit(file);
+            this.showModal = true; // Show modal when file is selected
+            this.renameFile = this.fileMetadata?.name?.split('.')[0];
+            console.log(this.renameFile);
+            if (!this.imageSettings.fileName) {
+                this.reloadPath();
+            }
+        }
+    }
+    onInnerImageCropped(event) {
+        this.croppedImage = event.base64;
+    }
+    imageLoaded(image) {
+        // show cropper
+    }
+    loadImageFailed() {
+        console.error('fallo al cargar la imagen');
+    }
+    async simpleCropAndUpload() {
+        const imageCropped = await this.imageCropper.crop();
+        const imgStorage = await this.multiImagesStorageService.uploadImage(imageCropped?.blob, this.storagePath);
+        this.imageUploaded.emit(imgStorage);
+        this.closeModal();
+    }
+    async uploadToStorage(imageMulticrops) {
+        // TODO: Nota si algo falla aquí puede causar inconsistencias en el sistema, ver como manejar errores
+        const path = this.imageSettings.path;
+        // const imageUploaded = await this.multiImagesStorageService.uploadImage(imageMulticrops, path);
+        // this.modalRef.close();
+        // console.log(imageUploaded);
+        // const image = { type: 'cover', ...imageUploaded };
+        // TODO: creo que esta parte va en el componente que llama a este componente
+        // if (!this.lesson.media) {
+        //   this.lesson.media = {};
+        //   this.lesson.media.images = [image];
+        // } else {
+        //   // solo sustituir el cover si ya existe
+        //   const currentCover = this.lesson.media.images.find((img) => img.type === 'cover');
+        //   this.multiImagesStorageService.delete_directory(currentCover.path);
+        //   this.lesson.media.images = this.lesson.media.images.filter((img) => img.type !== 'cover');
+        //   this.lesson.media.images.push(image);
+        // }
+        // await this.saveLesson();
+        // this.updateCover();
+        // this.imageUploaded.emit(image);
+    }
+    closeModal() {
+        this.showModal = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CropperComponent, deps: [{ token: MultiImagesStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: CropperComponent, isStandalone: true, selector: "app-cropper", inputs: { imageSettings: "imageSettings", ratioType: "ratioType", resolutions: "resolutions" }, 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  <div *ngIf=\"!isUploaded\">\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    <em *ngIf=\"!fileMetadata\">Carga una imagen para comenzar</em>\n  </div>\n\n  <span *ngIf=\"fileMetadata\">\n    <span style=\"margin: 1px 20px\"> tipo: {{ fileMetadata.type }} </span>\n\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</div>\n\n<div class=\"modal\" *ngIf=\"fileMetadata && !isUploaded\" [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\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\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<button *ngIf=\"croppedImage && !isUploaded\" [disabled]=\"isLoading\" nbButton status=\"info\"> upload </button>\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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.1.1", ngImport: i0, type: CropperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-cropper', standalone: true, imports: [NgIf, FormsModule, ImageCropperComponent], template: "<div> path: {{ storagePath }} </div>\n\n<div class=\"options\">\n  <div *ngIf=\"!isUploaded\">\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    <em *ngIf=\"!fileMetadata\">Carga una imagen para comenzar</em>\n  </div>\n\n  <span *ngIf=\"fileMetadata\">\n    <span style=\"margin: 1px 20px\"> tipo: {{ fileMetadata.type }} </span>\n\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</div>\n\n<div class=\"modal\" *ngIf=\"fileMetadata && !isUploaded\" [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\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\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<button *ngIf=\"croppedImage && !isUploaded\" [disabled]=\"isLoading\" nbButton status=\"info\"> upload </button>\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"] }]
+        }], ctorParameters: () => [{ type: MultiImagesStorageService }], propDecorators: { imageSettings: [{
+                type: Input
+            }], ratioType: [{
+                type: Input
+            }], resolutions: [{
+                type: Input
+            }], imageUploaded: [{
+                type: Output
+            }], onImageCropped: [{
+                type: Output
+            }], onFileSelected: [{
+                type: Output
+            }], imageCropper: [{
+                type: ViewChild,
+                args: [ImageCropperComponent]
+            }] } });
+
+class CropperComponentModal {
+    constructor(multiImagesStorageService, changeDetectorRef) {
+        this.multiImagesStorageService = multiImagesStorageService;
+        this.changeDetectorRef = changeDetectorRef;
+        // overrides name, path and resizeToWidth
+        this.imgStorageSettings = DEFAULT_SETTINGS;
+        this.buttonLabel = 'Seleccionar archivo';
+        this.currentStorage = {};
+        this.imageUploaded = new EventEmitter();
+        this.onImageCropped = new EventEmitter();
+        this.onFileSelected = new EventEmitter();
+        this.aspectRatioOptions = AspectRatioOptions;
+        this.fileMetadata = null;
+        this.displayDialog = false;
+        this.aspectRatioValue = 1;
+        this.croppedImage = '';
+        this.renameFile = '';
+        this.storagePath = '';
+        this.resizeToWidth = 450;
+        this.ratioSelected = null;
+        // Generate random ID for file input
+        this.fileInputId = `file-upload-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    ngOnInit() {
+        if (!this.imgStorageSettings.path) {
+            console.warn('⚠️ Remember to set imgStorageSettings, path and fileName are required , path example: /collection/id/subcollection ');
+        }
+        this.reloadPath();
+    }
+    reloadPath() {
+        const randomCharacters = Math.random().toString(36).substring(2, 15);
+        this.storagePath = `${this.imgStorageSettings.path}/${this.imgStorageSettings.fileName}-${randomCharacters}.webp`;
+    }
+    setSettingsForComponent() {
+        console.log('setSettingsForComponent', this.imgStorageSettings);
+        // TODO: remove all the imageSettings and keep only imgStorageSettings
+        this.aspectRatioValue = this.imgStorageSettings?.cropSettings?.aspectRatio
+            ? AspectRatio[this.imgStorageSettings?.cropSettings?.aspectRatio]
+            : AspectRatio[AspectType.Square];
+        if (this.imgStorageSettings?.path) {
+            this.storagePath = `${this.imgStorageSettings.path}/${this.imgStorageSettings.fileName}.webp`;
+        }
+        else if (this.imgStorageSettings.path) {
+            this.storagePath = `${this.imgStorageSettings.path}/${this.imgStorageSettings.fileName}.webp`;
+        }
+        if (this.imgStorageSettings?.cropSettings?.resizeToWidth) {
+            this.resizeToWidth = this.imgStorageSettings.cropSettings.resizeToWidth;
+        }
+        else if (this.imgStorageSettings.cropSettings.resizeToWidth) {
+            this.resizeToWidth = this.imgStorageSettings.cropSettings.resizeToWidth;
+        }
+        if (this.imgStorageSettings?.fileName) {
+            this.renameFile = this.imgStorageSettings.fileName;
+        }
+        else if (this.imgStorageSettings.fileName) {
+            this.renameFile = this.imgStorageSettings.fileName;
+        }
+    }
+    async fileChangeEvent(event) {
+        this.setSettingsForComponent();
+        console.log(this.fileInputId);
+        this.imageChangedEvent = event;
+        const file = event?.target?.files[0];
+        if (file) {
+            this.fileMetadata = file;
+            this.onFileSelected.emit(file);
+            this.renameFile = this.fileMetadata?.name
+                ?.split('.')[0]
+                .replace(/[^a-zA-Z0-9]/g, '')
+                .slice(0, 80);
+            console.log(this.renameFile);
+            if (!this.imgStorageSettings.fileName) {
+                this.reloadPath();
+            }
+            this.displayDialog = true;
+            this.changeDetectorRef.detectChanges();
+        }
+    }
+    onInnerImageCropped(event) {
+        this.croppedImage = event.base64;
+    }
+    imageLoaded(image) {
+        this.changeDetectorRef.detectChanges();
+    }
+    cropperReady() {
+        this.changeDetectorRef.detectChanges();
+    }
+    loadImageFailed() {
+        console.error('fallo al cargar la imagen');
+    }
+    async simpleCropAndUpload() {
+        console.log(this.fileInputId);
+        console.log('simpleCropAndUpload');
+        const imageCropped = await this.imageCropper.crop();
+        const imgStorage = await this.multiImagesStorageService.uploadImage(imageCropped?.blob, this.storagePath);
+        if (this.currentStorage?.path) {
+            console.warn('deleting current Image', this.currentStorage?.path);
+            this.multiImagesStorageService.deleteImage(this.currentStorage.path);
+        }
+        console.log('imgStorage', imgStorage);
+        this.imageUploaded.emit(imgStorage);
+        this.displayDialog = false;
+        this.changeDetectorRef.detectChanges();
+    }
+    changeRatio(event) {
+        console.log('changeRatio', event);
+        // this.imgStorageSettings.cropSettings.aspectRatio = event.valueRatio;
+        this.aspectRatioValue = event.valueRatio;
+        this.changeDetectorRef.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CropperComponentModal, deps: [{ token: MultiImagesStorageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: CropperComponentModal, isStandalone: true, selector: "dc-cropper-modal", inputs: { imgStorageSettings: "imgStorageSettings", buttonLabel: "buttonLabel", currentStorage: "currentStorage" }, 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    <div class=\"metadata-section\" *ngIf=\"fileMetadata\">\n      <span class=\"metadata-item\">tipo: {{ fileMetadata.type }}</span>\n      <span class=\"metadata-item\">tama\u00F1o: {{ fileMetadata.size }}</span>\n    </div>\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  </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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.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: i6.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: i7.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: i8.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: i9.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: CropperComponentModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-cropper-modal', standalone: true, imports: [NgIf, 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    <div class=\"metadata-section\" *ngIf=\"fileMetadata\">\n      <span class=\"metadata-item\">tipo: {{ fileMetadata.type }}</span>\n      <span class=\"metadata-item\">tama\u00F1o: {{ fileMetadata.size }}</span>\n    </div>\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  </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: () => [{ type: MultiImagesStorageService }, { type: i0.ChangeDetectorRef }], propDecorators: { imgStorageSettings: [{
+                type: Input
+            }], buttonLabel: [{
+                type: Input
+            }], currentStorage: [{
+                type: Input
+            }], imageUploaded: [{
+                type: Output
+            }], onImageCropped: [{
+                type: Output
+            }], onFileSelected: [{
+                type: Output
+            }], imageCropper: [{
+                type: ViewChild,
+                args: [ImageCropperComponent]
+            }] } });
+
+class DCFilesCacheService {
+    constructor(storage) {
+        this.storage = storage;
+        this.files = {};
+    }
+    async getURLSrcFile(path) {
+        if (path in this.files) {
+            return this.files[path];
+        }
+        else {
+            const url = await getDownloadURL(ref$1(this.storage, path));
+            const localUrl = await this.donwloadFileAndGetLocalURL(url);
+            this.files[path] = localUrl;
+            return localUrl;
+        }
+    }
+    getBlob(url) {
+        return new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            xhr.responseType = 'blob';
+            xhr.overrideMimeType('audio/mp3');
+            xhr.onload = (event) => {
+                var blob = xhr.response;
+                resolve(blob);
+            };
+            xhr.onerror = (event) => {
+                reject(event);
+            };
+            xhr.open('GET', url);
+            xhr.send();
+        });
+    }
+    async donwloadFileAndGetLocalURL(url) {
+        const blob = await this.getBlob(url);
+        return URL.createObjectURL(blob);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCFilesCacheService, deps: [{ token: i1$1.Storage }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCFilesCacheService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCFilesCacheService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Storage }] });
+
+/*
+ * Public API Surface of storage-uploader
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AspectRatio, AspectRatio2, AspectRatioOptions, AspectType, CropperComponent, CropperComponentModal, DCFilesCacheService, DEFAULT_SETTINGS, MultiImagesStorageService, ResolutionType };
+//# sourceMappingURL=dataclouder-ngx-cloud-storage.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dataclouder-ngx-cloud-storage.mjs","sources":["../../../../projects/dataclouder/ngx-cloud-storage/src/lib/classes/cropper.classes.ts","../../../../projects/dataclouder/ngx-cloud-storage/src/lib/services/multi-images-storage.service.ts","../../../../projects/dataclouder/ngx-cloud-storage/src/lib/components/cropper/cropper.component.ts","../../../../projects/dataclouder/ngx-cloud-storage/src/lib/components/cropper/cropper.component.html","../../../../projects/dataclouder/ngx-cloud-storage/src/lib/components/cropper-modal/cropper-modal.component.ts","../../../../projects/dataclouder/ngx-cloud-storage/src/lib/components/cropper-modal/cropper-modal.component.html","../../../../projects/dataclouder/ngx-cloud-storage/src/lib/services/dc-files-cache.service.ts","../../../../projects/dataclouder/ngx-cloud-storage/src/public-api.ts","../../../../projects/dataclouder/ngx-cloud-storage/src/dataclouder-ngx-cloud-storage.ts"],"sourcesContent":["export interface StorageImageSettings {\n  path?: string;\n  fileName?: string;\n  cropSettings?: ImageCropSettings;\n}\n\nexport interface ImageCropSettings {\n  resizeToWidth?: number;\n  resolutions: Array<number>; // 400, 800, 1200, 1600\n  aspectRatio: AspectType;\n}\n\nexport interface CropImageSettings {\n  // Resolutions should be here.\n  path: string;\n  fileName?: string;\n  resizeToWidth?: number;\n}\n\nexport interface ImageMultipleCrops {\n  file: File;\n  defaultImageBlob?: Blob;\n  imagesBlobs: { [resolution: number]: Blob };\n  settings: { renameFile: string; width?: number };\n}\n\nexport const AspectRatioOptions: AspectRatioOption[] = [\n  { value: '1:1', label: 'square', description: 'Square (1:1)', valueRatio: 1 / 1 },\n  { value: '1:2', label: 'vertical_1_2', description: 'Vertical (1:2)', valueRatio: 1 / 2 },\n  { value: '2:3', label: 'vertical_2_3', description: 'Vertical (2:3)', valueRatio: 2 / 3 },\n  { value: '3:4', label: 'vertical_3_4', description: 'Vertical (3:4)', valueRatio: 3 / 4 },\n  { value: '4:5', label: 'vertical_4_5', description: 'Vertical (4:5)', valueRatio: 4 / 5 },\n  { value: '9:16', label: 'vertical_9_16', description: 'Vertical (9:16)', valueRatio: 9 / 16 },\n  { value: '2:1', label: 'horizontal_2_1', description: 'Horizontal (2:1)', valueRatio: 2 / 1 },\n  { value: '3:2', label: 'horizontal_3_2', description: 'Horizontal (3:2)', valueRatio: 3 / 2 },\n  { value: '4:3', label: 'horizontal_4_3', description: 'Horizontal (4:3)', valueRatio: 4 / 3 },\n  { value: '5:4', label: 'horizontal_5_4', description: 'Horizontal (5:4)', valueRatio: 5 / 4 },\n  { value: '16:9', label: 'horizontal_16_9', description: 'Horizontal (16:9)', valueRatio: 16 / 9 },\n];\n\nexport interface AspectRatioOption {\n  label: string;\n  description: string;\n  value: string;\n  valueRatio: number;\n}\n\nexport enum AspectType {\n  Square = 'square',\n  Rectangle = 'rectangle',\n  Banner = 'banner',\n  RectangleLarge = 'rectangleLarge',\n  Vertical_9_16 = 'vertical_9_16',\n  Vertical_3_5 = 'vertical_3_5',\n  Vertical_2_3 = 'vertical_2_3',\n}\n\n// Creo que seria bueno refactorizar para solo enviar aspect ratio asi\nexport enum AspectRatio2 {\n  // Vertical\n  '9:16' = 16 / 9,\n  '3:5' = 3 / 5,\n  '5:8' = 5 / 8,\n  '2:3' = 2 / 3,\n  '1:1' = 1 / 1,\n}\n\nexport enum ResolutionType {\n  Small = 200,\n  Medium = 400,\n  MediumLarge = 800,\n  Large = 1200,\n  VeryLarge = 1600,\n}\n\nexport const AspectRatio = {\n  [AspectType.Square]: 1 / 1,\n  [AspectType.Rectangle]: 16 / 9,\n  [AspectType.Vertical_9_16]: 9 / 16,\n  [AspectType.RectangleLarge]: 16 / 8,\n  [AspectType.Banner]: 16 / 7,\n  [AspectType.Vertical_3_5]: 3 / 5,\n  [AspectType.Vertical_2_3]: 2 / 3,\n};\n\nexport interface ImgStorageData extends CloudStorageData {\n  name?: string;\n  bucket?: string;\n  url?: string;\n  path?: string; // path where the file is in the storage\n  fullPath?: string; // path + name\n  resolution?: string;\n  resolutions?: any;\n}\n\nexport interface CloudStorageData {\n  bucket?: string;\n  url?: string;\n  path?: string; // path where the file is in the storage\n}\n\nexport const DEFAULT_SETTINGS: StorageImageSettings = {\n  path: '/default-collection/id/please-change-this-subcollection',\n  fileName: 'image',\n  cropSettings: {\n    aspectRatio: AspectType.Square,\n    resolutions: [ResolutionType.Small, ResolutionType.MediumLarge],\n    resizeToWidth: 450,\n  },\n};\n","import { Injectable } from '@angular/core';\nimport { AngularFireStorage, AngularFireUploadTask } from '@angular/fire/compat/storage';\nimport { getDownloadURL, getStorage, deleteObject, listAll } from '@angular/fire/storage';\n\nimport { ref } from 'firebase/storage';\nimport { lastValueFrom } from 'rxjs';\nimport { ImageMultipleCrops, ImgStorageData } from '../classes/cropper.classes';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class MultiImagesStorageService {\n  constructor(private storage: AngularFireStorage) {}\n\n  public async uploadImage(image: Blob, path: string): Promise<ImgStorageData> {\n    try {\n      const refStorage = this.storage.ref(path);\n      const task = await refStorage.put(image);\n      const { fullPath, bucket } = task.metadata;\n      const url = await lastValueFrom(refStorage.getDownloadURL());\n      const imageStorage = { url, path: fullPath, bucket };\n      return imageStorage;\n    } catch (error) {\n      console.error('uploading image error: ', error);\n      return null;\n    }\n  }\n\n  public uploadImage2(imageMulticrops: ImageMultipleCrops, path: string): Promise<ImgStorageData> {\n    // path is usually [products/id] will create a new folder with the name and upload the images\n\n    const blobs = imageMulticrops.imagesBlobs;\n\n    const tasks: Array<Promise<any>> = [];\n    let fileName = imageMulticrops.settings?.renameFile ?? imageMulticrops.file.name;\n    fileName = fileName.split('.')[0];\n\n    // load the default image jpeg\n    path = `${path}/${fileName}`;\n    const defaultImagePath = `${path}/${fileName}-400W.jpeg`;\n    const refStorage = this.storage.ref(defaultImagePath);\n    const task = refStorage.put(imageMulticrops.defaultImageBlob);\n\n    tasks.push(this.uploadAndGetUrl(task, 'default'));\n\n    // Upload webp images\n    for (const resolutionStr of Object.keys(blobs)) {\n      const fullName = `${fileName}-${resolutionStr}W.webp`;\n      const filePath = `${path}/${fullName}`;\n\n      const refStorage = this.storage.ref(filePath);\n\n      const resolution = Number(resolutionStr);\n      const task = refStorage.put(blobs[resolution]);\n      tasks.push(this.uploadAndGetUrl(task, resolution + 'W'));\n    }\n\n    return Promise.all(tasks).then(async (upladedImages) => {\n      let defaultImage: any = {};\n      let resolutionsUrls: any = {};\n\n      for (const image of upladedImages) {\n        if (image.resolution === 'default') {\n          defaultImage = image;\n        } else {\n          resolutionsUrls[image.resolution] = image.url;\n        }\n      }\n      defaultImage['resolutions'] = resolutionsUrls;\n      defaultImage['path'] = path;\n\n      return defaultImage;\n    });\n  }\n\n  public async delete_directory(imagePath: string): Promise<void> {\n    // WARNING!!  user very carefully could delete whatever folder\n    const storage = getStorage();\n    const directoryRef = ref(storage, imagePath);\n\n    listAll(directoryRef)\n      .then((res) => {\n        res.items.forEach((itemRef) => {\n          console.log(itemRef);\n          deleteObject(itemRef);\n        });\n      })\n      .catch((error) => {\n        console.error('error al eliminar imagenes de cloud storage', error);\n      });\n  }\n\n  public async deleteImage(imagePath: string): Promise<void> {\n    const storageRef = this.storage.ref(imagePath);\n    storageRef.delete().subscribe((res) => {\n      console.log('image deleted', res);\n    });\n  }\n\n  private async uploadAndGetUrl(task: AngularFireUploadTask, resolution: string): Promise<ImgStorageData> {\n    const snap = await task;\n    const { fullPath, bucket, name } = snap.metadata;\n    const storage = getStorage();\n    const storageRef = ref(storage, fullPath);\n    const url = await getDownloadURL(storageRef);\n    const meta: ImgStorageData = {\n      url,\n      fullPath,\n      bucket,\n      name,\n      resolution,\n      path: '',\n      resolutions: {},\n    };\n\n    return meta;\n  }\n}\n","import { Component, Input, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';\nimport { ImageCroppedEvent, ImageCropperComponent, LoadedImage, base64ToFile } from 'ngx-image-cropper';\nimport { Observable } from 'rxjs';\nimport { AspectRatio, AspectType, ImageMultipleCrops, CropImageSettings, ResolutionType } from '../../classes/cropper.classes';\nimport { NgIf } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MultiImagesStorageService } from '../../services/multi-images-storage.service';\n\n@Component({\n  selector: 'app-cropper',\n  templateUrl: './cropper.component.html',\n  styleUrls: ['./cropper.component.scss'],\n  standalone: true,\n  imports: [NgIf, FormsModule, ImageCropperComponent],\n})\nexport class CropperComponent implements OnInit {\n  // overrides name, path and resizeToWidth\n  @Input() imageSettings: CropImageSettings = {} as any;\n\n  @Input() ratioType: AspectType | string = AspectType.Square;\n\n  @Input() resolutions: Array<number> = [ResolutionType.MediumLarge];\n\n  @Output() imageUploaded = new EventEmitter<any>();\n\n  @Output() onImageCropped = new EventEmitter<ImageMultipleCrops>();\n\n  @Output() onFileSelected = new EventEmitter<any>();\n\n  @ViewChild(ImageCropperComponent) imageCropper!: ImageCropperComponent;\n\n  public fileMetadata: File | null = null;\n  public imageChangedEvent!: Event;\n\n  public aspectRatio: number = 1;\n\n  public croppedImage: any = '';\n\n  public isLoading = false;\n  public isUploaded = false;\n  public renameFile: any = '';\n  public storagePath: string = '';\n  public showModal = false;\n\n  constructor(private multiImagesStorageService: MultiImagesStorageService) {}\n\n  ngOnInit(): void {\n    this.aspectRatio = AspectRatio[this.ratioType];\n    if (this.imageSettings.path) {\n      this.storagePath = `${this.imageSettings.path}/${this.imageSettings.fileName}.webp`;\n    }\n  }\n\n  public reloadPath(): void {\n    this.storagePath = `${this.imageSettings.path}/${this.renameFile}.webp`;\n  }\n\n  async fileChangeEvent(event: any) {\n    this.imageChangedEvent = event;\n    const file = event?.target?.files[0];\n    if (file) {\n      this.fileMetadata = file;\n      this.onFileSelected.emit(file);\n      this.showModal = true; // Show modal when file is selected\n      this.renameFile = this.fileMetadata?.name?.split('.')[0];\n      console.log(this.renameFile);\n\n      if (!this.imageSettings.fileName) {\n        this.reloadPath();\n      }\n    }\n  }\n\n  onInnerImageCropped(event: ImageCroppedEvent) {\n    this.croppedImage = event.base64;\n  }\n\n  imageLoaded(image: LoadedImage) {\n    // show cropper\n  }\n\n  loadImageFailed() {\n    console.error('fallo al cargar la imagen');\n  }\n\n  public downloadURL!: Observable<string>;\n\n  public async simpleCropAndUpload() {\n    const imageCropped: any = await this.imageCropper.crop();\n    const imgStorage = await this.multiImagesStorageService.uploadImage(imageCropped?.blob, this.storagePath);\n    this.imageUploaded.emit(imgStorage);\n    this.closeModal();\n  }\n\n  public async uploadToStorage(imageMulticrops: ImageMultipleCrops): Promise<void> {\n    // TODO: Nota si algo falla aquí puede causar inconsistencias en el sistema, ver como manejar errores\n    const path = this.imageSettings.path;\n    // const imageUploaded = await this.multiImagesStorageService.uploadImage(imageMulticrops, path);\n    // this.modalRef.close();\n    // console.log(imageUploaded);\n    // const image = { type: 'cover', ...imageUploaded };\n\n    // TODO: creo que esta parte va en el componente que llama a este componente\n    // if (!this.lesson.media) {\n    //   this.lesson.media = {};\n    //   this.lesson.media.images = [image];\n    // } else {\n    //   // solo sustituir el cover si ya existe\n    //   const currentCover = this.lesson.media.images.find((img) => img.type === 'cover');\n    //   this.multiImagesStorageService.delete_directory(currentCover.path);\n\n    //   this.lesson.media.images = this.lesson.media.images.filter((img) => img.type !== 'cover');\n\n    //   this.lesson.media.images.push(image);\n    // }\n\n    // await this.saveLesson();\n    // this.updateCover();\n    // this.imageUploaded.emit(image);\n  }\n\n  closeModal(): void {\n    this.showModal = false;\n  }\n}\n","<div> path: {{ storagePath }} </div>\n\n<div class=\"options\">\n  <div *ngIf=\"!isUploaded\">\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    <em *ngIf=\"!fileMetadata\">Carga una imagen para comenzar</em>\n  </div>\n\n  <span *ngIf=\"fileMetadata\">\n    <span style=\"margin: 1px 20px\"> tipo: {{ fileMetadata.type }} </span>\n\n    <span style=\"margin: 1px 20px\"> tamaño {{ 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</div>\n\n<div class=\"modal\" *ngIf=\"fileMetadata && !isUploaded\" [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()\">×</button>\n    </div>\n    <div class=\"modal-body\">\n      <h1>Hlloa</h1>\n\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\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<button *ngIf=\"croppedImage && !isUploaded\" [disabled]=\"isLoading\" nbButton status=\"info\"> upload </button>\n","import { Component, Input, OnInit, Output, EventEmitter, ViewChild, ChangeDetectorRef, Attribute } from '@angular/core';\nimport { NgIf } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\nimport { DialogModule } from 'primeng/dialog';\n\nimport { ImageCroppedEvent, ImageCropperComponent, LoadedImage } from 'ngx-image-cropper';\nimport { Observable } from 'rxjs';\n\nimport { MultiImagesStorageService } from '../../services/multi-images-storage.service';\nimport {\n  AspectRatio,\n  AspectType,\n  ImageMultipleCrops,\n  StorageImageSettings,\n  ImgStorageData,\n  AspectRatioOptions,\n  AspectRatioOption,\n  DEFAULT_SETTINGS,\n} from '../../classes/cropper.classes';\nimport { TooltipModule } from 'primeng/tooltip';\n\nimport { ButtonModule } from 'primeng/button';\nimport { MessageModule } from 'primeng/message';\nimport { SelectModule } from 'primeng/select';\nimport { InputTextModule } from 'primeng/inputtext';\n\n@Component({\n  selector: 'dc-cropper-modal',\n  templateUrl: './cropper-modal.component.html',\n  styleUrls: ['./cropper-modal.component.scss'],\n  standalone: true,\n  imports: [NgIf, FormsModule, ImageCropperComponent, ButtonModule, DialogModule, TooltipModule, MessageModule, SelectModule, InputTextModule],\n})\nexport class CropperComponentModal implements OnInit {\n  // overrides name, path and resizeToWidth\n\n  @Input() imgStorageSettings: StorageImageSettings = DEFAULT_SETTINGS;\n  @Input() buttonLabel: string = 'Seleccionar archivo';\n  @Input() currentStorage: ImgStorageData = {} as any;\n\n  @Output() imageUploaded = new EventEmitter<ImgStorageData>();\n  @Output() onImageCropped = new EventEmitter<ImageMultipleCrops>();\n  @Output() onFileSelected = new EventEmitter<any>();\n\n  @ViewChild(ImageCropperComponent) imageCropper!: ImageCropperComponent;\n\n  public aspectRatioOptions = AspectRatioOptions;\n  public fileMetadata: File | null = null;\n  public imageChangedEvent!: Event;\n  public displayDialog = false;\n  public aspectRatioValue: number = 1;\n  public croppedImage: any = '';\n  public renameFile: any = '';\n  public storagePath: string = '';\n  public downloadURL!: Observable<string>;\n  public resizeToWidth: number = 450;\n  public ratioSelected: any = null;\n\n  // Add a unique identifier for the file input\n  public fileInputId: string;\n\n  constructor(private multiImagesStorageService: MultiImagesStorageService, private changeDetectorRef: ChangeDetectorRef) {\n    // Generate random ID for file input\n    this.fileInputId = `file-upload-${Math.random().toString(36).substring(2, 11)}`;\n  }\n\n  ngOnInit(): void {\n    if (!this.imgStorageSettings.path) {\n      console.warn('⚠️ Remember to set imgStorageSettings, path and fileName are required , path example: /collection/id/subcollection ');\n    }\n    this.reloadPath();\n  }\n\n  public reloadPath(): void {\n    const randomCharacters = Math.random().toString(36).substring(2, 15);\n    this.storagePath = `${this.imgStorageSettings.path}/${this.imgStorageSettings.fileName}-${randomCharacters}.webp`;\n  }\n\n  private setSettingsForComponent(): void {\n    console.log('setSettingsForComponent', this.imgStorageSettings);\n    // TODO: remove all the imageSettings and keep only imgStorageSettings\n\n    this.aspectRatioValue = this.imgStorageSettings?.cropSettings?.aspectRatio\n      ? AspectRatio[this.imgStorageSettings?.cropSettings?.aspectRatio]\n      : AspectRatio[AspectType.Square];\n\n    if (this.imgStorageSettings?.path) {\n      this.storagePath = `${this.imgStorageSettings.path}/${this.imgStorageSettings.fileName}.webp`;\n    } else if (this.imgStorageSettings.path) {\n      this.storagePath = `${this.imgStorageSettings.path}/${this.imgStorageSettings.fileName}.webp`;\n    }\n    if (this.imgStorageSettings?.cropSettings?.resizeToWidth) {\n      this.resizeToWidth = this.imgStorageSettings.cropSettings.resizeToWidth;\n    } else if (this.imgStorageSettings.cropSettings.resizeToWidth) {\n      this.resizeToWidth = this.imgStorageSettings.cropSettings.resizeToWidth;\n    }\n    if (this.imgStorageSettings?.fileName) {\n      this.renameFile = this.imgStorageSettings.fileName;\n    } else if (this.imgStorageSettings.fileName) {\n      this.renameFile = this.imgStorageSettings.fileName;\n    }\n  }\n\n  async fileChangeEvent(event: any) {\n    this.setSettingsForComponent();\n\n    console.log(this.fileInputId);\n\n    this.imageChangedEvent = event;\n    const file = event?.target?.files[0];\n    if (file) {\n      this.fileMetadata = file;\n      this.onFileSelected.emit(file);\n      this.renameFile = this.fileMetadata?.name\n        ?.split('.')[0]\n        .replace(/[^a-zA-Z0-9]/g, '')\n        .slice(0, 80);\n\n      console.log(this.renameFile);\n\n      if (!this.imgStorageSettings.fileName) {\n        this.reloadPath();\n      }\n      this.displayDialog = true;\n      this.changeDetectorRef.detectChanges();\n    }\n  }\n\n  onInnerImageCropped(event: ImageCroppedEvent) {\n    this.croppedImage = event.base64;\n  }\n\n  imageLoaded(image: LoadedImage) {\n    this.changeDetectorRef.detectChanges();\n  }\n\n  cropperReady() {\n    this.changeDetectorRef.detectChanges();\n  }\n\n  loadImageFailed() {\n    console.error('fallo al cargar la imagen');\n  }\n\n  public async simpleCropAndUpload() {\n    console.log(this.fileInputId);\n\n    console.log('simpleCropAndUpload');\n    const imageCropped: any = await this.imageCropper.crop();\n    const imgStorage = await this.multiImagesStorageService.uploadImage(imageCropped?.blob, this.storagePath);\n    if (this.currentStorage?.path) {\n      console.warn('deleting current Image', this.currentStorage?.path);\n      this.multiImagesStorageService.deleteImage(this.currentStorage.path);\n    }\n    console.log('imgStorage', imgStorage);\n    this.imageUploaded.emit(imgStorage);\n    this.displayDialog = false;\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public changeRatio(event: AspectRatioOption) {\n    console.log('changeRatio', event);\n    // this.imgStorageSettings.cropSettings.aspectRatio = event.valueRatio;\n    this.aspectRatioValue = event.valueRatio;\n    this.changeDetectorRef.detectChanges();\n  }\n}\n","<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    <div class=\"metadata-section\" *ngIf=\"fileMetadata\">\n      <span class=\"metadata-item\">tipo: {{ fileMetadata.type }}</span>\n      <span class=\"metadata-item\">tamaño: {{ fileMetadata.size }}</span>\n    </div>\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  </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","import { Injectable } from '@angular/core';\nimport { getDownloadURL, ref, Storage } from '@angular/fire/storage';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DCFilesCacheService {\n  constructor(private storage: Storage) {}\n\n  public files: { [key: string]: string } = {};\n\n  public async getURLSrcFile(path: string): Promise<string> {\n    if (path in this.files) {\n      return this.files[path];\n    } else {\n      const url = await getDownloadURL(ref(this.storage, path));\n      const localUrl = await this.donwloadFileAndGetLocalURL(url);\n      this.files[path] = localUrl;\n      return localUrl;\n    }\n  }\n\n  public getBlob(url: string): Promise<Blob> {\n    return new Promise((resolve, reject) => {\n      const xhr = new XMLHttpRequest();\n      xhr.responseType = 'blob';\n      xhr.overrideMimeType('audio/mp3');\n\n      xhr.onload = (event) => {\n        var blob = xhr.response;\n        resolve(blob);\n      };\n      xhr.onerror = (event) => {\n        reject(event);\n      };\n\n      xhr.open('GET', url);\n      xhr.send();\n    });\n  }\n\n  public async donwloadFileAndGetLocalURL(url: string) {\n    const blob = await this.getBlob(url);\n\n    return URL.createObjectURL(blob);\n  }\n}\n","/*\n * Public API Surface of storage-uploader\n */\n\nexport * from './lib/components/cropper/cropper.component';\nexport * from './lib/components/cropper-modal/cropper-modal.component';\nexport * from './lib/classes/cropper.classes';\n\nexport * from './lib/services/multi-images-storage.service';\nexport * from './lib/services/dc-files-cache.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.MultiImagesStorageService","ref","i1"],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@dataclouder/ngx-cloud-storage" />
+export * from './public-api';

package/lib/classes/cropper.classes.d.ts

@@ -0,0 +1,80 @@
+export interface StorageImageSettings {
+    path?: string;
+    fileName?: string;
+    cropSettings?: ImageCropSettings;
+}
+export interface ImageCropSettings {
+    resizeToWidth?: number;
+    resolutions: Array<number>;
+    aspectRatio: AspectType;
+}
+export interface CropImageSettings {
+    path: string;
+    fileName?: string;
+    resizeToWidth?: number;
+}
+export interface ImageMultipleCrops {
+    file: File;
+    defaultImageBlob?: Blob;
+    imagesBlobs: {
+        [resolution: number]: Blob;
+    };
+    settings: {
+        renameFile: string;
+        width?: number;
+    };
+}
+export declare const AspectRatioOptions: AspectRatioOption[];
+export interface AspectRatioOption {
+    label: string;
+    description: string;
+    value: string;
+    valueRatio: number;
+}
+export declare enum AspectType {
+    Square = "square",
+    Rectangle = "rectangle",
+    Banner = "banner",
+    RectangleLarge = "rectangleLarge",
+    Vertical_9_16 = "vertical_9_16",
+    Vertical_3_5 = "vertical_3_5",
+    Vertical_2_3 = "vertical_2_3"
+}
+export declare enum AspectRatio2 {
+    '9:16' = 1.7777777777777777,
+    '3:5' = 0.6,
+    '5:8' = 0.625,
+    '2:3' = 0.6666666666666666,
+    '1:1' = 1
+}
+export declare enum ResolutionType {
+    Small = 200,
+    Medium = 400,
+    MediumLarge = 800,
+    Large = 1200,
+    VeryLarge = 1600
+}
+export declare const AspectRatio: {
+    square: number;
+    rectangle: number;
+    vertical_9_16: number;
+    rectangleLarge: number;
+    banner: number;
+    vertical_3_5: number;
+    vertical_2_3: number;
+};
+export interface ImgStorageData extends CloudStorageData {
+    name?: string;
+    bucket?: string;
+    url?: string;
+    path?: string;
+    fullPath?: string;
+    resolution?: string;
+    resolutions?: any;
+}
+export interface CloudStorageData {
+    bucket?: string;
+    url?: string;
+    path?: string;
+}
+export declare const DEFAULT_SETTINGS: StorageImageSettings;

package/lib/components/cropper/cropper.component.d.ts

@@ -0,0 +1,38 @@
+import { OnInit, EventEmitter } from '@angular/core';
+import { ImageCroppedEvent, ImageCropperComponent, LoadedImage } from 'ngx-image-cropper';
+import { Observable } from 'rxjs';
+import { AspectType, ImageMultipleCrops, CropImageSettings } from '../../classes/cropper.classes';
+import { MultiImagesStorageService } from '../../services/multi-images-storage.service';
+import * as i0 from "@angular/core";
+export declare class CropperComponent implements OnInit {
+    private multiImagesStorageService;
+    imageSettings: CropImageSettings;
+    ratioType: AspectType | string;
+    resolutions: Array<number>;
+    imageUploaded: EventEmitter<any>;
+    onImageCropped: EventEmitter<ImageMultipleCrops>;
+    onFileSelected: EventEmitter<any>;
+    imageCropper: ImageCropperComponent;
+    fileMetadata: File | null;
+    imageChangedEvent: Event;
+    aspectRatio: number;
+    croppedImage: any;
+    isLoading: boolean;
+    isUploaded: boolean;
+    renameFile: any;
+    storagePath: string;
+    showModal: boolean;
+    constructor(multiImagesStorageService: MultiImagesStorageService);
+    ngOnInit(): void;
+    reloadPath(): void;
+    fileChangeEvent(event: any): Promise<void>;
+    onInnerImageCropped(event: ImageCroppedEvent): void;
+    imageLoaded(image: LoadedImage): void;
+    loadImageFailed(): void;
+    downloadURL: Observable<string>;
+    simpleCropAndUpload(): Promise<void>;
+    uploadToStorage(imageMulticrops: ImageMultipleCrops): Promise<void>;
+    closeModal(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CropperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CropperComponent, "app-cropper", never, { "imageSettings": { "alias": "imageSettings"; "required": false; }; "ratioType": { "alias": "ratioType"; "required": false; }; "resolutions": { "alias": "resolutions"; "required": false; }; }, { "imageUploaded": "imageUploaded"; "onImageCropped": "onImageCropped"; "onFileSelected": "onFileSelected"; }, never, never, true, never>;
+}

package/lib/components/cropper-modal/cropper-modal.component.d.ts

@@ -0,0 +1,42 @@
+import { OnInit, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ImageCroppedEvent, ImageCropperComponent, LoadedImage } from 'ngx-image-cropper';
+import { Observable } from 'rxjs';
+import { MultiImagesStorageService } from '../../services/multi-images-storage.service';
+import { ImageMultipleCrops, StorageImageSettings, ImgStorageData, AspectRatioOption } from '../../classes/cropper.classes';
+import * as i0 from "@angular/core";
+export declare class CropperComponentModal implements OnInit {
+    private multiImagesStorageService;
+    private changeDetectorRef;
+    imgStorageSettings: StorageImageSettings;
+    buttonLabel: string;
+    currentStorage: ImgStorageData;
+    imageUploaded: EventEmitter<ImgStorageData>;
+    onImageCropped: EventEmitter<ImageMultipleCrops>;
+    onFileSelected: EventEmitter<any>;
+    imageCropper: ImageCropperComponent;
+    aspectRatioOptions: AspectRatioOption[];
+    fileMetadata: File | null;
+    imageChangedEvent: Event;
+    displayDialog: boolean;
+    aspectRatioValue: number;
+    croppedImage: any;
+    renameFile: any;
+    storagePath: string;
+    downloadURL: Observable<string>;
+    resizeToWidth: number;
+    ratioSelected: any;
+    fileInputId: string;
+    constructor(multiImagesStorageService: MultiImagesStorageService, changeDetectorRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    reloadPath(): void;
+    private setSettingsForComponent;
+    fileChangeEvent(event: any): Promise<void>;
+    onInnerImageCropped(event: ImageCroppedEvent): void;
+    imageLoaded(image: LoadedImage): void;
+    cropperReady(): void;
+    loadImageFailed(): void;
+    simpleCropAndUpload(): Promise<void>;
+    changeRatio(event: AspectRatioOption): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CropperComponentModal, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CropperComponentModal, "dc-cropper-modal", never, { "imgStorageSettings": { "alias": "imgStorageSettings"; "required": false; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; }; "currentStorage": { "alias": "currentStorage"; "required": false; }; }, { "imageUploaded": "imageUploaded"; "onImageCropped": "onImageCropped"; "onFileSelected": "onFileSelected"; }, never, never, true, never>;
+}

package/lib/services/dc-files-cache.service.d.ts

@@ -0,0 +1,14 @@
+import { Storage } from '@angular/fire/storage';
+import * as i0 from "@angular/core";
+export declare class DCFilesCacheService {
+    private storage;
+    constructor(storage: Storage);
+    files: {
+        [key: string]: string;
+    };
+    getURLSrcFile(path: string): Promise<string>;
+    getBlob(url: string): Promise<Blob>;
+    donwloadFileAndGetLocalURL(url: string): Promise<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DCFilesCacheService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DCFilesCacheService>;
+}

package/lib/services/multi-images-storage.service.d.ts

@@ -0,0 +1,14 @@
+import { AngularFireStorage } from '@angular/fire/compat/storage';
+import { ImageMultipleCrops, ImgStorageData } from '../classes/cropper.classes';
+import * as i0 from "@angular/core";
+export declare class MultiImagesStorageService {
+    private storage;
+    constructor(storage: AngularFireStorage);
+    uploadImage(image: Blob, path: string): Promise<ImgStorageData>;
+    uploadImage2(imageMulticrops: ImageMultipleCrops, path: string): Promise<ImgStorageData>;
+    delete_directory(imagePath: string): Promise<void>;
+    deleteImage(imagePath: string): Promise<void>;
+    private uploadAndGetUrl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MultiImagesStorageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MultiImagesStorageService>;
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@dataclouder/ngx-cloud-storage",
+  "version": "0.0.21",
+  "description": "Angular component library for handling cloud storage uploads with image cropping capabilities",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0",
+    "@angular/fire": ">=18.0.0",
+    "ngx-image-cropper": "^9.0.0",
+    "primeng": ">=19.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/dataclouder-ngx-cloud-storage.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/dataclouder-ngx-cloud-storage.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,5 @@
+export * from './lib/components/cropper/cropper.component';
+export * from './lib/components/cropper-modal/cropper-modal.component';
+export * from './lib/classes/cropper.classes';
+export * from './lib/services/multi-images-storage.service';
+export * from './lib/services/dc-files-cache.service';