ngx-image-cropper - npm Package Compare versions

Comparing version 3.1.6 to 3.1.7

bundles/ngx-image-cropper.umd.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("ngx-image-cropper",["exports","@angular/core","@angular/common","@angular/platform-browser"],e):e((t=t||self)["ngx-image-cropper"]={},t.ng.core,t.ng.common,t.ng.platformBrowser)}(this,(function(t,e,i,r){"use strict";var o=function(){return(o=Object.assign||function(t){for(var e,i=1,r=arguments.length;i<r;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};var s="data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAAAAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/xABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAAAAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q==";function a(t){switch("string"==typeof t&&(t=function(t){var e=new DataView(function(t){t=t.replace(/^data\:([^\;]+)\;base64,/gim,"");for(var e=atob(t),i=e.length,r=new Uint8Array(i),o=0;o<i;o++)r[o]=e.charCodeAt(o);return r.buffer}(t));if(65496!=e.getUint16(0,!1))return-2;var i=e.byteLength,r=2;for(;r<i;){if(e.getUint16(r+2,!1)<=8)return-1;var o=e.getUint16(r,!1);if(r+=2,65505==o){if(1165519206!=e.getUint32(r+=2,!1))return-1;var s=18761==e.getUint16(r+=6,!1);r+=e.getUint32(r+4,s);var a=e.getUint16(r,s);r+=2;for(var p=0;p<a;p++)if(274==e.getUint16(r+12*p,s))return e.getUint16(r+12*p+8,s)}else{if(65280!=(65280&o))break;r+=e.getUint16(r,!1)}}return-1}(t)),t){case 2:return{rotate:0,flip:!0};case 3:return{rotate:2,flip:!1};case 4:return{rotate:2,flip:!0};case 5:return{rotate:1,flip:!0};case 6:return{rotate:1,flip:!1};case 7:return{rotate:3,flip:!0};case 8:return{rotate:3,flip:!1};default:return{rotate:0,flip:!1}}}var p={Move:"move",Resize:"resize",Pinch:"pinch"},n=function(){function t(t,i){this.sanitizer=t,this.cd=i,this.Hammer="undefined"!=typeof window?window.Hammer:null,this.setImageMaxSizeRetries=0,this.cropperScaledMinWidth=20,this.cropperScaledMinHeight=20,this.exifTransform={rotate:0,flip:!1},this.autoRotateSupported=new Promise((function(t){var e=new Image;e.onload=function(){var i=1===e.width&&2===e.height;t(i)},e.src=s})),this.stepSize=3,this.marginLeft="0px",this.imageVisible=!1,this.moveTypes=p,this.format="png",this.maintainAspectRatio=!0,this.transform={},this.aspectRatio=1,this.resizeToWidth=0,this.resizeToHeight=0,this.cropperMinWidth=0,this.cropperMinHeight=0,this.canvasRotation=0,this.initialStepSize=3,this.roundCropper=!1,this.onlyScaleDown=!1,this.imageQuality=92,this.autoCrop=!0,this.containWithinAspectRatio=!1,this.hideResizeSquares=!1,this.cropper={x1:-100,y1:-100,x2:1e4,y2:1e4},this.alignImage="center",this.disabled=!1,this.imageCropped=new e.EventEmitter,this.startCropImage=new e.EventEmitter,this.imageLoaded=new e.EventEmitter,this.cropperReady=new e.EventEmitter,this.loadImageFailed=new e.EventEmitter,this.initCropper()}return t.prototype.ngOnChanges=function(t){this.onChangesInputImage(t),this.originalImage&&this.originalImage.complete&&this.exifTransform&&(t.containWithinAspectRatio||t.canvasRotation)&&this.transformOriginalImage(),t.cropper&&(this.setMaxSize(),this.setCropperScaledMinSize(),this.checkCropperPosition(!1),this.doAutoCrop(),this.cd.markForCheck()),t.aspectRatio&&this.imageVisible&&this.resetCropperPosition(),t.transform&&(this.transform=this.transform||{},this.setCssTransform(),this.doAutoCrop())},t.prototype.onChangesInputImage=function(t){(t.imageChangedEvent||t.imageURL||t.imageBase64||t.imageFile)&&this.initCropper(),t.imageChangedEvent&&this.isValidImageChangedEvent()&&this.loadImageFile(this.imageChangedEvent.target.files[0]),t.imageURL&&this.imageURL&&this.loadImageFromURL(this.imageURL),t.imageBase64&&this.imageBase64&&this.loadBase64Image(this.imageBase64),t.imageFile&&this.imageFile&&this.loadImageFile(this.imageFile)},t.prototype.isValidImageChangedEvent=function(){return this.imageChangedEvent&&this.imageChangedEvent.target&&this.imageChangedEvent.target.files&&this.imageChangedEvent.target.files.length>0},t.prototype.setCssTransform=function(){this.safeTransformStyle=this.sanitizer.bypassSecurityTrustStyle("scaleX("+(this.transform.scale||1)*(this.transform.flipH?-1:1)+")scaleY("+(this.transform.scale||1)*(this.transform.flipV?-1:1)+")rotate("+(this.transform.rotate||0)+"deg)")},t.prototype.ngOnInit=function(){this.stepSize=this.initialStepSize,this.activatePinchGesture()},t.prototype.initCropper=function(){this.imageVisible=!1,this.transformedImage=null,this.safeImgDataUrl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=",this.moveStart={active:!1,type:null,position:null,x1:0,y1:0,x2:0,y2:0,clientX:0,clientY:0},this.maxSize={width:0,height:0},this.originalSize={width:0,height:0},this.transformedSize={width:0,height:0},this.cropper.x1=-100,this.cropper.y1=-100,this.cropper.x2=1e4,this.cropper.y2=1e4},t.prototype.loadImage=function(t,e){this.isValidImageType(e)?this.loadBase64Image(t):this.loadImageFailed.emit()},t.prototype.loadImageFile=function(t){var e=this,i=new FileReader;i.onload=function(i){return e.loadImage(i.target.result,t.type)},i.readAsDataURL(t)},t.prototype.isValidImageType=function(t){return/image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(t)},t.prototype.loadBase64Image=function(t){var e=this;this.autoRotateSupported.then((function(i){return e.checkExifAndLoadBase64Image(t,i)})).then((function(){return e.transformOriginalImage()})).catch((function(t){e.loadImageFailed.emit(),e.originalImage=null,e.originalBase64=null,console.error(t)}))},t.prototype.checkExifAndLoadBase64Image=function(t,e){var i=this;return new Promise((function(r,o){i.originalImage=new Image,i.originalImage.onload=function(){i.originalBase64=t,i.exifTransform=a(e?-1:t),i.originalSize.width=i.originalImage.naturalWidth,i.originalSize.height=i.originalImage.naturalHeight,r()},i.originalImage.onerror=o,i.originalImage.src=t}))},t.prototype.loadImageFromURL=function(t){var e=this,i=new Image;i.onerror=function(){return e.loadImageFailed.emit()},i.onload=function(){var t=document.createElement("canvas"),r=t.getContext("2d");t.width=i.width,t.height=i.height,r.drawImage(i,0,0),e.loadBase64Image(t.toDataURL())},i.crossOrigin="anonymous",i.src=t},t.prototype.getTransformedSize=function(){var t=this.canvasRotation+this.exifTransform.rotate;if(this.containWithinAspectRatio){if(t%2){var e=this.originalSize.width*this.aspectRatio,i=this.originalSize.height/this.aspectRatio;return{width:Math.max(this.originalSize.height,e),height:Math.max(this.originalSize.width,i)}}e=this.originalSize.height*this.aspectRatio,i=this.originalSize.width/this.aspectRatio;return{width:Math.max(this.originalSize.width,e),height:Math.max(this.originalSize.height,i)}}return t%2?{height:this.originalSize.width,width:this.originalSize.height}:{width:this.originalSize.width,height:this.originalSize.height}},t.prototype.transformOriginalImage=function(){if(!this.originalImage||!this.originalImage.complete||!this.exifTransform)return Promise.reject(new Error("No image loaded"));var t=this.transformImageBase64();return this.setTransformedImage(t)},t.prototype.transformImageBase64=function(){var t=this.canvasRotation+this.exifTransform.rotate,e=this.getTransformedSize(),i=document.createElement("canvas");i.width=e.width,i.height=e.height;var r=i.getContext("2d");return r.setTransform(this.exifTransform.flip?-1:1,0,0,1,i.width/2,i.height/2),r.rotate(Math.PI*(t/2)),r.drawImage(this.originalImage,-this.originalSize.width/2,-this.originalSize.height/2),i.toDataURL()},t.prototype.setTransformedImage=function(t){var e=this;return new Promise((function(i){e.transformedBase64=t,e.safeImgDataUrl=e.sanitizer.bypassSecurityTrustResourceUrl(t),e.transformedImage=new Image,e.transformedImage.onload=function(){e.transformedSize.width=e.transformedImage.naturalWidth,e.transformedSize.height=e.transformedImage.naturalHeight,e.cd.markForCheck(),i()},e.transformedImage.src=e.transformedBase64}))},t.prototype.imageLoadedInView=function(){var t=this;null!=this.transformedImage&&(this.imageLoaded.emit(),this.setImageMaxSizeRetries=0,setTimeout((function(){return t.checkImageMaxSizeRecursively()})))},t.prototype.checkImageMaxSizeRecursively=function(){var t=this;this.setImageMaxSizeRetries>40?this.loadImageFailed.emit():this.sourceImageLoaded()?(this.setMaxSize(),this.setCropperScaledMinSize(),this.resetCropperPosition(),this.cropperReady.emit(o({},this.maxSize)),this.cd.markForCheck()):(this.setImageMaxSizeRetries++,setTimeout((function(){return t.checkImageMaxSizeRecursively()}),50))},t.prototype.sourceImageLoaded=function(){return this.sourceImage&&this.sourceImage.nativeElement&&this.sourceImage.nativeElement.offsetWidth>0},t.prototype.onResize=function(){this.resizeCropperPosition(),this.setMaxSize(),this.setCropperScaledMinSize()},t.prototype.activatePinchGesture=function(){this.Hammer?new this.Hammer(this.wrapper.nativeElement).get("pinch").set({enable:!0}):e.isDevMode()&&console.warn("[NgxImageCropper] Could not find HammerJS - Pinch Gesture won't work")},t.prototype.resizeCropperPosition=function(){var t=this.sourceImage.nativeElement;this.maxSize.width===t.offsetWidth&&this.maxSize.height===t.offsetHeight||(this.cropper.x1=this.cropper.x1*t.offsetWidth/this.maxSize.width,this.cropper.x2=this.cropper.x2*t.offsetWidth/this.maxSize.width,this.cropper.y1=this.cropper.y1*t.offsetHeight/this.maxSize.height,this.cropper.y2=this.cropper.y2*t.offsetHeight/this.maxSize.height)},t.prototype.resetCropperPosition=function(){var t=this.sourceImage.nativeElement;if(this.maintainAspectRatio)if(t.offsetWidth/this.aspectRatio<t.offsetHeight){this.cropper.x1=0,this.cropper.x2=t.offsetWidth;var e=t.offsetWidth/this.aspectRatio;this.cropper.y1=(t.offsetHeight-e)/2,this.cropper.y2=this.cropper.y1+e}else{this.cropper.y1=0,this.cropper.y2=t.offsetHeight;var i=t.offsetHeight*this.aspectRatio;this.cropper.x1=(t.offsetWidth-i)/2,this.cropper.x2=this.cropper.x1+i}else this.cropper.x1=0,this.cropper.x2=t.offsetWidth,this.cropper.y1=0,this.cropper.y2=t.offsetHeight;this.doAutoCrop(),this.imageVisible=!0},t.prototype.keyboardAccess=function(t){this.changeKeyboardStepSize(t),this.keyboardMoveCropper(t)},t.prototype.changeKeyboardStepSize=function(t){t.key>="1"&&t.key<="9"&&(this.stepSize=+t.key)},t.prototype.keyboardMoveCropper=function(t){if(["ArrowUp","ArrowDown","ArrowRight","ArrowLeft"].includes(t.key)){var e=t.shiftKey?p.Resize:p.Move,i=t.altKey?this.getInvertedPositionForKey(t.key):this.getPositionForKey(t.key),r=this.getEventForKey(t.key,this.stepSize);t.preventDefault(),t.stopPropagation(),this.startMove({clientX:0,clientY:0},e,i),this.moveImg(r),this.moveStop()}},t.prototype.getPositionForKey=function(t){switch(t){case"ArrowUp":return"top";case"ArrowRight":return"right";case"ArrowDown":return"bottom";case"ArrowLeft":default:return"left"}},t.prototype.getInvertedPositionForKey=function(t){switch(t){case"ArrowUp":return"bottom";case"ArrowRight":return"left";case"ArrowDown":return"top";case"ArrowLeft":default:return"right"}},t.prototype.getEventForKey=function(t,e){switch(t){case"ArrowUp":return{clientX:0,clientY:-1*e};case"ArrowRight":return{clientX:e,clientY:0};case"ArrowDown":return{clientX:0,clientY:e};case"ArrowLeft":default:return{clientX:-1*e,clientY:0}}},t.prototype.startMove=function(t,e,i){void 0===i&&(i=null),this.moveStart&&this.moveStart.active&&this.moveStart.type===p.Pinch||(t.preventDefault&&t.preventDefault(),this.moveStart=o({active:!0,type:e,position:i,clientX:this.getClientX(t),clientY:this.getClientY(t)},this.cropper))},t.prototype.startPinch=function(t){this.safeImgDataUrl&&(t.preventDefault&&t.preventDefault(),this.moveStart=o({active:!0,type:p.Pinch,position:"center",clientX:this.cropper.x1+(this.cropper.x2-this.cropper.x1)/2,clientY:this.cropper.y1+(this.cropper.y2-this.cropper.y1)/2},this.cropper))},t.prototype.moveImg=function(t){this.moveStart.active&&(t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),this.moveStart.type===p.Move?(this.move(t),this.checkCropperPosition(!0)):this.moveStart.type===p.Resize&&(this.resize(t),this.checkCropperPosition(!1)),this.cd.detectChanges())},t.prototype.onPinch=function(t){this.moveStart.active&&(t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),this.moveStart.type===p.Pinch&&(this.resize(t),this.checkCropperPosition(!1)),this.cd.detectChanges())},t.prototype.setMaxSize=function(){if(this.sourceImage){var t=this.sourceImage.nativeElement;this.maxSize.width=t.offsetWidth,this.maxSize.height=t.offsetHeight,this.marginLeft=this.sanitizer.bypassSecurityTrustStyle("calc(50% - "+this.maxSize.width/2+"px)")}},t.prototype.setCropperScaledMinSize=function(){this.transformedImage?(this.setCropperScaledMinWidth(),this.setCropperScaledMinHeight()):(this.cropperScaledMinWidth=20,this.cropperScaledMinHeight=20)},t.prototype.setCropperScaledMinWidth=function(){this.cropperScaledMinWidth=this.cropperMinWidth>0?Math.max(20,this.cropperMinWidth/this.transformedImage.width*this.maxSize.width):20},t.prototype.setCropperScaledMinHeight=function(){this.maintainAspectRatio?this.cropperScaledMinHeight=Math.max(20,this.cropperScaledMinWidth/this.aspectRatio):this.cropperMinHeight>0?this.cropperScaledMinHeight=Math.max(20,this.cropperMinHeight/this.transformedImage.height*this.maxSize.height):this.cropperScaledMinHeight=20},t.prototype.checkCropperPosition=function(t){void 0===t&&(t=!1),this.cropper.x1<0&&(this.cropper.x2-=t?this.cropper.x1:0,this.cropper.x1=0),this.cropper.y1<0&&(this.cropper.y2-=t?this.cropper.y1:0,this.cropper.y1=0),this.cropper.x2>this.maxSize.width&&(this.cropper.x1-=t?this.cropper.x2-this.maxSize.width:0,this.cropper.x2=this.maxSize.width),this.cropper.y2>this.maxSize.height&&(this.cropper.y1-=t?this.cropper.y2-this.maxSize.height:0,this.cropper.y2=this.maxSize.height)},t.prototype.moveStop=function(){this.moveStart.active&&(this.moveStart.active=!1,this.doAutoCrop())},t.prototype.pinchStop=function(){this.moveStart.active&&(this.moveStart.active=!1,this.doAutoCrop())},t.prototype.move=function(t){var e=this.getClientX(t)-this.moveStart.clientX,i=this.getClientY(t)-this.moveStart.clientY;this.cropper.x1=this.moveStart.x1+e,this.cropper.y1=this.moveStart.y1+i,this.cropper.x2=this.moveStart.x2+e,this.cropper.y2=this.moveStart.y2+i},t.prototype.resize=function(t){var e=this.getClientX(t)-this.moveStart.clientX,i=this.getClientY(t)-this.moveStart.clientY;switch(this.moveStart.position){case"left":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-this.cropperScaledMinWidth);break;case"topleft":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-this.cropperScaledMinWidth),this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-this.cropperScaledMinHeight);break;case"top":this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-this.cropperScaledMinHeight);break;case"topright":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+this.cropperScaledMinWidth),this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-this.cropperScaledMinHeight);break;case"right":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+this.cropperScaledMinWidth);break;case"bottomright":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+this.cropperScaledMinWidth),this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+this.cropperScaledMinHeight);break;case"bottom":this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+this.cropperScaledMinHeight);break;case"bottomleft":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-this.cropperScaledMinWidth),this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+this.cropperScaledMinHeight);break;case"center":var r=t.scale,o=Math.abs(this.moveStart.x2-this.moveStart.x1)*r,s=Math.abs(this.moveStart.y2-this.moveStart.y1)*r,a=this.cropper.x1,p=this.cropper.y1;this.cropper.x1=Math.min(this.moveStart.clientX-o/2,this.cropper.x2-this.cropperScaledMinWidth),this.cropper.y1=Math.min(this.moveStart.clientY-s/2,this.cropper.y2-this.cropperScaledMinHeight),this.cropper.x2=Math.max(this.moveStart.clientX+o/2,a+this.cropperScaledMinWidth),this.cropper.y2=Math.max(this.moveStart.clientY+s/2,p+this.cropperScaledMinHeight)}this.maintainAspectRatio&&this.checkAspectRatio()},t.prototype.checkAspectRatio=function(){var t=0,e=0;switch(this.moveStart.position){case"top":this.cropper.x2=this.cropper.x1+(this.cropper.y2-this.cropper.y1)*this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(0-this.cropper.y1,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y1+=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"bottom":this.cropper.x2=this.cropper.x1+(this.cropper.y2-this.cropper.y1)*this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(this.cropper.y2-this.maxSize.height,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"topleft":this.cropper.y1=this.cropper.y2-(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(0-this.cropper.x1,0),e=Math.max(0-this.cropper.y1,0),(t>0||e>0)&&(this.cropper.x1+=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y1+=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"topright":this.cropper.y1=this.cropper.y2-(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(0-this.cropper.y1,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y1+=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"right":case"bottomright":this.cropper.y2=this.cropper.y1+(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(this.cropper.y2-this.maxSize.height,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"left":case"bottomleft":this.cropper.y2=this.cropper.y1+(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(0-this.cropper.x1,0),e=Math.max(this.cropper.y2-this.maxSize.height,0),(t>0||e>0)&&(this.cropper.x1+=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"center":this.cropper.x2=this.cropper.x1+(this.cropper.y2-this.cropper.y1)*this.aspectRatio,this.cropper.y2=this.cropper.y1+(this.cropper.x2-this.cropper.x1)/this.aspectRatio;var i=Math.max(0-this.cropper.x1,0),r=Math.max(this.cropper.x2-this.maxSize.width,0),o=Math.max(this.cropper.y2-this.maxSize.height,0),s=Math.max(0-this.cropper.y1,0);(i>0||r>0||o>0||s>0)&&(this.cropper.x1+=o*this.aspectRatio>i?o*this.aspectRatio:i,this.cropper.x2-=s*this.aspectRatio>r?s*this.aspectRatio:r,this.cropper.y1+=s*this.aspectRatio>r?s:r/this.aspectRatio,this.cropper.y2-=o*this.aspectRatio>i?o:i/this.aspectRatio)}},t.prototype.doAutoCrop=function(){this.autoCrop&&this.crop()},t.prototype.crop=function(){if(this.sourceImage&&this.sourceImage.nativeElement&&null!=this.transformedImage){this.startCropImage.emit();var t=this.getImagePosition(),e=t.x2-t.x1,i=t.y2-t.y1,r=document.createElement("canvas");r.width=e,r.height=i;var s=r.getContext("2d");if(s){null!=this.backgroundColor&&(s.fillStyle=this.backgroundColor,s.fillRect(0,0,e,i));var a=(this.transform.scale||1)*(this.transform.flipH?-1:1),p=(this.transform.scale||1)*(this.transform.flipV?-1:1);s.setTransform(a,0,0,p,this.transformedSize.width/2,this.transformedSize.height/2),s.translate(-t.x1/a,-t.y1/p),s.rotate((this.transform.rotate||0)*Math.PI/180),s.drawImage(this.transformedImage,-this.transformedSize.width/2,-this.transformedSize.height/2);var n={width:e,height:i,imagePosition:t,cropperPosition:o({},this.cropper)};this.containWithinAspectRatio&&(n.offsetImagePosition=this.getOffsetImagePosition());var h=this.getResizeRatio(e,i);return 1!==h&&(n.width=Math.round(e*h),n.height=this.maintainAspectRatio?Math.round(n.width/this.aspectRatio):Math.round(i*h),function(t,e,i){var r=t.width,o=t.height,s=r/(e=Math.round(e)),a=o/(i=Math.round(i)),p=Math.ceil(s/2),n=Math.ceil(a/2),h=t.getContext("2d");if(h){for(var c=h.getImageData(0,0,r,o),m=h.createImageData(e,i),g=c.data,l=m.data,d=0;d<i;d++)for(var u=0;u<e;u++){var f=4*(u+d*e),y=d*a,v=0,x=0,A=0,S=0,z=0,w=0,M=0,I=Math.floor(u*s),b=Math.floor(d*a),R=Math.ceil((u+1)*s),E=Math.ceil((d+1)*a);R=Math.min(R,r),E=Math.min(E,o);for(var C=b;C<E;C++)for(var B=Math.abs(y-C)/n,T=u*s,Q=B*B,k=I;k<R;k++){var H=Math.abs(T-k)/p,P=Math.sqrt(Q+H*H);if(!(P>=1)){var W=4*(k+C*r);M+=(v=2*P*P*P-3*P*P+1)*g[W+3],A+=v,g[W+3]<255&&(v=v*g[W+3]/250),S+=v*g[W],z+=v*g[W+1],w+=v*g[W+2],x+=v}}l[f]=S/x,l[f+1]=z/x,l[f+2]=w/x,l[f+3]=M/A}t.width=e,t.height=i,h.putImageData(m,0,0)}}(r,n.width,n.height)),n.base64=this.cropToBase64(r),this.imageCropped.emit(n),n}}return null},t.prototype.getImagePosition=function(){var t=this.sourceImage.nativeElement,e=this.transformedSize.width/t.offsetWidth,i={x1:Math.round(this.cropper.x1*e),y1:Math.round(this.cropper.y1*e),x2:Math.round(this.cropper.x2*e),y2:Math.round(this.cropper.y2*e)};return this.containWithinAspectRatio||(i.x1=Math.max(i.x1,0),i.y1=Math.max(i.y1,0),i.x2=Math.min(i.x2,this.transformedSize.width),i.y2=Math.min(i.y2,this.transformedSize.height)),i},t.prototype.getOffsetImagePosition=function(){var t,e,i=this.canvasRotation+this.exifTransform.rotate,r=this.sourceImage.nativeElement,o=this.transformedSize.width/r.offsetWidth;i%2?(t=(this.transformedSize.width-this.originalSize.height)/2,e=(this.transformedSize.height-this.originalSize.width)/2):(t=(this.transformedSize.width-this.originalSize.width)/2,e=(this.transformedSize.height-this.originalSize.height)/2);var s={x1:Math.round(this.cropper.x1*o)-t,y1:Math.round(this.cropper.y1*o)-e,x2:Math.round(this.cropper.x2*o)-t,y2:Math.round(this.cropper.y2*o)-e};return this.containWithinAspectRatio||(s.x1=Math.max(s.x1,0),s.y1=Math.max(s.y1,0),s.x2=Math.min(s.x2,this.transformedSize.width),s.y2=Math.min(s.y2,this.transformedSize.height)),s},t.prototype.cropToBase64=function(t){return t.toDataURL("image/"+this.format,this.getQuality())},t.prototype.getQuality=function(){return Math.min(1,Math.max(0,this.imageQuality/100))},t.prototype.getResizeRatio=function(t,e){if(this.resizeToWidth>0){if(!this.onlyScaleDown||t>this.resizeToWidth)return this.resizeToWidth/t}else if(this.resizeToHeight>0&&(!this.onlyScaleDown||e>this.resizeToHeight))return this.resizeToHeight/e;return 1},t.prototype.getClientX=function(t){return(t.touches&&t.touches[0]?t.touches[0].clientX:t.clientX)||0},t.prototype.getClientY=function(t){return(t.touches&&t.touches[0]?t.touches[0].clientY:t.clientY)||0},t.decorators=[{type:e.Component,args:[{selector:"image-cropper",template:'<div [style.background]="imageVisible && backgroundColor"\n     (pinchstart)="startPinch($event)"\n     #wrapper\n>\n    <img\n      #sourceImage\n      class="source-image"\n      *ngIf="safeImgDataUrl"\n      [src]="safeImgDataUrl"\n      [style.visibility]="imageVisible ? \'visible\' : \'hidden\'"\n      [style.transform]="safeTransformStyle"\n      (load)="imageLoadedInView()"\n    />\n    <div\n        class="overlay"\n        [style.width.px]="maxSize.width"\n        [style.height.px]="maxSize.height"\n        [style.margin-left]="alignImage === \'center\' ? marginLeft : null"\n    ></div>\n    <div class="cropper"\n         *ngIf="imageVisible"\n         [class.rounded]="roundCropper"\n         [style.top.px]="cropper.y1"\n         [style.left.px]="cropper.x1"\n         [style.width.px]="cropper.x2 - cropper.x1"\n         [style.height.px]="cropper.y2 - cropper.y1"\n         [style.margin-left]="alignImage === \'center\' ? marginLeft : null"\n         [style.visibility]="imageVisible ? \'visible\' : \'hidden\'"\n         (keydown)="keyboardAccess($event)"\n         tabindex="0"\n    >\n        <div\n            (mousedown)="startMove($event, moveTypes.Move)"\n            (touchstart)="startMove($event, moveTypes.Move)"\n            class="move">\n        </div>\n        <ng-container *ngIf="!hideResizeSquares">\n            <span class="resize topleft"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'topleft\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'topleft\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize top">\n                <span class="square"></span>\n            </span>\n            <span class="resize topright"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'topright\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'topright\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize right">\n                <span class="square"></span>\n            </span>\n            <span class="resize bottomright"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'bottomright\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'bottomright\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize bottom">\n                <span class="square"></span>\n            </span>\n            <span class="resize bottomleft"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'bottomleft\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'bottomleft\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize left">\n                <span class="square"></span>\n            </span>\n            <span class="resize-bar top"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'top\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'top\')">\n            </span>\n            <span class="resize-bar right"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'right\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'right\')">\n            </span>\n            <span class="resize-bar bottom"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'bottom\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'bottom\')">\n            </span>\n            <span class="resize-bar left"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'left\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'left\')">\n            </span>\n        </ng-container>\n    </div>\n</div>\n',changeDetection:e.ChangeDetectionStrategy.OnPush,styles:[':host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.source-image{max-width:100%;max-height:100%;transform-origin:center}:host .overlay{position:absolute;pointer-events:none;touch-action:none;outline:#fff solid 100vw;top:0;left:0}:host .cropper{position:absolute;display:flex;color:#53535c;background:0 0;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color,rgba(255,255,255,.3)) solid 100vw;touch-action:none}:host .cropper:after{position:absolute;content:"";top:0;bottom:0;left:0;right:0;pointer-events:none;border:1px dashed;opacity:.75;color:inherit;z-index:1}:host .cropper .move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .cropper:focus .move{border-color:#1e90ff;border-width:2px}:host .cropper .resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .cropper .resize .square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .cropper .resize.topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .cropper .resize.top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .cropper .resize.topright{top:-12px;right:-12px;cursor:nesw-resize}:host .cropper .resize.right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .cropper .resize.bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .cropper .resize.bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .cropper .resize.bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .cropper .resize.left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .cropper .resize-bar{position:absolute;z-index:1}:host .cropper .resize-bar.top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .cropper .resize-bar.right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .cropper .resize-bar.bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .cropper .resize-bar.left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .cropper.rounded{outline-color:transparent}:host .cropper.rounded:after{border-radius:100%;box-shadow:0 0 0 100vw rgba(255,255,255,.3);box-shadow:0 0 0 100vw var(--cropper-outline-color,rgba(255,255,255,.3))}@media (orientation:portrait){:host .cropper{outline-width:100vh}:host .cropper.rounded:after{box-shadow:0 0 0 100vh rgba(255,255,255,.3);box-shadow:0 0 0 100vh var(--cropper-outline-color,rgba(255,255,255,.3))}}:host .cropper.rounded .move{border-radius:100%}:host.disabled .cropper .move,:host.disabled .cropper .resize,:host.disabled .cropper .resize-bar{display:none}']}]}],t.ctorParameters=function(){return[{type:r.DomSanitizer},{type:e.ChangeDetectorRef}]},t.propDecorators={wrapper:[{type:e.ViewChild,args:["wrapper",{static:!0}]}],sourceImage:[{type:e.ViewChild,args:["sourceImage",{static:!1}]}],imageChangedEvent:[{type:e.Input}],imageURL:[{type:e.Input}],imageBase64:[{type:e.Input}],imageFile:[{type:e.Input}],format:[{type:e.Input}],maintainAspectRatio:[{type:e.Input}],transform:[{type:e.Input}],aspectRatio:[{type:e.Input}],resizeToWidth:[{type:e.Input}],resizeToHeight:[{type:e.Input}],cropperMinWidth:[{type:e.Input}],cropperMinHeight:[{type:e.Input}],canvasRotation:[{type:e.Input}],initialStepSize:[{type:e.Input}],roundCropper:[{type:e.Input}],onlyScaleDown:[{type:e.Input}],imageQuality:[{type:e.Input}],autoCrop:[{type:e.Input}],backgroundColor:[{type:e.Input}],containWithinAspectRatio:[{type:e.Input}],hideResizeSquares:[{type:e.Input}],cropper:[{type:e.Input}],alignImage:[{type:e.HostBinding,args:["style.text-align"]},{type:e.Input}],disabled:[{type:e.HostBinding,args:["class.disabled"]},{type:e.Input}],imageCropped:[{type:e.Output}],startCropImage:[{type:e.Output}],imageLoaded:[{type:e.Output}],cropperReady:[{type:e.Output}],loadImageFailed:[{type:e.Output}],onResize:[{type:e.HostListener,args:["window:resize"]}],moveImg:[{type:e.HostListener,args:["document:mousemove",["$event"]]},{type:e.HostListener,args:["document:touchmove",["$event"]]}],onPinch:[{type:e.HostListener,args:["document:pinchmove",["$event"]]}],moveStop:[{type:e.HostListener,args:["document:mouseup"]},{type:e.HostListener,args:["document:touchend"]}],pinchStop:[{type:e.HostListener,args:["document:pinchend"]}]},t}();var h=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[i.CommonModule],declarations:[n],exports:[n]}]}],t}();t.ImageCropperComponent=n,t.ImageCropperModule=h,t.base64ToFile=function(t){for(var e=t.split(","),i=e[0].replace("data:","").replace(";base64",""),r=atob(e[1]),o=new ArrayBuffer(r.length),s=new Uint8Array(o),a=0;a<r.length;a+=1)s[a]=r.charCodeAt(a);return new Blob([o],{type:i})},Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("ngx-image-cropper",["exports","@angular/core","@angular/common","@angular/platform-browser"],e):e((t=t||self)["ngx-image-cropper"]={},t.ng.core,t.ng.common,t.ng.platformBrowser)}(this,(function(t,e,i,r){"use strict";var o=function(){return(o=Object.assign||function(t){for(var e,i=1,r=arguments.length;i<r;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};var s="data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAAAAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/xABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAAAAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q==";function a(t){switch("string"==typeof t&&(t=function(t){var e=new DataView(function(t){t=t.replace(/^data\:([^\;]+)\;base64,/gim,"");for(var e=atob(t),i=e.length,r=new Uint8Array(i),o=0;o<i;o++)r[o]=e.charCodeAt(o);return r.buffer}(t));if(65496!=e.getUint16(0,!1))return-2;var i=e.byteLength,r=2;for(;r<i;){if(e.getUint16(r+2,!1)<=8)return-1;var o=e.getUint16(r,!1);if(r+=2,65505==o){if(1165519206!=e.getUint32(r+=2,!1))return-1;var s=18761==e.getUint16(r+=6,!1);r+=e.getUint32(r+4,s);var a=e.getUint16(r,s);r+=2;for(var p=0;p<a;p++)if(274==e.getUint16(r+12*p,s))return e.getUint16(r+12*p+8,s)}else{if(65280!=(65280&o))break;r+=e.getUint16(r,!1)}}return-1}(t)),t){case 2:return{rotate:0,flip:!0};case 3:return{rotate:2,flip:!1};case 4:return{rotate:2,flip:!0};case 5:return{rotate:1,flip:!0};case 6:return{rotate:1,flip:!1};case 7:return{rotate:3,flip:!0};case 8:return{rotate:3,flip:!1};default:return{rotate:0,flip:!1}}}var p={Move:"move",Resize:"resize",Pinch:"pinch"},n=function(){function t(t,i){this.sanitizer=t,this.cd=i,this.Hammer="undefined"!=typeof window?window.Hammer:null,this.setImageMaxSizeRetries=0,this.cropperScaledMinWidth=20,this.cropperScaledMinHeight=20,this.exifTransform={rotate:0,flip:!1},this.autoRotateSupported=new Promise((function(t){var e=new Image;e.onload=function(){var i=1===e.width&&2===e.height;t(i)},e.src=s})),this.stepSize=3,this.marginLeft="0px",this.imageVisible=!1,this.moveTypes=p,this.format="png",this.maintainAspectRatio=!0,this.transform={},this.aspectRatio=1,this.resizeToWidth=0,this.resizeToHeight=0,this.cropperMinWidth=0,this.cropperMinHeight=0,this.canvasRotation=0,this.initialStepSize=3,this.roundCropper=!1,this.onlyScaleDown=!1,this.imageQuality=92,this.autoCrop=!0,this.containWithinAspectRatio=!1,this.hideResizeSquares=!1,this.cropper={x1:-100,y1:-100,x2:1e4,y2:1e4},this.alignImage="center",this.disabled=!1,this.imageCropped=new e.EventEmitter,this.startCropImage=new e.EventEmitter,this.imageLoaded=new e.EventEmitter,this.cropperReady=new e.EventEmitter,this.loadImageFailed=new e.EventEmitter,this.initCropper()}return t.prototype.ngOnChanges=function(t){this.onChangesInputImage(t),this.originalImage&&this.originalImage.complete&&this.exifTransform&&(t.containWithinAspectRatio||t.canvasRotation)&&this.transformOriginalImage(),t.cropper&&(this.setMaxSize(),this.setCropperScaledMinSize(),this.checkCropperPosition(!1),this.doAutoCrop(),this.cd.markForCheck()),t.aspectRatio&&this.imageVisible&&this.resetCropperPosition(),t.transform&&(this.transform=this.transform||{},this.setCssTransform(),this.doAutoCrop())},t.prototype.onChangesInputImage=function(t){(t.imageChangedEvent||t.imageURL||t.imageBase64||t.imageFile)&&this.initCropper(),t.imageChangedEvent&&this.isValidImageChangedEvent()&&this.loadImageFile(this.imageChangedEvent.target.files[0]),t.imageURL&&this.imageURL&&this.loadImageFromURL(this.imageURL),t.imageBase64&&this.imageBase64&&this.loadBase64Image(this.imageBase64),t.imageFile&&this.imageFile&&this.loadImageFile(this.imageFile)},t.prototype.isValidImageChangedEvent=function(){return this.imageChangedEvent&&this.imageChangedEvent.target&&this.imageChangedEvent.target.files&&this.imageChangedEvent.target.files.length>0},t.prototype.setCssTransform=function(){this.safeTransformStyle=this.sanitizer.bypassSecurityTrustStyle("scaleX("+(this.transform.scale||1)*(this.transform.flipH?-1:1)+")scaleY("+(this.transform.scale||1)*(this.transform.flipV?-1:1)+")rotate("+(this.transform.rotate||0)+"deg)")},t.prototype.ngOnInit=function(){this.stepSize=this.initialStepSize,this.activatePinchGesture()},t.prototype.initCropper=function(){this.imageVisible=!1,this.transformedImage=null,this.safeImgDataUrl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=",this.moveStart={active:!1,type:null,position:null,x1:0,y1:0,x2:0,y2:0,clientX:0,clientY:0},this.maxSize={width:0,height:0},this.originalSize={width:0,height:0},this.transformedSize={width:0,height:0},this.cropper.x1=-100,this.cropper.y1=-100,this.cropper.x2=1e4,this.cropper.y2=1e4},t.prototype.loadImage=function(t,e){this.isValidImageType(e)?this.loadBase64Image(t):this.loadImageFailed.emit()},t.prototype.loadImageFile=function(t){var e=this,i=new FileReader;i.onload=function(i){return e.loadImage(i.target.result,t.type)},i.readAsDataURL(t)},t.prototype.isValidImageType=function(t){return/image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(t)},t.prototype.loadBase64Image=function(t){var e=this;this.autoRotateSupported.then((function(i){return e.checkExifAndLoadBase64Image(t,i)})).then((function(){return e.transformOriginalImage()})).catch((function(t){e.loadImageFailed.emit(),e.originalImage=null,e.originalBase64=null,console.error(t)}))},t.prototype.checkExifAndLoadBase64Image=function(t,e){var i=this;return new Promise((function(r,o){i.originalImage=new Image,i.originalImage.onload=function(){i.originalBase64=t,i.exifTransform=a(e?-1:t),i.originalSize.width=i.originalImage.naturalWidth,i.originalSize.height=i.originalImage.naturalHeight,r()},i.originalImage.onerror=o,i.originalImage.src=t}))},t.prototype.loadImageFromURL=function(t){var e=this,i=new Image;i.onerror=function(){return e.loadImageFailed.emit()},i.onload=function(){var t=document.createElement("canvas"),r=t.getContext("2d");t.width=i.width,t.height=i.height,r.drawImage(i,0,0),e.loadBase64Image(t.toDataURL())},i.crossOrigin="anonymous",i.src=t},t.prototype.transformOriginalImage=function(){if(!this.originalImage||!this.originalImage.complete||!this.exifTransform)return Promise.reject(new Error("No image loaded"));var t=this.transformImageBase64();return this.setTransformedImage(t)},t.prototype.transformImageBase64=function(){var t=this.canvasRotation+this.exifTransform.rotate;if(0===t&&!this.exifTransform.flip)return this.originalBase64;var e=this.getTransformedSize(),i=document.createElement("canvas");i.width=e.width,i.height=e.height;var r=i.getContext("2d");return r.setTransform(this.exifTransform.flip?-1:1,0,0,1,i.width/2,i.height/2),r.rotate(Math.PI*(t/2)),r.drawImage(this.originalImage,-this.originalSize.width/2,-this.originalSize.height/2),i.toDataURL()},t.prototype.getTransformedSize=function(){var t=this.canvasRotation+this.exifTransform.rotate;if(this.containWithinAspectRatio){if(t%2){var e=this.originalSize.width*this.aspectRatio,i=this.originalSize.height/this.aspectRatio;return{width:Math.max(this.originalSize.height,e),height:Math.max(this.originalSize.width,i)}}e=this.originalSize.height*this.aspectRatio,i=this.originalSize.width/this.aspectRatio;return{width:Math.max(this.originalSize.width,e),height:Math.max(this.originalSize.height,i)}}return t%2?{height:this.originalSize.width,width:this.originalSize.height}:{width:this.originalSize.width,height:this.originalSize.height}},t.prototype.setTransformedImage=function(t){var e=this;return new Promise((function(i){e.transformedBase64=t,e.safeImgDataUrl=e.sanitizer.bypassSecurityTrustResourceUrl(t),e.transformedImage=new Image,e.transformedImage.onload=function(){e.transformedSize.width=e.transformedImage.naturalWidth,e.transformedSize.height=e.transformedImage.naturalHeight,e.cd.markForCheck(),i()},e.transformedImage.src=e.transformedBase64}))},t.prototype.imageLoadedInView=function(){var t=this;null!=this.transformedImage&&(this.imageLoaded.emit(),this.setImageMaxSizeRetries=0,setTimeout((function(){return t.checkImageMaxSizeRecursively()})))},t.prototype.checkImageMaxSizeRecursively=function(){var t=this;this.setImageMaxSizeRetries>40?this.loadImageFailed.emit():this.sourceImageLoaded()?(this.setMaxSize(),this.setCropperScaledMinSize(),this.resetCropperPosition(),this.cropperReady.emit(o({},this.maxSize)),this.cd.markForCheck()):(this.setImageMaxSizeRetries++,setTimeout((function(){return t.checkImageMaxSizeRecursively()}),50))},t.prototype.sourceImageLoaded=function(){return this.sourceImage&&this.sourceImage.nativeElement&&this.sourceImage.nativeElement.offsetWidth>0},t.prototype.onResize=function(){this.resizeCropperPosition(),this.setMaxSize(),this.setCropperScaledMinSize()},t.prototype.activatePinchGesture=function(){this.Hammer?new this.Hammer(this.wrapper.nativeElement).get("pinch").set({enable:!0}):e.isDevMode()&&console.warn("[NgxImageCropper] Could not find HammerJS - Pinch Gesture won't work")},t.prototype.resizeCropperPosition=function(){var t=this.sourceImage.nativeElement;this.maxSize.width===t.offsetWidth&&this.maxSize.height===t.offsetHeight||(this.cropper.x1=this.cropper.x1*t.offsetWidth/this.maxSize.width,this.cropper.x2=this.cropper.x2*t.offsetWidth/this.maxSize.width,this.cropper.y1=this.cropper.y1*t.offsetHeight/this.maxSize.height,this.cropper.y2=this.cropper.y2*t.offsetHeight/this.maxSize.height)},t.prototype.resetCropperPosition=function(){var t=this.sourceImage.nativeElement;if(this.maintainAspectRatio)if(t.offsetWidth/this.aspectRatio<t.offsetHeight){this.cropper.x1=0,this.cropper.x2=t.offsetWidth;var e=t.offsetWidth/this.aspectRatio;this.cropper.y1=(t.offsetHeight-e)/2,this.cropper.y2=this.cropper.y1+e}else{this.cropper.y1=0,this.cropper.y2=t.offsetHeight;var i=t.offsetHeight*this.aspectRatio;this.cropper.x1=(t.offsetWidth-i)/2,this.cropper.x2=this.cropper.x1+i}else this.cropper.x1=0,this.cropper.x2=t.offsetWidth,this.cropper.y1=0,this.cropper.y2=t.offsetHeight;this.doAutoCrop(),this.imageVisible=!0},t.prototype.keyboardAccess=function(t){this.changeKeyboardStepSize(t),this.keyboardMoveCropper(t)},t.prototype.changeKeyboardStepSize=function(t){t.key>="1"&&t.key<="9"&&(this.stepSize=+t.key)},t.prototype.keyboardMoveCropper=function(t){if(["ArrowUp","ArrowDown","ArrowRight","ArrowLeft"].includes(t.key)){var e=t.shiftKey?p.Resize:p.Move,i=t.altKey?this.getInvertedPositionForKey(t.key):this.getPositionForKey(t.key),r=this.getEventForKey(t.key,this.stepSize);t.preventDefault(),t.stopPropagation(),this.startMove({clientX:0,clientY:0},e,i),this.moveImg(r),this.moveStop()}},t.prototype.getPositionForKey=function(t){switch(t){case"ArrowUp":return"top";case"ArrowRight":return"right";case"ArrowDown":return"bottom";case"ArrowLeft":default:return"left"}},t.prototype.getInvertedPositionForKey=function(t){switch(t){case"ArrowUp":return"bottom";case"ArrowRight":return"left";case"ArrowDown":return"top";case"ArrowLeft":default:return"right"}},t.prototype.getEventForKey=function(t,e){switch(t){case"ArrowUp":return{clientX:0,clientY:-1*e};case"ArrowRight":return{clientX:e,clientY:0};case"ArrowDown":return{clientX:0,clientY:e};case"ArrowLeft":default:return{clientX:-1*e,clientY:0}}},t.prototype.startMove=function(t,e,i){void 0===i&&(i=null),this.moveStart&&this.moveStart.active&&this.moveStart.type===p.Pinch||(t.preventDefault&&t.preventDefault(),this.moveStart=o({active:!0,type:e,position:i,clientX:this.getClientX(t),clientY:this.getClientY(t)},this.cropper))},t.prototype.startPinch=function(t){this.safeImgDataUrl&&(t.preventDefault&&t.preventDefault(),this.moveStart=o({active:!0,type:p.Pinch,position:"center",clientX:this.cropper.x1+(this.cropper.x2-this.cropper.x1)/2,clientY:this.cropper.y1+(this.cropper.y2-this.cropper.y1)/2},this.cropper))},t.prototype.moveImg=function(t){this.moveStart.active&&(t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),this.moveStart.type===p.Move?(this.move(t),this.checkCropperPosition(!0)):this.moveStart.type===p.Resize&&(this.resize(t),this.checkCropperPosition(!1)),this.cd.detectChanges())},t.prototype.onPinch=function(t){this.moveStart.active&&(t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),this.moveStart.type===p.Pinch&&(this.resize(t),this.checkCropperPosition(!1)),this.cd.detectChanges())},t.prototype.setMaxSize=function(){if(this.sourceImage){var t=this.sourceImage.nativeElement;this.maxSize.width=t.offsetWidth,this.maxSize.height=t.offsetHeight,this.marginLeft=this.sanitizer.bypassSecurityTrustStyle("calc(50% - "+this.maxSize.width/2+"px)")}},t.prototype.setCropperScaledMinSize=function(){this.transformedImage?(this.setCropperScaledMinWidth(),this.setCropperScaledMinHeight()):(this.cropperScaledMinWidth=20,this.cropperScaledMinHeight=20)},t.prototype.setCropperScaledMinWidth=function(){this.cropperScaledMinWidth=this.cropperMinWidth>0?Math.max(20,this.cropperMinWidth/this.transformedImage.width*this.maxSize.width):20},t.prototype.setCropperScaledMinHeight=function(){this.maintainAspectRatio?this.cropperScaledMinHeight=Math.max(20,this.cropperScaledMinWidth/this.aspectRatio):this.cropperMinHeight>0?this.cropperScaledMinHeight=Math.max(20,this.cropperMinHeight/this.transformedImage.height*this.maxSize.height):this.cropperScaledMinHeight=20},t.prototype.checkCropperPosition=function(t){void 0===t&&(t=!1),this.cropper.x1<0&&(this.cropper.x2-=t?this.cropper.x1:0,this.cropper.x1=0),this.cropper.y1<0&&(this.cropper.y2-=t?this.cropper.y1:0,this.cropper.y1=0),this.cropper.x2>this.maxSize.width&&(this.cropper.x1-=t?this.cropper.x2-this.maxSize.width:0,this.cropper.x2=this.maxSize.width),this.cropper.y2>this.maxSize.height&&(this.cropper.y1-=t?this.cropper.y2-this.maxSize.height:0,this.cropper.y2=this.maxSize.height)},t.prototype.moveStop=function(){this.moveStart.active&&(this.moveStart.active=!1,this.doAutoCrop())},t.prototype.pinchStop=function(){this.moveStart.active&&(this.moveStart.active=!1,this.doAutoCrop())},t.prototype.move=function(t){var e=this.getClientX(t)-this.moveStart.clientX,i=this.getClientY(t)-this.moveStart.clientY;this.cropper.x1=this.moveStart.x1+e,this.cropper.y1=this.moveStart.y1+i,this.cropper.x2=this.moveStart.x2+e,this.cropper.y2=this.moveStart.y2+i},t.prototype.resize=function(t){var e=this.getClientX(t)-this.moveStart.clientX,i=this.getClientY(t)-this.moveStart.clientY;switch(this.moveStart.position){case"left":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-this.cropperScaledMinWidth);break;case"topleft":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-this.cropperScaledMinWidth),this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-this.cropperScaledMinHeight);break;case"top":this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-this.cropperScaledMinHeight);break;case"topright":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+this.cropperScaledMinWidth),this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-this.cropperScaledMinHeight);break;case"right":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+this.cropperScaledMinWidth);break;case"bottomright":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+this.cropperScaledMinWidth),this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+this.cropperScaledMinHeight);break;case"bottom":this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+this.cropperScaledMinHeight);break;case"bottomleft":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-this.cropperScaledMinWidth),this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+this.cropperScaledMinHeight);break;case"center":var r=t.scale,o=Math.abs(this.moveStart.x2-this.moveStart.x1)*r,s=Math.abs(this.moveStart.y2-this.moveStart.y1)*r,a=this.cropper.x1,p=this.cropper.y1;this.cropper.x1=Math.min(this.moveStart.clientX-o/2,this.cropper.x2-this.cropperScaledMinWidth),this.cropper.y1=Math.min(this.moveStart.clientY-s/2,this.cropper.y2-this.cropperScaledMinHeight),this.cropper.x2=Math.max(this.moveStart.clientX+o/2,a+this.cropperScaledMinWidth),this.cropper.y2=Math.max(this.moveStart.clientY+s/2,p+this.cropperScaledMinHeight)}this.maintainAspectRatio&&this.checkAspectRatio()},t.prototype.checkAspectRatio=function(){var t=0,e=0;switch(this.moveStart.position){case"top":this.cropper.x2=this.cropper.x1+(this.cropper.y2-this.cropper.y1)*this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(0-this.cropper.y1,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y1+=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"bottom":this.cropper.x2=this.cropper.x1+(this.cropper.y2-this.cropper.y1)*this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(this.cropper.y2-this.maxSize.height,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"topleft":this.cropper.y1=this.cropper.y2-(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(0-this.cropper.x1,0),e=Math.max(0-this.cropper.y1,0),(t>0||e>0)&&(this.cropper.x1+=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y1+=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"topright":this.cropper.y1=this.cropper.y2-(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(0-this.cropper.y1,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y1+=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"right":case"bottomright":this.cropper.y2=this.cropper.y1+(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(this.cropper.y2-this.maxSize.height,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"left":case"bottomleft":this.cropper.y2=this.cropper.y1+(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(0-this.cropper.x1,0),e=Math.max(this.cropper.y2-this.maxSize.height,0),(t>0||e>0)&&(this.cropper.x1+=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"center":this.cropper.x2=this.cropper.x1+(this.cropper.y2-this.cropper.y1)*this.aspectRatio,this.cropper.y2=this.cropper.y1+(this.cropper.x2-this.cropper.x1)/this.aspectRatio;var i=Math.max(0-this.cropper.x1,0),r=Math.max(this.cropper.x2-this.maxSize.width,0),o=Math.max(this.cropper.y2-this.maxSize.height,0),s=Math.max(0-this.cropper.y1,0);(i>0||r>0||o>0||s>0)&&(this.cropper.x1+=o*this.aspectRatio>i?o*this.aspectRatio:i,this.cropper.x2-=s*this.aspectRatio>r?s*this.aspectRatio:r,this.cropper.y1+=s*this.aspectRatio>r?s:r/this.aspectRatio,this.cropper.y2-=o*this.aspectRatio>i?o:i/this.aspectRatio)}},t.prototype.doAutoCrop=function(){this.autoCrop&&this.crop()},t.prototype.crop=function(){if(this.sourceImage&&this.sourceImage.nativeElement&&null!=this.transformedImage){this.startCropImage.emit();var t=this.getImagePosition(),e=t.x2-t.x1,i=t.y2-t.y1,r=document.createElement("canvas");r.width=e,r.height=i;var s=r.getContext("2d");if(s){null!=this.backgroundColor&&(s.fillStyle=this.backgroundColor,s.fillRect(0,0,e,i));var a=(this.transform.scale||1)*(this.transform.flipH?-1:1),p=(this.transform.scale||1)*(this.transform.flipV?-1:1);s.setTransform(a,0,0,p,this.transformedSize.width/2,this.transformedSize.height/2),s.translate(-t.x1/a,-t.y1/p),s.rotate((this.transform.rotate||0)*Math.PI/180),s.drawImage(this.transformedImage,-this.transformedSize.width/2,-this.transformedSize.height/2);var n={width:e,height:i,imagePosition:t,cropperPosition:o({},this.cropper)};this.containWithinAspectRatio&&(n.offsetImagePosition=this.getOffsetImagePosition());var h=this.getResizeRatio(e,i);return 1!==h&&(n.width=Math.round(e*h),n.height=this.maintainAspectRatio?Math.round(n.width/this.aspectRatio):Math.round(i*h),function(t,e,i){var r=t.width,o=t.height,s=r/(e=Math.round(e)),a=o/(i=Math.round(i)),p=Math.ceil(s/2),n=Math.ceil(a/2),h=t.getContext("2d");if(h){for(var c=h.getImageData(0,0,r,o),m=h.createImageData(e,i),g=c.data,l=m.data,d=0;d<i;d++)for(var u=0;u<e;u++){var f=4*(u+d*e),y=d*a,v=0,x=0,A=0,S=0,z=0,w=0,M=0,I=Math.floor(u*s),b=Math.floor(d*a),R=Math.ceil((u+1)*s),E=Math.ceil((d+1)*a);R=Math.min(R,r),E=Math.min(E,o);for(var C=b;C<E;C++)for(var B=Math.abs(y-C)/n,T=u*s,Q=B*B,k=I;k<R;k++){var H=Math.abs(T-k)/p,P=Math.sqrt(Q+H*H);if(!(P>=1)){var W=4*(k+C*r);M+=(v=2*P*P*P-3*P*P+1)*g[W+3],A+=v,g[W+3]<255&&(v=v*g[W+3]/250),S+=v*g[W],z+=v*g[W+1],w+=v*g[W+2],x+=v}}l[f]=S/x,l[f+1]=z/x,l[f+2]=w/x,l[f+3]=M/A}t.width=e,t.height=i,h.putImageData(m,0,0)}}(r,n.width,n.height)),n.base64=this.cropToBase64(r),this.imageCropped.emit(n),n}}return null},t.prototype.getImagePosition=function(){var t=this.sourceImage.nativeElement,e=this.transformedSize.width/t.offsetWidth,i={x1:Math.round(this.cropper.x1*e),y1:Math.round(this.cropper.y1*e),x2:Math.round(this.cropper.x2*e),y2:Math.round(this.cropper.y2*e)};return this.containWithinAspectRatio||(i.x1=Math.max(i.x1,0),i.y1=Math.max(i.y1,0),i.x2=Math.min(i.x2,this.transformedSize.width),i.y2=Math.min(i.y2,this.transformedSize.height)),i},t.prototype.getOffsetImagePosition=function(){var t,e,i=this.canvasRotation+this.exifTransform.rotate,r=this.sourceImage.nativeElement,o=this.transformedSize.width/r.offsetWidth;i%2?(t=(this.transformedSize.width-this.originalSize.height)/2,e=(this.transformedSize.height-this.originalSize.width)/2):(t=(this.transformedSize.width-this.originalSize.width)/2,e=(this.transformedSize.height-this.originalSize.height)/2);var s={x1:Math.round(this.cropper.x1*o)-t,y1:Math.round(this.cropper.y1*o)-e,x2:Math.round(this.cropper.x2*o)-t,y2:Math.round(this.cropper.y2*o)-e};return this.containWithinAspectRatio||(s.x1=Math.max(s.x1,0),s.y1=Math.max(s.y1,0),s.x2=Math.min(s.x2,this.transformedSize.width),s.y2=Math.min(s.y2,this.transformedSize.height)),s},t.prototype.cropToBase64=function(t){return t.toDataURL("image/"+this.format,this.getQuality())},t.prototype.getQuality=function(){return Math.min(1,Math.max(0,this.imageQuality/100))},t.prototype.getResizeRatio=function(t,e){if(this.resizeToWidth>0){if(!this.onlyScaleDown||t>this.resizeToWidth)return this.resizeToWidth/t}else if(this.resizeToHeight>0&&(!this.onlyScaleDown||e>this.resizeToHeight))return this.resizeToHeight/e;return 1},t.prototype.getClientX=function(t){return(t.touches&&t.touches[0]?t.touches[0].clientX:t.clientX)||0},t.prototype.getClientY=function(t){return(t.touches&&t.touches[0]?t.touches[0].clientY:t.clientY)||0},t.decorators=[{type:e.Component,args:[{selector:"image-cropper",template:'<div [style.background]="imageVisible && backgroundColor"\n     (pinchstart)="startPinch($event)"\n     #wrapper\n>\n    <img\n      #sourceImage\n      class="source-image"\n      *ngIf="safeImgDataUrl"\n      [src]="safeImgDataUrl"\n      [style.visibility]="imageVisible ? \'visible\' : \'hidden\'"\n      [style.transform]="safeTransformStyle"\n      (load)="imageLoadedInView()"\n    />\n    <div\n        class="overlay"\n        [style.width.px]="maxSize.width"\n        [style.height.px]="maxSize.height"\n        [style.margin-left]="alignImage === \'center\' ? marginLeft : null"\n    ></div>\n    <div class="cropper"\n         *ngIf="imageVisible"\n         [class.rounded]="roundCropper"\n         [style.top.px]="cropper.y1"\n         [style.left.px]="cropper.x1"\n         [style.width.px]="cropper.x2 - cropper.x1"\n         [style.height.px]="cropper.y2 - cropper.y1"\n         [style.margin-left]="alignImage === \'center\' ? marginLeft : null"\n         [style.visibility]="imageVisible ? \'visible\' : \'hidden\'"\n         (keydown)="keyboardAccess($event)"\n         tabindex="0"\n    >\n        <div\n            (mousedown)="startMove($event, moveTypes.Move)"\n            (touchstart)="startMove($event, moveTypes.Move)"\n            class="move">\n        </div>\n        <ng-container *ngIf="!hideResizeSquares">\n            <span class="resize topleft"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'topleft\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'topleft\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize top">\n                <span class="square"></span>\n            </span>\n            <span class="resize topright"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'topright\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'topright\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize right">\n                <span class="square"></span>\n            </span>\n            <span class="resize bottomright"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'bottomright\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'bottomright\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize bottom">\n                <span class="square"></span>\n            </span>\n            <span class="resize bottomleft"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'bottomleft\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'bottomleft\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize left">\n                <span class="square"></span>\n            </span>\n            <span class="resize-bar top"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'top\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'top\')">\n            </span>\n            <span class="resize-bar right"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'right\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'right\')">\n            </span>\n            <span class="resize-bar bottom"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'bottom\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'bottom\')">\n            </span>\n            <span class="resize-bar left"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'left\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'left\')">\n            </span>\n        </ng-container>\n    </div>\n</div>\n',changeDetection:e.ChangeDetectionStrategy.OnPush,styles:[':host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.source-image{max-width:100%;max-height:100%;transform-origin:center}:host .overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color,#fff) solid 100vw;top:0;left:0}:host .cropper{position:absolute;display:flex;color:#53535c;background:0 0;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color,rgba(255,255,255,.3)) solid 100vw;touch-action:none}:host .cropper:after{position:absolute;content:"";top:0;bottom:0;left:0;right:0;pointer-events:none;border:1px dashed;opacity:.75;color:inherit;z-index:1}:host .cropper .move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .cropper:focus .move{border-color:#1e90ff;border-width:2px}:host .cropper .resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .cropper .resize .square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .cropper .resize.topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .cropper .resize.top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .cropper .resize.topright{top:-12px;right:-12px;cursor:nesw-resize}:host .cropper .resize.right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .cropper .resize.bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .cropper .resize.bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .cropper .resize.bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .cropper .resize.left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .cropper .resize-bar{position:absolute;z-index:1}:host .cropper .resize-bar.top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .cropper .resize-bar.right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .cropper .resize-bar.bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .cropper .resize-bar.left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .cropper.rounded{outline-color:transparent}:host .cropper.rounded:after{border-radius:100%;box-shadow:0 0 0 100vw rgba(255,255,255,.3);box-shadow:0 0 0 100vw var(--cropper-outline-color,rgba(255,255,255,.3))}@media (orientation:portrait){:host .cropper{outline-width:100vh}:host .cropper.rounded:after{box-shadow:0 0 0 100vh rgba(255,255,255,.3);box-shadow:0 0 0 100vh var(--cropper-outline-color,rgba(255,255,255,.3))}}:host .cropper.rounded .move{border-radius:100%}:host.disabled .cropper .move,:host.disabled .cropper .resize,:host.disabled .cropper .resize-bar{display:none}']}]}],t.ctorParameters=function(){return[{type:r.DomSanitizer},{type:e.ChangeDetectorRef}]},t.propDecorators={wrapper:[{type:e.ViewChild,args:["wrapper",{static:!0}]}],sourceImage:[{type:e.ViewChild,args:["sourceImage",{static:!1}]}],imageChangedEvent:[{type:e.Input}],imageURL:[{type:e.Input}],imageBase64:[{type:e.Input}],imageFile:[{type:e.Input}],format:[{type:e.Input}],maintainAspectRatio:[{type:e.Input}],transform:[{type:e.Input}],aspectRatio:[{type:e.Input}],resizeToWidth:[{type:e.Input}],resizeToHeight:[{type:e.Input}],cropperMinWidth:[{type:e.Input}],cropperMinHeight:[{type:e.Input}],canvasRotation:[{type:e.Input}],initialStepSize:[{type:e.Input}],roundCropper:[{type:e.Input}],onlyScaleDown:[{type:e.Input}],imageQuality:[{type:e.Input}],autoCrop:[{type:e.Input}],backgroundColor:[{type:e.Input}],containWithinAspectRatio:[{type:e.Input}],hideResizeSquares:[{type:e.Input}],cropper:[{type:e.Input}],alignImage:[{type:e.HostBinding,args:["style.text-align"]},{type:e.Input}],disabled:[{type:e.HostBinding,args:["class.disabled"]},{type:e.Input}],imageCropped:[{type:e.Output}],startCropImage:[{type:e.Output}],imageLoaded:[{type:e.Output}],cropperReady:[{type:e.Output}],loadImageFailed:[{type:e.Output}],onResize:[{type:e.HostListener,args:["window:resize"]}],moveImg:[{type:e.HostListener,args:["document:mousemove",["$event"]]},{type:e.HostListener,args:["document:touchmove",["$event"]]}],onPinch:[{type:e.HostListener,args:["document:pinchmove",["$event"]]}],moveStop:[{type:e.HostListener,args:["document:mouseup"]},{type:e.HostListener,args:["document:touchend"]}],pinchStop:[{type:e.HostListener,args:["document:pinchend"]}]},t}();var h=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[i.CommonModule],declarations:[n],exports:[n]}]}],t}();t.ImageCropperComponent=n,t.ImageCropperModule=h,t.base64ToFile=function(t){for(var e=t.split(","),i=e[0].replace("data:","").replace(";base64",""),r=atob(e[1]),o=new ArrayBuffer(r.length),s=new Uint8Array(o),a=0;a<r.length;a+=1)s[a]=r.charCodeAt(a);return new Blob([o],{type:i})},Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=ngx-image-cropper.umd.min.js.map

esm2015/lib/interfaces/image-cropped-event.interface.js

@@ -12,4 +12,2 @@ /**
     ImageCroppedEvent.prototype.base64;
-    /** @type {?|undefined} */
-    ImageCroppedEvent.prototype.file;
     /** @type {?} */
@@ -26,2 +24,2 @@ ImageCroppedEvent.prototype.width;
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtY3JvcHBlZC1ldmVudC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtaW1hZ2UtY3JvcHBlci8iLCJzb3VyY2VzIjpbImxpYi9pbnRlcmZhY2VzL2ltYWdlLWNyb3BwZWQtZXZlbnQuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFFQSx1Q0FRQzs7O0lBUEcsbUNBQXVCOztJQUN2QixpQ0FBbUI7O0lBQ25CLGtDQUFjOztJQUNkLG1DQUFlOztJQUNmLDRDQUFpQzs7SUFDakMsMENBQStCOztJQUMvQixnREFBc0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDcm9wcGVyUG9zaXRpb24gfSBmcm9tICcuL2Nyb3BwZXItcG9zaXRpb24uaW50ZXJmYWNlJztcblxuZXhwb3J0IGludGVyZmFjZSBJbWFnZUNyb3BwZWRFdmVudCB7XG4gICAgYmFzZTY0Pzogc3RyaW5nIHwgbnVsbDtcbiAgICBmaWxlPzogQmxvYiB8IG51bGw7XG4gICAgd2lkdGg6IG51bWJlcjtcbiAgICBoZWlnaHQ6IG51bWJlcjtcbiAgICBjcm9wcGVyUG9zaXRpb246IENyb3BwZXJQb3NpdGlvbjtcbiAgICBpbWFnZVBvc2l0aW9uOiBDcm9wcGVyUG9zaXRpb247XG4gICAgb2Zmc2V0SW1hZ2VQb3NpdGlvbj86IENyb3BwZXJQb3NpdGlvbjtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtY3JvcHBlZC1ldmVudC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtaW1hZ2UtY3JvcHBlci8iLCJzb3VyY2VzIjpbImxpYi9pbnRlcmZhY2VzL2ltYWdlLWNyb3BwZWQtZXZlbnQuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFFQSx1Q0FPQzs7O0lBTkcsbUNBQXVCOztJQUN2QixrQ0FBYzs7SUFDZCxtQ0FBZTs7SUFDZiw0Q0FBaUM7O0lBQ2pDLDBDQUErQjs7SUFDL0IsZ0RBQXNDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ3JvcHBlclBvc2l0aW9uIH0gZnJvbSAnLi9jcm9wcGVyLXBvc2l0aW9uLmludGVyZmFjZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW1hZ2VDcm9wcGVkRXZlbnQge1xuICAgIGJhc2U2ND86IHN0cmluZyB8IG51bGw7XG4gICAgd2lkdGg6IG51bWJlcjtcbiAgICBoZWlnaHQ6IG51bWJlcjtcbiAgICBjcm9wcGVyUG9zaXRpb246IENyb3BwZXJQb3NpdGlvbjtcbiAgICBpbWFnZVBvc2l0aW9uOiBDcm9wcGVyUG9zaXRpb247XG4gICAgb2Zmc2V0SW1hZ2VQb3NpdGlvbj86IENyb3BwZXJQb3NpdGlvbjtcbn1cbiJdfQ==

esm5/lib/interfaces/image-cropped-event.interface.js

@@ -12,4 +12,2 @@ /**
     ImageCroppedEvent.prototype.base64;
-    /** @type {?|undefined} */
-    ImageCroppedEvent.prototype.file;
     /** @type {?} */
@@ -26,2 +24,2 @@ ImageCroppedEvent.prototype.width;
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtY3JvcHBlZC1ldmVudC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtaW1hZ2UtY3JvcHBlci8iLCJzb3VyY2VzIjpbImxpYi9pbnRlcmZhY2VzL2ltYWdlLWNyb3BwZWQtZXZlbnQuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFFQSx1Q0FRQzs7O0lBUEcsbUNBQXVCOztJQUN2QixpQ0FBbUI7O0lBQ25CLGtDQUFjOztJQUNkLG1DQUFlOztJQUNmLDRDQUFpQzs7SUFDakMsMENBQStCOztJQUMvQixnREFBc0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDcm9wcGVyUG9zaXRpb24gfSBmcm9tICcuL2Nyb3BwZXItcG9zaXRpb24uaW50ZXJmYWNlJztcblxuZXhwb3J0IGludGVyZmFjZSBJbWFnZUNyb3BwZWRFdmVudCB7XG4gICAgYmFzZTY0Pzogc3RyaW5nIHwgbnVsbDtcbiAgICBmaWxlPzogQmxvYiB8IG51bGw7XG4gICAgd2lkdGg6IG51bWJlcjtcbiAgICBoZWlnaHQ6IG51bWJlcjtcbiAgICBjcm9wcGVyUG9zaXRpb246IENyb3BwZXJQb3NpdGlvbjtcbiAgICBpbWFnZVBvc2l0aW9uOiBDcm9wcGVyUG9zaXRpb247XG4gICAgb2Zmc2V0SW1hZ2VQb3NpdGlvbj86IENyb3BwZXJQb3NpdGlvbjtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtY3JvcHBlZC1ldmVudC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtaW1hZ2UtY3JvcHBlci8iLCJzb3VyY2VzIjpbImxpYi9pbnRlcmZhY2VzL2ltYWdlLWNyb3BwZWQtZXZlbnQuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFFQSx1Q0FPQzs7O0lBTkcsbUNBQXVCOztJQUN2QixrQ0FBYzs7SUFDZCxtQ0FBZTs7SUFDZiw0Q0FBaUM7O0lBQ2pDLDBDQUErQjs7SUFDL0IsZ0RBQXNDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ3JvcHBlclBvc2l0aW9uIH0gZnJvbSAnLi9jcm9wcGVyLXBvc2l0aW9uLmludGVyZmFjZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW1hZ2VDcm9wcGVkRXZlbnQge1xuICAgIGJhc2U2ND86IHN0cmluZyB8IG51bGw7XG4gICAgd2lkdGg6IG51bWJlcjtcbiAgICBoZWlnaHQ6IG51bWJlcjtcbiAgICBjcm9wcGVyUG9zaXRpb246IENyb3BwZXJQb3NpdGlvbjtcbiAgICBpbWFnZVBvc2l0aW9uOiBDcm9wcGVyUG9zaXRpb247XG4gICAgb2Zmc2V0SW1hZ2VQb3NpdGlvbj86IENyb3BwZXJQb3NpdGlvbjtcbn1cbiJdfQ==

lib/component/image-cropper.component.d.ts

@@ -72,5 +72,5 @@ import { ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
     private loadImageFromURL;
-    private getTransformedSize;
     private transformOriginalImage;
     private transformImageBase64;
+    private getTransformedSize;
     private setTransformedImage;
@@ -77,0 +77,0 @@ imageLoadedInView(): void;

lib/interfaces/image-cropped-event.interface.d.ts

 import { CropperPosition } from './cropper-position.interface';
 export interface ImageCroppedEvent {
     base64?: string | null;
-    file?: Blob | null;
     width: number;
@@ -6,0 +5,0 @@ height: number;

ngx-image-cropper.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"exports":[{"export":[{"name":"CropperPosition","as":"CropperPosition"}],"from":"./lib/cropper-position.interface"},{"export":[{"name":"Dimensions","as":"Dimensions"}],"from":"./lib/dimensions.interface"},{"export":[{"name":"ImageCroppedEvent","as":"ImageCroppedEvent"}],"from":"./lib/image-cropped-event.interface"},{"export":[{"name":"MoveStart","as":"MoveStart"}],"from":"./lib/move-start.interface"},{"export":[{"name":"ImageTransform","as":"ImageTransform"}],"from":"./lib/image-transform.interface"}],"metadata":{"ImageCropperModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":8}],"declarations":[{"__symbolic":"reference","name":"ImageCropperComponent"}],"exports":[{"__symbolic":"reference","name":"ImageCropperComponent"}]}]}],"members":{}},"ImageCropperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"image-cropper","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":28,"character":21},"member":"OnPush"},"template":"<div [style.background]=\"imageVisible && backgroundColor\"\n     (pinchstart)=\"startPinch($event)\"\n     #wrapper\n>\n    <img\n      #sourceImage\n      class=\"source-image\"\n      *ngIf=\"safeImgDataUrl\"\n      [src]=\"safeImgDataUrl\"\n      [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n      [style.transform]=\"safeTransformStyle\"\n      (load)=\"imageLoadedInView()\"\n    />\n    <div\n        class=\"overlay\"\n        [style.width.px]=\"maxSize.width\"\n        [style.height.px]=\"maxSize.height\"\n        [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n    ></div>\n    <div class=\"cropper\"\n         *ngIf=\"imageVisible\"\n         [class.rounded]=\"roundCropper\"\n         [style.top.px]=\"cropper.y1\"\n         [style.left.px]=\"cropper.x1\"\n         [style.width.px]=\"cropper.x2 - cropper.x1\"\n         [style.height.px]=\"cropper.y2 - cropper.y1\"\n         [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n         [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n         (keydown)=\"keyboardAccess($event)\"\n         tabindex=\"0\"\n    >\n        <div\n            (mousedown)=\"startMove($event, moveTypes.Move)\"\n            (touchstart)=\"startMove($event, moveTypes.Move)\"\n            class=\"move\">\n        </div>\n        <ng-container *ngIf=\"!hideResizeSquares\">\n            <span class=\"resize topleft\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize top\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize topright\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize right\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize bottomright\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize bottom\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize bottomleft\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize left\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize-bar top\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\">\n            </span>\n            <span class=\"resize-bar right\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\">\n            </span>\n            <span class=\"resize-bar bottom\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\">\n            </span>\n            <span class=\"resize-bar left\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\">\n            </span>\n        </ng-container>\n    </div>\n</div>\n","styles":[":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.source-image{max-width:100%;max-height:100%;transform-origin:center}:host .overlay{position:absolute;pointer-events:none;touch-action:none;outline:#fff solid 100vw;top:0;left:0}:host .cropper{position:absolute;display:flex;color:#53535c;background:0 0;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color,rgba(255,255,255,.3)) solid 100vw;touch-action:none}:host .cropper:after{position:absolute;content:\"\";top:0;bottom:0;left:0;right:0;pointer-events:none;border:1px dashed;opacity:.75;color:inherit;z-index:1}:host .cropper .move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .cropper:focus .move{border-color:#1e90ff;border-width:2px}:host .cropper .resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .cropper .resize .square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .cropper .resize.topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .cropper .resize.top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .cropper .resize.topright{top:-12px;right:-12px;cursor:nesw-resize}:host .cropper .resize.right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .cropper .resize.bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .cropper .resize.bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .cropper .resize.bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .cropper .resize.left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .cropper .resize-bar{position:absolute;z-index:1}:host .cropper .resize-bar.top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .cropper .resize-bar.right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .cropper .resize-bar.bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .cropper .resize-bar.left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .cropper.rounded{outline-color:transparent}:host .cropper.rounded:after{border-radius:100%;box-shadow:0 0 0 100vw rgba(255,255,255,.3);box-shadow:0 0 0 100vw var(--cropper-outline-color,rgba(255,255,255,.3))}@media (orientation:portrait){:host .cropper{outline-width:100vh}:host .cropper.rounded:after{box-shadow:0 0 0 100vh rgba(255,255,255,.3);box-shadow:0 0 0 100vh var(--cropper-outline-color,rgba(255,255,255,.3))}}:host .cropper.rounded .move{border-radius:100%}:host.disabled .cropper .move,:host.disabled .cropper .resize,:host.disabled .cropper .resize-bar{display:none}"]}]}],"members":{"wrapper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":55,"character":5},"arguments":["wrapper",{"static":true}]}]}],"sourceImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":5},"arguments":["sourceImage",{"static":false}]}]}],"imageChangedEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"imageURL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"imageBase64":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"imageFile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"maintainAspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"transform":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"resizeToWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"resizeToHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"cropperMinWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"cropperMinHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"canvasRotation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"initialStepSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"roundCropper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"onlyScaleDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"imageQuality":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"autoCrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"backgroundColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"containWithinAspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"hideResizeSquares":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"cropper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"alignImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":86,"character":5},"arguments":["style.text-align"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":88,"character":5},"arguments":["class.disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"imageCropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":91,"character":5}}]}],"startCropImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":92,"character":5}}]}],"imageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":5}}]}],"cropperReady":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":5}}]}],"loadImageFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":95,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":97,"character":35},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":98,"character":28}]}],"ngOnChanges":[{"__symbolic":"method"}],"onChangesInputImage":[{"__symbolic":"method"}],"isValidImageChangedEvent":[{"__symbolic":"method"}],"setCssTransform":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"initCropper":[{"__symbolic":"method"}],"loadImage":[{"__symbolic":"method"}],"loadImageFile":[{"__symbolic":"method"}],"isValidImageType":[{"__symbolic":"method"}],"loadBase64Image":[{"__symbolic":"method"}],"checkExifAndLoadBase64Image":[{"__symbolic":"method"}],"loadImageFromURL":[{"__symbolic":"method"}],"getTransformedSize":[{"__symbolic":"method"}],"transformOriginalImage":[{"__symbolic":"method"}],"transformImageBase64":[{"__symbolic":"method"}],"setTransformedImage":[{"__symbolic":"method"}],"imageLoadedInView":[{"__symbolic":"method"}],"checkImageMaxSizeRecursively":[{"__symbolic":"method"}],"sourceImageLoaded":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":365,"character":5},"arguments":["window:resize"]}]}],"activatePinchGesture":[{"__symbolic":"method"}],"resizeCropperPosition":[{"__symbolic":"method"}],"resetCropperPosition":[{"__symbolic":"method"}],"keyboardAccess":[{"__symbolic":"method"}],"changeKeyboardStepSize":[{"__symbolic":"method"}],"keyboardMoveCropper":[{"__symbolic":"method"}],"getPositionForKey":[{"__symbolic":"method"}],"getInvertedPositionForKey":[{"__symbolic":"method"}],"getEventForKey":[{"__symbolic":"method"}],"startMove":[{"__symbolic":"method"}],"startPinch":[{"__symbolic":"method"}],"moveImg":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":518,"character":5},"arguments":["document:mousemove",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":519,"character":5},"arguments":["document:touchmove",["$event"]]}]}],"onPinch":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":539,"character":5},"arguments":["document:pinchmove",["$event"]]}]}],"setMaxSize":[{"__symbolic":"method"}],"setCropperScaledMinSize":[{"__symbolic":"method"}],"setCropperScaledMinWidth":[{"__symbolic":"method"}],"setCropperScaledMinHeight":[{"__symbolic":"method"}],"checkCropperPosition":[{"__symbolic":"method"}],"moveStop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":610,"character":5},"arguments":["document:mouseup"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":611,"character":5},"arguments":["document:touchend"]}]}],"pinchStop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":619,"character":5},"arguments":["document:pinchend"]}]}],"move":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"checkAspectRatio":[{"__symbolic":"method"}],"doAutoCrop":[{"__symbolic":"method"}],"crop":[{"__symbolic":"method"}],"getImagePosition":[{"__symbolic":"method"}],"getOffsetImagePosition":[{"__symbolic":"method"}],"cropToBase64":[{"__symbolic":"method"}],"getQuality":[{"__symbolic":"method"}],"getResizeRatio":[{"__symbolic":"method"}],"getClientX":[{"__symbolic":"method"}],"getClientY":[{"__symbolic":"method"}]}},"base64ToFile":{"__symbolic":"function"}},"origins":{"ImageCropperModule":"./lib/image-cropper.module","ImageCropperComponent":"./lib/component/image-cropper.component","base64ToFile":"./lib/utils/blob.utils"},"importAs":"ngx-image-cropper"}
+{"__symbolic":"module","version":4,"exports":[{"export":[{"name":"CropperPosition","as":"CropperPosition"}],"from":"./lib/cropper-position.interface"},{"export":[{"name":"Dimensions","as":"Dimensions"}],"from":"./lib/dimensions.interface"},{"export":[{"name":"ImageCroppedEvent","as":"ImageCroppedEvent"}],"from":"./lib/image-cropped-event.interface"},{"export":[{"name":"MoveStart","as":"MoveStart"}],"from":"./lib/move-start.interface"},{"export":[{"name":"ImageTransform","as":"ImageTransform"}],"from":"./lib/image-transform.interface"}],"metadata":{"ImageCropperModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":8}],"declarations":[{"__symbolic":"reference","name":"ImageCropperComponent"}],"exports":[{"__symbolic":"reference","name":"ImageCropperComponent"}]}]}],"members":{}},"ImageCropperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"image-cropper","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":28,"character":21},"member":"OnPush"},"template":"<div [style.background]=\"imageVisible && backgroundColor\"\n     (pinchstart)=\"startPinch($event)\"\n     #wrapper\n>\n    <img\n      #sourceImage\n      class=\"source-image\"\n      *ngIf=\"safeImgDataUrl\"\n      [src]=\"safeImgDataUrl\"\n      [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n      [style.transform]=\"safeTransformStyle\"\n      (load)=\"imageLoadedInView()\"\n    />\n    <div\n        class=\"overlay\"\n        [style.width.px]=\"maxSize.width\"\n        [style.height.px]=\"maxSize.height\"\n        [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n    ></div>\n    <div class=\"cropper\"\n         *ngIf=\"imageVisible\"\n         [class.rounded]=\"roundCropper\"\n         [style.top.px]=\"cropper.y1\"\n         [style.left.px]=\"cropper.x1\"\n         [style.width.px]=\"cropper.x2 - cropper.x1\"\n         [style.height.px]=\"cropper.y2 - cropper.y1\"\n         [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n         [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n         (keydown)=\"keyboardAccess($event)\"\n         tabindex=\"0\"\n    >\n        <div\n            (mousedown)=\"startMove($event, moveTypes.Move)\"\n            (touchstart)=\"startMove($event, moveTypes.Move)\"\n            class=\"move\">\n        </div>\n        <ng-container *ngIf=\"!hideResizeSquares\">\n            <span class=\"resize topleft\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize top\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize topright\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize right\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize bottomright\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize bottom\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize bottomleft\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize left\">\n                <span class=\"square\"></span>\n            </span>\n            <span class=\"resize-bar top\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\">\n            </span>\n            <span class=\"resize-bar right\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\">\n            </span>\n            <span class=\"resize-bar bottom\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\">\n            </span>\n            <span class=\"resize-bar left\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\">\n            </span>\n        </ng-container>\n    </div>\n</div>\n","styles":[":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.source-image{max-width:100%;max-height:100%;transform-origin:center}:host .overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color,#fff) solid 100vw;top:0;left:0}:host .cropper{position:absolute;display:flex;color:#53535c;background:0 0;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color,rgba(255,255,255,.3)) solid 100vw;touch-action:none}:host .cropper:after{position:absolute;content:\"\";top:0;bottom:0;left:0;right:0;pointer-events:none;border:1px dashed;opacity:.75;color:inherit;z-index:1}:host .cropper .move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .cropper:focus .move{border-color:#1e90ff;border-width:2px}:host .cropper .resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .cropper .resize .square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .cropper .resize.topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .cropper .resize.top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .cropper .resize.topright{top:-12px;right:-12px;cursor:nesw-resize}:host .cropper .resize.right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .cropper .resize.bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .cropper .resize.bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .cropper .resize.bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .cropper .resize.left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .cropper .resize-bar{position:absolute;z-index:1}:host .cropper .resize-bar.top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .cropper .resize-bar.right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .cropper .resize-bar.bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .cropper .resize-bar.left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .cropper.rounded{outline-color:transparent}:host .cropper.rounded:after{border-radius:100%;box-shadow:0 0 0 100vw rgba(255,255,255,.3);box-shadow:0 0 0 100vw var(--cropper-outline-color,rgba(255,255,255,.3))}@media (orientation:portrait){:host .cropper{outline-width:100vh}:host .cropper.rounded:after{box-shadow:0 0 0 100vh rgba(255,255,255,.3);box-shadow:0 0 0 100vh var(--cropper-outline-color,rgba(255,255,255,.3))}}:host .cropper.rounded .move{border-radius:100%}:host.disabled .cropper .move,:host.disabled .cropper .resize,:host.disabled .cropper .resize-bar{display:none}"]}]}],"members":{"wrapper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":55,"character":5},"arguments":["wrapper",{"static":true}]}]}],"sourceImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":5},"arguments":["sourceImage",{"static":false}]}]}],"imageChangedEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"imageURL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"imageBase64":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"imageFile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"maintainAspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"transform":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"resizeToWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"resizeToHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"cropperMinWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"cropperMinHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"canvasRotation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"initialStepSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"roundCropper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"onlyScaleDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"imageQuality":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"autoCrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"backgroundColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"containWithinAspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"hideResizeSquares":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"cropper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"alignImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":86,"character":5},"arguments":["style.text-align"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":88,"character":5},"arguments":["class.disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"imageCropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":91,"character":5}}]}],"startCropImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":92,"character":5}}]}],"imageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":5}}]}],"cropperReady":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":5}}]}],"loadImageFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":95,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":97,"character":35},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":98,"character":28}]}],"ngOnChanges":[{"__symbolic":"method"}],"onChangesInputImage":[{"__symbolic":"method"}],"isValidImageChangedEvent":[{"__symbolic":"method"}],"setCssTransform":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"initCropper":[{"__symbolic":"method"}],"loadImage":[{"__symbolic":"method"}],"loadImageFile":[{"__symbolic":"method"}],"isValidImageType":[{"__symbolic":"method"}],"loadBase64Image":[{"__symbolic":"method"}],"checkExifAndLoadBase64Image":[{"__symbolic":"method"}],"loadImageFromURL":[{"__symbolic":"method"}],"transformOriginalImage":[{"__symbolic":"method"}],"transformImageBase64":[{"__symbolic":"method"}],"getTransformedSize":[{"__symbolic":"method"}],"setTransformedImage":[{"__symbolic":"method"}],"imageLoadedInView":[{"__symbolic":"method"}],"checkImageMaxSizeRecursively":[{"__symbolic":"method"}],"sourceImageLoaded":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":369,"character":5},"arguments":["window:resize"]}]}],"activatePinchGesture":[{"__symbolic":"method"}],"resizeCropperPosition":[{"__symbolic":"method"}],"resetCropperPosition":[{"__symbolic":"method"}],"keyboardAccess":[{"__symbolic":"method"}],"changeKeyboardStepSize":[{"__symbolic":"method"}],"keyboardMoveCropper":[{"__symbolic":"method"}],"getPositionForKey":[{"__symbolic":"method"}],"getInvertedPositionForKey":[{"__symbolic":"method"}],"getEventForKey":[{"__symbolic":"method"}],"startMove":[{"__symbolic":"method"}],"startPinch":[{"__symbolic":"method"}],"moveImg":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":522,"character":5},"arguments":["document:mousemove",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":523,"character":5},"arguments":["document:touchmove",["$event"]]}]}],"onPinch":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":543,"character":5},"arguments":["document:pinchmove",["$event"]]}]}],"setMaxSize":[{"__symbolic":"method"}],"setCropperScaledMinSize":[{"__symbolic":"method"}],"setCropperScaledMinWidth":[{"__symbolic":"method"}],"setCropperScaledMinHeight":[{"__symbolic":"method"}],"checkCropperPosition":[{"__symbolic":"method"}],"moveStop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":614,"character":5},"arguments":["document:mouseup"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":615,"character":5},"arguments":["document:touchend"]}]}],"pinchStop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":623,"character":5},"arguments":["document:pinchend"]}]}],"move":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"checkAspectRatio":[{"__symbolic":"method"}],"doAutoCrop":[{"__symbolic":"method"}],"crop":[{"__symbolic":"method"}],"getImagePosition":[{"__symbolic":"method"}],"getOffsetImagePosition":[{"__symbolic":"method"}],"cropToBase64":[{"__symbolic":"method"}],"getQuality":[{"__symbolic":"method"}],"getResizeRatio":[{"__symbolic":"method"}],"getClientX":[{"__symbolic":"method"}],"getClientY":[{"__symbolic":"method"}]}},"base64ToFile":{"__symbolic":"function"}},"origins":{"ImageCropperModule":"./lib/image-cropper.module","ImageCropperComponent":"./lib/component/image-cropper.component","base64ToFile":"./lib/utils/blob.utils"},"importAs":"ngx-image-cropper"}

package.json

 {
   "name": "ngx-image-cropper",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "description": "An image cropper for Angular",
@@ -5,0 +5,0 @@ "author": "Martijn Willekens",

README.md

@@ -9,3 +9,6 @@ # Image cropper for Angular
 
-### Example usage:
+### Upgrade instructions
+For a list of breaking changes and update instructions, go to [releases](https://github.com/Mawi137/ngx-image-cropper/releases).
+
+### Example usage
 Add the ImageCropperModule to the imports of the module which will be using the Image Cropper.
@@ -115,3 +118,4 @@ ```
 | -------------------------- |---------- | ------------ | --------------- |
-| `--cropper-outline-color`      | string    | rgba(255,255,255,0.3) | Use this to set the outline Color of the Cropper. This is the Overlay-Color over the Image which is not part of the Cropper. |
+| `--cropper-outline-color`  | string    | rgba(255,255,255,0.3) | The background color you see around the cropper |
+| `--cropper-overlay-color`  | string    | rgba(255,255,255)     | The background color you see around the image |
 
@@ -118,0 +122,0 @@ ### Outputs

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1059274

increased by0.21%

Lines of code

9674

increased by0.1%

Number of lines in readme file

162

increased by2.53%

No dependency changes