@guajiritos/image-picker 0.0.6 → 0.0.7

package/fesm2015/guajiritos-image-picker.mjs

@@ -1,614 +0,0 @@
-import { __awaiter } from 'tslib';
-import * as i0 from '@angular/core';
-import { Pipe, NgModule, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, Output } from '@angular/core';
-import { ResizeObserver } from 'resize-observer';
-import { NgIf, NgStyle, NgForOf } from '@angular/common';
-import * as i1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/slider';
-import { MatSliderModule } from '@angular/material/slider';
-import * as i6 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i7 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i8 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i9 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i11 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { Subject } from 'rxjs';
-import * as i10 from '@angular/material/core';
-
-class CalculateSizePipe {
-    transform(imageLength) {
-        if (!imageLength) {
-            return 0;
-        }
-        if (imageLength) {
-            return Math.ceil(((3 / 4) * imageLength) / 1024);
-        }
-        else {
-            return 0;
-        }
-    }
-}
-CalculateSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalculateSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-CalculateSizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CalculateSizePipe, name: "calculateSize" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalculateSizePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'calculateSize'
-                }]
-        }] });
-
-class CalculateSizeModule {
-}
-CalculateSizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalculateSizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalculateSizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CalculateSizeModule, declarations: [CalculateSizePipe], exports: [CalculateSizePipe] });
-CalculateSizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalculateSizeModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CalculateSizeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CalculateSizePipe],
-                    exports: [CalculateSizePipe],
-                }]
-        }] });
-
-class GuajiritosImagePicker {
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-        this.unsubscribeAll$ = new Subject();
-        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',
-            save: 'Save',
-            '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': 'Descargue la imagen',
-            'Control Panel': 'Panel de control',
-            Remove: 'Quitar',
-            save: 'Guardar',
-            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.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.noEdit = 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.labels = this.labelEn;
-        this.appearance = 'outline';
-        this.color = 'primary';
-        this.imagesAllowed = 'image/*';
-        this.$imageChanged = new EventEmitter();
-        this.$imageOriginal = new EventEmitter();
-    }
-    set _imageSrc(image) {
-        if (image) {
-            let types = image.split('.');
-            this.format = types[types.length - 1];
-            if (!this.format || (this.format !== 'png' && this.format !== 'jpeg' && this.format !== 'webp')) {
-                this.format = 'jpeg';
-            }
-            this.imageSrc = image;
-            this.arrayCopiedImages = [];
-            this.arrayCopiedImages.push(this.imageSrc);
-            this.originImageSrc = image;
-            this.lastOriginSrc = image;
-            this.$imageOriginal.next(this.originImageSrc);
-            this.loadImage = true;
-            this.noEdit = true;
-            this._cdRef.detectChanges();
-        }
-        else {
-            this.imageSrc = null;
-            this.originImageSrc = null;
-            this.loadImage = false;
-            this.noEdit = 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.detectChanges();
-        }
-    }
-    set _config(value) {
-        if (value && value.constructor == Object) {
-            this.config = Object.assign(Object.assign({}, this.config), value);
-            if ((value === null || value === void 0 ? void 0 : value.language) !== undefined) {
-                if (value.language === 'es') {
-                    this.labels = Object.assign({}, this.labelEs);
-                }
-                if (value.language === 'en') {
-                    this.labels = Object.assign({}, this.labelEn);
-                }
-            }
-        }
-    }
-    handleReaderLoaded(readerEvt) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const binaryString = readerEvt.target.result;
-            const base64textString = btoa(binaryString);
-            this.originImageSrc = this.urlImage + base64textString;
-            this.lastOriginSrc = this.urlImage + base64textString;
-            if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.compressInitial) {
-                this.quality = 92;
-                const input = {
-                    dataType: this.format,
-                    quality: 0.92,
-                    maintainRatio: true,
-                };
-                this.imageSrc = yield 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;
-            this._cdRef.detectChanges();
-        });
-    }
-    resizeDataURL(datas, input) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield new Promise(function (resolve) {
-                var _a;
-                return __awaiter(this, void 0, void 0, function* () {
-                    let img = document.createElement('img');
-                    img.src = datas + '';
-                    img.crossOrigin = 'Anonymous';
-                    let quality = (_a = input === null || input === void 0 ? void 0 : input.quality) !== null && _a !== void 0 ? _a : 1.0;
-                    let maintainRatio = input.maintainRatio !== undefined ? input.maintainRatio : true;
-                    img.onload = function () {
-                        var _a, _b;
-                        const canvas = document.createElement('canvas');
-                        const ctx = canvas.getContext('2d');
-                        let ratio = img.width / img.height;
-                        let width = (_a = input === null || input === void 0 ? void 0 : input.width) !== null && _a !== void 0 ? _a : img.width;
-                        let height = (_b = input === null || input === void 0 ? void 0 : input.height) !== null && _b !== void 0 ? _b : 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 === null || ctx === void 0 ? void 0 : 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) => {
-                var _a;
-                this.maxHeight = data === null || data === void 0 ? void 0 : data.height;
-                this.maxWidth = data === null || data === void 0 ? void 0 : data.width;
-                if (((_a = this.arrayCopiedImages) === null || _a === void 0 ? void 0 : _a.length) <= 20) {
-                    this.arrayCopiedImages.push({
-                        lastImage: data === null || data === void 0 ? void 0 : 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;
-        let el = document.getElementById(element.id + '-header');
-        if (el) {
-            el.onmousedown = dragMouseDown;
-            el.ontouchstart = dragMouseDown;
-        }
-        else {
-            element.onmousedown = dragMouseDown;
-            element.ontouchstart = dragMouseDown;
-        }
-        function dragMouseDown(e) {
-            e = e || window.event;
-            e === null || e === void 0 ? void 0 : e.preventDefault();
-            pos3 = e === null || e === void 0 ? void 0 : e.clientX;
-            pos4 = e === null || e === void 0 ? void 0 : 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 === null || e === void 0 ? void 0 : e.preventDefault();
-            pos1 = pos3 - (e === null || e === void 0 ? void 0 : e.clientX);
-            pos2 = pos4 - (e === null || e === void 0 ? void 0 : e.clientY);
-            pos3 = e === null || e === void 0 ? void 0 : e.clientX;
-            pos4 = e === null || e === void 0 ? void 0 : 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) {
-        var _a;
-        event.preventDefault();
-        (_a = this.imagePicker) === null || _a === void 0 ? void 0 : _a.nativeElement.click();
-    }
-    handleFileSelect(evt) {
-        var _a, _b;
-        const files = (_a = evt === null || evt === void 0 ? void 0 : evt.target) === null || _a === void 0 ? void 0 : _a.files;
-        if (files) {
-            const file = files[0];
-            this.imageName = (_b = file === null || file === void 0 ? void 0 : file.name) === null || _b === void 0 ? void 0 : _b.split('.')[0];
-            this.fileType = file === null || file === void 0 ? void 0 : file.type;
-            this.urlImage = `data:${file === null || file === void 0 ? void 0 : file.type};base64,`;
-            this.noEdit = false;
-            this._cdRef.detectChanges();
-            if (files && file) {
-                const reader = new FileReader();
-                reader.onload = this.handleReaderLoaded.bind(this);
-                reader.readAsBinaryString(file);
-            }
-        }
-    }
-    onCloseEditPanel() {
-        if (this.observer instanceof ResizeObserver) {
-            let imageCropper = document.getElementById('image-cropper');
-            let imageFull = document.getElementById('image-full');
-            this.observer.unobserve(imageCropper);
-            this.observer.unobserve(imageFull);
-        }
-        this.showCrop = false;
-        this.showEditPanel = false;
-    }
-    onChangeQuality() {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            const qualityItem = this.quality / 100;
-            this.maxHeight = (_a = this.maxHeight) !== null && _a !== void 0 ? _a : 2000;
-            this.maxWidth = (_b = this.maxWidth) !== null && _b !== void 0 ? _b : 2000;
-            yield this.wait(250);
-            try {
-                const input = {
-                    height: this.maxHeight,
-                    width: this.maxWidth,
-                    dataType: this.format,
-                    quality: qualityItem,
-                    maintainRatio: this.maintainAspectRatio,
-                };
-                this.imageSrc = yield this.resizeDataURL(this.originImageSrc, input);
-                this.$imageChanged.next(this.imageSrc);
-                this.loadImage = true;
-                this._cdRef.detectChanges();
-            }
-            catch (error) {
-                this.loadImage = true;
-                this._cdRef.detectChanges();
-            }
-        });
-    }
-    onChangeFormat() {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            let qualityItem = this.quality / 100;
-            this.maxHeight = (_a = this.maxHeight) !== null && _a !== void 0 ? _a : 2000;
-            this.maxWidth = (_b = this.maxWidth) !== null && _b !== void 0 ? _b : 2000;
-            yield this.wait(250);
-            try {
-                let input = {
-                    height: this.maxHeight,
-                    width: this.maxWidth,
-                    dataType: this.format,
-                    quality: qualityItem,
-                    maintainRatio: this.maintainAspectRatio,
-                };
-                this.imageSrc = yield this.resizeDataURL(this.originImageSrc, input);
-                this.$imageChanged.next(this.imageSrc);
-                this.loadImage = true;
-                this._cdRef.detectChanges();
-            }
-            catch (error) {
-                this.loadImage = true;
-                this._cdRef.detectChanges();
-            }
-        });
-    }
-    onChangeSize(changeWidth, changeHeight) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            let qualityItem = this.quality / 100;
-            this.maxHeight = (_a = this.maxHeight) !== null && _a !== void 0 ? _a : 2000;
-            this.maxWidth = (_b = this.maxWidth) !== null && _b !== void 0 ? _b : 2000;
-            yield 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 = yield this.resizeDataURL(this.originImageSrc, input);
-                this.$imageChanged.next(this.imageSrc);
-                this.loadImage = true;
-                this._cdRef.detectChanges();
-            }
-            catch (error) {
-                this.loadImage = true;
-                this._cdRef.detectChanges();
-            }
-        });
-    }
-    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 elementFull = document.getElementById('image-full');
-                        const rectHolder = elementFull.getBoundingClientRect();
-                        const rectElement = elementCropper.getBoundingClientRect();
-                        const maxWidth = rectHolder.x + rectHolder.width - rectElement.x - 4;
-                        const maxHeight = rectHolder.y + rectHolder.height - rectElement.y - 4;
-                        elementCropper.style.maxWidth = maxWidth + 'px';
-                        elementCropper.style.maxHeight = maxHeight + 'px';
-                        this.cropWidth = rectElement.width;
-                        this.cropHeight = rectElement.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) {
-                const elementCropper = document.getElementById('image-cropper');
-                const elementFull = document.getElementById('image-full');
-                this.observer.unobserve(elementCropper);
-                this.observer.unobserve(elementFull);
-            }
-        }
-    }
-    onCrop(type) {
-        type = type !== null && type !== void 0 ? type : this.format;
-        const cropper = document.getElementById('image-cropper');
-        const elementFull = document.getElementById('image-full');
-        const rectCropper = cropper.getBoundingClientRect();
-        const dataHolderRect = elementFull.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 === null || ctx === void 0 ? void 0 : 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 + '';
-            this.noEdit = false;
-            this._cdRef.detectChanges();
-        }
-        else {
-            this.imageSrc = this.lastOriginSrc;
-            this.originImageSrc = this.lastOriginSrc + '';
-            this.noEdit = false;
-            this._cdRef.detectChanges();
-        }
-        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;
-        this.noEdit = false;
-        this._cdRef.detectChanges();
-    }
-    ngOnDestroy() {
-        this.unsubscribeAll$.next();
-        this.unsubscribeAll$.complete();
-    }
-}
-GuajiritosImagePicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GuajiritosImagePicker, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-GuajiritosImagePicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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]=\"labels['Upload a image']\" class='image-upload-btn' mat-icon-button (click)='onUpload($event)'>\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\n    </button>\n    <input #imagePicker type='file' style='display: none' [id]=\"'filePicker-' + uuidFilePicker\"\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n  </div>\n</div>\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' style='display: none' [id]=\"'filePicker-' + uuidFilePicker\"\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n  </div>\n  <p *ngIf='imageSrc?.length' class='mat-caption image-caption'\n     [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\n    size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\n  </p>\n\n  <div class='editing-bar-btn'\n       style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\n    <button id='upload-img' *ngIf='!config.hideAddBtn' mat-icon-button [matTooltip]=\"labels['Upload a image']\"\n            (click)='onUpload($event)'>\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 [matTooltip]=\"labels['Open the editor panel']\"\n            (click)='showEditPanel = true'>\n      <mat-icon class='mat-18'>edit</mat-icon>\n    </button>\n    <a id='download-img' *ngIf='!config.hideDownloadBtn' [matTooltip]=\"labels['Download the image']\"\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 [matTooltip]=\"labels['Remove']\"\n            (click)='onRemove()'>\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\n    style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center flex-end; align-items: center'>\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='title-panel'>{{ labels['Control Panel'] }}</p>\n\n      <p class='item-panel'>{{ labels['Quality'] }}</p>\n      <div\n        style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\n        <mat-slider ngDefaultControl [color]='color' style='max-width: 100%; width: 100%' (change)='onChangeQuality()'\n                    [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\n          <input matSliderThumb [(ngModel)]='quality'>\n        </mat-slider>\n      </div>\n\n      <div class='item-panel'>\n        <span>{{ labels['Max dimensions'] }}</span>\n        <mat-checkbox style='float: right' [(ngModel)]='maintainAspectRatio' [color]='color'>\n          <span class='mat-caption'>{{ labels['aspect-ratio'] }}</span>\n        </mat-checkbox>\n      </div>\n\n      <div\n        style='margin-top: 16px !important; flex-flow: row; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\n        <mat-form-field style='width: 48%' [appearance]='appearance' [color]='color'>\n          <mat-label>{{ labels['max-width(px)'] }}</mat-label>\n          <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"labels['max-width(px)']\"\n                 [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\n        </mat-form-field>\n\n        <mat-form-field style='width: 48%' [appearance]='appearance'\n                        [color]='color'>\n          <mat-label>{{ labels['max-height(px)'] }}</mat-label>\n          <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"labels['max-height(px)']\"\n                 [(ngModel)]='maxHeight' type='number' [min]='0' [max]='2000'>\n        </mat-form-field>\n      </div>\n\n      <p class='item-panel'>{{ labels['Format'] }}</p>\n      <div\n        style='margin-top: 8px !important; flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\n        <mat-form-field style='max-width: 100%; width: 100%' [appearance]='appearance'\n                        [color]='color'>\n          <mat-select [(ngModel)]='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>\n        <mat-checkbox (change)='onCropStateChange()' [(ngModel)]='showCrop' [color]='color'>\n          <p class='item-panel'>{{ labels['Crop'] }}</p>\n        </mat-checkbox>\n        <button style='float: right' mat-icon-button [color]='color' (click)='onRestore()'>\n          <mat-icon>refresh</mat-icon>\n        </button>\n      </div>\n\n      <ng-container *ngIf='showCrop'>\n        <div\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'>\n          <mat-form-field style='max-width: 48%; width: 48%' [appearance]='appearance'\n                          [color]='color'>\n            <mat-label>{{ labels['width(px)'] }}</mat-label>\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"labels['width(px)']\"\n                   [(ngModel)]='cropWidth' type='number' [min]='0' [max]='2000'>\n          </mat-form-field>\n          <mat-form-field style='max-width: 48%; width: 48%' [appearance]='appearance'\n                          [color]='color'>\n            <mat-label>{{ labels['height(px)'] }}</mat-label>\n            <input (change)='onChangeCrop()' matInput\n                   [placeholder]=\"labels['height(px)']\" [(ngModel)]='cropHeight' type='number' [min]='0' [max]='2000'>\n          </mat-form-field>\n        </div>\n\n        <p style='margin-bottom: 4px !important'>\n          <button mat-icon-button [color]='color' (click)='onCrop()'>\n            <mat-icon> crop</mat-icon>\n          </button>\n        </p>\n      </ng-container>\n\n      <div\n        style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center space-between; align-items: center'>\n        <button mat-flat-button (click)='onCloseEditPanel()' [color]='color'\n                style='padding: 0 8px; height: 34px; box-sizing: border-box;'>\n          {{labels['save']}}\n        </button>\n\n        <p *ngIf='imageSrc?.length' class='mat-caption image-caption'\n           [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\n          size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["guajiritos-image-picker p{margin:0!important;padding:0!important}guajiritos-image-picker .place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}guajiritos-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){guajiritos-image-picker .place-image .image-holder{max-width:100%!important;max-height:250px!important}}guajiritos-image-picker .place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:60px;height:60px;color:#424242;padding:0!important;box-sizing:border-box}guajiritos-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){guajiritos-image-picker .place-image .image-holder .image-upload-btn{opacity:1;width:40px;height:40px}guajiritos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guajiritos-image-picker .place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}guajiritos-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}guajiritos-image-picker .place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}guajiritos-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){guajiritos-image-picker .place-image .image-holder-loaded{max-height:195px!important}}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guajiritos-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){guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guajiritos-image-picker .place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn{margin-top:2px}guajiritos-image-picker .place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}guajiritos-image-picker .place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}guajiritos-image-picker .place-image .editing-bar-btn button{margin:4px;color:#424242;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guajiritos-image-picker .place-image .editing-bar-btn a{margin:4px;color:#424242;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guajiritos-image-picker .popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;background-color:#616161;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}guajiritos-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}guajiritos-image-picker .popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}guajiritos-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){guajiritos-image-picker .popup{background-color:#000000d9;padding:8px}guajiritos-image-picker .popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){guajiritos-image-picker .popup img{margin:0}}guajiritos-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){guajiritos-image-picker .popup .control-panel{margin:8px 0;width:100%}}guajiritos-image-picker .popup .control-panel .title-panel{padding:0 4px;font-size:17px;font-weight:500;margin-bottom:16px!important}guajiritos-image-picker .popup .control-panel .item-panel{padding:0 4px!important;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}guajiritos-image-picker .mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fafafa!important}guajiritos-image-picker .mat-select-panel{background:#fafafa!important}guajiritos-image-picker input.mat-input-element{color:#000000d9}guajiritos-image-picker .mat-checkbox-background{background-color:#fff}guajiritos-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}guajiritos-image-picker .image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}guajiritos-image-picker .image-cropper #image-cropper-header mat-icon{color:#fff}guajiritos-image-picker .btn{padding:4px 8px;border-radius:4px;cursor:pointer}guajiritos-image-picker .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: MatButtonModule }, { kind: "component", type: i1.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: i1.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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: CalculateSizeModule }, { kind: "pipe", type: CalculateSizePipe, name: "calculateSize" }, { 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: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { 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: MatSelectModule }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i11.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: i11.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i11.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GuajiritosImagePicker, decorators: [{
-            type: Component,
-            args: [{ selector: 'guajiritos-image-picker', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgIf,
-                        NgStyle,
-                        MatButtonModule,
-                        MatTooltipModule,
-                        MatIconModule,
-                        CalculateSizeModule,
-                        MatSliderModule,
-                        MatCheckboxModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        FormsModule,
-                        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]=\"labels['Upload a image']\" class='image-upload-btn' mat-icon-button (click)='onUpload($event)'>\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\n    </button>\n    <input #imagePicker type='file' style='display: none' [id]=\"'filePicker-' + uuidFilePicker\"\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n  </div>\n</div>\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' style='display: none' [id]=\"'filePicker-' + uuidFilePicker\"\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n  </div>\n  <p *ngIf='imageSrc?.length' class='mat-caption image-caption'\n     [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\n    size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\n  </p>\n\n  <div class='editing-bar-btn'\n       style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\n    <button id='upload-img' *ngIf='!config.hideAddBtn' mat-icon-button [matTooltip]=\"labels['Upload a image']\"\n            (click)='onUpload($event)'>\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 [matTooltip]=\"labels['Open the editor panel']\"\n            (click)='showEditPanel = true'>\n      <mat-icon class='mat-18'>edit</mat-icon>\n    </button>\n    <a id='download-img' *ngIf='!config.hideDownloadBtn' [matTooltip]=\"labels['Download the image']\"\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 [matTooltip]=\"labels['Remove']\"\n            (click)='onRemove()'>\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\n    style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center flex-end; align-items: center'>\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='title-panel'>{{ labels['Control Panel'] }}</p>\n\n      <p class='item-panel'>{{ labels['Quality'] }}</p>\n      <div\n        style='flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\n        <mat-slider ngDefaultControl [color]='color' style='max-width: 100%; width: 100%' (change)='onChangeQuality()'\n                    [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\n          <input matSliderThumb [(ngModel)]='quality'>\n        </mat-slider>\n      </div>\n\n      <div class='item-panel'>\n        <span>{{ labels['Max dimensions'] }}</span>\n        <mat-checkbox style='float: right' [(ngModel)]='maintainAspectRatio' [color]='color'>\n          <span class='mat-caption'>{{ labels['aspect-ratio'] }}</span>\n        </mat-checkbox>\n      </div>\n\n      <div\n        style='margin-top: 16px !important; flex-flow: row; box-sizing: border-box; display: flex; place-content: flex-start space-between; align-items: flex-start'>\n        <mat-form-field style='width: 48%' [appearance]='appearance' [color]='color'>\n          <mat-label>{{ labels['max-width(px)'] }}</mat-label>\n          <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"labels['max-width(px)']\"\n                 [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\n        </mat-form-field>\n\n        <mat-form-field style='width: 48%' [appearance]='appearance'\n                        [color]='color'>\n          <mat-label>{{ labels['max-height(px)'] }}</mat-label>\n          <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"labels['max-height(px)']\"\n                 [(ngModel)]='maxHeight' type='number' [min]='0' [max]='2000'>\n        </mat-form-field>\n      </div>\n\n      <p class='item-panel'>{{ labels['Format'] }}</p>\n      <div\n        style='margin-top: 8px !important; flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start'>\n        <mat-form-field style='max-width: 100%; width: 100%' [appearance]='appearance'\n                        [color]='color'>\n          <mat-select [(ngModel)]='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>\n        <mat-checkbox (change)='onCropStateChange()' [(ngModel)]='showCrop' [color]='color'>\n          <p class='item-panel'>{{ labels['Crop'] }}</p>\n        </mat-checkbox>\n        <button style='float: right' mat-icon-button [color]='color' (click)='onRestore()'>\n          <mat-icon>refresh</mat-icon>\n        </button>\n      </div>\n\n      <ng-container *ngIf='showCrop'>\n        <div\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'>\n          <mat-form-field style='max-width: 48%; width: 48%' [appearance]='appearance'\n                          [color]='color'>\n            <mat-label>{{ labels['width(px)'] }}</mat-label>\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"labels['width(px)']\"\n                   [(ngModel)]='cropWidth' type='number' [min]='0' [max]='2000'>\n          </mat-form-field>\n          <mat-form-field style='max-width: 48%; width: 48%' [appearance]='appearance'\n                          [color]='color'>\n            <mat-label>{{ labels['height(px)'] }}</mat-label>\n            <input (change)='onChangeCrop()' matInput\n                   [placeholder]=\"labels['height(px)']\" [(ngModel)]='cropHeight' type='number' [min]='0' [max]='2000'>\n          </mat-form-field>\n        </div>\n\n        <p style='margin-bottom: 4px !important'>\n          <button mat-icon-button [color]='color' (click)='onCrop()'>\n            <mat-icon> crop</mat-icon>\n          </button>\n        </p>\n      </ng-container>\n\n      <div\n        style='flex-direction: row; box-sizing: border-box; display: flex; place-content: center space-between; align-items: center'>\n        <button mat-flat-button (click)='onCloseEditPanel()' [color]='color'\n                style='padding: 0 8px; height: 34px; box-sizing: border-box;'>\n          {{labels['save']}}\n        </button>\n\n        <p *ngIf='imageSrc?.length' class='mat-caption image-caption'\n           [ngStyle]=\"{color: (imageSrc?.length | calculateSize) > 120 ? '#f44336' : 'unset',fontWeight: (imageSrc?.length | calculateSize) > 120 ? '500' : 'unset'}\">\n          size: {{ (imageSrc?.length | calculateSize) }}Kb &nbsp; {{ format }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["guajiritos-image-picker p{margin:0!important;padding:0!important}guajiritos-image-picker .place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}guajiritos-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){guajiritos-image-picker .place-image .image-holder{max-width:100%!important;max-height:250px!important}}guajiritos-image-picker .place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:60px;height:60px;color:#424242;padding:0!important;box-sizing:border-box}guajiritos-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){guajiritos-image-picker .place-image .image-holder .image-upload-btn{opacity:1;width:40px;height:40px}guajiritos-image-picker .place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guajiritos-image-picker .place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}guajiritos-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}guajiritos-image-picker .place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}guajiritos-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){guajiritos-image-picker .place-image .image-holder-loaded{max-height:195px!important}}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;color:#424242}guajiritos-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){guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}guajiritos-image-picker .place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}guajiritos-image-picker .place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn{margin-top:2px}guajiritos-image-picker .place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}guajiritos-image-picker .place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}guajiritos-image-picker .place-image .editing-bar-btn button{margin:4px;color:#424242;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guajiritos-image-picker .place-image .editing-bar-btn a{margin:4px;color:#424242;transition:all .5s ease}guajiritos-image-picker .place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}guajiritos-image-picker .popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;background-color:#616161;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}guajiritos-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}guajiritos-image-picker .popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}guajiritos-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){guajiritos-image-picker .popup{background-color:#000000d9;padding:8px}guajiritos-image-picker .popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){guajiritos-image-picker .popup img{margin:0}}guajiritos-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){guajiritos-image-picker .popup .control-panel{margin:8px 0;width:100%}}guajiritos-image-picker .popup .control-panel .title-panel{padding:0 4px;font-size:17px;font-weight:500;margin-bottom:16px!important}guajiritos-image-picker .popup .control-panel .item-panel{padding:0 4px!important;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}guajiritos-image-picker .mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fafafa!important}guajiritos-image-picker .mat-select-panel{background:#fafafa!important}guajiritos-image-picker input.mat-input-element{color:#000000d9}guajiritos-image-picker .mat-checkbox-background{background-color:#fff}guajiritos-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}guajiritos-image-picker .image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}guajiritos-image-picker .image-cropper #image-cropper-header mat-icon{color:#fff}guajiritos-image-picker .btn{padding:4px 8px;border-radius:4px;cursor:pointer}guajiritos-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
-            }] } });
-
-/*
- * Public API Surface of guachos-image-picker
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { GuajiritosImagePicker };
-//# sourceMappingURL=guajiritos-image-picker.mjs.map