@guajiritos/image-picker 0.0.1

package/fesm2020/guajiritos-image-picker.mjs

@@ -0,0 +1,630 @@
+import * as i0 from '@angular/core';
+import { Pipe, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, Output, NgModule } from '@angular/core';
+import { ResizeObserver } from 'resize-observer';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/legacy-button';
+import { MatLegacyButtonModule } from '@angular/material/legacy-button';
+import * as i4 from '@angular/material/legacy-tooltip';
+import { MatLegacyTooltipModule } from '@angular/material/legacy-tooltip';
+import * as i5 from '@angular/material/legacy-slider';
+import { MatLegacySliderModule } from '@angular/material/legacy-slider';
+import * as i6 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i7 from '@angular/material/legacy-form-field';
+import { MatLegacyFormFieldModule } from '@angular/material/legacy-form-field';
+import * as i8 from '@angular/material/legacy-select';
+import { MatLegacySelectModule } from '@angular/material/legacy-select';
+import * as i9 from '@angular/material/legacy-core';
+import * as i10 from '@angular/material/legacy-input';
+import { MatLegacyInputModule } from '@angular/material/legacy-input';
+import * as i11 from '@angular/material/legacy-checkbox';
+import { MatLegacyCheckboxModule } from '@angular/material/legacy-checkbox';
+
+class CalculateSizePipe {
+    transform(imageLength) {
+        if (!imageLength) {
+            return;
+        }
+        if (imageLength) {
+            return Math.ceil(((3 / 4) * imageLength) / 1024);
+        }
+        else {
+            return;
+        }
+    }
+}
+CalculateSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: CalculateSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CalculateSizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: CalculateSizePipe, name: "calculateSize" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: CalculateSizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'calculateSize'
+                }]
+        }] });
+
+class GuajiritosImagePickerComponent {
+    constructor(_cdRef) {
+        this._cdRef = _cdRef;
+        this.observer = null;
+        this.labelEn = {
+            'Upload a image': 'Upload a image',
+            'You must edit the image in order to resize it': 'You must edit the image in order to resize it',
+            'too large': 'too large',
+            'Open the editor panel': 'Open the editor panel',
+            'Download the image': 'Download the image',
+            'Control Panel': 'Control Panel',
+            Quality: 'Quality',
+            'Max dimensions': 'Max dimensions',
+            'aspect-ratio': 'aspect-ratio',
+            'max-width(px)': 'max-width(px)',
+            'max-height(px)': 'max-height(px)',
+            Format: 'Format',
+            Crop: 'Crop',
+            'width(px)': 'width(px)',
+            'height(px)': 'height(px)',
+            Remove: 'Remove',
+        };
+        this.labelEs = {
+            'Upload a image': 'Suba una imagen',
+            'You must edit the image in order to resize it': 'Debe editar la imagen para disminuir su tamaño',
+            'too large': 'muy grande',
+            'Open the editor panel': 'Abra el panel de edición',
+            'Download the image': 'Descarge la imagen',
+            'Control Panel': 'Panel de control',
+            Remove: 'Quitar',
+            Quality: 'Calidad',
+            'Max dimensions': 'Dimensiones',
+            'aspect-ratio': 'relación-aspecto',
+            'max-width(px)': 'max. ancho',
+            'max-height(px)': 'max. alto',
+            Format: 'Formato',
+            Crop: 'Recortar',
+            'width(px)': 'ancho(px)',
+            'height(px)': 'altura(px)',
+        };
+        this.labelFr = {
+            'Upload a image': 'Charger une image',
+            'You must edit the image in order to resize it': 'Vous devez éditer l\'image pour changer sa taille',
+            'too large': 'Trop grande',
+            'Open the editor panel': 'Ouvrir le panneau d\'édition',
+            'Download the image': 'Télécharger l\'image',
+            'Control Panel': 'Panneau de commande',
+            Remove: 'Supprimer',
+            Quality: 'Qualité',
+            'Max dimensions': 'Dimensions maximales',
+            'aspect-ratio': 'rapport de forme',
+            'max-width(px)': 'largeur max.',
+            'max-height(px)': 'hauteur max',
+            Format: 'Format',
+            Crop: 'Recadrer',
+            'width(px)': 'largeur(px)',
+            'height(px)': 'hauteur(px)',
+        };
+        this.arrayCopiedImages = [];
+        this.config = {
+            height: '240px',
+            width: '320px',
+            borderRadius: '16px',
+            compressInitial: true,
+            language: 'en',
+            hideDeleteBtn: false,
+            hideDownloadBtn: false,
+            hideEditBtn: false,
+            hideAddBtn: false,
+        };
+        this.showCrop = false;
+        this.loadImage = false;
+        this.uuidFilePicker = Date.now().toString(20);
+        this.showEditPanel = false;
+        this.quality = 92;
+        this.format = 'jpeg';
+        this.allFormats = ['webp', 'jpeg', 'png'];
+        this.maxHeight = 2000;
+        this.maxWidth = 2000;
+        this.cropHeight = 150;
+        this.cropWidth = 150;
+        this.maintainAspectRatio = true;
+        this.imageName = 'download';
+        this.appearance = 'outline';
+        this.color = 'primary';
+        this.imagesAllowed = 'image/*';
+        this.$imageChanged = new EventEmitter();
+        this.$imageOriginal = new EventEmitter();
+        this.labels = this.labelEn;
+    }
+    set _imageSrc(value) {
+        if (value) {
+            this.parseToBase64(value).then((dataUri) => {
+                this.imageSrc = dataUri;
+                this.arrayCopiedImages = [];
+                this.arrayCopiedImages.push(this.imageSrc);
+                this.originImageSrc = value;
+                this.lastOriginSrc = value;
+                this.$imageOriginal.next(this.originImageSrc);
+                this.loadImage = true;
+                this._cdRef.markForCheck();
+            });
+        }
+        else {
+            this.imageSrc = null;
+            this.originImageSrc = null;
+            this.loadImage = false;
+            this.arrayCopiedImages = [];
+            this.lastOriginSrc = null;
+            this.$imageOriginal.next(null);
+            this.format = 'jpeg';
+            this.maxHeight = 2000;
+            this.maxWidth = 2000;
+            this.cropHeight = 150;
+            this.cropWidth = 150;
+            this.maintainAspectRatio = true;
+            this.showEditPanel = false;
+            this._cdRef.markForCheck();
+        }
+    }
+    set _config(value) {
+        if (value && value.constructor == Object) {
+            this.config = { ...this.config, ...value };
+            if (value?.language !== undefined) {
+                if (value.language === 'en') {
+                    this.labels = { ...this.labelEn };
+                }
+                if (value.language === 'es') {
+                    this.labels = { ...this.labelEs };
+                }
+                if (value.language === 'fr') {
+                    this.labels = { ...this.labelFr };
+                }
+            }
+        }
+    }
+    async handleReaderLoaded(readerEvt) {
+        const binaryString = readerEvt.target.result;
+        const base64textString = btoa(binaryString);
+        this.originImageSrc = this.urlImage + base64textString;
+        this.lastOriginSrc = this.urlImage + base64textString;
+        if (this.config?.compressInitial) {
+            this.quality = 92;
+            const input = {
+                dataType: this.format,
+                quality: 0.92,
+                maintainRatio: true,
+            };
+            this.imageSrc = await this.resizeDataURL(this.urlImage + base64textString, input);
+        }
+        else {
+            this.imageSrc = this.urlImage + base64textString;
+            this.arrayCopiedImages = [];
+            this.arrayCopiedImages.push({
+                lastImage: this.imageSrc,
+                width: this.maxWidth,
+                height: this.maxHeight,
+                quality: this.quality,
+            });
+            this.$imageOriginal.next(this.imageSrc);
+        }
+        this.$imageChanged.next(this.imageSrc);
+        this.loadImage = true;
+    }
+    parseToBase64(imageUrl) {
+        let types = imageUrl.split('.');
+        let type = types[types.length - 1];
+        if (!type || (type !== 'png' && type !== 'jpeg' && type !== 'webp')) {
+            type = 'jpeg';
+        }
+        this.format = type;
+        return new Promise((resolve) => {
+            let img = document.createElement('img');
+            img.crossOrigin = 'Anonymous';
+            img.src = imageUrl;
+            this.maxHeight = img?.height;
+            this.maxWidth = img?.width;
+            img.onload = function () {
+                let canvas = document.createElement('canvas');
+                let ctx = canvas.getContext('2d');
+                let ratio = 1.0;
+                canvas.width = img?.width * ratio;
+                canvas.height = img?.height * ratio;
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                let dataURI = canvas.toDataURL(`image/${type}`, 0.92);
+                return resolve({
+                    dataUri: dataURI,
+                    width: canvas.width,
+                    height: canvas.height,
+                });
+            };
+        }).then((data) => {
+            this.maxHeight = data?.height;
+            this.maxWidth = data?.width;
+            return data?.dataUri;
+        });
+    }
+    async resizeDataURL(datas, input) {
+        return await new Promise(async function (resolve) {
+            let img = document.createElement('img');
+            img.src = datas + '';
+            img.crossOrigin = 'Anonymous';
+            let quality = input.quality ? input.quality : 1.0;
+            let maintainRatio = input.maintainRatio != undefined ? input.maintainRatio : true;
+            img.onload = function () {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                let ratio = img.width / img.height;
+                let width = input.width ? input.width : img.width;
+                let height = input.height ? input.height : img.height;
+                if (maintainRatio) {
+                    if (input.changeHeight) {
+                        canvas.width = height * ratio;
+                        canvas.height = height;
+                    }
+                    else {
+                        canvas.width = width;
+                        canvas.height = width / ratio;
+                    }
+                }
+                else {
+                    canvas.width = width;
+                    canvas.height = height;
+                }
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                let type = input.dataType ? input.dataType : 'webp';
+                const dataURI = canvas.toDataURL(`image/${type}`, quality);
+                resolve({
+                    dataUri: dataURI,
+                    width: canvas.width,
+                    height: canvas.height,
+                });
+            };
+        }).then((data) => {
+            this.maxHeight = data?.height;
+            this.maxWidth = data?.width;
+            if (this.arrayCopiedImages?.length <= 20) {
+                this.arrayCopiedImages.push({
+                    lastImage: data?.dataUri,
+                    width: this.maxWidth,
+                    height: this.maxHeight,
+                    quality: this.quality,
+                });
+            }
+            return data.dataUri;
+        });
+    }
+    wait(ms) {
+        ms = ms ? ms : 1000;
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                return resolve(true);
+            }, ms);
+        });
+    }
+    dragElement(element) {
+        let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+        if (document.getElementById(element.id + '-header')) {
+            document.getElementById(element.id + '-header').onmousedown = dragMouseDown;
+            document.getElementById(element.id + '-header').ontouchstart = dragMouseDown;
+        }
+        else {
+            element.onmousedown = dragMouseDown;
+            element.ontouchstart = dragMouseDown;
+        }
+        function dragMouseDown(e) {
+            e = e || window.event;
+            e.preventDefault();
+            pos3 = e.clientX;
+            pos4 = e.clientY;
+            document.onmouseup = closeDragElement;
+            document.ontouchend = closeDragElement;
+            document.onmousemove = elementDrag;
+            document.ontouchmove = elementDrag;
+        }
+        function elementDrag(e) {
+            let holderImage = document.getElementById('image-full');
+            e = e || window.event;
+            e.preventDefault();
+            pos1 = pos3 - e.clientX;
+            pos2 = pos4 - e.clientY;
+            pos3 = e.clientX;
+            pos4 = e.clientY;
+            const newTop = element.offsetTop - pos2;
+            const newLeft = element.offsetLeft - pos1;
+            const rectHolder = holderImage.getBoundingClientRect();
+            const rectElement = element.getBoundingClientRect();
+            if (newTop >= rectHolder.y + 8) {
+                element.style.top = Math.min(newTop, rectHolder.y + rectHolder.height - rectElement.height - 4) + 'px';
+            }
+            if (newLeft > rectHolder.x + 4 && rectHolder.x + rectHolder.width > rectElement.x + rectElement.width + 2) {
+                element.style.left = Math.min(newLeft, rectHolder.x + rectHolder.width - rectElement.width - 4) + 'px';
+            }
+        }
+        function closeDragElement() {
+            document.onmouseup = null;
+            document.onmousemove = null;
+            document.ontouchend = null;
+            document.ontouchmove = null;
+        }
+    }
+    onUpload(event) {
+        event.preventDefault();
+        this.imagePicker.nativeElement.click();
+    }
+    handleFileSelect(evt) {
+        const files = evt.target?.files;
+        if (files) {
+            const file = files[0];
+            this.imageName = file.name.split('.')[0];
+            this.fileType = file.type;
+            this.urlImage = `data:${file.type};base64,`;
+            if (files && file) {
+                const reader = new FileReader();
+                reader.onload = this.handleReaderLoaded.bind(this);
+                reader.readAsBinaryString(file);
+            }
+        }
+    }
+    onCloseEditPanel() {
+        if (this.observer instanceof ResizeObserver) {
+            this.observer.unobserve(document.getElementById('image-cropper'));
+            this.observer.unobserve(document.getElementById('image-full'));
+        }
+        this.showCrop = false;
+        this.showEditPanel = false;
+    }
+    async onChangeQuality() {
+        const qualityItem = this.quality / 100;
+        this.maxHeight = this.maxHeight && +this.maxHeight ? this.maxHeight : 2000;
+        this.maxWidth = this.maxWidth && +this.maxWidth ? this.maxWidth : 2000;
+        await this.wait(250);
+        try {
+            const input = {
+                height: this.maxHeight,
+                width: this.maxWidth,
+                dataType: this.format,
+                quality: qualityItem,
+                maintainRatio: this.maintainAspectRatio,
+            };
+            this.imageSrc = await this.resizeDataURL(this.originImageSrc, input);
+            this.$imageChanged.next(this.imageSrc);
+            this.loadImage = true;
+        }
+        catch (error) {
+            this.loadImage = true;
+        }
+    }
+    async onChangeFormat() {
+        let qualityItem = this.quality / 100;
+        this.maxHeight = this.maxHeight && +this.maxHeight ? this.maxHeight : 2000;
+        this.maxWidth = this.maxWidth && +this.maxWidth ? this.maxWidth : 2000;
+        await this.wait(250);
+        try {
+            let input = {
+                height: this.maxHeight,
+                width: this.maxWidth,
+                dataType: this.format,
+                quality: qualityItem,
+                maintainRatio: this.maintainAspectRatio,
+            };
+            this.imageSrc = await this.resizeDataURL(this.originImageSrc, input);
+            this.$imageChanged.next(this.imageSrc);
+            this.loadImage = true;
+        }
+        catch (error) {
+            this.loadImage = true;
+        }
+    }
+    async onChangeSize(changeWidth, changeHeight) {
+        let qualityItem = this.quality / 100;
+        this.maxHeight = this.maxHeight && +this.maxHeight ? this.maxHeight : 2000;
+        this.maxWidth = this.maxWidth && +this.maxWidth ? this.maxWidth : 2000;
+        await this.wait(500);
+        try {
+            let input = {
+                height: this.maxHeight,
+                width: this.maxWidth,
+                dataType: this.format,
+                quality: qualityItem,
+                maintainRatio: this.maintainAspectRatio,
+                changeHeight: changeHeight,
+                changeWidth: changeWidth,
+            };
+            this.imageSrc = await this.resizeDataURL(this.originImageSrc, input);
+            this.$imageChanged.next(this.imageSrc);
+            this.loadImage = true;
+        }
+        catch (error) {
+            this.loadImage = true;
+        }
+    }
+    onChangeCrop() {
+        const cropper = document.getElementById('image-cropper');
+        cropper.style.width = this.cropWidth + 'px';
+        cropper.style.height = this.cropHeight + 'px';
+    }
+    onCropStateChange() {
+        const cropper = document.getElementById('image-cropper');
+        if (this.showCrop) {
+            cropper.style.opacity = '1.0';
+            this.dragElement(cropper);
+            this.observer = new ResizeObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (this.showEditPanel) {
+                        const elementCropper = document.getElementById('image-cropper');
+                        const rectHolder = document.getElementById('image-full').getBoundingClientRect();
+                        const rectElemnt = elementCropper.getBoundingClientRect();
+                        const maxWidth = rectHolder.x + rectHolder.width - rectElemnt.x - 4;
+                        const maxHeight = rectHolder.y + rectHolder.height - rectElemnt.y - 4;
+                        elementCropper.style.maxWidth = maxWidth + 'px';
+                        elementCropper.style.maxHeight = maxHeight + 'px';
+                        this.cropWidth = rectElemnt.width;
+                        this.cropHeight = rectElemnt.height;
+                        if (entry.target.id == 'image-full') {
+                            if (rectHolder.top > 0) {
+                                elementCropper.style.top = rectHolder.top + 4 + 'px';
+                            }
+                            elementCropper.style.left = rectHolder.left + 4 + 'px';
+                        }
+                    }
+                });
+            });
+            this.observer.observe(document.getElementById('image-cropper'));
+            this.observer.observe(document.getElementById('image-full'));
+        }
+        else {
+            cropper.style.opacity = '0.0';
+            if (this.observer instanceof ResizeObserver) {
+                this.observer.unobserve(document.getElementById('image-cropper'));
+                this.observer.unobserve(document.getElementById('image-full'));
+            }
+        }
+    }
+    onCrop(type) {
+        type = type ? type : this.format;
+        const cropper = document.getElementById('image-cropper');
+        const rectCropper = cropper.getBoundingClientRect();
+        const dataHolderRect = document.getElementById('image-full').getBoundingClientRect();
+        const canvas = document.createElement('canvas');
+        new Promise((resolve, reject) => {
+            let ctx = canvas.getContext('2d');
+            let image = new Image();
+            image.src = this.imageSrc;
+            image.onload = () => {
+                let ratio = image.height / dataHolderRect.height;
+                let newWidth = rectCropper.width * ratio;
+                let newHeight = rectCropper.height * ratio;
+                canvas.height = newHeight;
+                canvas.width = newWidth;
+                ctx.drawImage(image, Math.abs(rectCropper.x * ratio) - Math.abs(dataHolderRect.x * ratio), Math.abs(rectCropper.y * ratio) - Math.abs(dataHolderRect.y * ratio), newWidth, newHeight, 0, 0, newWidth, newHeight);
+                // ctx.drawImage(image, 90, 130, 50, 60, 10, 10, 50, 60);
+                resolve(canvas.toDataURL(`image/${type}`, 0.98));
+            };
+            image.onerror = (e) => {
+                reject(e);
+            };
+        })
+            .then((dataUri) => {
+            this.imageSrc = dataUri;
+            this.showCrop = false;
+            this.onCropStateChange();
+            this.maxWidth = canvas.width;
+            this.maxHeight = canvas.height;
+            this.lastOriginSrc = this.originImageSrc + '';
+            this.originImageSrc = dataUri;
+            this.$imageChanged.next(this.imageSrc);
+        })
+            .catch((e) => {
+            console.log(e);
+        });
+    }
+    onRestore() {
+        if (this.arrayCopiedImages.length) {
+            let lastState = this.arrayCopiedImages.pop();
+            this.imageSrc = lastState.lastImage;
+            this.maxWidth = lastState.width;
+            this.maxHeight = lastState.height;
+            this.originImageSrc = this.lastOriginSrc + '';
+        }
+        else {
+            this.imageSrc = this.lastOriginSrc;
+            this.originImageSrc = this.lastOriginSrc + '';
+        }
+        this.$imageChanged.next(this.imageSrc);
+    }
+    onRemove() {
+        this.imageSrc = null;
+        this.originImageSrc = null;
+        this.loadImage = false;
+        this.arrayCopiedImages = [];
+        this.lastOriginSrc = null;
+        this.$imageOriginal.next(null);
+        this.$imageChanged.next(null);
+        this.format = 'jpeg';
+        this.maxHeight = 2000;
+        this.maxWidth = 2000;
+        this.cropHeight = 150;
+        this.cropWidth = 150;
+        this.maintainAspectRatio = true;
+        this.showEditPanel = false;
+    }
+}
+GuajiritosImagePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GuajiritosImagePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+GuajiritosImagePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GuajiritosImagePickerComponent, 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]=\"labels['Upload a image']\" class='image-upload-btn' mat-icon-button (click)='onUpload($event)'>\r\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n    </button>\r\n    <input #imagePicker type='file' style='display: none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n  </div>\r\n</div>\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' style='display: 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'\r\n     [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\r\n    size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\r\n  </p>\r\n\r\n  <div class='editing-bar-btn'\r\n       style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n    <button id='upload-img' *ngIf='!config.hideAddBtn' mat-icon-button [matTooltip]=\"labels['Upload a image']\"\r\n            (click)='onUpload($event)'>\r\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n    </button>\r\n    <button id='edit-img' *ngIf='!config.hideEditBtn' mat-icon-button [matTooltip]=\"labels['Open the editor panel']\"\r\n            (click)='showEditPanel = true'>\r\n      <mat-icon class='mat-18'>edit</mat-icon>\r\n    </button>\r\n    <a id='download-img' *ngIf='!config.hideDownloadBtn' [matTooltip]=\"labels['Download the image']\"\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 [matTooltip]=\"labels['Remove']\"\r\n            (click)='onRemove()'>\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\r\n    style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center flex-end; align-items: center'>\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='title-panel'>{{ labels['Control Panel'] }}</p>\r\n\r\n      <p class='item-panel'>{{ labels['Quality'] }}</p>\r\n      <div\r\n        style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n        <mat-slider [color]='color' style='max-width: 100%; width: 100%' (change)='onChangeQuality()'\r\n                    [(ngModel)]='quality' [min]='0' [max]='100' [step]='1' [thumbLabel]='true'>\r\n        </mat-slider>\r\n      </div>\r\n\r\n      <p class='item-panel'>\r\n        {{ labels['Max dimensions'] }}\r\n        <mat-checkbox style='float: right' [(ngModel)]='maintainAspectRatio' [color]='color'>\r\n          <span class='mat-caption'>{{ labels['aspect-ratio'] }}</span>\r\n        </mat-checkbox>\r\n      </p>\r\n      <div\r\n        style='margin-top: 8px !important; flex-flow: row wrap; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\r\n        <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n                        [color]='color'>\r\n          <mat-label>{{ labels['max-width(px)'] }}</mat-label>\r\n          <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"labels['max-width(px)']\"\r\n                 [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n                        [color]='color'>\r\n          <mat-label>{{ labels['max-height(px)'] }}</mat-label>\r\n          <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"labels['max-height(px)']\"\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'>{{ labels['Format'] }}</p>\r\n      <div\r\n        style='margin-top: 8px !important; flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n        <mat-form-field class='no-input-style' style='max-width: 100%; width: 100%' [appearance]='appearance'\r\n                        [color]='color'>\r\n          <mat-select [(ngModel)]='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>\r\n        <mat-checkbox (change)='onCropStateChange()' [(ngModel)]='showCrop' [color]='color'>\r\n          <p class='item-panel'>{{ labels['Crop'] }}</p>\r\n        </mat-checkbox>\r\n        <button style='float: right' mat-icon-button [color]='color' (click)='onRestore()'>\r\n          <mat-icon>refresh</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <ng-container *ngIf='showCrop'>\r\n        <div\r\n          style='margin-top: 8px !important; flex-flow: row wrap; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\r\n          <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n                          [color]='color'>\r\n            <mat-label>{{ labels['width(px)'] }}</mat-label>\r\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"labels['width(px)']\"\r\n                   [(ngModel)]='cropWidth' type='number' [min]='0' [max]='2000'>\r\n          </mat-form-field>\r\n          <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n                          [color]='color'>\r\n            <mat-label>{{ labels['height(px)'] }}</mat-label>\r\n            <input (change)='onChangeCrop()' matInput\r\n                   [placeholder]=\"labels['height(px)']\" [(ngModel)]='cropHeight' type='number' [min]='0' [max]='2000'>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <p style='margin-bottom: 4px !important'>\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      </ng-container>\r\n\r\n      <div\r\n        style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center space-between; align-items: center'>\r\n        <button mat-flat-button (click)='onCloseEditPanel()' [color]='color'\r\n                style='padding: 0 8px; height: 34px; box-sizing: border-box;'>\r\n          Guardar\r\n        </button>\r\n\r\n        <p *ngIf='imageSrc?.length' class='mat-caption image-caption'\r\n           [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\r\n          size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["guachos-image-picker p{margin:0!important;padding:0!important}guachos-image-picker .place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}guachos-image-picker .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;border:2px rgba(0,0,0,.3) solid;background-color:#fcfcfc}@media (max-width: 599px){guachos-image-picker .place-image .image-holder{max-width:100%!important;max-height:250px!important}}guachos-image-picker .place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guachos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px;color:#424242}@media (max-width: 599px){guachos-image-picker .place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}guachos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guachos-image-picker .place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}guachos-image-picker .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}guachos-image-picker .place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}guachos-image-picker .place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:cover;object-position:center}@media (max-width: 599px){guachos-image-picker .place-image .image-holder-loaded{max-height:195px!important}}guachos-image-picker .place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guachos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px;color:#424242}@media (max-width: 599px){guachos-image-picker .place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}guachos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guachos-image-picker .place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}guachos-image-picker .place-image .editing-bar-btn{margin-top:2px}guachos-image-picker .place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}guachos-image-picker .place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}guachos-image-picker .place-image .editing-bar-btn button{margin:4px;color:#424242;transition:all .5s ease}guachos-image-picker .place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guachos-image-picker .place-image .editing-bar-btn a{margin:4px;color:#424242;transition:all .5s ease}guachos-image-picker .place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guachos-image-picker .popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;background-color:#000c;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}guachos-image-picker .popup .image-container{margin-top:50px;margin-bottom:50px;height:100%;min-height:100%;min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}guachos-image-picker .popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}guachos-image-picker .popup img{max-height:600px;max-width:100%;object-fit:cover;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){guachos-image-picker .popup{background-color:#000000d9;padding:8px}guachos-image-picker .popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){guachos-image-picker .popup img{margin:0}}guachos-image-picker .popup .control-panel{color:#fff;background-color:#000000eb;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){guachos-image-picker .popup .control-panel{margin:8px 0;width:100%}}guachos-image-picker .popup .control-panel .title-panel{padding:0 4px;font-size:17px;font-weight:500;margin-bottom:16px!important}guachos-image-picker .popup .control-panel .item-panel{padding:0 4px;font-size:14px;font-weight:500}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}guachos-image-picker .mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fafafa!important}guachos-image-picker .mat-select-panel{background:#fafafa!important}guachos-image-picker input.mat-input-element{color:#000000d9}guachos-image-picker .mat-checkbox-background{background-color:#fff}guachos-image-picker .image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid #fafafa;box-sizing:border-box;resize:both;overflow:auto;opacity:0}guachos-image-picker .image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}guachos-image-picker .image-cropper #image-cropper-header mat-icon{color:#fff}guachos-image-picker .btn{padding:4px 8px;border-radius:4px;cursor:pointer}guachos-image-picker .btn mat-icon{color:#000000d1}\n"], dependencies: [{ 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: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatLegacySlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLegacyLabel, selector: "mat-label" }, { kind: "component", type: i8.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i10.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i11.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: CalculateSizePipe, name: "calculateSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GuajiritosImagePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'guajiritos-image-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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]=\"labels['Upload a image']\" class='image-upload-btn' mat-icon-button (click)='onUpload($event)'>\r\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n    </button>\r\n    <input #imagePicker type='file' style='display: none' [id]=\"'filePicker-' + uuidFilePicker\"\r\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\r\n  </div>\r\n</div>\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' style='display: 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'\r\n     [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\r\n    size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\r\n  </p>\r\n\r\n  <div class='editing-bar-btn'\r\n       style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n    <button id='upload-img' *ngIf='!config.hideAddBtn' mat-icon-button [matTooltip]=\"labels['Upload a image']\"\r\n            (click)='onUpload($event)'>\r\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\r\n    </button>\r\n    <button id='edit-img' *ngIf='!config.hideEditBtn' mat-icon-button [matTooltip]=\"labels['Open the editor panel']\"\r\n            (click)='showEditPanel = true'>\r\n      <mat-icon class='mat-18'>edit</mat-icon>\r\n    </button>\r\n    <a id='download-img' *ngIf='!config.hideDownloadBtn' [matTooltip]=\"labels['Download the image']\"\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 [matTooltip]=\"labels['Remove']\"\r\n            (click)='onRemove()'>\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\r\n    style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center flex-end; align-items: center'>\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='title-panel'>{{ labels['Control Panel'] }}</p>\r\n\r\n      <p class='item-panel'>{{ labels['Quality'] }}</p>\r\n      <div\r\n        style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n        <mat-slider [color]='color' style='max-width: 100%; width: 100%' (change)='onChangeQuality()'\r\n                    [(ngModel)]='quality' [min]='0' [max]='100' [step]='1' [thumbLabel]='true'>\r\n        </mat-slider>\r\n      </div>\r\n\r\n      <p class='item-panel'>\r\n        {{ labels['Max dimensions'] }}\r\n        <mat-checkbox style='float: right' [(ngModel)]='maintainAspectRatio' [color]='color'>\r\n          <span class='mat-caption'>{{ labels['aspect-ratio'] }}</span>\r\n        </mat-checkbox>\r\n      </p>\r\n      <div\r\n        style='margin-top: 8px !important; flex-flow: row wrap; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\r\n        <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n                        [color]='color'>\r\n          <mat-label>{{ labels['max-width(px)'] }}</mat-label>\r\n          <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"labels['max-width(px)']\"\r\n                 [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n                        [color]='color'>\r\n          <mat-label>{{ labels['max-height(px)'] }}</mat-label>\r\n          <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"labels['max-height(px)']\"\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'>{{ labels['Format'] }}</p>\r\n      <div\r\n        style='margin-top: 8px !important; flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\r\n        <mat-form-field class='no-input-style' style='max-width: 100%; width: 100%' [appearance]='appearance'\r\n                        [color]='color'>\r\n          <mat-select [(ngModel)]='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>\r\n        <mat-checkbox (change)='onCropStateChange()' [(ngModel)]='showCrop' [color]='color'>\r\n          <p class='item-panel'>{{ labels['Crop'] }}</p>\r\n        </mat-checkbox>\r\n        <button style='float: right' mat-icon-button [color]='color' (click)='onRestore()'>\r\n          <mat-icon>refresh</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <ng-container *ngIf='showCrop'>\r\n        <div\r\n          style='margin-top: 8px !important; flex-flow: row wrap; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\r\n          <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n                          [color]='color'>\r\n            <mat-label>{{ labels['width(px)'] }}</mat-label>\r\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"labels['width(px)']\"\r\n                   [(ngModel)]='cropWidth' type='number' [min]='0' [max]='2000'>\r\n          </mat-form-field>\r\n          <mat-form-field class='no-input-style' style='max-width: 48%; width: 48%' [appearance]='appearance'\r\n                          [color]='color'>\r\n            <mat-label>{{ labels['height(px)'] }}</mat-label>\r\n            <input (change)='onChangeCrop()' matInput\r\n                   [placeholder]=\"labels['height(px)']\" [(ngModel)]='cropHeight' type='number' [min]='0' [max]='2000'>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <p style='margin-bottom: 4px !important'>\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      </ng-container>\r\n\r\n      <div\r\n        style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center space-between; align-items: center'>\r\n        <button mat-flat-button (click)='onCloseEditPanel()' [color]='color'\r\n                style='padding: 0 8px; height: 34px; box-sizing: border-box;'>\r\n          Guardar\r\n        </button>\r\n\r\n        <p *ngIf='imageSrc?.length' class='mat-caption image-caption'\r\n           [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\r\n          size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["guachos-image-picker p{margin:0!important;padding:0!important}guachos-image-picker .place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}guachos-image-picker .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;border:2px rgba(0,0,0,.3) solid;background-color:#fcfcfc}@media (max-width: 599px){guachos-image-picker .place-image .image-holder{max-width:100%!important;max-height:250px!important}}guachos-image-picker .place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guachos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px;color:#424242}@media (max-width: 599px){guachos-image-picker .place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}guachos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guachos-image-picker .place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}guachos-image-picker .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}guachos-image-picker .place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}guachos-image-picker .place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:cover;object-position:center}@media (max-width: 599px){guachos-image-picker .place-image .image-holder-loaded{max-height:195px!important}}guachos-image-picker .place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guachos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px;color:#424242}@media (max-width: 599px){guachos-image-picker .place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}guachos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guachos-image-picker .place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}guachos-image-picker .place-image .editing-bar-btn{margin-top:2px}guachos-image-picker .place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}guachos-image-picker .place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}guachos-image-picker .place-image .editing-bar-btn button{margin:4px;color:#424242;transition:all .5s ease}guachos-image-picker .place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guachos-image-picker .place-image .editing-bar-btn a{margin:4px;color:#424242;transition:all .5s ease}guachos-image-picker .place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guachos-image-picker .popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;background-color:#000c;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}guachos-image-picker .popup .image-container{margin-top:50px;margin-bottom:50px;height:100%;min-height:100%;min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}guachos-image-picker .popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}guachos-image-picker .popup img{max-height:600px;max-width:100%;object-fit:cover;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){guachos-image-picker .popup{background-color:#000000d9;padding:8px}guachos-image-picker .popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){guachos-image-picker .popup img{margin:0}}guachos-image-picker .popup .control-panel{color:#fff;background-color:#000000eb;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){guachos-image-picker .popup .control-panel{margin:8px 0;width:100%}}guachos-image-picker .popup .control-panel .title-panel{padding:0 4px;font-size:17px;font-weight:500;margin-bottom:16px!important}guachos-image-picker .popup .control-panel .item-panel{padding:0 4px;font-size:14px;font-weight:500}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}guachos-image-picker .mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fafafa!important}guachos-image-picker .mat-select-panel{background:#fafafa!important}guachos-image-picker input.mat-input-element{color:#000000d9}guachos-image-picker .mat-checkbox-background{background-color:#fff}guachos-image-picker .image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid #fafafa;box-sizing:border-box;resize:both;overflow:auto;opacity:0}guachos-image-picker .image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}guachos-image-picker .image-cropper #image-cropper-header mat-icon{color:#fff}guachos-image-picker .btn{padding:4px 8px;border-radius:4px;cursor:pointer}guachos-image-picker .btn mat-icon{color:#000000d1}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { appearance: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], imagesAllowed: [{
+                type: Input
+            }], imagePicker: [{
+                type: ViewChild,
+                args: ['imagePicker', { static: false }]
+            }], $imageChanged: [{
+                type: Output
+            }], $imageOriginal: [{
+                type: Output
+            }], _imageSrc: [{
+                type: Input
+            }], _config: [{
+                type: Input
+            }] } });
+
+class GuajiritosImagePickerModule {
+}
+GuajiritosImagePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GuajiritosImagePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GuajiritosImagePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: GuajiritosImagePickerModule, declarations: [GuajiritosImagePickerComponent, CalculateSizePipe], imports: [CommonModule,
+        MatIconModule,
+        MatLegacyButtonModule,
+        MatLegacyTooltipModule,
+        MatLegacySliderModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatLegacyFormFieldModule,
+        MatLegacySelectModule,
+        MatLegacyInputModule,
+        MatLegacyCheckboxModule], exports: [GuajiritosImagePickerComponent] });
+GuajiritosImagePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GuajiritosImagePickerModule, imports: [CommonModule,
+        MatIconModule,
+        MatLegacyButtonModule,
+        MatLegacyTooltipModule,
+        MatLegacySliderModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatLegacyFormFieldModule,
+        MatLegacySelectModule,
+        MatLegacyInputModule,
+        MatLegacyCheckboxModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GuajiritosImagePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GuajiritosImagePickerComponent, CalculateSizePipe],
+                    imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatLegacyButtonModule,
+                        MatLegacyTooltipModule,
+                        MatLegacySliderModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatLegacyFormFieldModule,
+                        MatLegacySelectModule,
+                        MatLegacyInputModule,
+                        MatLegacyCheckboxModule,
+                    ],
+                    exports: [GuajiritosImagePickerComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of guachos-image-picker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GuajiritosImagePickerComponent, GuajiritosImagePickerModule };
+//# sourceMappingURL=guajiritos-image-picker.mjs.map