@guajiritos/image-picker 0.0.10 → 0.0.12

package/esm2022/utils/pipes/i18n/i18n.pipe.mjs

@@ -44,13 +44,13 @@ export class I18nPipe {
     transform(key, language) {
         return language === 'en' ? this.en?.[key] : this.es?.[key];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: I18nPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: I18nPipe, name: "i18n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: I18nPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: I18nPipe, name: "i18n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: I18nPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: I18nPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'i18n'
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaTE4bi5waXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZ3VhY2hvcy1pbWFnZS1waWNrZXIvc3JjL3V0aWxzL3BpcGVzL2kxOG4vaTE4bi5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDOztBQUtwRCxNQUFNLE9BQU8sUUFBUTtJQUNYLEVBQUUsR0FBUTtRQUNoQixjQUFjLEVBQUUsaUJBQWlCO1FBQ2pDLFNBQVMsRUFBRSwrQ0FBK0M7UUFDMUQsU0FBUyxFQUFFLFdBQVc7UUFDdEIsaUJBQWlCLEVBQUUsdUJBQXVCO1FBQzFDLFFBQVEsRUFBRSxvQkFBb0I7UUFDOUIsYUFBYSxFQUFFLGVBQWU7UUFDOUIsT0FBTyxFQUFFLFNBQVM7UUFDbEIsSUFBSSxFQUFFLE1BQU07UUFDWixjQUFjLEVBQUUsZ0JBQWdCO1FBQ2hDLFlBQVksRUFBRSxjQUFjO1FBQzVCLFlBQVksRUFBRSxlQUFlO1FBQzdCLGFBQWEsRUFBRSxnQkFBZ0I7UUFDL0IsTUFBTSxFQUFFLFFBQVE7UUFDaEIsSUFBSSxFQUFFLE1BQU07UUFDWixRQUFRLEVBQUUsV0FBVztRQUNyQixTQUFTLEVBQUUsWUFBWTtRQUN2QixNQUFNLEVBQUUsUUFBUTtRQUNoQixJQUFJLEVBQUUsTUFBTTtLQUNiLENBQUM7SUFFTSxFQUFFLEdBQVE7UUFDaEIsY0FBYyxFQUFFLGlCQUFpQjtRQUNqQyxTQUFTLEVBQUUsZ0RBQWdEO1FBQzNELFNBQVMsRUFBRSxZQUFZO1FBQ3ZCLGlCQUFpQixFQUFFLDBCQUEwQjtRQUM3QyxRQUFRLEVBQUUscUJBQXFCO1FBQy9CLGFBQWEsRUFBRSxrQkFBa0I7UUFDakMsTUFBTSxFQUFFLFVBQVU7UUFDbEIsSUFBSSxFQUFFLFNBQVM7UUFDZixPQUFPLEVBQUUsU0FBUztRQUNsQixjQUFjLEVBQUUsYUFBYTtRQUM3QixZQUFZLEVBQUUsa0JBQWtCO1FBQ2hDLFlBQVksRUFBRSxZQUFZO1FBQzFCLGFBQWEsRUFBRSxXQUFXO1FBQzFCLE1BQU0sRUFBRSxTQUFTO1FBQ2pCLElBQUksRUFBRSxVQUFVO1FBQ2hCLFFBQVEsRUFBRSxXQUFXO1FBQ3JCLFNBQVMsRUFBRSxZQUFZO1FBQ3ZCLElBQUksRUFBRSxRQUFRO0tBQ2YsQ0FBQztJQUVGLFNBQVMsQ0FBQyxHQUFXLEVBQUUsUUFBZ0I7UUFDckMsT0FBTyxRQUFRLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUM3RCxDQUFDO3VHQTdDVSxRQUFRO3FHQUFSLFFBQVE7OzJGQUFSLFFBQVE7a0JBSHBCLElBQUk7bUJBQUM7b0JBQ0osSUFBSSxFQUFFLE1BQU07aUJBQ2IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBQaXBlKHtcbiAgbmFtZTogJ2kxOG4nXG59KVxuZXhwb3J0IGNsYXNzIEkxOG5QaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIHByaXZhdGUgZW46IGFueSA9IHtcbiAgICBVUExPQURfQV9JTUFHRTogJ1VwbG9hZCBhbiBpbWFnZScsXG4gICAgTVVTVF9FRElUOiAnWW91IG11c3QgZWRpdCB0aGUgaW1hZ2UgaW4gb3JkZXIgdG8gcmVzaXplIGl0JyxcbiAgICBUT09fTEFSR0U6ICd0b28gbGFyZ2UnLFxuICAgIE9QRU5fRURJVE9SX1BBTkVMOiAnT3BlbiB0aGUgZWRpdG9yIHBhbmVsJyxcbiAgICBET1dOTE9BRDogJ0Rvd25sb2FkIHRoZSBpbWFnZScsXG4gICAgQ09OVFJPTF9QQU5FTDogJ0NvbnRyb2wgUGFuZWwnLFxuICAgIFFVQUxJVFk6ICdRdWFsaXR5JyxcbiAgICBTQVZFOiAnU2F2ZScsXG4gICAgTUFYX0RJTUVOU0lPTlM6ICdNYXggZGltZW5zaW9ucycsXG4gICAgQVNQRUNUX1JBVElPOiAnQXNwZWN0IHJhdGlvJyxcbiAgICBNQVhfV0lEVEhfUFg6ICdtYXgtd2lkdGgocHgpJyxcbiAgICBNQVhfSEVJR0hUX1BYOiAnbWF4LWhlaWdodChweCknLFxuICAgIEZPUk1BVDogJ0Zvcm1hdCcsXG4gICAgQ1JPUDogJ0Nyb3AnLFxuICAgIFdJRFRIX1BYOiAnd2lkdGgocHgpJyxcbiAgICBIRUlHSFRfUFg6ICdoZWlnaHQocHgpJyxcbiAgICBSRU1PVkU6ICdSZW1vdmUnLFxuICAgIFNJWkU6ICdTaXplJ1xuICB9O1xuXG4gIHByaXZhdGUgZXM6IGFueSA9IHtcbiAgICBVUExPQURfQV9JTUFHRTogJ1N1YmEgdW5hIGltYWdlbicsXG4gICAgTVVTVF9FRElUOiAnRGViZSBlZGl0YXIgbGEgaW1hZ2VuIHBhcmEgZGlzbWludWlyIHN1IHRhbWHDsW8nLFxuICAgIFRPT19MQVJHRTogJ211eSBncmFuZGUnLFxuICAgIE9QRU5fRURJVE9SX1BBTkVMOiAnQWJyYSBlbCBwYW5lbCBkZSBlZGljacOzbicsXG4gICAgRE9XTkxPQUQ6ICdEZXNjYXJndWUgbGEgaW1hZ2VuJyxcbiAgICBDT05UUk9MX1BBTkVMOiAnUGFuZWwgZGUgY29udHJvbCcsXG4gICAgUkVNT1ZFOiAnRWxpbWluYXInLFxuICAgIFNBVkU6ICdHdWFyZGFyJyxcbiAgICBRVUFMSVRZOiAnQ2FsaWRhZCcsXG4gICAgTUFYX0RJTUVOU0lPTlM6ICdEaW1lbnNpb25lcycsXG4gICAgQVNQRUNUX1JBVElPOiAnUmVsYWNpw7NuLUFzcGVjdG8nLFxuICAgIE1BWF9XSURUSF9QWDogJ21heC4gYW5jaG8nLFxuICAgIE1BWF9IRUlHSFRfUFg6ICdtYXguIGFsdG8nLFxuICAgIEZPUk1BVDogJ0Zvcm1hdG8nLFxuICAgIENST1A6ICdSZWNvcnRhcicsXG4gICAgV0lEVEhfUFg6ICdhbmNobyhweCknLFxuICAgIEhFSUdIVF9QWDogJ2FsdHVyYShweCknLFxuICAgIFNJWkU6ICdUYW1hw7FvJ1xuICB9O1xuXG4gIHRyYW5zZm9ybShrZXk6IHN0cmluZywgbGFuZ3VhZ2U6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGxhbmd1YWdlID09PSAnZW4nID8gdGhpcy5lbj8uW2tleV0gOiB0aGlzLmVzPy5ba2V5XTtcbiAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaTE4bi5waXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZ3VhY2hvcy1pbWFnZS1waWNrZXIvc3JjL3V0aWxzL3BpcGVzL2kxOG4vaTE4bi5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDOztBQUtwRCxNQUFNLE9BQU8sUUFBUTtJQUNYLEVBQUUsR0FBUTtRQUNoQixjQUFjLEVBQUUsaUJBQWlCO1FBQ2pDLFNBQVMsRUFBRSwrQ0FBK0M7UUFDMUQsU0FBUyxFQUFFLFdBQVc7UUFDdEIsaUJBQWlCLEVBQUUsdUJBQXVCO1FBQzFDLFFBQVEsRUFBRSxvQkFBb0I7UUFDOUIsYUFBYSxFQUFFLGVBQWU7UUFDOUIsT0FBTyxFQUFFLFNBQVM7UUFDbEIsSUFBSSxFQUFFLE1BQU07UUFDWixjQUFjLEVBQUUsZ0JBQWdCO1FBQ2hDLFlBQVksRUFBRSxjQUFjO1FBQzVCLFlBQVksRUFBRSxlQUFlO1FBQzdCLGFBQWEsRUFBRSxnQkFBZ0I7UUFDL0IsTUFBTSxFQUFFLFFBQVE7UUFDaEIsSUFBSSxFQUFFLE1BQU07UUFDWixRQUFRLEVBQUUsV0FBVztRQUNyQixTQUFTLEVBQUUsWUFBWTtRQUN2QixNQUFNLEVBQUUsUUFBUTtRQUNoQixJQUFJLEVBQUUsTUFBTTtLQUNiLENBQUM7SUFFTSxFQUFFLEdBQVE7UUFDaEIsY0FBYyxFQUFFLGlCQUFpQjtRQUNqQyxTQUFTLEVBQUUsZ0RBQWdEO1FBQzNELFNBQVMsRUFBRSxZQUFZO1FBQ3ZCLGlCQUFpQixFQUFFLDBCQUEwQjtRQUM3QyxRQUFRLEVBQUUscUJBQXFCO1FBQy9CLGFBQWEsRUFBRSxrQkFBa0I7UUFDakMsTUFBTSxFQUFFLFVBQVU7UUFDbEIsSUFBSSxFQUFFLFNBQVM7UUFDZixPQUFPLEVBQUUsU0FBUztRQUNsQixjQUFjLEVBQUUsYUFBYTtRQUM3QixZQUFZLEVBQUUsa0JBQWtCO1FBQ2hDLFlBQVksRUFBRSxZQUFZO1FBQzFCLGFBQWEsRUFBRSxXQUFXO1FBQzFCLE1BQU0sRUFBRSxTQUFTO1FBQ2pCLElBQUksRUFBRSxVQUFVO1FBQ2hCLFFBQVEsRUFBRSxXQUFXO1FBQ3JCLFNBQVMsRUFBRSxZQUFZO1FBQ3ZCLElBQUksRUFBRSxRQUFRO0tBQ2YsQ0FBQztJQUVGLFNBQVMsQ0FBQyxHQUFXLEVBQUUsUUFBZ0I7UUFDckMsT0FBTyxRQUFRLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUM3RCxDQUFDO3VHQTdDVSxRQUFRO3FHQUFSLFFBQVE7OzJGQUFSLFFBQVE7a0JBSHBCLElBQUk7bUJBQUM7b0JBQ0osSUFBSSxFQUFFLE1BQU07aUJBQ2IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AUGlwZSh7XHJcbiAgbmFtZTogJ2kxOG4nXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBJMThuUGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xyXG4gIHByaXZhdGUgZW46IGFueSA9IHtcclxuICAgIFVQTE9BRF9BX0lNQUdFOiAnVXBsb2FkIGFuIGltYWdlJyxcclxuICAgIE1VU1RfRURJVDogJ1lvdSBtdXN0IGVkaXQgdGhlIGltYWdlIGluIG9yZGVyIHRvIHJlc2l6ZSBpdCcsXHJcbiAgICBUT09fTEFSR0U6ICd0b28gbGFyZ2UnLFxyXG4gICAgT1BFTl9FRElUT1JfUEFORUw6ICdPcGVuIHRoZSBlZGl0b3IgcGFuZWwnLFxyXG4gICAgRE9XTkxPQUQ6ICdEb3dubG9hZCB0aGUgaW1hZ2UnLFxyXG4gICAgQ09OVFJPTF9QQU5FTDogJ0NvbnRyb2wgUGFuZWwnLFxyXG4gICAgUVVBTElUWTogJ1F1YWxpdHknLFxyXG4gICAgU0FWRTogJ1NhdmUnLFxyXG4gICAgTUFYX0RJTUVOU0lPTlM6ICdNYXggZGltZW5zaW9ucycsXHJcbiAgICBBU1BFQ1RfUkFUSU86ICdBc3BlY3QgcmF0aW8nLFxyXG4gICAgTUFYX1dJRFRIX1BYOiAnbWF4LXdpZHRoKHB4KScsXHJcbiAgICBNQVhfSEVJR0hUX1BYOiAnbWF4LWhlaWdodChweCknLFxyXG4gICAgRk9STUFUOiAnRm9ybWF0JyxcclxuICAgIENST1A6ICdDcm9wJyxcclxuICAgIFdJRFRIX1BYOiAnd2lkdGgocHgpJyxcclxuICAgIEhFSUdIVF9QWDogJ2hlaWdodChweCknLFxyXG4gICAgUkVNT1ZFOiAnUmVtb3ZlJyxcclxuICAgIFNJWkU6ICdTaXplJ1xyXG4gIH07XHJcblxyXG4gIHByaXZhdGUgZXM6IGFueSA9IHtcclxuICAgIFVQTE9BRF9BX0lNQUdFOiAnU3ViYSB1bmEgaW1hZ2VuJyxcclxuICAgIE1VU1RfRURJVDogJ0RlYmUgZWRpdGFyIGxhIGltYWdlbiBwYXJhIGRpc21pbnVpciBzdSB0YW1hw7FvJyxcclxuICAgIFRPT19MQVJHRTogJ211eSBncmFuZGUnLFxyXG4gICAgT1BFTl9FRElUT1JfUEFORUw6ICdBYnJhIGVsIHBhbmVsIGRlIGVkaWNpw7NuJyxcclxuICAgIERPV05MT0FEOiAnRGVzY2FyZ3VlIGxhIGltYWdlbicsXHJcbiAgICBDT05UUk9MX1BBTkVMOiAnUGFuZWwgZGUgY29udHJvbCcsXHJcbiAgICBSRU1PVkU6ICdFbGltaW5hcicsXHJcbiAgICBTQVZFOiAnR3VhcmRhcicsXHJcbiAgICBRVUFMSVRZOiAnQ2FsaWRhZCcsXHJcbiAgICBNQVhfRElNRU5TSU9OUzogJ0RpbWVuc2lvbmVzJyxcclxuICAgIEFTUEVDVF9SQVRJTzogJ1JlbGFjacOzbi1Bc3BlY3RvJyxcclxuICAgIE1BWF9XSURUSF9QWDogJ21heC4gYW5jaG8nLFxyXG4gICAgTUFYX0hFSUdIVF9QWDogJ21heC4gYWx0bycsXHJcbiAgICBGT1JNQVQ6ICdGb3JtYXRvJyxcclxuICAgIENST1A6ICdSZWNvcnRhcicsXHJcbiAgICBXSURUSF9QWDogJ2FuY2hvKHB4KScsXHJcbiAgICBIRUlHSFRfUFg6ICdhbHR1cmEocHgpJyxcclxuICAgIFNJWkU6ICdUYW1hw7FvJ1xyXG4gIH07XHJcblxyXG4gIHRyYW5zZm9ybShrZXk6IHN0cmluZywgbGFuZ3VhZ2U6IHN0cmluZyk6IHN0cmluZyB7XHJcbiAgICByZXR1cm4gbGFuZ3VhZ2UgPT09ICdlbicgPyB0aGlzLmVuPy5ba2V5XSA6IHRoaXMuZXM/LltrZXldO1xyXG4gIH1cclxufVxyXG4iXX0=

package/esm2022/utils/pipes/pipes.module.mjs

@@ -3,15 +3,15 @@ import { I18nPipe } from './i18n/i18n.pipe';
 import { CalculateSizePipe } from './calculate-size/calculate-size.pipe';
 import * as i0 from "@angular/core";
 export class PipesModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: PipesModule, declarations: [I18nPipe, CalculateSizePipe], exports: [I18nPipe, CalculateSizePipe] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PipesModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: PipesModule, declarations: [I18nPipe, CalculateSizePipe], exports: [I18nPipe, CalculateSizePipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PipesModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PipesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PipesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [I18nPipe, CalculateSizePipe],
                     exports: [I18nPipe, CalculateSizePipe],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGlwZXMubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZ3VhY2hvcy1pbWFnZS1waWNrZXIvc3JjL3V0aWxzL3BpcGVzL3BpcGVzLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXpDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUM1QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQzs7QUFPekUsTUFBTSxPQUFPLFdBQVc7dUdBQVgsV0FBVzt3R0FBWCxXQUFXLGlCQUhQLFFBQVEsRUFBRSxpQkFBaUIsYUFDaEMsUUFBUSxFQUFFLGlCQUFpQjt3R0FFMUIsV0FBVzs7MkZBQVgsV0FBVztrQkFKdkIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxRQUFRLEVBQUUsaUJBQWlCLENBQUM7b0JBQzNDLE9BQU8sRUFBRSxDQUFDLFFBQVEsRUFBRSxpQkFBaUIsQ0FBQztpQkFDdkMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBJMThuUGlwZSB9IGZyb20gJy4vaTE4bi9pMThuLnBpcGUnO1xuaW1wb3J0IHsgQ2FsY3VsYXRlU2l6ZVBpcGUgfSBmcm9tICcuL2NhbGN1bGF0ZS1zaXplL2NhbGN1bGF0ZS1zaXplLnBpcGUnO1xuXG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW0kxOG5QaXBlLCBDYWxjdWxhdGVTaXplUGlwZV0sXG4gIGV4cG9ydHM6IFtJMThuUGlwZSwgQ2FsY3VsYXRlU2l6ZVBpcGVdLFxufSlcbmV4cG9ydCBjbGFzcyBQaXBlc01vZHVsZSB7IH1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGlwZXMubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZ3VhY2hvcy1pbWFnZS1waWNrZXIvc3JjL3V0aWxzL3BpcGVzL3BpcGVzLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXpDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUM1QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQzs7QUFPekUsTUFBTSxPQUFPLFdBQVc7dUdBQVgsV0FBVzt3R0FBWCxXQUFXLGlCQUhQLFFBQVEsRUFBRSxpQkFBaUIsYUFDaEMsUUFBUSxFQUFFLGlCQUFpQjt3R0FFMUIsV0FBVzs7MkZBQVgsV0FBVztrQkFKdkIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxRQUFRLEVBQUUsaUJBQWlCLENBQUM7b0JBQzNDLE9BQU8sRUFBRSxDQUFDLFFBQVEsRUFBRSxpQkFBaUIsQ0FBQztpQkFDdkMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuaW1wb3J0IHsgSTE4blBpcGUgfSBmcm9tICcuL2kxOG4vaTE4bi5waXBlJztcclxuaW1wb3J0IHsgQ2FsY3VsYXRlU2l6ZVBpcGUgfSBmcm9tICcuL2NhbGN1bGF0ZS1zaXplL2NhbGN1bGF0ZS1zaXplLnBpcGUnO1xyXG5cclxuXHJcbkBOZ01vZHVsZSh7XHJcbiAgZGVjbGFyYXRpb25zOiBbSTE4blBpcGUsIENhbGN1bGF0ZVNpemVQaXBlXSxcclxuICBleHBvcnRzOiBbSTE4blBpcGUsIENhbGN1bGF0ZVNpemVQaXBlXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFBpcGVzTW9kdWxlIHsgfVxyXG4iXX0=

package/fesm2022/guajiritos-image-picker.mjs

@@ -2,26 +2,27 @@ import * as i0 from '@angular/core';
 import { Pipe, NgModule, signal, EventEmitter, Component, ChangeDetectionStrategy, Input, ViewChild, Output } from '@angular/core';
 import { ResizeObserver } from 'resize-observer';
 import { Subject } from 'rxjs';
-import * as i2 from '@angular/material/icon';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i8 from '@angular/forms';
+import * as i9 from '@angular/forms';
 import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1 from '@angular/material/tooltip';
+import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i4 from '@angular/material/checkbox';
+import * as i5 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i5 from '@angular/material/slider';
+import * as i6 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
-import * as i3 from '@angular/material/button';
+import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i6 from '@angular/material/form-field';
+import * as i7 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i7 from '@angular/material/input';
+import * as i8 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i9 from '@angular/material/select';
+import * as i10 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import { NgIf, NgStyle, NgForOf } from '@angular/common';
-import * as i10 from '@angular/material/core';
+import * as i1 from '@angular/common';
+import * as i11 from '@angular/material/core';
 
 class I18nPipe {
     en = {
@@ -67,10 +68,10 @@ class I18nPipe {
     transform(key, language) {
         return language === 'en' ? this.en?.[key] : this.es?.[key];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: I18nPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: I18nPipe, name: "i18n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: I18nPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: I18nPipe, name: "i18n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: I18nPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: I18nPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'i18n'
@@ -89,10 +90,10 @@ class CalculateSizePipe {
             return 0;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: CalculateSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: CalculateSizePipe, name: "calculateSize" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: CalculateSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: CalculateSizePipe, name: "calculateSize" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: CalculateSizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: CalculateSizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'calculateSize'
@@ -100,11 +101,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
         }] });
 
 class PipesModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: PipesModule, declarations: [I18nPipe, CalculateSizePipe], exports: [I18nPipe, CalculateSizePipe] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PipesModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: PipesModule, declarations: [I18nPipe, CalculateSizePipe], exports: [I18nPipe, CalculateSizePipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PipesModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PipesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PipesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [I18nPipe, CalculateSizePipe],
@@ -563,14 +564,13 @@ class GuajiritosImagePicker {
         this.unsubscribeAll$.next();
         this.unsubscribeAll$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: GuajiritosImagePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: GuajiritosImagePicker, isStandalone: true, selector: "guajiritos-image-picker", inputs: { appearance: "appearance", color: "color", imagesAllowed: "imagesAllowed", _imageSrc: "_imageSrc", _config: "_config" }, outputs: { $imageChanged: "$imageChanged", $imageOriginal: "$imageOriginal" }, viewQueries: [{ propertyName: "imagePicker", first: true, predicate: ["imagePicker"], descendants: true }], ngImport: i0, template: "<div *ngIf='!loadImage()' class='place-image'>\n  <div class='image-holder'\n       [ngStyle]='{ width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\n    <button [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\" class='image-upload-btn' mat-icon-button\n            (click)='onUpload($event)'>\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\n    </button>\n    <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n  </div>\n</div>\n\n<div *ngIf='loadImage()' class='place-image'>\n  <div class='image-holder-loaded'\n       [ngStyle]='{width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\n    <img [src]='imageSrc()' alt='image-loaded' [ngStyle]='{ borderRadius: config()?.borderRadius }'>\n    <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n  </div>\n  <p *ngIf='imageSrc()?.length' class='mat-caption image-caption' [class.warn]='(imageSrc()?.length | calculateSize) > 200'\n     [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\n    {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\n  </p>\n\n  <div class='editing-bar-btn'>\n    <button id='upload-img' *ngIf='!config()?.hideAddBtn' mat-icon-button (click)='onUpload($event)'\n            [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\">\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\n    </button>\n    <button id='edit-img' *ngIf='!config()?.hideEditBtn && !noEdit()' mat-icon-button (click)='showEditPanel.set(true)'\n            [matTooltip]=\"'OPEN_EDITOR_PANEL' | i18n: config()?.language\">\n      <mat-icon class='mat-18'>edit</mat-icon>\n    </button>\n    <a id='download-img' *ngIf='!config()?.hideDownloadBtn' [matTooltip]=\"'DOWNLOAD' | i18n: config()?.language\"\n       [href]='imageSrc()' mat-icon-button [download]='imageName'>\n      <mat-icon class='mat-18'>cloud_download</mat-icon>\n    </a>\n    <button id='delete-img' *ngIf='!config()?.hideDeleteBtn' mat-icon-button (click)='onRemove()'\n            [matTooltip]=\"'REMOVE' | i18n: config()?.language\">\n      <mat-icon class='mat-18'>delete</mat-icon>\n    </button>\n  </div>\n</div>\n\n<div *ngIf='showEditPanel()' id='popup' class='popup'>\n  <div class='popup-clear'>\n    <button mat-icon-button (click)='onCloseEditPanel()'>\n      <mat-icon class='mat-18'>clear</mat-icon>\n    </button>\n  </div>\n\n  <div class='image-container'>\n    <div class='image-holder-full'>\n      <img id='image-full' [src]='imageSrc()' alt=''>\n      <div id='image-cropper' class='image-cropper'>\n        <div id='image-cropper-header'>\n          <mat-icon>drag_indicator</mat-icon>\n        </div>\n      </div>\n    </div>\n\n    <div class='control-panel'>\n      <p class='item-panel fw-600'>{{ 'QUALITY' | i18n: config()?.language }}</p>\n      <div class='quality-container'>\n        <mat-slider ngDefaultControl [color]='color' class='w-100 mw-100' (change)='onChangeQuality()'\n                    [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\n          <input matSliderThumb [formControl]='quality'>\n        </mat-slider>\n      </div>\n\n      <div class='item-panel'>\n        <span class='fw-600'>{{ 'MAX_DIMENSIONS' | i18n: config()?.language }}</span>\n        <mat-checkbox class='float-right' [formControl]='maintainAspectRatio' [color]='color'>\n          <span>{{ 'ASPECT_RATIO' | i18n: config()?.language }}</span>\n        </mat-checkbox>\n      </div>\n\n      <div class='max-dimension-container'>\n        <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\n          <mat-label>{{ 'MAX_WIDTH_PX' | i18n: config()?.language }}</mat-label>\n          <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"'MAX_WIDTH_PX' | i18n: config()?.language\"\n                 [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\n        </mat-form-field>\n\n        <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\n          <mat-label>{{ 'MAX_HEIGHT_PX' | i18n: config()?.language }}</mat-label>\n          <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"'MAX_HEIGHT_PX' | i18n: config()?.language\"\n                 [(ngModel)]='maxHeight' type='number' [min]='0' [max]='2000'>\n        </mat-form-field>\n      </div>\n\n      <p class='item-panel fw-600'>{{ 'FORMAT' | i18n: config()?.language }}</p>\n      <div class='formats-selection'>\n        <mat-form-field class='w-100 mw-100' [appearance]='appearance' [color]='color'>\n          <mat-select [formControl]='format' (selectionChange)='onChangeFormat()'>\n            <mat-option *ngFor='let format of allFormats' [value]='format'>\n              {{ format }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <div class='refresh-container'>\n        <mat-checkbox (change)='onCropStateChange()' [formControl]='showCrop' [color]='color'>\n          <p class='item-panel fw-600'>{{ 'CROP' | i18n: config()?.language }}</p>\n        </mat-checkbox>\n        <div class='d-flex '>\n          <button class='float-right' mat-icon-button [color]='color' (click)='onRestore()'>\n            <mat-icon>refresh</mat-icon>\n          </button>\n          <p *ngIf='showCrop.value'>\n            <button mat-icon-button [color]='color' (click)='onCrop()'>\n              <mat-icon>crop</mat-icon>\n            </button>\n          </p>\n        </div>\n      </div>\n\n      <ng-container *ngIf='showCrop.value'>\n        <div class='dimension-container'>\n          <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\n            <mat-label>{{ 'WIDTH_PX' | i18n: config()?.language }}</mat-label>\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"'WIDTH_PX' | i18n: config()?.language\"\n                   [formControl]='cropWidth' type='number' [min]='0' [max]='2000'>\n          </mat-form-field>\n          <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\n            <mat-label>{{ 'HEIGHT_PX' | i18n: config()?.language }}</mat-label>\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"'HEIGHT_PX' | i18n: config()?.language\"\n                   [formControl]='cropHeight' type='number' [min]='0' [max]='2000'>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <div class='save-container'>\n        <button mat-flat-button (click)='onCloseEditPanel()' [color]='color' class='save-button'>\n          {{ 'SAVE' | i18n: config()?.language}}\n        </button>\n\n        <p *ngIf='imageSrc()?.length' class='mat-caption image-caption'\n           [class.warn]='(imageSrc()?.length | calculateSize) > 200'\n           [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\n          {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".d-none{display:none}.d-flex{display:flex}.fw-600{font-weight:600}.w-100{width:100%}.mw-100{max-width:100%}.w-48{width:48%}.mw-48{max-width:48%}.float-right{float:right}p{margin:0!important;padding:0!important}.place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}.place-image .image-holder{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;width:320px;height:240px;border-radius:16px;max-width:100%!important;background-color:#fff}@media (max-width: 599px){.place-image .image-holder{max-width:100%!important;max-height:250px!important}}.place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .image-holder-loaded{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;max-width:100%!important;width:320px;height:240px;border-radius:4px;padding:2px}.place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}.place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:contain;object-position:center}@media (max-width: 599px){.place-image .image-holder-loaded{max-height:195px!important}}.place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .editing-bar-btn{margin-top:2px;display:flex;flex-direction:row;box-sizing:border-box;place-content:flex-start;align-items:flex-start}.place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}.place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}.place-image .editing-bar-btn button{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.place-image .editing-bar-btn a{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}.popup .popup-clear{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-end;align-items:center}.popup .image-container{margin-top:50px;margin-bottom:50px;height:calc(100vh - 188px);min-height:calc(100vh - 188px);min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}.popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}.popup img{max-height:600px;max-width:100%;object-fit:contain;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){.popup{background-color:#000000d9;padding:8px}.popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){.popup img{margin:0}}.popup .control-panel{color:#000;background-color:#fff;margin:8px;padding:16px;max-width:100%;width:18rem;border-radius:8px;flex-direction:column;box-sizing:border-box;display:flex;place-content:stretch flex-start;align-items:stretch}@media (max-width: 599px){.popup .control-panel{margin:8px 0;width:100%}}.popup .control-panel .title-panel{padding:0 4px;font-size:16px;margin-bottom:16px!important}.popup .control-panel .item-panel{padding:0 4px!important;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:4px}.popup .control-panel .formats-selection{margin-top:8px!important;flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .max-dimension-container{margin-top:16px!important;flex-flow:row;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .dimension-container{margin-top:8px!important;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .save-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center}.popup .control-panel .save-container .save-button{padding:0 8px;height:34px;box-sizing:border-box;font-weight:600}.popup .control-panel .quality-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .refresh-container{display:flex;justify-content:space-between;align-items:center}.popup .control-panel .refresh-container div{display:flex;align-items:center}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}.mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.mat-select-panel{background:white!important}input.mat-input-element{color:#000000d9}.mat-checkbox-background{background-color:#fff}.image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid white;box-sizing:border-box;resize:both;overflow:auto;opacity:0}.image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}.image-cropper #image-cropper-header mat-icon{color:#fff}.btn{padding:4px 8px;border-radius:4px;cursor:pointer}.btn mat-icon{color:#000000d1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i5.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PipesModule }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: CalculateSizePipe, name: "calculateSize" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: GuajiritosImagePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: GuajiritosImagePicker, isStandalone: true, selector: "guajiritos-image-picker", inputs: { appearance: "appearance", color: "color", imagesAllowed: "imagesAllowed", _imageSrc: "_imageSrc", _config: "_config" }, outputs: { $imageChanged: "$imageChanged", $imageOriginal: "$imageOriginal" }, viewQueries: [{ propertyName: "imagePicker", first: true, predicate: ["imagePicker"], descendants: true }], ngImport: i0, template: "<div *ngIf='!loadImage()' class='place-image'>\r\n  <div class='image-holder'\r\n       [ngStyle]='{ width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\r\n    <button [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\" class='image-upload-btn' mat-icon-button\r\n            (click)='onUpload($event)'>\r\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n    </button>\r\n    <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf='loadImage()' class='place-image'>\r\n  <div class='image-holder-loaded'\r\n       [ngStyle]='{width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\r\n    <img [src]='imageSrc()' alt='image-loaded' [ngStyle]='{ borderRadius: config()?.borderRadius }'>\r\n    <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n  </div>\r\n  <p *ngIf='imageSrc()?.length' class='mat-caption image-caption' [class.warn]='(imageSrc()?.length | calculateSize) > 200'\r\n     [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\r\n    {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\r\n  </p>\r\n\r\n  <div class='editing-bar-btn'>\r\n    <button id='upload-img' *ngIf='!config()?.hideAddBtn' mat-icon-button (click)='onUpload($event)'\r\n            [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\">\r\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n    </button>\r\n    <button id='edit-img' *ngIf='!config()?.hideEditBtn && !noEdit()' mat-icon-button (click)='showEditPanel.set(true)'\r\n            [matTooltip]=\"'OPEN_EDITOR_PANEL' | i18n: config()?.language\">\r\n      <mat-icon class='mat-18'>edit</mat-icon>\r\n    </button>\r\n    <a id='download-img' *ngIf='!config()?.hideDownloadBtn' [matTooltip]=\"'DOWNLOAD' | i18n: config()?.language\"\r\n       [href]='imageSrc()' mat-icon-button [download]='imageName'>\r\n      <mat-icon class='mat-18'>cloud_download</mat-icon>\r\n    </a>\r\n    <button id='delete-img' *ngIf='!config()?.hideDeleteBtn' mat-icon-button (click)='onRemove()'\r\n            [matTooltip]=\"'REMOVE' | i18n: config()?.language\">\r\n      <mat-icon class='mat-18'>delete</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf='showEditPanel()' id='popup' class='popup'>\r\n  <div class='popup-clear'>\r\n    <button mat-icon-button (click)='onCloseEditPanel()'>\r\n      <mat-icon class='mat-18'>clear</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class='image-container'>\r\n    <div class='image-holder-full'>\r\n      <img id='image-full' [src]='imageSrc()' alt=''>\r\n      <div id='image-cropper' class='image-cropper'>\r\n        <div id='image-cropper-header'>\r\n          <mat-icon>drag_indicator</mat-icon>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class='control-panel'>\r\n      <p class='item-panel fw-600'>{{ 'QUALITY' | i18n: config()?.language }}</p>\r\n      <div class='quality-container'>\r\n        <mat-slider ngDefaultControl [color]='color' class='w-100 mw-100' (change)='onChangeQuality()'\r\n                    [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\r\n          <input matSliderThumb [formControl]='quality'>\r\n        </mat-slider>\r\n      </div>\r\n\r\n      <div class='item-panel'>\r\n        <span class='fw-600'>{{ 'MAX_DIMENSIONS' | i18n: config()?.language }}</span>\r\n        <mat-checkbox class='float-right' [formControl]='maintainAspectRatio' [color]='color'>\r\n          <span>{{ 'ASPECT_RATIO' | i18n: config()?.language }}</span>\r\n        </mat-checkbox>\r\n      </div>\r\n\r\n      <div class='max-dimension-container'>\r\n        <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\r\n          <mat-label>{{ 'MAX_WIDTH_PX' | i18n: config()?.language }}</mat-label>\r\n          <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"'MAX_WIDTH_PX' | i18n: config()?.language\"\r\n                 [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\r\n          <mat-label>{{ 'MAX_HEIGHT_PX' | i18n: config()?.language }}</mat-label>\r\n          <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"'MAX_HEIGHT_PX' | i18n: config()?.language\"\r\n                 [(ngModel)]='maxHeight' type='number' [min]='0' [max]='2000'>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <p class='item-panel fw-600'>{{ 'FORMAT' | i18n: config()?.language }}</p>\r\n      <div class='formats-selection'>\r\n        <mat-form-field class='w-100 mw-100' [appearance]='appearance' [color]='color'>\r\n          <mat-select [formControl]='format' (selectionChange)='onChangeFormat()'>\r\n            <mat-option *ngFor='let format of allFormats' [value]='format'>\r\n              {{ format }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class='refresh-container'>\r\n        <mat-checkbox (change)='onCropStateChange()' [formControl]='showCrop' [color]='color'>\r\n          <p class='item-panel fw-600'>{{ 'CROP' | i18n: config()?.language }}</p>\r\n        </mat-checkbox>\r\n        <div class='d-flex '>\r\n          <button class='float-right' mat-icon-button [color]='color' (click)='onRestore()'>\r\n            <mat-icon>refresh</mat-icon>\r\n          </button>\r\n          <p *ngIf='showCrop.value'>\r\n            <button mat-icon-button [color]='color' (click)='onCrop()'>\r\n              <mat-icon>crop</mat-icon>\r\n            </button>\r\n          </p>\r\n        </div>\r\n      </div>\r\n\r\n      <ng-container *ngIf='showCrop.value'>\r\n        <div class='dimension-container'>\r\n          <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\r\n            <mat-label>{{ 'WIDTH_PX' | i18n: config()?.language }}</mat-label>\r\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"'WIDTH_PX' | i18n: config()?.language\"\r\n                   [formControl]='cropWidth' type='number' [min]='0' [max]='2000'>\r\n          </mat-form-field>\r\n          <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\r\n            <mat-label>{{ 'HEIGHT_PX' | i18n: config()?.language }}</mat-label>\r\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"'HEIGHT_PX' | i18n: config()?.language\"\r\n                   [formControl]='cropHeight' type='number' [min]='0' [max]='2000'>\r\n          </mat-form-field>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div class='save-container'>\r\n        <button mat-flat-button (click)='onCloseEditPanel()' [color]='color' class='save-button'>\r\n          {{ 'SAVE' | i18n: config()?.language}}\r\n        </button>\r\n\r\n        <p *ngIf='imageSrc()?.length' class='mat-caption image-caption'\r\n           [class.warn]='(imageSrc()?.length | calculateSize) > 200'\r\n           [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\r\n          {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".d-none{display:none}.d-flex{display:flex}.fw-600{font-weight:600}.w-100{width:100%}.mw-100{max-width:100%}.w-48{width:48%}.mw-48{max-width:48%}.float-right{float:right}p{margin:0!important;padding:0!important}.place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}.place-image .image-holder{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;width:320px;height:240px;border-radius:16px;max-width:100%!important;background-color:#fff}@media (max-width: 599px){.place-image .image-holder{max-width:100%!important;max-height:250px!important}}.place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .image-holder-loaded{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;max-width:100%!important;width:320px;height:240px;border-radius:4px;padding:2px}.place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}.place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:contain;object-position:center}@media (max-width: 599px){.place-image .image-holder-loaded{max-height:195px!important}}.place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .editing-bar-btn{margin-top:2px;display:flex;flex-direction:row;box-sizing:border-box;place-content:flex-start;align-items:flex-start}.place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}.place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}.place-image .editing-bar-btn button{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.place-image .editing-bar-btn a{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}.popup .popup-clear{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-end;align-items:center}.popup .image-container{margin-top:50px;margin-bottom:50px;height:calc(100vh - 188px);min-height:calc(100vh - 188px);min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}.popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}.popup img{max-height:600px;max-width:100%;object-fit:contain;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){.popup{background-color:#000000d9;padding:8px}.popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){.popup img{margin:0}}.popup .control-panel{color:#000;background-color:#fff;margin:8px;padding:16px;max-width:100%;width:18rem;border-radius:8px;flex-direction:column;box-sizing:border-box;display:flex;place-content:stretch flex-start;align-items:stretch}@media (max-width: 599px){.popup .control-panel{margin:8px 0;width:100%}}.popup .control-panel .title-panel{padding:0 4px;font-size:16px;margin-bottom:16px!important}.popup .control-panel .item-panel{padding:0 4px!important;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:4px}.popup .control-panel .formats-selection{margin-top:8px!important;flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .max-dimension-container{margin-top:16px!important;flex-flow:row;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .dimension-container{margin-top:8px!important;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .save-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center}.popup .control-panel .save-container .save-button{padding:0 8px;height:34px;box-sizing:border-box;font-weight:600}.popup .control-panel .quality-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .refresh-container{display:flex;justify-content:space-between;align-items:center}.popup .control-panel .refresh-container div{display:flex;align-items:center}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}.mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.mat-select-panel{background:white!important}input.mat-input-element{color:#000000d9}.mat-checkbox-background{background-color:#fff}.image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid white;box-sizing:border-box;resize:both;overflow:auto;opacity:0}.image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}.image-cropper #image-cropper-header mat-icon{color:#fff}.btn{padding:4px 8px;border-radius:4px;cursor:pointer}.btn mat-icon{color:#000000d1}\n"], dependencies: [{ kind: "ngmodule", type: BrowserAnimationsModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i9.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i9.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PipesModule }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: CalculateSizePipe, name: "calculateSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: GuajiritosImagePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: GuajiritosImagePicker, decorators: [{
             type: Component,
             args: [{ selector: 'guajiritos-image-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        NgIf,
-                        NgStyle,
+                        BrowserAnimationsModule,
                         MatTooltipModule,
                         MatIconModule,
                         MatButtonModule,
@@ -581,10 +581,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                         FormsModule,
                         MatSelectModule,
                         ReactiveFormsModule,
-                        FormsModule,
-                        PipesModule,
-                        NgForOf,
-                    ], template: "<div *ngIf='!loadImage()' class='place-image'>\n  <div class='image-holder'\n       [ngStyle]='{ width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\n    <button [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\" class='image-upload-btn' mat-icon-button\n            (click)='onUpload($event)'>\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\n    </button>\n    <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n  </div>\n</div>\n\n<div *ngIf='loadImage()' class='place-image'>\n  <div class='image-holder-loaded'\n       [ngStyle]='{width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\n    <img [src]='imageSrc()' alt='image-loaded' [ngStyle]='{ borderRadius: config()?.borderRadius }'>\n    <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n  </div>\n  <p *ngIf='imageSrc()?.length' class='mat-caption image-caption' [class.warn]='(imageSrc()?.length | calculateSize) > 200'\n     [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\n    {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\n  </p>\n\n  <div class='editing-bar-btn'>\n    <button id='upload-img' *ngIf='!config()?.hideAddBtn' mat-icon-button (click)='onUpload($event)'\n            [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\">\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\n    </button>\n    <button id='edit-img' *ngIf='!config()?.hideEditBtn && !noEdit()' mat-icon-button (click)='showEditPanel.set(true)'\n            [matTooltip]=\"'OPEN_EDITOR_PANEL' | i18n: config()?.language\">\n      <mat-icon class='mat-18'>edit</mat-icon>\n    </button>\n    <a id='download-img' *ngIf='!config()?.hideDownloadBtn' [matTooltip]=\"'DOWNLOAD' | i18n: config()?.language\"\n       [href]='imageSrc()' mat-icon-button [download]='imageName'>\n      <mat-icon class='mat-18'>cloud_download</mat-icon>\n    </a>\n    <button id='delete-img' *ngIf='!config()?.hideDeleteBtn' mat-icon-button (click)='onRemove()'\n            [matTooltip]=\"'REMOVE' | i18n: config()?.language\">\n      <mat-icon class='mat-18'>delete</mat-icon>\n    </button>\n  </div>\n</div>\n\n<div *ngIf='showEditPanel()' id='popup' class='popup'>\n  <div class='popup-clear'>\n    <button mat-icon-button (click)='onCloseEditPanel()'>\n      <mat-icon class='mat-18'>clear</mat-icon>\n    </button>\n  </div>\n\n  <div class='image-container'>\n    <div class='image-holder-full'>\n      <img id='image-full' [src]='imageSrc()' alt=''>\n      <div id='image-cropper' class='image-cropper'>\n        <div id='image-cropper-header'>\n          <mat-icon>drag_indicator</mat-icon>\n        </div>\n      </div>\n    </div>\n\n    <div class='control-panel'>\n      <p class='item-panel fw-600'>{{ 'QUALITY' | i18n: config()?.language }}</p>\n      <div class='quality-container'>\n        <mat-slider ngDefaultControl [color]='color' class='w-100 mw-100' (change)='onChangeQuality()'\n                    [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\n          <input matSliderThumb [formControl]='quality'>\n        </mat-slider>\n      </div>\n\n      <div class='item-panel'>\n        <span class='fw-600'>{{ 'MAX_DIMENSIONS' | i18n: config()?.language }}</span>\n        <mat-checkbox class='float-right' [formControl]='maintainAspectRatio' [color]='color'>\n          <span>{{ 'ASPECT_RATIO' | i18n: config()?.language }}</span>\n        </mat-checkbox>\n      </div>\n\n      <div class='max-dimension-container'>\n        <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\n          <mat-label>{{ 'MAX_WIDTH_PX' | i18n: config()?.language }}</mat-label>\n          <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"'MAX_WIDTH_PX' | i18n: config()?.language\"\n                 [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\n        </mat-form-field>\n\n        <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\n          <mat-label>{{ 'MAX_HEIGHT_PX' | i18n: config()?.language }}</mat-label>\n          <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"'MAX_HEIGHT_PX' | i18n: config()?.language\"\n                 [(ngModel)]='maxHeight' type='number' [min]='0' [max]='2000'>\n        </mat-form-field>\n      </div>\n\n      <p class='item-panel fw-600'>{{ 'FORMAT' | i18n: config()?.language }}</p>\n      <div class='formats-selection'>\n        <mat-form-field class='w-100 mw-100' [appearance]='appearance' [color]='color'>\n          <mat-select [formControl]='format' (selectionChange)='onChangeFormat()'>\n            <mat-option *ngFor='let format of allFormats' [value]='format'>\n              {{ format }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <div class='refresh-container'>\n        <mat-checkbox (change)='onCropStateChange()' [formControl]='showCrop' [color]='color'>\n          <p class='item-panel fw-600'>{{ 'CROP' | i18n: config()?.language }}</p>\n        </mat-checkbox>\n        <div class='d-flex '>\n          <button class='float-right' mat-icon-button [color]='color' (click)='onRestore()'>\n            <mat-icon>refresh</mat-icon>\n          </button>\n          <p *ngIf='showCrop.value'>\n            <button mat-icon-button [color]='color' (click)='onCrop()'>\n              <mat-icon>crop</mat-icon>\n            </button>\n          </p>\n        </div>\n      </div>\n\n      <ng-container *ngIf='showCrop.value'>\n        <div class='dimension-container'>\n          <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\n            <mat-label>{{ 'WIDTH_PX' | i18n: config()?.language }}</mat-label>\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"'WIDTH_PX' | i18n: config()?.language\"\n                   [formControl]='cropWidth' type='number' [min]='0' [max]='2000'>\n          </mat-form-field>\n          <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\n            <mat-label>{{ 'HEIGHT_PX' | i18n: config()?.language }}</mat-label>\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"'HEIGHT_PX' | i18n: config()?.language\"\n                   [formControl]='cropHeight' type='number' [min]='0' [max]='2000'>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <div class='save-container'>\n        <button mat-flat-button (click)='onCloseEditPanel()' [color]='color' class='save-button'>\n          {{ 'SAVE' | i18n: config()?.language}}\n        </button>\n\n        <p *ngIf='imageSrc()?.length' class='mat-caption image-caption'\n           [class.warn]='(imageSrc()?.length | calculateSize) > 200'\n           [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\n          {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".d-none{display:none}.d-flex{display:flex}.fw-600{font-weight:600}.w-100{width:100%}.mw-100{max-width:100%}.w-48{width:48%}.mw-48{max-width:48%}.float-right{float:right}p{margin:0!important;padding:0!important}.place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}.place-image .image-holder{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;width:320px;height:240px;border-radius:16px;max-width:100%!important;background-color:#fff}@media (max-width: 599px){.place-image .image-holder{max-width:100%!important;max-height:250px!important}}.place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .image-holder-loaded{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;max-width:100%!important;width:320px;height:240px;border-radius:4px;padding:2px}.place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}.place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:contain;object-position:center}@media (max-width: 599px){.place-image .image-holder-loaded{max-height:195px!important}}.place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .editing-bar-btn{margin-top:2px;display:flex;flex-direction:row;box-sizing:border-box;place-content:flex-start;align-items:flex-start}.place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}.place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}.place-image .editing-bar-btn button{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.place-image .editing-bar-btn a{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}.popup .popup-clear{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-end;align-items:center}.popup .image-container{margin-top:50px;margin-bottom:50px;height:calc(100vh - 188px);min-height:calc(100vh - 188px);min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}.popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}.popup img{max-height:600px;max-width:100%;object-fit:contain;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){.popup{background-color:#000000d9;padding:8px}.popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){.popup img{margin:0}}.popup .control-panel{color:#000;background-color:#fff;margin:8px;padding:16px;max-width:100%;width:18rem;border-radius:8px;flex-direction:column;box-sizing:border-box;display:flex;place-content:stretch flex-start;align-items:stretch}@media (max-width: 599px){.popup .control-panel{margin:8px 0;width:100%}}.popup .control-panel .title-panel{padding:0 4px;font-size:16px;margin-bottom:16px!important}.popup .control-panel .item-panel{padding:0 4px!important;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:4px}.popup .control-panel .formats-selection{margin-top:8px!important;flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .max-dimension-container{margin-top:16px!important;flex-flow:row;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .dimension-container{margin-top:8px!important;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .save-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center}.popup .control-panel .save-container .save-button{padding:0 8px;height:34px;box-sizing:border-box;font-weight:600}.popup .control-panel .quality-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .refresh-container{display:flex;justify-content:space-between;align-items:center}.popup .control-panel .refresh-container div{display:flex;align-items:center}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}.mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.mat-select-panel{background:white!important}input.mat-input-element{color:#000000d9}.mat-checkbox-background{background-color:#fff}.image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid white;box-sizing:border-box;resize:both;overflow:auto;opacity:0}.image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}.image-cropper #image-cropper-header mat-icon{color:#fff}.btn{padding:4px 8px;border-radius:4px;cursor:pointer}.btn mat-icon{color:#000000d1}\n"] }]
+                        PipesModule
+                    ], template: "<div *ngIf='!loadImage()' class='place-image'>\r\n  <div class='image-holder'\r\n       [ngStyle]='{ width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\r\n    <button [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\" class='image-upload-btn' mat-icon-button\r\n            (click)='onUpload($event)'>\r\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n    </button>\r\n    <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf='loadImage()' class='place-image'>\r\n  <div class='image-holder-loaded'\r\n       [ngStyle]='{width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\r\n    <img [src]='imageSrc()' alt='image-loaded' [ngStyle]='{ borderRadius: config()?.borderRadius }'>\r\n    <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n  </div>\r\n  <p *ngIf='imageSrc()?.length' class='mat-caption image-caption' [class.warn]='(imageSrc()?.length | calculateSize) > 200'\r\n     [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\r\n    {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\r\n  </p>\r\n\r\n  <div class='editing-bar-btn'>\r\n    <button id='upload-img' *ngIf='!config()?.hideAddBtn' mat-icon-button (click)='onUpload($event)'\r\n            [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\">\r\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n    </button>\r\n    <button id='edit-img' *ngIf='!config()?.hideEditBtn && !noEdit()' mat-icon-button (click)='showEditPanel.set(true)'\r\n            [matTooltip]=\"'OPEN_EDITOR_PANEL' | i18n: config()?.language\">\r\n      <mat-icon class='mat-18'>edit</mat-icon>\r\n    </button>\r\n    <a id='download-img' *ngIf='!config()?.hideDownloadBtn' [matTooltip]=\"'DOWNLOAD' | i18n: config()?.language\"\r\n       [href]='imageSrc()' mat-icon-button [download]='imageName'>\r\n      <mat-icon class='mat-18'>cloud_download</mat-icon>\r\n    </a>\r\n    <button id='delete-img' *ngIf='!config()?.hideDeleteBtn' mat-icon-button (click)='onRemove()'\r\n            [matTooltip]=\"'REMOVE' | i18n: config()?.language\">\r\n      <mat-icon class='mat-18'>delete</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf='showEditPanel()' id='popup' class='popup'>\r\n  <div class='popup-clear'>\r\n    <button mat-icon-button (click)='onCloseEditPanel()'>\r\n      <mat-icon class='mat-18'>clear</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class='image-container'>\r\n    <div class='image-holder-full'>\r\n      <img id='image-full' [src]='imageSrc()' alt=''>\r\n      <div id='image-cropper' class='image-cropper'>\r\n        <div id='image-cropper-header'>\r\n          <mat-icon>drag_indicator</mat-icon>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class='control-panel'>\r\n      <p class='item-panel fw-600'>{{ 'QUALITY' | i18n: config()?.language }}</p>\r\n      <div class='quality-container'>\r\n        <mat-slider ngDefaultControl [color]='color' class='w-100 mw-100' (change)='onChangeQuality()'\r\n                    [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\r\n          <input matSliderThumb [formControl]='quality'>\r\n        </mat-slider>\r\n      </div>\r\n\r\n      <div class='item-panel'>\r\n        <span class='fw-600'>{{ 'MAX_DIMENSIONS' | i18n: config()?.language }}</span>\r\n        <mat-checkbox class='float-right' [formControl]='maintainAspectRatio' [color]='color'>\r\n          <span>{{ 'ASPECT_RATIO' | i18n: config()?.language }}</span>\r\n        </mat-checkbox>\r\n      </div>\r\n\r\n      <div class='max-dimension-container'>\r\n        <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\r\n          <mat-label>{{ 'MAX_WIDTH_PX' | i18n: config()?.language }}</mat-label>\r\n          <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"'MAX_WIDTH_PX' | i18n: config()?.language\"\r\n                 [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\r\n          <mat-label>{{ 'MAX_HEIGHT_PX' | i18n: config()?.language }}</mat-label>\r\n          <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"'MAX_HEIGHT_PX' | i18n: config()?.language\"\r\n                 [(ngModel)]='maxHeight' type='number' [min]='0' [max]='2000'>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <p class='item-panel fw-600'>{{ 'FORMAT' | i18n: config()?.language }}</p>\r\n      <div class='formats-selection'>\r\n        <mat-form-field class='w-100 mw-100' [appearance]='appearance' [color]='color'>\r\n          <mat-select [formControl]='format' (selectionChange)='onChangeFormat()'>\r\n            <mat-option *ngFor='let format of allFormats' [value]='format'>\r\n              {{ format }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class='refresh-container'>\r\n        <mat-checkbox (change)='onCropStateChange()' [formControl]='showCrop' [color]='color'>\r\n          <p class='item-panel fw-600'>{{ 'CROP' | i18n: config()?.language }}</p>\r\n        </mat-checkbox>\r\n        <div class='d-flex '>\r\n          <button class='float-right' mat-icon-button [color]='color' (click)='onRestore()'>\r\n            <mat-icon>refresh</mat-icon>\r\n          </button>\r\n          <p *ngIf='showCrop.value'>\r\n            <button mat-icon-button [color]='color' (click)='onCrop()'>\r\n              <mat-icon>crop</mat-icon>\r\n            </button>\r\n          </p>\r\n        </div>\r\n      </div>\r\n\r\n      <ng-container *ngIf='showCrop.value'>\r\n        <div class='dimension-container'>\r\n          <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\r\n            <mat-label>{{ 'WIDTH_PX' | i18n: config()?.language }}</mat-label>\r\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"'WIDTH_PX' | i18n: config()?.language\"\r\n                   [formControl]='cropWidth' type='number' [min]='0' [max]='2000'>\r\n          </mat-form-field>\r\n          <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\r\n            <mat-label>{{ 'HEIGHT_PX' | i18n: config()?.language }}</mat-label>\r\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"'HEIGHT_PX' | i18n: config()?.language\"\r\n                   [formControl]='cropHeight' type='number' [min]='0' [max]='2000'>\r\n          </mat-form-field>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div class='save-container'>\r\n        <button mat-flat-button (click)='onCloseEditPanel()' [color]='color' class='save-button'>\r\n          {{ 'SAVE' | i18n: config()?.language}}\r\n        </button>\r\n\r\n        <p *ngIf='imageSrc()?.length' class='mat-caption image-caption'\r\n           [class.warn]='(imageSrc()?.length | calculateSize) > 200'\r\n           [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\r\n          {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".d-none{display:none}.d-flex{display:flex}.fw-600{font-weight:600}.w-100{width:100%}.mw-100{max-width:100%}.w-48{width:48%}.mw-48{max-width:48%}.float-right{float:right}p{margin:0!important;padding:0!important}.place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}.place-image .image-holder{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;width:320px;height:240px;border-radius:16px;max-width:100%!important;background-color:#fff}@media (max-width: 599px){.place-image .image-holder{max-width:100%!important;max-height:250px!important}}.place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .image-holder-loaded{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;max-width:100%!important;width:320px;height:240px;border-radius:4px;padding:2px}.place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}.place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:contain;object-position:center}@media (max-width: 599px){.place-image .image-holder-loaded{max-height:195px!important}}.place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .editing-bar-btn{margin-top:2px;display:flex;flex-direction:row;box-sizing:border-box;place-content:flex-start;align-items:flex-start}.place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}.place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}.place-image .editing-bar-btn button{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.place-image .editing-bar-btn a{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}.popup .popup-clear{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-end;align-items:center}.popup .image-container{margin-top:50px;margin-bottom:50px;height:calc(100vh - 188px);min-height:calc(100vh - 188px);min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}.popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}.popup img{max-height:600px;max-width:100%;object-fit:contain;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){.popup{background-color:#000000d9;padding:8px}.popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){.popup img{margin:0}}.popup .control-panel{color:#000;background-color:#fff;margin:8px;padding:16px;max-width:100%;width:18rem;border-radius:8px;flex-direction:column;box-sizing:border-box;display:flex;place-content:stretch flex-start;align-items:stretch}@media (max-width: 599px){.popup .control-panel{margin:8px 0;width:100%}}.popup .control-panel .title-panel{padding:0 4px;font-size:16px;margin-bottom:16px!important}.popup .control-panel .item-panel{padding:0 4px!important;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:4px}.popup .control-panel .formats-selection{margin-top:8px!important;flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .max-dimension-container{margin-top:16px!important;flex-flow:row;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .dimension-container{margin-top:8px!important;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .save-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center}.popup .control-panel .save-container .save-button{padding:0 8px;height:34px;box-sizing:border-box;font-weight:600}.popup .control-panel .quality-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .refresh-container{display:flex;justify-content:space-between;align-items:center}.popup .control-panel .refresh-container div{display:flex;align-items:center}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}.mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.mat-select-panel{background:white!important}input.mat-input-element{color:#000000d9}.mat-checkbox-background{background-color:#fff}.image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid white;box-sizing:border-box;resize:both;overflow:auto;opacity:0}.image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}.image-cropper #image-cropper-header mat-icon{color:#fff}.btn{padding:4px 8px;border-radius:4px;cursor:pointer}.btn mat-icon{color:#000000d1}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { appearance: [{
                 type: Input
             }], color: [{