@guajiritos/image-picker 0.0.6 → 0.0.8

package/fesm2022/guajiritos-image-picker.mjs

@@ -0,0 +1,616 @@
+import * as i0 from '@angular/core';
+import { Pipe, NgModule, signal, EventEmitter, Component, ChangeDetectionStrategy, Input, ViewChild, Output } from '@angular/core';
+import { ResizeObserver } from 'resize-observer';
+import { Subject } from 'rxjs';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i9 from '@angular/forms';
+import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i5 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i6 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+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 i10 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i11 from '@angular/material/core';
+
+class I18nPipe {
+    en = {
+        UPLOAD_A_IMAGE: 'Upload an image',
+        MUST_EDIT: 'You must edit the image in order to resize it',
+        TOO_LARGE: 'too large',
+        OPEN_EDITOR_PANEL: 'Open the editor panel',
+        DOWNLOAD: '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',
+        SIZE: 'Size'
+    };
+    es = {
+        UPLOAD_A_IMAGE: 'Suba una imagen',
+        MUST_EDIT: 'Debe editar la imagen para disminuir su tamaño',
+        TOO_LARGE: 'muy grande',
+        OPEN_EDITOR_PANEL: 'Abra el panel de edición',
+        DOWNLOAD: 'Descargue la imagen',
+        CONTROL_PANEL: 'Panel de control',
+        REMOVE: 'Eliminar',
+        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)',
+        SIZE: 'Tamaño'
+    };
+    transform(key, language) {
+        return language === 'en' ? this.en?.[key] : this.es?.[key];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: I18nPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: I18nPipe, name: "i18n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: I18nPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'i18n'
+                }]
+        }] });
+
+class CalculateSizePipe {
+    transform(imageLength) {
+        if (!imageLength) {
+            return 0;
+        }
+        if (imageLength) {
+            return Math.ceil(((3 / 4) * imageLength) / 1024);
+        }
+        else {
+            return 0;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: CalculateSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: CalculateSizePipe, name: "calculateSize" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: CalculateSizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'calculateSize'
+                }]
+        }] });
+
+class PipesModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: PipesModule, declarations: [I18nPipe, CalculateSizePipe], exports: [I18nPipe, CalculateSizePipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PipesModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [I18nPipe, CalculateSizePipe],
+                    exports: [I18nPipe, CalculateSizePipe],
+                }]
+        }] });
+
+class GuajiritosImagePicker {
+    constructor() {
+    }
+    unsubscribeAll$ = new Subject();
+    observer = null;
+    originImageSrc;
+    fileType;
+    urlImage;
+    lastOriginSrc;
+    arrayCopiedImages = [];
+    uuidFilePicker = Date.now().toString(20);
+    allFormats = ['webp', 'jpeg', 'png'];
+    config = signal({
+        height: '240px',
+        width: '320px',
+        borderRadius: '16px',
+        compressInitial: true,
+        language: 'es',
+        hideDeleteBtn: false,
+        hideDownloadBtn: false,
+        hideEditBtn: false,
+        hideAddBtn: false,
+    });
+    imageSrc = signal(null);
+    showCrop = new UntypedFormControl({ value: false, disabled: false });
+    loadImage = signal(false);
+    noEdit = signal(false);
+    showEditPanel = signal(false);
+    maintainAspectRatio = new UntypedFormControl({ value: true, disabled: false });
+    quality = new UntypedFormControl({ value: 70, disabled: false });
+    format = new UntypedFormControl({ value: 'webp', disabled: false });
+    maxHeight = signal(2000);
+    maxWidth = signal(2000);
+    cropHeight = new UntypedFormControl({ value: 150, disabled: false });
+    cropWidth = new UntypedFormControl({ value: 150, disabled: false });
+    imageName = signal('download');
+    currentLanguage = signal('es');
+    appearance = 'outline';
+    color = 'primary';
+    imagesAllowed = 'image/*';
+    imagePicker;
+    $imageChanged = new EventEmitter();
+    $imageOriginal = new EventEmitter();
+    set _imageSrc(image) {
+        if (image) {
+            let types = image.split('.');
+            this.format.setValue(types[types.length - 1]);
+            if (!this.format.value || (this.format.value !== 'png' && this.format.value !== 'jpeg' && this.format.value !== 'webp')) {
+                this.format.setValue('jpeg');
+            }
+            this.imageSrc.set(image);
+            this.arrayCopiedImages = [];
+            this.arrayCopiedImages.push(this.imageSrc);
+            this.originImageSrc = image;
+            this.lastOriginSrc = image;
+            this.$imageOriginal.next(this.originImageSrc);
+            this.loadImage.set(true);
+            this.noEdit.set(true);
+        }
+        else {
+            this.imageSrc.set(null);
+            this.originImageSrc = null;
+            this.loadImage.set(false);
+            this.noEdit.set(false);
+            this.arrayCopiedImages = [];
+            this.lastOriginSrc = null;
+            this.$imageOriginal.next(null);
+            this.format.setValue('jpeg');
+            this.maxHeight.set(2000);
+            this.maxWidth.set(2000);
+            this.cropHeight.setValue(150);
+            this.cropWidth.setValue(150);
+            this.maintainAspectRatio.setValue(true);
+            this.showEditPanel.set(false);
+        }
+    }
+    set _config(value) {
+        if (value && value.constructor == Object) {
+            this.config.set({
+                ...this.config(),
+                ...value,
+            });
+        }
+    }
+    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.setValue(70);
+            const input = {
+                dataType: this.format.value,
+                quality: 0.70,
+                maintainRatio: true,
+            };
+            this.imageSrc.set(await this.resizeDataURL(this.urlImage + base64textString, input));
+        }
+        else {
+            this.imageSrc.set(this.urlImage + base64textString);
+            this.arrayCopiedImages = [];
+            this.arrayCopiedImages.push({
+                lastImage: this.imageSrc(),
+                width: this.maxWidth(),
+                height: this.maxHeight(),
+                quality: this.quality.value,
+            });
+            this.$imageOriginal.next(this.imageSrc());
+        }
+        this.$imageChanged.next(this.imageSrc());
+        this.loadImage.set(true);
+    }
+    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 ?? 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 ?? img.width;
+                let 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 ?? '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.value,
+                });
+            }
+            return data.dataUri;
+        });
+    }
+    wait(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?.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.set(file?.name?.split('.')[0]);
+            this.fileType = file?.type;
+            this.urlImage = `data:${file?.type};base64,`;
+            this.noEdit.set(false);
+            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.setValue(false);
+        this.showEditPanel.set(false);
+    }
+    async onChangeQuality() {
+        const qualityItem = this.quality.value / 100;
+        this.maxHeight.set(this.maxHeight() ?? 2000);
+        this.maxWidth.set(this.maxWidth() ?? 2000);
+        await this.wait(250);
+        try {
+            const input = {
+                height: this.maxHeight(),
+                width: this.maxWidth(),
+                dataType: this.format.value,
+                quality: qualityItem,
+                maintainRatio: this.maintainAspectRatio.value,
+            };
+            this.imageSrc.set(await this.resizeDataURL(this.originImageSrc, input));
+            this.$imageChanged.next(this.imageSrc());
+            this.loadImage.set(true);
+        }
+        catch (error) {
+            this.loadImage.set(true);
+        }
+    }
+    async onChangeFormat() {
+        let qualityItem = this.quality.value / 100;
+        this.maxHeight.set(this.maxHeight() ?? 2000);
+        this.maxWidth.set(this.maxWidth() ?? 2000);
+        await this.wait(250);
+        try {
+            let input = {
+                height: this.maxHeight(),
+                width: this.maxWidth(),
+                dataType: this.format.value,
+                quality: qualityItem,
+                maintainRatio: this.maintainAspectRatio.value,
+            };
+            this.imageSrc.set(await this.resizeDataURL(this.originImageSrc, input));
+            this.$imageChanged.next(this.imageSrc());
+            this.loadImage.set(true);
+        }
+        catch (error) {
+            this.loadImage.set(true);
+        }
+    }
+    async onChangeSize(changeWidth, changeHeight) {
+        let qualityItem = this.quality.value / 100;
+        this.maxHeight.set(this.maxHeight() ?? 2000);
+        this.maxWidth.set(this.maxWidth() ?? 2000);
+        await this.wait(500);
+        try {
+            let input = {
+                height: this.maxHeight(),
+                width: this.maxWidth(),
+                dataType: this.format.value,
+                quality: qualityItem,
+                maintainRatio: this.maintainAspectRatio.value,
+                changeHeight: changeHeight,
+                changeWidth: changeWidth,
+            };
+            this.imageSrc.set(await this.resizeDataURL(this.originImageSrc, input));
+            this.$imageChanged.next(this.imageSrc());
+            this.loadImage.set(true);
+        }
+        catch (error) {
+            this.loadImage.set(true);
+        }
+    }
+    onChangeCrop() {
+        const cropper = document.getElementById('image-cropper');
+        cropper.style.width = this.cropWidth.value + 'px';
+        cropper.style.height = this.cropHeight.value + 'px';
+    }
+    onCropStateChange() {
+        const cropper = document.getElementById('image-cropper');
+        const fullImage = document.getElementById('image-full');
+        const aspectRatio = fullImage.offsetWidth / fullImage.offsetHeight;
+        if (this.showCrop.value) {
+            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;
+                        // Obtener el tamaño del área de recorte seleccionada por el usuario
+                        const cropWidth = elementCropper.offsetWidth;
+                        const cropHeight = elementCropper.offsetHeight;
+                        // Calcular el ancho y el alto del área de recorte manteniendo la relación de aspecto de la imagen original
+                        let newWidth = cropWidth;
+                        let newHeight = cropHeight;
+                        if (this.maintainAspectRatio.value) {
+                            if (cropWidth / cropHeight > aspectRatio) {
+                                newHeight = cropWidth / aspectRatio;
+                            }
+                            else {
+                                newWidth = cropHeight * aspectRatio;
+                            }
+                        }
+                        // Ajustar el ancho y el alto del área de recorte si supera los límites
+                        newWidth = Math.min(newWidth, maxWidth);
+                        newHeight = Math.min(newHeight, maxHeight);
+                        // Establecer el tamaño y la posición del área de recorte
+                        elementCropper.style.width = `${newWidth}px`;
+                        elementCropper.style.height = `${newHeight}px`;
+                        this.cropWidth.setValue(rectElement.width);
+                        this.cropHeight.setValue(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 ?? this.format.value;
+        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.width = newWidth;
+                canvas.height = newHeight;
+                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);
+                resolve(canvas.toDataURL(`image/${type}`, this.quality.value));
+            };
+            image.onerror = (e) => {
+                reject(e);
+            };
+        })
+            .then((dataUri) => {
+            this.imageSrc.set(dataUri);
+            this.showCrop.setValue(false);
+            this.onCropStateChange();
+            this.maxWidth.set(canvas?.width);
+            this.maxHeight.set(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.set(lastState.lastImage);
+            this.maxWidth.set(lastState.width);
+            this.maxHeight.set(lastState.height);
+            this.originImageSrc = this.lastOriginSrc + '';
+            this.noEdit.set(false);
+        }
+        else {
+            this.imageSrc.set(this.lastOriginSrc);
+            this.originImageSrc = this.lastOriginSrc + '';
+            this.noEdit.set(false);
+        }
+        this.$imageChanged.next(this.imageSrc());
+    }
+    onRemove() {
+        this.imageSrc.set(null);
+        this.originImageSrc = null;
+        this.loadImage.set(false);
+        this.arrayCopiedImages = [];
+        this.lastOriginSrc = null;
+        this.$imageOriginal.next(null);
+        this.$imageChanged.next(null);
+        this.format.setValue('jpeg');
+        this.maxHeight.set(2000);
+        this.maxWidth.set(2000);
+        this.cropHeight.setValue(150);
+        this.cropWidth.setValue(150);
+        this.maintainAspectRatio.setValue(true);
+        this.showEditPanel.set(false);
+        this.noEdit.set(false);
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: GuajiritosImagePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: GuajiritosImagePicker, isStandalone: true, selector: "guajiritos-image-picker", inputs: { appearance: "appearance", color: "color", imagesAllowed: "imagesAllowed", _imageSrc: "_imageSrc", _config: "_config" }, outputs: { $imageChanged: "$imageChanged", $imageOriginal: "$imageOriginal" }, viewQueries: [{ propertyName: "imagePicker", first: true, predicate: ["imagePicker"], descendants: true }], ngImport: i0, template: "<div *ngIf='!loadImage()' class='place-image'>\n  <div class='image-holder'\n       [ngStyle]='{ width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\n    <button [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\" class='image-upload-btn' mat-icon-button\n            (click)='onUpload($event)'>\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\n    </button>\n    <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n  </div>\n</div>\n\n<div *ngIf='loadImage()' class='place-image'>\n  <div class='image-holder-loaded'\n       [ngStyle]='{width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\n    <img [src]='imageSrc()' alt='image-loaded' [ngStyle]='{ borderRadius: config()?.borderRadius }'>\n    <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n  </div>\n  <p *ngIf='imageSrc()?.length' class='mat-caption image-caption' [class.warn]='(imageSrc()?.length | calculateSize) > 200'\n     [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\n    {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\n  </p>\n\n  <div class='editing-bar-btn'>\n    <button id='upload-img' *ngIf='!config()?.hideAddBtn' mat-icon-button (click)='onUpload($event)'\n            [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\">\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\n    </button>\n    <button id='edit-img' *ngIf='!config()?.hideEditBtn && !noEdit()' mat-icon-button (click)='showEditPanel.set(true)'\n            [matTooltip]=\"'OPEN_EDITOR_PANEL' | i18n: config()?.language\">\n      <mat-icon class='mat-18'>edit</mat-icon>\n    </button>\n    <a id='download-img' *ngIf='!config()?.hideDownloadBtn' [matTooltip]=\"'DOWNLOAD' | i18n: config()?.language\"\n       [href]='imageSrc()' mat-icon-button [download]='imageName'>\n      <mat-icon class='mat-18'>cloud_download</mat-icon>\n    </a>\n    <button id='delete-img' *ngIf='!config()?.hideDeleteBtn' mat-icon-button (click)='onRemove()'\n            [matTooltip]=\"'REMOVE' | i18n: config()?.language\">\n      <mat-icon class='mat-18'>delete</mat-icon>\n    </button>\n  </div>\n</div>\n\n<div *ngIf='showEditPanel()' id='popup' class='popup'>\n  <div class='popup-clear'>\n    <button mat-icon-button (click)='onCloseEditPanel()'>\n      <mat-icon class='mat-18'>clear</mat-icon>\n    </button>\n  </div>\n\n  <div class='image-container'>\n    <div class='image-holder-full'>\n      <img id='image-full' [src]='imageSrc()' alt=''>\n      <div id='image-cropper' class='image-cropper'>\n        <div id='image-cropper-header'>\n          <mat-icon>drag_indicator</mat-icon>\n        </div>\n      </div>\n    </div>\n\n    <div class='control-panel'>\n      <p class='item-panel fw-600'>{{ 'QUALITY' | i18n: config()?.language }}</p>\n      <div class='quality-container'>\n        <mat-slider ngDefaultControl [color]='color' class='w-100 mw-100' (change)='onChangeQuality()'\n                    [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\n          <input matSliderThumb [formControl]='quality'>\n        </mat-slider>\n      </div>\n\n      <div class='item-panel'>\n        <span class='fw-600'>{{ 'MAX_DIMENSIONS' | i18n: config()?.language }}</span>\n        <mat-checkbox class='float-right' [formControl]='maintainAspectRatio' [color]='color'>\n          <span>{{ 'ASPECT_RATIO' | i18n: config()?.language }}</span>\n        </mat-checkbox>\n      </div>\n\n      <div class='max-dimension-container'>\n        <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\n          <mat-label>{{ 'MAX_WIDTH_PX' | i18n: config()?.language }}</mat-label>\n          <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"'MAX_WIDTH_PX' | i18n: config()?.language\"\n                 [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\n        </mat-form-field>\n\n        <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\n          <mat-label>{{ 'MAX_HEIGHT_PX' | i18n: config()?.language }}</mat-label>\n          <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"'MAX_HEIGHT_PX' | i18n: config()?.language\"\n                 [(ngModel)]='maxHeight' type='number' [min]='0' [max]='2000'>\n        </mat-form-field>\n      </div>\n\n      <p class='item-panel fw-600'>{{ 'FORMAT' | i18n: config()?.language }}</p>\n      <div class='formats-selection'>\n        <mat-form-field class='w-100 mw-100' [appearance]='appearance' [color]='color'>\n          <mat-select [formControl]='format' (selectionChange)='onChangeFormat()'>\n            <mat-option *ngFor='let format of allFormats' [value]='format'>\n              {{ format }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <div class='refresh-container'>\n        <mat-checkbox (change)='onCropStateChange()' [formControl]='showCrop' [color]='color'>\n          <p class='item-panel fw-600'>{{ 'CROP' | i18n: config()?.language }}</p>\n        </mat-checkbox>\n        <div class='d-flex '>\n          <button class='float-right' mat-icon-button [color]='color' (click)='onRestore()'>\n            <mat-icon>refresh</mat-icon>\n          </button>\n          <p *ngIf='showCrop.value'>\n            <button mat-icon-button [color]='color' (click)='onCrop()'>\n              <mat-icon>crop</mat-icon>\n            </button>\n          </p>\n        </div>\n      </div>\n\n      <ng-container *ngIf='showCrop.value'>\n        <div class='dimension-container'>\n          <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\n            <mat-label>{{ 'WIDTH_PX' | i18n: config()?.language }}</mat-label>\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"'WIDTH_PX' | i18n: config()?.language\"\n                   [formControl]='cropWidth' type='number' [min]='0' [max]='2000'>\n          </mat-form-field>\n          <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\n            <mat-label>{{ 'HEIGHT_PX' | i18n: config()?.language }}</mat-label>\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"'HEIGHT_PX' | i18n: config()?.language\"\n                   [formControl]='cropHeight' type='number' [min]='0' [max]='2000'>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <div class='save-container'>\n        <button mat-flat-button (click)='onCloseEditPanel()' [color]='color' class='save-button'>\n          {{ 'SAVE' | i18n: config()?.language}}\n        </button>\n\n        <p *ngIf='imageSrc()?.length' class='mat-caption image-caption'\n           [class.warn]='(imageSrc()?.length | calculateSize) > 200'\n           [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\n          {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".d-none{display:none}.d-flex{display:flex}.fw-600{font-weight:600}.w-100{width:100%}.mw-100{max-width:100%}.w-48{width:48%}.mw-48{max-width:48%}.float-right{float:right}p{margin:0!important;padding:0!important}.place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}.place-image .image-holder{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;width:320px;height:240px;border-radius:16px;max-width:100%!important;background-color:#fff}@media (max-width: 599px){.place-image .image-holder{max-width:100%!important;max-height:250px!important}}.place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .image-holder-loaded{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;max-width:100%!important;width:320px;height:240px;border-radius:4px;padding:2px}.place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}.place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:contain;object-position:center}@media (max-width: 599px){.place-image .image-holder-loaded{max-height:195px!important}}.place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .editing-bar-btn{margin-top:2px;display:flex;flex-direction:row;box-sizing:border-box;place-content:flex-start;align-items:flex-start}.place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}.place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}.place-image .editing-bar-btn button{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.place-image .editing-bar-btn a{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}.popup .popup-clear{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-end;align-items:center}.popup .image-container{margin-top:50px;margin-bottom:50px;height:calc(100vh - 188px);min-height:calc(100vh - 188px);min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}.popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}.popup img{max-height:600px;max-width:100%;object-fit:contain;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){.popup{background-color:#000000d9;padding:8px}.popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){.popup img{margin:0}}.popup .control-panel{color:#000;background-color:#fff;margin:8px;padding:16px;max-width:100%;width:18rem;border-radius:8px;flex-direction:column;box-sizing:border-box;display:flex;place-content:stretch flex-start;align-items:stretch}@media (max-width: 599px){.popup .control-panel{margin:8px 0;width:100%}}.popup .control-panel .title-panel{padding:0 4px;font-size:16px;margin-bottom:16px!important}.popup .control-panel .item-panel{padding:0 4px!important;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:4px}.popup .control-panel .formats-selection{margin-top:8px!important;flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .max-dimension-container{margin-top:16px!important;flex-flow:row;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .dimension-container{margin-top:8px!important;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .save-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center}.popup .control-panel .save-container .save-button{padding:0 8px;height:34px;box-sizing:border-box;font-weight:600}.popup .control-panel .quality-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .refresh-container{display:flex;justify-content:space-between;align-items:center}.popup .control-panel .refresh-container div{display:flex;align-items:center}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}.mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.mat-select-panel{background:white!important}input.mat-input-element{color:#000000d9}.mat-checkbox-background{background-color:#fff}.image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid white;box-sizing:border-box;resize:both;overflow:auto;opacity:0}.image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}.image-cropper #image-cropper-header mat-icon{color:#fff}.btn{padding:4px 8px;border-radius:4px;cursor:pointer}.btn mat-icon{color:#000000d1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: BrowserAnimationsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i9.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i9.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PipesModule }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: CalculateSizePipe, name: "calculateSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: GuajiritosImagePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'guajiritos-image-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        BrowserAnimationsModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatSliderModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        MatSelectModule,
+                        ReactiveFormsModule,
+                        PipesModule
+                    ], template: "<div *ngIf='!loadImage()' class='place-image'>\n  <div class='image-holder'\n       [ngStyle]='{ width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\n    <button [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\" class='image-upload-btn' mat-icon-button\n            (click)='onUpload($event)'>\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\n    </button>\n    <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n  </div>\n</div>\n\n<div *ngIf='loadImage()' class='place-image'>\n  <div class='image-holder-loaded'\n       [ngStyle]='{width: config()?.width,height: config()?.height,borderRadius: config()?.borderRadius}'>\n    <img [src]='imageSrc()' alt='image-loaded' [ngStyle]='{ borderRadius: config()?.borderRadius }'>\n    <input #imagePicker type='file' class='d-none' [id]=\"'filePicker-' + uuidFilePicker\"\n           (change)='handleFileSelect($event)' [accept]='imagesAllowed'>\n  </div>\n  <p *ngIf='imageSrc()?.length' class='mat-caption image-caption' [class.warn]='(imageSrc()?.length | calculateSize) > 200'\n     [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\n    {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\n  </p>\n\n  <div class='editing-bar-btn'>\n    <button id='upload-img' *ngIf='!config()?.hideAddBtn' mat-icon-button (click)='onUpload($event)'\n            [matTooltip]=\"'UPLOAD_A_IMAGE' | i18n: config()?.language\">\n      <mat-icon class='mat-18'>add_a_photo</mat-icon>\n    </button>\n    <button id='edit-img' *ngIf='!config()?.hideEditBtn && !noEdit()' mat-icon-button (click)='showEditPanel.set(true)'\n            [matTooltip]=\"'OPEN_EDITOR_PANEL' | i18n: config()?.language\">\n      <mat-icon class='mat-18'>edit</mat-icon>\n    </button>\n    <a id='download-img' *ngIf='!config()?.hideDownloadBtn' [matTooltip]=\"'DOWNLOAD' | i18n: config()?.language\"\n       [href]='imageSrc()' mat-icon-button [download]='imageName'>\n      <mat-icon class='mat-18'>cloud_download</mat-icon>\n    </a>\n    <button id='delete-img' *ngIf='!config()?.hideDeleteBtn' mat-icon-button (click)='onRemove()'\n            [matTooltip]=\"'REMOVE' | i18n: config()?.language\">\n      <mat-icon class='mat-18'>delete</mat-icon>\n    </button>\n  </div>\n</div>\n\n<div *ngIf='showEditPanel()' id='popup' class='popup'>\n  <div class='popup-clear'>\n    <button mat-icon-button (click)='onCloseEditPanel()'>\n      <mat-icon class='mat-18'>clear</mat-icon>\n    </button>\n  </div>\n\n  <div class='image-container'>\n    <div class='image-holder-full'>\n      <img id='image-full' [src]='imageSrc()' alt=''>\n      <div id='image-cropper' class='image-cropper'>\n        <div id='image-cropper-header'>\n          <mat-icon>drag_indicator</mat-icon>\n        </div>\n      </div>\n    </div>\n\n    <div class='control-panel'>\n      <p class='item-panel fw-600'>{{ 'QUALITY' | i18n: config()?.language }}</p>\n      <div class='quality-container'>\n        <mat-slider ngDefaultControl [color]='color' class='w-100 mw-100' (change)='onChangeQuality()'\n                    [max]='100' [min]='0' [step]='1' [discrete]='true' [showTickMarks]='true'>\n          <input matSliderThumb [formControl]='quality'>\n        </mat-slider>\n      </div>\n\n      <div class='item-panel'>\n        <span class='fw-600'>{{ 'MAX_DIMENSIONS' | i18n: config()?.language }}</span>\n        <mat-checkbox class='float-right' [formControl]='maintainAspectRatio' [color]='color'>\n          <span>{{ 'ASPECT_RATIO' | i18n: config()?.language }}</span>\n        </mat-checkbox>\n      </div>\n\n      <div class='max-dimension-container'>\n        <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\n          <mat-label>{{ 'MAX_WIDTH_PX' | i18n: config()?.language }}</mat-label>\n          <input (change)='onChangeSize(true, false)' matInput [placeholder]=\"'MAX_WIDTH_PX' | i18n: config()?.language\"\n                 [(ngModel)]='maxWidth' type='number' [min]='0' [max]='2000'>\n        </mat-form-field>\n\n        <mat-form-field class='w-48' [appearance]='appearance' [color]='color'>\n          <mat-label>{{ 'MAX_HEIGHT_PX' | i18n: config()?.language }}</mat-label>\n          <input (change)='onChangeSize(false, true)' matInput [placeholder]=\"'MAX_HEIGHT_PX' | i18n: config()?.language\"\n                 [(ngModel)]='maxHeight' type='number' [min]='0' [max]='2000'>\n        </mat-form-field>\n      </div>\n\n      <p class='item-panel fw-600'>{{ 'FORMAT' | i18n: config()?.language }}</p>\n      <div class='formats-selection'>\n        <mat-form-field class='w-100 mw-100' [appearance]='appearance' [color]='color'>\n          <mat-select [formControl]='format' (selectionChange)='onChangeFormat()'>\n            <mat-option *ngFor='let format of allFormats' [value]='format'>\n              {{ format }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <div class='refresh-container'>\n        <mat-checkbox (change)='onCropStateChange()' [formControl]='showCrop' [color]='color'>\n          <p class='item-panel fw-600'>{{ 'CROP' | i18n: config()?.language }}</p>\n        </mat-checkbox>\n        <div class='d-flex '>\n          <button class='float-right' mat-icon-button [color]='color' (click)='onRestore()'>\n            <mat-icon>refresh</mat-icon>\n          </button>\n          <p *ngIf='showCrop.value'>\n            <button mat-icon-button [color]='color' (click)='onCrop()'>\n              <mat-icon>crop</mat-icon>\n            </button>\n          </p>\n        </div>\n      </div>\n\n      <ng-container *ngIf='showCrop.value'>\n        <div class='dimension-container'>\n          <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\n            <mat-label>{{ 'WIDTH_PX' | i18n: config()?.language }}</mat-label>\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"'WIDTH_PX' | i18n: config()?.language\"\n                   [formControl]='cropWidth' type='number' [min]='0' [max]='2000'>\n          </mat-form-field>\n          <mat-form-field class='w-48 mw-48' [appearance]='appearance' [color]='color'>\n            <mat-label>{{ 'HEIGHT_PX' | i18n: config()?.language }}</mat-label>\n            <input (change)='onChangeCrop()' matInput [placeholder]=\"'HEIGHT_PX' | i18n: config()?.language\"\n                   [formControl]='cropHeight' type='number' [min]='0' [max]='2000'>\n          </mat-form-field>\n        </div>\n      </ng-container>\n\n      <div class='save-container'>\n        <button mat-flat-button (click)='onCloseEditPanel()' [color]='color' class='save-button'>\n          {{ 'SAVE' | i18n: config()?.language}}\n        </button>\n\n        <p *ngIf='imageSrc()?.length' class='mat-caption image-caption'\n           [class.warn]='(imageSrc()?.length | calculateSize) > 200'\n           [class.fw-600]='(imageSrc()?.length | calculateSize) > 200'>\n          {{\"SIZE\" | i18n: currentLanguage()}}: {{ (imageSrc()?.length | calculateSize) }}Kb &nbsp; {{ format.value }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".d-none{display:none}.d-flex{display:flex}.fw-600{font-weight:600}.w-100{width:100%}.mw-100{max-width:100%}.w-48{width:48%}.mw-48{max-width:48%}.float-right{float:right}p{margin:0!important;padding:0!important}.place-image{flex-direction:column;box-sizing:border-box;display:flex;place-content:flex-start;align-items:center}.place-image .image-holder{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;width:320px;height:240px;border-radius:16px;max-width:100%!important;background-color:#fff}@media (max-width: 599px){.place-image .image-holder{max-width:100%!important;max-height:250px!important}}.place-image .image-holder .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .image-holder-loaded{flex-direction:column;box-sizing:border-box;display:flex;place-content:center;align-items:center;position:relative;max-width:100%!important;width:320px;height:240px;border-radius:4px;padding:2px}.place-image .image-holder-loaded .image-caption{position:absolute;right:0;bottom:-22px}.place-image .image-holder-loaded img{height:100%;max-height:100%;width:100%;max-width:100%;object-fit:contain;object-position:center}@media (max-width: 599px){.place-image .image-holder-loaded{max-height:195px!important}}.place-image .image-holder-loaded .image-upload-btn{transition:all .5s ease;position:relative;opacity:.85;width:50px;height:50px;box-sizing:content-box}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:50px;width:50px;height:50px;line-height:50px}@media (max-width: 599px){.place-image .image-holder-loaded .image-upload-btn{opacity:1;width:30px;height:30px}.place-image .image-holder-loaded .image-upload-btn mat-icon{font-size:30px;width:30px;height:30px;line-height:30px}}.place-image .image-holder-loaded:hover .image-upload-btn{opacity:1;transition:all .5s ease}.place-image .editing-bar-btn{margin-top:2px;display:flex;flex-direction:row;box-sizing:border-box;place-content:flex-start;align-items:flex-start}.place-image .editing-bar-btn .mat-icon-button{height:20px;line-height:20px;width:24px}.place-image .editing-bar-btn mat-icon{line-height:20px!important;font-size:20px!important;width:20px!important;height:20px!important}.place-image .editing-bar-btn button{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn button:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.place-image .editing-bar-btn a{margin:4px;transition:all .5s ease}.place-image .editing-bar-btn a:hover{transform:scale(1.25);margin:4px 8px;transition:all .25s ease-in}.popup{width:100vw;max-height:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;z-index:1000;padding:24px;color:#fff;box-sizing:border-box;animation-name:show;animation-duration:.4s}.popup .popup-clear{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-end;align-items:center}.popup .image-container{margin-top:50px;margin-bottom:50px;height:calc(100vh - 188px);min-height:calc(100vh - 188px);min-width:100%;width:100%;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start center;align-items:flex-start}.popup .image-container .image-holder-full{height:auto;width:auto;position:relative;display:contents}.popup img{max-height:600px;max-width:100%;object-fit:contain;object-position:center;margin:8px;transition:all .5s ease}@media (max-width: 1024px){.popup{background-color:#000000d9;padding:8px}.popup img{max-height:100%;max-width:100%}}@media (max-width: 599px){.popup img{margin:0}}.popup .control-panel{color:#000;background-color:#fff;margin:8px;padding:16px;max-width:100%;width:18rem;border-radius:8px;flex-direction:column;box-sizing:border-box;display:flex;place-content:stretch flex-start;align-items:stretch}@media (max-width: 599px){.popup .control-panel{margin:8px 0;width:100%}}.popup .control-panel .title-panel{padding:0 4px;font-size:16px;margin-bottom:16px!important}.popup .control-panel .item-panel{padding:0 4px!important;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:4px}.popup .control-panel .formats-selection{margin-top:8px!important;flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .max-dimension-container{margin-top:16px!important;flex-flow:row;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .dimension-container{margin-top:8px!important;flex-flow:row wrap;box-sizing:border-box;display:flex;place-content:flex-start space-between;align-items:flex-start}.popup .control-panel .save-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center}.popup .control-panel .save-container .save-button{padding:0 8px;height:34px;box-sizing:border-box;font-weight:600}.popup .control-panel .quality-container{flex-direction:row;box-sizing:border-box;display:flex;place-content:flex-start;align-items:flex-start}.popup .control-panel .refresh-container{display:flex;justify-content:space-between;align-items:center}.popup .control-panel .refresh-container div{display:flex;align-items:center}@keyframes show{0%{top:-100vh;opacity:0}to{top:0;opacity:1}}.mat-form-field-appearance-fill .mat-form-field-flex{background-color:#fff!important}.mat-select-panel{background:white!important}input.mat-input-element{color:#000000d9}.mat-checkbox-background{background-color:#fff}.image-cropper{position:absolute;width:150px;height:150px;border:2.5px solid white;box-sizing:border-box;resize:both;overflow:auto;opacity:0}.image-cropper #image-cropper-header{padding:10px;cursor:move;z-index:10;background-color:transparent;height:85%}.image-cropper #image-cropper-header mat-icon{color:#fff}.btn{padding:4px 8px;border-radius:4px;cursor:pointer}.btn mat-icon{color:#000000d1}\n"] }]
+        }], ctorParameters: function () { return []; }, 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