react-image-picker-editor - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

dist/index.js

@@ -1,2 +0,2 @@
-var e,t=require("react"),i=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function n(){return(n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e}).apply(this,arguments)}function a(e,t){return(a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}var o={"Upload a image":"Suba una imagen","You must edit the image in order to resize it":"Debe editar la imagen para disminuir su tamaño","too large":"muy grande","Open the editor panel":"Abra el panel de edición","Download the image":"Descarge la imagen","Control Panel":"Panel de control",Remove:"Quitar",Quality:"Calidad","Max dimensions":"Dimensiones","aspect-ratio":"relación-aspecto","max-width(px)":"max. ancho","max-height(px)":"max. alto",Format:"Formato",Crop:"Recortar","width(px)":"ancho(px)","height(px)":"altura(px)",Save:"Guardar",Contrast:"Contraste",Blur:"Blur",Brightness:"Brillo",Grayscale:"Scala de gris",Saturate:"Saturación",Sepia:"Sepia",Rotate:"Rotar",Undo:"Deshacer"},r={"Upload a image":"Upload a image","You must edit the image in order to resize it":"You must edit the image in order to resize it","too large":"too large","Open the editor panel":"Open the editor panel","Download the image":"Download the image","Control Panel":"Control Panel",Quality:"Quality","Max dimensions":"Max dimensions","aspect-ratio":"aspect-ratio","max-width(px)":"max-width(px)","max-height(px)":"max-height(px)",Format:"Format",Crop:"Crop","width(px)":"width(px)","height(px)":"height(px)",Remove:"Remove",Save:"Save",Contrast:"Contrast",Blur:"Blur",Brightness:"Brightness",Grayscale:"Grayscale",Saturate:"Saturate",Sepia:"Sepia",Rotate:"Rotate",Undo:"Undo"},s={"Upload a image":"Charger une image","You must edit the image in order to resize it":"Vous devez éditer l'image pour changer sa taille","too large":"Trop grande","Open the editor panel":"Ouvrir le panneau d'édition","Download the image":"Télécharger l'image","Control Panel":"Panneau de commande",Remove:"Supprimer",Quality:"Qualité","Max dimensions":"Dimensions maximales","aspect-ratio":"rapport de forme","max-width(px)":"largeur max.","max-height(px)":"hauteur max",Format:"Format",Crop:"Recadrer","width(px)":"largeur(px)","height(px)":"hauteur(px)",Save:"Sauvez",Contrast:"Contraste",Blur:"Blur",Brightness:"Luminosité",Grayscale:"Grayscale",Saturate:"Saturer",Sepia:"Seiche",Undo:"Annuler"},l={"Upload a image":"Bild hochladen","You must edit the image in order to resize it":"Sie müssen das Bild bearbeiten, um seine Größe zu ändern","too large":"zu groß","Open the editor panel":"Editor-Fenster öffnen","Download the image":"Bild herunterladen","Control Panel":"Bedienfeld",Quality:"Qualität","Max dimensions":"Maximale Größe","aspect-ratio":"Seitenverhältnis","max-width(px)":"Max. Breite(px)","max-height(px)":"Max. Höhe(px)",Format:"Format",Crop:"Zuschneiden","width(px)":"Breite(px)","height(px)":"Höhe(px)",Remove:"Entfernen",Save:"Speichern",Contrast:"Kontrast",Blur:"Blur",Brightness:"Helligkeit",Grayscale:"Graustufen",Saturer:"Sättigen",Sepia:"Tintenfisch",Undo:"Undo"},c=function(e,t,i,n){return void 0===t&&(t=!1),new Promise(function(a,o){try{var r=document.createElement("img");r.src=e+"",r.crossOrigin="Anonymous";var s=i.quality/100,l=i.maintainAspectRatio;return r.onload=function(){var e,o=document.createElement("canvas"),c=o.getContext("2d"),h=r.width/r.height,u=i.maxWidth,d=i.maxHeight;null!=n&&n.getDimFromImage&&(u=r.width,d=r.height),l?(o.width=u,o.height=u/h,t&&(o.width=d*h,o.height=d)):(o.width=u,o.height=d),i.basicFilters&&(c.filter=(e=i.basicFilters,Object.keys(e).map(function(t){return["blur"].includes(t)?t+"("+e[t]+"px)":t+"("+e[t]+")"}).join(""))),c.drawImage(r,0,0,o.width,o.height);var m=o.toDataURL("image/"+i.format,s);a({dataUri:m,width:o.width,height:o.height})},Promise.resolve()}catch(e){return Promise.reject(e)}}).then(function(e){return i.maxHeight=e.height,i.maxWidth=e.width,{imageUri:e.dataUri,state:h(i,e.dataUri)}})},h=function(e,t){return e.arrayCopiedImages.length<=25?e.arrayCopiedImages.push({lastImage:t,width:e.maxWidth,height:e.maxHeight,quality:e.quality,format:e.format,originImageSrc:e.originImageSrc,basicFilters:e.basicFilters}):e.arrayCopiedImages[e.arrayCopiedImages.length-1]={lastImage:t,width:e.maxWidth,height:e.maxHeight,quality:e.quality,format:e.format,originImageSrc:e.originImageSrc,basicFilters:e.basicFilters},JSON.parse(JSON.stringify(e))};function u(e,t){try{var i=e()}catch(e){return t(e)}return i&&i.then?i.then(void 0,t):i}"undefined"!=typeof Symbol&&(Symbol.iterator||(Symbol.iterator=Symbol("Symbol.iterator"))),"undefined"!=typeof Symbol&&(Symbol.asyncIterator||(Symbol.asyncIterator=Symbol("Symbol.asyncIterator")));var d=t.memo(function(e){var n=e.activeIndex,a=void 0===n?0:n,o=e.children,r=e.backgroundColor,s=void 0===r?"inherit":r,l=e.color,c=void 0===l?"#428CFF":l,h=e.indicatorStyle,u=void 0===h?"bottomLine":h,d=e.onTabChange,m=void 0===d?function(e){}:d,p=e.transitionMs,g=void 0===p?375:p,f=e.borderLine,v=void 0!==f&&f,y=e.fontColor,E=void 0===y?"inherit":y,x=e.lazy,w=void 0!==x&&x,b=t.useState([]),C=b[0],S=b[1],N=t.useState(a),I=N[0],z=N[1],M=t.useRef(null);t.useEffect(function(){var e=o instanceof Array?o:[o];!function(e){try{e.map(function(e){if(!e.props.name)throw new Error("Inside of TabContainer component only can be rendered TabItem component, and its need a name prop");return!0})}catch(e){throw new Error("The TabContainer Component must has a TabItem as child component")}}(e);var t=e.map(function(e){return{label:e.props.name,icon:e.props.icon,disabled:e.props.disabled}});if(a>t.length-1||a<0)throw new Error("Invalid range for activeIndex "+a);S(t)},[o]),t.useEffect(function(){var e,t,i=o instanceof Array?o:[o];if(a>i.length-1||a<0)throw new Error("Invalid range for activeIndex "+a);z(null!==(e=i[a])&&void 0!==e&&null!==(t=e.props)&&void 0!==t&&t.disabled?0:a)},[a]),t.useEffect(function(){C&&C.length&&m(I)},[I]);var R=o instanceof Array?o:[o];return i.createElement("div",{ref:M,className:"tab-pp"},i.createElement("div",{className:"header",style:{backgroundColor:s,borderBottom:v?"1px solid #323232":"undet"}},C.map(function(e,t){return i.createElement("button",{onClick:function(){e.disabled||z(t)},key:e.label,style:{color:t!=I||"simple"!==u&&"bottomLine"!==u?E:c,backgroundColor:t==I&&"button"===u?c:"inherit"},className:t==I?"itemlabel "+u+" active":"itemlabel",disabled:e.disabled},e.icon," ",e.label,"bottomLine"===u&&i.createElement("div",{style:{backgroundColor:c}}))})),i.createElement("div",{className:"body"},R.map(function(e,t){return t<I?i.createElement("div",{style:{transform:"translate3d(-100%, 0px, 0px)",height:"0px",overflow:"hidden",transition:"transform "+g/1e3+"s ease"},key:t,className:"body-content"},!w&&e):t>I?i.createElement("div",{style:{transform:"translate3d(100%, 0px, 0px)",height:"0px",overflow:"hidden",transition:"transform "+g/1e3+"s ease"},key:t,className:"body-content"},!w&&e):i.createElement("div",{style:{visibility:"inherit",overflow:"auto",height:"auto",position:"relative",transition:"transform "+g/1e3+"s ease"},key:t,className:"body-content"},e)})))}),m=t.memo(function(e){return i.createElement("div",{style:{padding:"1rem 0.5rem"}},e.children)}),p=["onInputChangedEnd","onChangedDelayed","onChangedValue","delayMs"],g=t.memo(function(e){var n=e.onInputChangedEnd,a=e.onChangedDelayed,o=e.onChangedValue,r=e.delayMs,s=function(e,t){if(null==e)return{};var i,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(i=o[n])>=0||(a[i]=e[i]);return a}(e,p),l=t.useState(e.value),c=l[0],h=l[1],u=t.useRef(),d=t.useRef(!0);function m(t){["checkbox","radio"].includes(e.type)?(h(t.target.checked),o&&o(t.target.checked)):(h(t.target.value),o&&o(t.target.value))}return t.useRef(!1),t.useEffect(function(){if(a){if(!d.current)return clearTimeout(u.current),u.current=setTimeout(function(){clearTimeout(u.current),a(c)},r||100),function(){clearTimeout(u.current)};d.current=!1}},[c]),i.createElement(i.Fragment,null,n&&i.createElement("input",Object.assign({},s,{className:null==s?void 0:s.className,style:s.style,value:e.value,onChange:m,onBlur:function(e){n(e.target.value)},onKeyDown:function(e){"Enter"==e.key&&n(c)}})),!n&&i.createElement("input",Object.assign({},s,{className:null==s?void 0:s.className,style:s.style,value:e.value,onChange:m})))}),f={contrast:1,blur:0,brightness:1,grayscale:0,invert:0,saturate:1,sepia:0},v=t.memo(function(e){var a=e.labels,o=e.color,r=e.initialState,s=void 0===r?f:r,l=e.changeFilter,c=void 0===l?function(){}:l,h=t.useState(s),u=h[0],d=h[1];return t.useEffect(function(){d(s?JSON.parse(JSON.stringify(n({},u,s))):f)},[s]),i.createElement("div",null,i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},a.Contrast),i.createElement("p",{className:"item-panel"},(+u.contrast).toFixed(2))),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{className:"input-range",onChangedDelayed:function(e){c(n({},u,{contrast:e}))},delayMs:100,onChangedValue:function(e){d(n({},u,{contrast:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.contrast})),i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},a.Brightness),i.createElement("p",{className:"item-panel"},(+u.brightness).toFixed(2))),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{className:"input-range",onChangedDelayed:function(e){c(n({},u,{brightness:e}))},onChangedValue:function(e){d(n({},u,{brightness:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.brightness})),i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},a.Grayscale),i.createElement("p",{className:"item-panel"},(+u.grayscale).toFixed(2))),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{className:"input-range",onChangedDelayed:function(e){c(n({},u,{grayscale:e}))},onChangedValue:function(e){d(n({},u,{grayscale:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.grayscale})),i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},a.Saturate),i.createElement("p",{className:"item-panel"},(+u.saturate).toFixed(2))),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{className:"input-range",onChangedDelayed:function(e){c(n({},u,{saturate:e}))},onChangedValue:function(e){d(n({},u,{saturate:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.saturate})),i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},a.Sepia),i.createElement("p",{className:"item-panel"},(+u.sepia).toFixed(2))),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{className:"input-range",onChangedDelayed:function(e){c(n({},u,{sepia:e}))},onChangedValue:function(e){d(n({},u,{sepia:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.sepia})),i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},a.Blur),i.createElement("p",{className:"item-panel"},(+u.blur).toFixed(2))),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{className:"input-range",onChangedDelayed:function(e){c(n({},u,{blur:e}))},onChangedValue:function(e){d(n({},u,{blur:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.blur})))});!function(){for(var e=0,t=["ms","moz","webkit","o"],i=0;i<t.length&&!window.requestAnimationFrame;i++)window.requestAnimationFrame=window[t[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[t[i]+"CancelAnimationFrame"]||window[t[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(t,i){var n=(new Date).getTime(),a=Math.max(0,16-(n-e)),o=window.setTimeout(function(){t(n+a)},a);return e=n+a,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(e){clearTimeout(e)})}(),function(){if("function"==typeof window.CustomEvent)return!1;function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),function(e){try{return new CustomEvent("test"),!1}catch(e){}function t(t,i){i=i||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(t,i.bubbles,i.cancelable,e,0,0,0,0,0,!1,!1,!1,!1,0,null),n}t.prototype=Event.prototype,e.MouseEvent=t}(window);var y=function(e,t,i,n){var a=this;function o(e){e.stopPropagation(),document.removeEventListener("mouseup",o),document.removeEventListener("mousemove",r),a.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:a}}))}function r(e){e.stopPropagation(),a.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}this.position=e,this.constraints=t,this.cursor=i,this.eventBus=n,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=i,this.el.addEventListener("mousedown",function(e){e.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",r),a.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:a}}))})},E=function(){function e(e,t,i,n){this.x1=e,this.y1=t,this.x2=i,this.y2=n}var t=e.prototype;return t.set=function(e,t,i,n){return void 0===e&&(e=null),void 0===t&&(t=null),void 0===i&&(i=null),void 0===n&&(n=null),this.x1=null==e?this.x1:e,this.y1=null==t?this.y1:t,this.x2=null==i?this.x2:i,this.y2=null==n?this.y2:n,this},t.width=function(){return Math.abs(this.x2-this.x1)},t.height=function(){return Math.abs(this.y2-this.y1)},t.resize=function(e,t,i){void 0===i&&(i=[0,0]);var n=this.x1+this.width()*i[0],a=this.y1+this.height()*i[1];return this.x1=n-e*i[0],this.y1=a-t*i[1],this.x2=this.x1+e,this.y2=this.y1+t,this},t.scale=function(e,t){void 0===t&&(t=[0,0]);var i=this.width()*e,n=this.height()*e;return this.resize(i,n,t),this},t.move=function(e,t){void 0===e&&(e=null),void 0===t&&(t=null);var i=this.width(),n=this.height();return t=null===t?this.y1:t,this.x1=e=null===e?this.x1:e,this.y1=t,this.x2=e+i,this.y2=t+n,this},t.getRelativePoint=function(e){return void 0===e&&(e=[0,0]),[this.width()*e[0],this.height()*e[1]]},t.getAbsolutePoint=function(e){return void 0===e&&(e=[0,0]),[this.x1+this.width()*e[0],this.y1+this.height()*e[1]]},t.constrainToRatio=function(e,t,i){if(void 0===t&&(t=[0,0]),void 0===i&&(i="height"),null!==e){switch(this.width(),this.height(),i){case"height":this.resize(this.width(),this.width()*e,t);break;case"width":this.resize(1*this.height()/e,this.height(),t);break;default:this.resize(this.width(),this.width()*e,t)}return this}},t.constrainToBoundary=function(e,t,i){void 0===i&&(i=[0,0]);var n=this.getAbsolutePoint(i),a=n[0],o=n[1],r=a,s=o,l=e-a,c=t-o,h=-2*i[1]+1,u=null,d=null;switch(-2*i[0]+1){case-1:u=r;break;case 0:u=2*Math.min(r,l);break;case 1:u=l}switch(h){case-1:d=s;break;case 0:d=2*Math.min(s,c);break;case 1:d=c}if(this.width()>u){var m=u/this.width();this.scale(m,i)}if(this.height()>d){var p=d/this.height();this.scale(p,i)}return this},t.constrainToSize=function(e,t,i,n,a,o){if(void 0===e&&(e=null),void 0===t&&(t=null),void 0===i&&(i=null),void 0===n&&(n=null),void 0===a&&(a=[0,0]),void 0===o&&(o=null),o&&(o>1?(e=1*t/o,n*=o):o<1&&(t=e*o,i=1*n/o)),e&&this.width()>e){var r=e,s=null===o?this.height():t;this.resize(r,s,a)}if(t&&this.height()>t){var l=null===o?this.width():e;this.resize(l,t,a)}if(i&&this.width()<i){var c=i,h=null===o?this.height():n;this.resize(c,h,a)}if(n&&this.height()<n){var u=null===o?this.width():i;this.resize(u,n,a)}return this},e}();function x(e){e.preventDefault();var t=e.changedTouches[0];t.target.dispatchEvent(new MouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[e.type],{bubbles:!0,cancelable:!0,view:window,clientX:t.clientX,clientY:t.clientY,screenX:t.screenX,screenY:t.screenY}))}var w=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}];function b(e,t){return Number(Math.round(e+"e"+t)+"e-"+t)}var C=function(e){var t,i;function o(t,i,n){return void 0===n&&(n=!1),e.call(this,t,i,n)||this}i=e,(t=o).prototype=Object.create(i.prototype),t.prototype.constructor=t,a(t,i);var r=o.prototype;return r.getValue=function(t){return e.prototype.getValue.call(this,t)},r.setImage=function(t){return e.prototype.setImage.call(this,t)},r.destroy=function(){return e.prototype.destroy.call(this)},r.moveTo=function(e,t){return this.box.move(e,t),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},r.resizeTo=function(e,t,i){return void 0===i&&(i=[.5,.5]),this.box.resize(e,t,i),this.box.constrainToBoundary(this.cropperEl.offsetWidth,this.cropperEl.offsetHeight,[.5,.5]),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},r.scaleBy=function(e,t){return void 0===t&&(t=[.5,.5]),this.box.scale(e,t),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},r.reset=function(e){return e&&(this.options=n({},this.options,{newOptions:e})),this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},r.enableVisibility=function(e){var t=document.querySelector(".croppr-container");if(!t)throw new Error("THere is not any croppr");t.style.display=e?"block":"none"},o}(function(){function e(t,i,n){var a=this;if(void 0===n&&(n=!1),this.options=e.parseOptions(i||{}),!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";if(!t.getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:t.parentNode,element:t},n||(0===t.width||0===t.height?t.onload=function(){a.initialize(t)}:this.initialize(t))}var t=e.prototype;return t.initialize=function(e){this.createDOM(e),this.options.convertToPixels(this.cropperEl),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.box=this.initializeBox(this.options),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this)},t.createDOM=function(e){var t;this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,(t=this.containerEl).addEventListener("touchstart",x),t.addEventListener("touchend",x),t.addEventListener("touchmove",x),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",e.getAttribute("src")),this.imageEl.setAttribute("alt",e.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.innerHTML=new Array(9).fill(1).map(function(){return'<div style="border: 1px dashed #fafafa"></div>'}).join(""),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var i=document.createElement("div");i.className="croppr-handleContainer",this.handles=[];for(var n=0;n<w.length;n++){var a=new y(w[n].position,w[n].constraints,w[n].cursor,this.eventBus);this.handles.push(a),i.appendChild(a.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(i),this.containerEl.appendChild(this.cropperEl),e.parentElement.replaceChild(this.containerEl,e)},t.setImage=function(e){var t=this;return this.imageEl.onload=function(){t.box=t.initializeBox(t.options),t.redraw()},this.imageEl.src=e,this.imageClippedEl.src=e,this},t.destroy=function(){this._restore.parent.replaceChild(this._restore.element,this.containerEl)},t.initializeBox=function(e){var t=new E(0,0,e.startSize.width,e.startSize.height);t.constrainToRatio(e.aspectRatio,[.5,.5]);var i=e.minSize,n=e.maxSize;t.constrainToSize(n.width,n.height,i.width,i.height,[.5,.5],e.aspectRatio),t.constrainToBoundary(this.cropperEl.offsetWidth,this.cropperEl.offsetHeight,[.5,.5]);var a=this.cropperEl.offsetWidth/2-t.width()/2,o=this.cropperEl.offsetHeight/2-t.height()/2;return t.move(a,o),t},t.redraw=function(){var e=this,t=Math.round(this.box.width()),i=Math.round(this.box.height()),n=Math.round(this.box.x1),a=Math.round(this.box.y1),o=Math.round(this.box.x2),r=Math.round(this.box.y2);window.requestAnimationFrame(function(){e.regionEl.style.transform="translate("+n+"px, "+a+"px)",e.regionEl.style.width=t+"px",e.regionEl.style.height=i+"px",e.imageClippedEl.style.clip="rect("+a+"px, "+o+"px, "+r+"px, "+n+"px)";for(var s=e.box.getAbsolutePoint([.5,.5]),l=s[1]-e.cropperEl.offsetHeight/2>>31,c=-2*((s[0]-e.cropperEl.offsetWidth/2>>31^l)+l+l+4)+8,h=0;h<e.handles.length;h++){var u=e.handles[h],d=a+i*u.position[1]-u.el.offsetHeight/2;u.el.style.transform="translate("+Math.round(n+t*u.position[0]-u.el.offsetWidth/2)+"px, "+Math.round(d)+"px)",u.el.style.zIndex=c==h?5:4}})},t.attachHandlerEvents=function(){var e=this.eventBus;e.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),e.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),e.addEventListener("handleend",this.onHandleMoveEnd.bind(this))},t.attachRegionEvents=function(){var e=this.eventBus;function t(t){t.stopPropagation(),e.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function i(n){n.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",t),e.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}this.regionEl.addEventListener("mousedown",function(n){n.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",t),e.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}),e.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),e.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),e.addEventListener("regionend",this.onRegionMoveEnd.bind(this))},t.attachOverlayEvents=function(){var e=this,t=null;function i(t){t.stopPropagation(),e.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function n(a){a.stopPropagation(),document.removeEventListener("mouseup",n),document.removeEventListener("mousemove",i),1!==e.box.width()||1!==e.box.height()?e.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:a.clientX,mouseY:a.clientY}})):e.box=t}this.overlayEl.addEventListener("mousedown",function(a){a.stopPropagation(),document.addEventListener("mouseup",n),document.addEventListener("mousemove",i);var o=e.cropperEl.getBoundingClientRect(),r=a.clientX-o.left,s=a.clientY-o.top;t=e.box,e.box=new E(r,s,r+1,s+1),e.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:e.handles[4]}}))})},t.onHandleMoveStart=function(e){var t=e.detail.handle,i=[1-t.position[0],1-t.position[1]],n=this.box.getAbsolutePoint(i);this.activeHandle={handle:t,originPoint:i,originX:n[0],originY:n[1]},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())},t.onHandleMoveMoving=function(e){var t=e.detail,i=t.mouseX,n=t.mouseY,a=this.cropperEl.getBoundingClientRect();(i-=a.left)<0?i=0:i>a.width&&(i=a.width),(n-=a.top)<0?n=0:n>a.height&&(n=a.height);var o=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,s=this.activeHandle.originY,l=this.activeHandle.handle,c=1===l.constraints[0],h=1===l.constraints[1],u=1===l.constraints[2],d=1===l.constraints[3],m=(d||h)&&(c||u),p=d||h?r:this.box.x1,g=d||h?r:this.box.x2,f=c||u?s:this.box.y1,v=c||u?s:this.box.y2;p=d?i:p,g=h?i:g,f=c?n:f,v=u?n:v;var y=!1,x=!1;if((d||h)&&(y=d?i>r:i<r),(c||u)&&(x=c?n>s:n<s),y){var w=p;p=g,g=w,o[0]=1-o[0]}if(x){var b=f;f=v,v=b,o[1]=1-o[1]}var C=new E(p,f,g,v);if(this.options.aspectRatio){var S=this.options.aspectRatio,N=!1;m?N=n>C.y1+S*C.width()||n<C.y2-S*C.width():(c||u)&&(N=!0),C.constrainToRatio(S,o,N?"width":"height")}var I=this.options.minSize,z=this.options.maxSize;C.constrainToSize(z.width,z.height,I.width,I.height,o,this.options.aspectRatio),C.constrainToBoundary(this.cropperEl.offsetWidth,this.cropperEl.offsetHeight,o),this.box=C,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())},t.onHandleMoveEnd=function(e){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())},t.onRegionMoveStart=function(e){var t=e.detail,i=t.mouseX,n=t.mouseY,a=this.cropperEl.getBoundingClientRect();this.currentMove={offsetX:(i-=a.left)-this.box.x1,offsetY:(n-=a.top)-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())},t.onRegionMoveMoving=function(e){var t=e.detail,i=t.mouseX,n=t.mouseY,a=this.currentMove,o=a.offsetX,r=a.offsetY,s=this.cropperEl.getBoundingClientRect();this.box.move((i-=s.left)-o,(n-=s.top)-r),this.box.x1<0&&this.box.move(0,null),this.box.x2>s.width&&this.box.move(s.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>s.height&&this.box.move(null,s.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())},t.onRegionMoveEnd=function(e){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())},t.getValue=function(e){if(void 0===e&&(e=null),null===e&&(e=this.options.returnMode),"real"==e){var t=this.imageEl.naturalWidth,i=this.imageEl.naturalHeight,n=this.imageEl.getBoundingClientRect(),a=t/n.width,o=i/n.height;return{x:Math.round(this.box.x1*a),y:Math.round(this.box.y1*o),width:Math.round(this.box.width()*a),height:Math.round(this.box.height()*o)}}if("ratio"==e){var r=this.imageEl.getBoundingClientRect(),s=r.width,l=r.height;return{x:b(this.box.x1/s,3),y:b(this.box.y1/l,3),width:b(this.box.width()/s,3),height:b(this.box.height()/l,3)}}if("raw"==e)return{x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}},e.parseOptions=function(e){var t=null;void 0!==e.aspectRatio&&("number"==typeof e.aspectRatio?t=e.aspectRatio:e.aspectRatio instanceof Array&&(t=e.aspectRatio[1]/e.aspectRatio[0]));var i=null;null!=e.maxSize&&(i={width:e.maxSize[0]||null,height:e.maxSize[1]||null,unit:e.maxSize[2]||"px"});var n=null;null!=e.minSize&&(n={width:e.minSize[0]||null,height:e.minSize[1]||null,unit:e.minSize[2]||"px"});var a=null;null!=e.startSize&&(a={width:e.startSize[0]||null,height:e.startSize[1]||null,unit:e.startSize[2]||"%"});var o=null;"function"==typeof e.onInitialize&&(o=e.onInitialize);var r=null;"function"==typeof e.onCropStart&&(r=e.onCropStart);var s=null;"function"==typeof e.onCropEnd&&(s=e.onCropEnd);var l=null;"function"==typeof e.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),l=e.onUpdate),"function"==typeof e.onCropMove&&(l=e.onCropMove);var c=null;if(void 0!==e.returnMode){var h=e.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(h))throw"Invalid return mode.";c=h}var u=function(e,t){return null!==e?e:t};return{aspectRatio:u(t,null),maxSize:u(i,{width:null,height:null}),minSize:u(n,{width:null,height:null}),startSize:u(a,{width:100,height:100,unit:"%"}),returnMode:u(c,"real"),onInitialize:u(o,null),onCropStart:u(r,null),onCropMove:u(l,null),onCropEnd:u(s,null),convertToPixels:function(e){for(var t=e.offsetWidth,i=e.offsetHeight,n=["maxSize","minSize","startSize"],a=0;a<n.length;a++){var o=n[a];null!==this[o]&&("%"==this[o].unit&&(null!==this[o].width&&(this[o].width=this[o].width/100*t),null!==this[o].height&&(this[o].height=this[o].height/100*i)),delete this[o].unit)}}}},e}()),S=t.memo(function(e){var a=e.src,o=e.size,r=e.croppUpdate,s=t.useState(),l=s[0],c=s[1],h=t.useState({width:150,height:150}),u=h[0],d=h[1],m=t.useRef(null),p=t.useRef();return t.useEffect(function(){o&&(d(n({},o)),m.current&&m.current.resizeTo(o.width,o.height))},[o]),t.useEffect(function(){a&&c(a)},[a]),t.useEffect(function(){return p.current&&l&&(m.current=new C("#croppr",{minSize:[32,32,"px"],startSize:[u.width,u.height,"px"],onInitialize:function(e){r(null==e?void 0:e.getValue())},onCropEnd:function(e){r(e)}})),function(){var e;return null==m||null===(e=m.current)||void 0===e?void 0:e.destroy()}},[p.current,l]),i.createElement("div",{className:"CropprWrapper"},i.createElement("img",{ref:p,src:l,id:"croppr"}))}),N={quality:92,maxHeight:1e3,maxWidth:1e3,cropHeight:150,cropWidth:150,maintainAspectRatio:!0,format:"jpeg",arrayCopiedImages:[],originImageSrc:""},I=t.memo(function(e){var a=function(e,t){void 0===t&&(t=!1);try{var i=Math.max(Math.min(e,4e3),32),a=n({},I);if(t){if(a.maxHeight===i)return Promise.resolve();a.maxHeight=i}else{if(a.maxWidth===i)return Promise.resolve();a.maxWidth=i}z(a);var r=u(function(){return Promise.resolve(o(a,t)).then(function(){})},function(e){console.log("onChangeSize ~ error",e)});return Promise.resolve(r&&r.then?r.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},o=function(e,t){void 0===t&&(t=!1);try{var i=u(function(){return Promise.resolve(c(I.originImageSrc,t,e)).then(function(e){var t=e.state;B(e.imageUri),z(t)})},function(e){console.log("🚀 ~ file: EditImage.tsx ~ line 73 ~ applyChanges ~ error",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},r=e.labels,s=void 0===r?{}:r,l=e.image,p=void 0===l?"":l,f=e.color,y=void 0===f?"#1e88e5":f,E=e.initialState,x=void 0===E?N:E,w=e.saveUpdates,b=void 0===w?function(){}:w,C=t.useState(x),I=C[0],z=C[1],M=t.useState(""),R=M[0],B=M[1],P=t.useState(!1),F=P[0],H=P[1],k=t.useState({width:150,height:150}),j=k[0],W=k[1],O=t.useState(),T=O[0],A=O[1],D=t.useRef(!1);function U(e,t){e&&(z(n({},I,{cropWidth:e})),W(n({},j,{width:e}))),t&&(z(n({},I,{cropHeight:t})),W(n({},j,{height:t})))}function L(e){void 0===e&&(e=!1),H(!1),b(e?{state:I,imageSrc:R}:null)}t.useEffect(function(){D.current=window.innerWidth<800,z(JSON.parse(JSON.stringify(n({},I,x))))},[x]),t.useEffect(function(){B(p)},[p]),t.useEffect(function(){F||W({width:150,height:150})},[F]);var q=t.useMemo(function(){return R&&R.length?Math.ceil(3/4*R.length/1024):""},[R]);function V(e){return JSON.parse(JSON.stringify(e))}return i.createElement("div",{className:"EditImage"},i.createElement("div",{id:"popup",className:"popup"},i.createElement("div",{style:{flexDirection:"row",boxSizing:"border-box",display:"flex",placeContent:"center flex-end",alignItems:"center",padding:"0px 16px"}},i.createElement("button",{className:"icon-btn",onClick:function(){L(!1)}},i.createElement("span",{className:"material-icons"},"clear"))),i.createElement("div",{className:"image-container"},i.createElement("div",{className:"image-holder-full"},!F&&i.createElement("img",{id:"image-full",src:R}),F&&i.createElement(S,{src:R,size:j,croppUpdate:function(e){A(e),z(n({},I,{cropHeight:e.height,cropWidth:e.width}))}})),i.createElement("div",{className:"control-panel"},i.createElement(d,{lazy:!0,borderLine:!0},i.createElement(m,{name:"Basic"},(!D.current||D.current&&!F)&&i.createElement(i.Fragment,null,i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},s.Quality),i.createElement("p",{className:"item-panel"},I.quality+"%")),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{readOnly:F,disabled:F,className:"input-range",onChangedDelayed:function(e){try{e=Math.max(Math.min(e,100),1);var t=n({},I,{quality:e});z(t);var i=u(function(){return Promise.resolve(o(t,!1)).then(function(){})},function(e){console.log("onUpdateQuality ~ error",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},onChangedValue:function(e){z(n({},I,{quality:e}))},style:{maxWidth:"100%",width:"100%",color:y},type:"range",min:1,max:100,value:I.quality})),i.createElement("div",{className:"item-panel",style:{display:"flex",width:"100%",justifyContent:"space-between"}},s["Max dimensions"],i.createElement("div",{style:{display:"flex",alignItems:"center"}},i.createElement("input",{disabled:F,readOnly:F,type:"checkbox",checked:I.maintainAspectRatio,onChange:function(e){return z(n({},I,{maintainAspectRatio:e.target.checked}))},style:{color:y}}),i.createElement("span",{className:"caption"},s["aspect-ratio"]))),i.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between"}},i.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},i.createElement("label",null,s["max-width(px)"]),i.createElement(g,{readOnly:F,disabled:F,placeholder:s["max-width(px)"],value:I.maxWidth,onChangedValue:function(e){return z(n({},I,{maxWidth:e}))},type:"number",min:0,max:2e3,onInputChangedEnd:function(e){a(e,!1)}})),i.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},i.createElement("label",null,s["max-height(px)"]),i.createElement(g,{readOnly:F,disabled:F,placeholder:s["max-height(px)"],value:I.maxHeight,onChangedValue:function(e){return z(n({},I,{maxHeight:e}))},type:"number",min:0,max:2e3,onInputChangedEnd:function(e){a(e,!0)}}))),i.createElement("p",{className:"item-panel"},s.Format),i.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between"}},i.createElement("div",{className:"form-field",style:{width:"100%"}},i.createElement("select",{disabled:F,value:I.format,onChange:function(e){try{var t=n({},I,{format:e.target.value}),i=u(function(){return z(t),Promise.resolve(o(t,!1)).then(function(){})},function(e){console.log("onChangeFormat ~ error",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}},["webp","jpeg","png"].map(function(e,t){return i.createElement("option",{key:t,value:e},e)}))))),i.createElement("div",{className:"flex-row-start",style:{marginTop:"5px",justifyContent:"space-between"}},i.createElement("span",{style:{display:"flex",alignItems:"center"}},i.createElement("input",{type:"checkbox",onChange:function(e){H(e.target.checked)},checked:F,style:{color:y,marginBottom:"3px"}}),i.createElement("span",{className:"item-panel",style:{marginLeft:"4px"}},s.Crop))),F&&i.createElement(i.Fragment,null,i.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between"}},i.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},i.createElement("label",null,s["width(px)"]),i.createElement(g,{type:"number",min:0,value:I.cropWidth,onChangedValue:function(e){return z(n({},I,{cropWidth:e}))},onInputChangedEnd:function(e){U(+e,null)},placeholder:s["width(px)"]})),i.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},i.createElement("label",null,s["height(px)"]),i.createElement(g,{type:"number",min:0,value:I.cropHeight,onInputChangedEnd:function(e){U(null,+e)},onChangedValue:function(e){return z(n({},I,{cropHeight:e}))},placeholder:s["height(px)"]}))),i.createElement("p",{style:{marginBottom:"4px !important"}},i.createElement("button",{title:"Cut the image",className:"icon-btn",onClick:function(){var e=V(I),t=document.createElement("canvas");return new Promise(function(i,n){var a=t.getContext("2d"),o=new Image;o.src=R,o.onload=function(){var n=null==T?void 0:T.width;return t.height=null==T?void 0:T.height,t.width=n,a.drawImage(o,Math.abs(null==T?void 0:T.x),Math.abs(null==T?void 0:T.y),null==T?void 0:T.width,null==T?void 0:T.height,0,0,null==T?void 0:T.width,null==T?void 0:T.height),i(t.toDataURL("image/"+e.format,e.quality))},o.onerror=function(e){n(e)}}).then(function(i){e.maxWidth=t.width,e.maxHeight=t.height,e.originImageSrc=i,e=h(e,i),z(e),B(i),H(!1)}).catch(function(e){console.log(e)})}},i.createElement("span",{className:"material-icons"}," crop "))))),i.createElement(m,{disabled:F,name:"Filters"},i.createElement(v,{color:y,labels:s,initialState:I.basicFilters,changeFilter:function(e){try{var t=u(function(){var t=V(I);return t.basicFilters=t.basicFilters?n({},t.basicFilters,e):e,Promise.resolve(o(t,!1)).then(function(){})},function(e){console.log("🚀 ~ file: EditImage.tsx ~ line 259 ~ onChangeFilters ~ e",e)});return Promise.resolve(t&&t.then?t.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}}))),i.createElement("button",{title:s.Undo,disabled:I.arrayCopiedImages.length<=1,style:{position:"absolute",right:"10px",top:"30px"},className:"icon-btn",onClick:function(){try{try{var e=V(I);if(e.arrayCopiedImages.length>1){e.arrayCopiedImages.pop();var t=e.arrayCopiedImages[e.arrayCopiedImages.length-1];e=n({},I,{arrayCopiedImages:e.arrayCopiedImages,maxHeight:t.height,maxWidth:t.width,quality:t.quality,format:t.format,originImageSrc:t.originImageSrc,basicFilters:t.basicFilters}),z(e),B(t.lastImage)}}catch(e){console.log("🚀 ~ file: edit-image.component.ts ~ line 126 ~ EditImageComponent ~ onRestore ~ e",e)}return Promise.resolve()}catch(e){return Promise.reject(e)}}},i.createElement("span",{className:"material-icons"}," refresh ")),i.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between",alignItems:"center"}},i.createElement("button",{className:"save-btn",onClick:function(){L(!0)}},s.Save),q&&i.createElement("p",{className:"caption image-caption",style:{color:q>120?"#f44336":"unset",fontWeight:q>120?"500":"unset"}},"size: ",q,"Kb   ",I.format))))))}),z={language:"en",objectFit:"cover",hideDeleteBtn:!1,hideDownloadBtn:!1,hideEditBtn:!1,hideAddBtn:!1,compressInitial:null},M={maxHeight:3e3,maxWidth:3e3,cropHeight:150,cropWidth:150,maintainAspectRatio:!0,format:"jpeg",arrayCopiedImages:[],originImageSrc:"",basicFilters:void 0,quality:100},R=t.memo(function(e){var a=function(e){try{var t=btoa(e.target.result),i=n({},E),a=U.current+t;i.originImageSrc=U.current+t;var o=function(){if(O.compressInitial)return i=n({},i,{quality:Math.min(O.compressInitial||92,100),maintainAspectRatio:!0,format:"jpeg"}),Promise.resolve(c(i.originImageSrc,!1,i,{getDimFromImage:!0})).then(function(e){x(e.state),C(e.imageUri),R(!0)});var e=document.createElement("img");e.src=a,e.onload=function(){i.arrayCopiedImages=[],i.maxHeight=e.height,i.maxWidth=e.width,i.format=D.current.split("image/")[1],i.arrayCopiedImages.push({lastImage:a,width:e.width,height:e.height,quality:i.quality,format:D.current.split("image/")[1],originImageSrc:i.originImageSrc}),x(i),C(a),R(!0)}}();return Promise.resolve(o&&o.then?o.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},h=e.config,u=void 0===h?{}:h,d=e.imageSrcProp,m=void 0===d?"":d,p=e.color,g=void 0===p?"#1e88e5":p,f=e.imageChanged,v=void 0===f?function(){}:f,y=t.useState(n({},M)),E=y[0],x=y[1],w=t.useState(""),b=w[0],C=w[1],S=t.useState(!1),N=S[0],R=S[1],B=t.useState(!1),P=B[0],F=B[1],H=t.useState(r),k=H[0],j=H[1],W=t.useState(z),O=W[0],T=W[1],A=t.useRef(null),D=t.useRef(""),U=t.useRef(""),L=Date.now().toString(20),q=t.useRef("download"),V=t.useRef(!1);function Y(e){var t;e.preventDefault(),null==A||null===(t=A.current)||void 0===t||t.click()}function X(e){var t,i=null===(t=e.target)||void 0===t?void 0:t.files;if(i){var o=i[0];if(q.current=o.name.split(".")[0],D.current=o.type,!D.current.includes("image"))return;if(U.current="data:"+o.type+";base64,",o){x(n({},E,{format:D.current.split("image/")[1]}));var r=new FileReader;r.onload=a.bind(this),r.readAsBinaryString(o)}}}t.useEffect(function(){var e;!function(){var e=document.head;if(!e.querySelector("#ngp-image-picker-icons-id")){var t=document.createElement("link");t.href="https://fonts.googleapis.com/icon?family=Material+Icons",t.rel="stylesheet",t.id="ngp-image-picker-icons-id",e.appendChild(t)}}(),e=n({},O,u),T(e),null!=u.language&&("en"==u.language&&j(n({},r)),"es"==u.language&&j(n({},o)),"fr"==u.language&&j(n({},s)),"de"==u.language&&j(n({},l)))},[u]),t.useEffect(function(){V.current||(V.current=!0,function(){try{var e=function(){if(m)return Promise.resolve(function(e){var t=n({},E),i=e.split("."),a=i[i.length-1];if(t.format=a=!a||"png"!=a&&"jpeg"!=a&&"webp"!=a?"jpeg":a,null!=u.compressInitial){var o=1;u.compressInitial>=0&&u.compressInitial<=100&&(o=u.compressInitial),t.quality=o}return new Promise(function(i,n){var o=new Image;o.crossOrigin="Anonymous",t.maxHeight=o.height,t.maxWidth=o.width,o.onload=function(){var e=document.createElement("canvas"),n=e.getContext("2d");e.width=1*o.width,e.height=1*o.height,n.drawImage(o,0,0,e.width,e.height),console.log(t.quality);var r=e.toDataURL("image/"+a,t.quality/100);return i({dataUri:r,width:e.width,height:e.height})},o.onerror=function(t){return n(t.message||"Error loading the src = "+e)},o.src=e}).then(function(e){return t=n({},t,{maxHeight:e.height,maxWidth:e.width}),{imageUri:e.dataUri,state:t}})}(m)).then(function(e){var t=e.state;t.originImageSrc=m,t.arrayCopiedImages.push({lastImage:e.imageUri,width:t.maxWidth,height:t.maxHeight,quality:t.quality,format:t.format,originImageSrc:m}),console.log("NEW STATE",t),C(e.imageUri),x(t),R(!0)});var e=n({},E);e.originImageSrc=null,e.arrayCopiedImages=[],R(!1),C(null),x(e)}();e&&e.then&&e.then(function(){})}catch(e){Promise.reject(e)}}())},[m]),t.useEffect(function(){v(b)},[b]);var _=t.useMemo(function(){return b&&b.length?Math.ceil(3/4*b.length/1024):""},[b]);return i.createElement("div",{className:"ReactImagePickerEditor"},!N&&i.createElement("div",{className:"place-image"},i.createElement("div",{className:"image-holder",style:{width:O.width,height:O.height,borderRadius:O.borderRadius,aspectRatio:O.aspectRatio+""}},i.createElement("button",{title:k["Upload a image"],className:"icon-btn image-upload-btn",onClick:Y},i.createElement("span",{className:"material-icons"},"add_a_photo")),i.createElement("input",{ref:A,type:"file",style:{display:"none"},id:"filePicker-"+L,onChange:X}))),N&&i.createElement("div",{className:"place-image"},i.createElement("div",{className:"image-holder-loaded",style:{width:O.width,height:O.height,borderRadius:O.borderRadius,aspectRatio:O.aspectRatio+""}},i.createElement("img",{src:b,alt:"image-loaded",style:{borderRadius:O.borderRadius,objectFit:O.objectFit}}),i.createElement("div",{className:"curtain",onClick:Y},i.createElement("button",{title:k["Upload a image"]},i.createElement("span",{className:"material-icons"},"add_a_photo"))),i.createElement("input",{ref:A,type:"file",style:{display:"none"},id:"filePicker-"+L,onChange:X})),_&&i.createElement("p",{className:"caption image-caption",style:{color:_>120?"#f44336":"unset",fontWeight:_>120?"500":"unset"}},"size: ",_,"Kb   ",E.format),i.createElement("div",{style:{flexDirection:"row",boxSizing:"border-box",display:"flex",placeContent:"flex-start",alignItems:"flex-start"},className:"editing-bar-btn"},!O.hideAddBtn&&i.createElement("button",{className:"icon-btn",id:"upload-img",title:k["Upload a image"],onClick:Y},i.createElement("span",{className:"material-icons"},"add_a_photo")),!O.hideEditBtn&&i.createElement("button",{className:"icon-btn",id:"edit-img",title:k["Open the editor panel"],onClick:function(){F(!0)}},i.createElement("span",{className:"material-icons"},"edit")),!O.hideDownloadBtn&&i.createElement("a",{id:"download-img",title:k["Download the image"],href:b,download:q.current},i.createElement("span",{className:"material-icons"},"cloud_download")),!O.hideDeleteBtn&&i.createElement("button",{className:"icon-btn",id:"delete-img",title:k.Remove,onClick:function(){return function(){C(null),R(!1);var e=n({},E,M);x(e),F(!1)}()}},i.createElement("span",{className:"material-icons"},"delete")))),P&&i.createElement(I,{saveUpdates:function(e){F(!1),e&&(x(e.state),C(e.imageSrc))},labels:k,color:g,image:b,initialState:E}))});module.exports=R;
+var e,t=require("react"),i=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function n(){return(n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e}).apply(this,arguments)}function a(e,t){return(a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}var o={"Upload a image":"Suba una imagen","You must edit the image in order to resize it":"Debe editar la imagen para disminuir su tamaño","too large":"muy grande","Open the editor panel":"Abra el panel de edición","Download the image":"Descarge la imagen","Control Panel":"Panel de control",Remove:"Quitar",Quality:"Calidad","Max dimensions":"Dimensiones","aspect-ratio":"relación-aspecto","max-width(px)":"max. ancho","max-height(px)":"max. alto",Format:"Formato",Crop:"Recortar","width(px)":"ancho(px)","height(px)":"altura(px)",Save:"Guardar",Contrast:"Contraste",Blur:"Blur",Brightness:"Brillo",Grayscale:"Scala de gris",Saturate:"Saturación",Sepia:"Sepia",Rotate:"Rotar",Undo:"Deshacer"},r={"Upload a image":"Upload a image","You must edit the image in order to resize it":"You must edit the image in order to resize it","too large":"too large","Open the editor panel":"Open the editor panel","Download the image":"Download the image","Control Panel":"Control Panel",Quality:"Quality","Max dimensions":"Max dimensions","aspect-ratio":"aspect-ratio","max-width(px)":"max-width(px)","max-height(px)":"max-height(px)",Format:"Format",Crop:"Crop","width(px)":"width(px)","height(px)":"height(px)",Remove:"Remove",Save:"Save",Contrast:"Contrast",Blur:"Blur",Brightness:"Brightness",Grayscale:"Grayscale",Saturate:"Saturate",Sepia:"Sepia",Rotate:"Rotate",Undo:"Undo"},s={"Upload a image":"Charger une image","You must edit the image in order to resize it":"Vous devez éditer l'image pour changer sa taille","too large":"Trop grande","Open the editor panel":"Ouvrir le panneau d'édition","Download the image":"Télécharger l'image","Control Panel":"Panneau de commande",Remove:"Supprimer",Quality:"Qualité","Max dimensions":"Dimensions maximales","aspect-ratio":"rapport de forme","max-width(px)":"largeur max.","max-height(px)":"hauteur max",Format:"Format",Crop:"Recadrer","width(px)":"largeur(px)","height(px)":"hauteur(px)",Save:"Sauvez",Contrast:"Contraste",Blur:"Blur",Brightness:"Luminosité",Grayscale:"Grayscale",Saturate:"Saturer",Sepia:"Seiche",Undo:"Annuler"},l={"Upload a image":"Bild hochladen","You must edit the image in order to resize it":"Sie müssen das Bild bearbeiten, um seine Größe zu ändern","too large":"zu groß","Open the editor panel":"Editor-Fenster öffnen","Download the image":"Bild herunterladen","Control Panel":"Bedienfeld",Quality:"Qualität","Max dimensions":"Maximale Größe","aspect-ratio":"Seitenverhältnis","max-width(px)":"Max. Breite(px)","max-height(px)":"Max. Höhe(px)",Format:"Format",Crop:"Zuschneiden","width(px)":"Breite(px)","height(px)":"Höhe(px)",Remove:"Entfernen",Save:"Speichern",Contrast:"Kontrast",Blur:"Blur",Brightness:"Helligkeit",Grayscale:"Graustufen",Saturer:"Sättigen",Sepia:"Tintenfisch",Undo:"Undo"},c=function(e,t,i,n){return void 0===t&&(t=!1),new Promise(function(a,o){try{var r=document.createElement("img");r.src=e+"",r.crossOrigin="Anonymous";var s=i.quality/100,l=i.maintainAspectRatio;return r.onload=function(){var e,o=document.createElement("canvas"),c=o.getContext("2d"),h=r.width/r.height,u=i.maxWidth,d=i.maxHeight;null!=n&&n.getDimFromImage&&(u=r.width,d=r.height),l?(o.width=u,o.height=u/h,t&&(o.width=d*h,o.height=d)):(o.width=u,o.height=d),i.basicFilters&&(c.filter=(e=i.basicFilters,Object.keys(e).map(function(t){return["blur"].includes(t)?t+"("+e[t]+"px)":t+"("+e[t]+")"}).join(""))),c.drawImage(r,0,0,o.width,o.height);var m=o.toDataURL("image/"+i.format,s);a({dataUri:m,width:o.width,height:o.height})},Promise.resolve()}catch(e){return Promise.reject(e)}}).then(function(e){return i.maxHeight=e.height,i.maxWidth=e.width,{imageUri:e.dataUri,state:h(i,e.dataUri)}})},h=function(e,t){return e.arrayCopiedImages.length<=25?e.arrayCopiedImages.push({lastImage:t,width:e.maxWidth,height:e.maxHeight,quality:e.quality,format:e.format,originImageSrc:e.originImageSrc,basicFilters:e.basicFilters}):e.arrayCopiedImages[e.arrayCopiedImages.length-1]={lastImage:t,width:e.maxWidth,height:e.maxHeight,quality:e.quality,format:e.format,originImageSrc:e.originImageSrc,basicFilters:e.basicFilters},JSON.parse(JSON.stringify(e))};function u(e,t){try{var i=e()}catch(e){return t(e)}return i&&i.then?i.then(void 0,t):i}"undefined"!=typeof Symbol&&(Symbol.iterator||(Symbol.iterator=Symbol("Symbol.iterator"))),"undefined"!=typeof Symbol&&(Symbol.asyncIterator||(Symbol.asyncIterator=Symbol("Symbol.asyncIterator")));var d=t.memo(function(e){var n=e.activeIndex,a=void 0===n?0:n,o=e.children,r=e.backgroundColor,s=void 0===r?"inherit":r,l=e.color,c=void 0===l?"#428CFF":l,h=e.indicatorStyle,u=void 0===h?"bottomLine":h,d=e.onTabChange,m=void 0===d?function(e){}:d,p=e.transitionMs,g=void 0===p?375:p,f=e.borderLine,v=void 0!==f&&f,y=e.fontColor,E=void 0===y?"inherit":y,x=e.lazy,w=void 0!==x&&x,b=t.useState([]),C=b[0],S=b[1],N=t.useState(a),I=N[0],z=N[1],M=t.useRef(null);t.useEffect(function(){var e=o instanceof Array?o:[o];!function(e){try{e.map(function(e){if(!e.props.name)throw new Error("Inside of TabContainer component only can be rendered TabItem component, and its need a name prop");return!0})}catch(e){throw new Error("The TabContainer Component must has a TabItem as child component")}}(e);var t=e.map(function(e){return{label:e.props.name,icon:e.props.icon,disabled:e.props.disabled}});if(a>t.length-1||a<0)throw new Error("Invalid range for activeIndex "+a);S(t)},[o]),t.useEffect(function(){var e,t,i=o instanceof Array?o:[o];if(a>i.length-1||a<0)throw new Error("Invalid range for activeIndex "+a);z(null!==(e=i[a])&&void 0!==e&&null!==(t=e.props)&&void 0!==t&&t.disabled?0:a)},[a]),t.useEffect(function(){C&&C.length&&m(I)},[I]);var R=o instanceof Array?o:[o];return i.createElement("div",{ref:M,className:"tab-pp"},i.createElement("div",{className:"header",style:{backgroundColor:s,borderBottom:v?"1px solid #323232":"undet"}},C.map(function(e,t){return i.createElement("button",{onClick:function(){e.disabled||z(t)},key:e.label,style:{color:t!=I||"simple"!==u&&"bottomLine"!==u?E:c,backgroundColor:t==I&&"button"===u?c:"inherit"},className:t==I?"itemlabel "+u+" active":"itemlabel",disabled:e.disabled},e.icon," ",e.label,"bottomLine"===u&&i.createElement("div",{style:{backgroundColor:c}}))})),i.createElement("div",{className:"body"},R.map(function(e,t){return t<I?i.createElement("div",{style:{transform:"translate3d(-100%, 0px, 0px)",height:"0px",overflow:"hidden",transition:"transform "+g/1e3+"s ease"},key:t,className:"body-content"},!w&&e):t>I?i.createElement("div",{style:{transform:"translate3d(100%, 0px, 0px)",height:"0px",overflow:"hidden",transition:"transform "+g/1e3+"s ease"},key:t,className:"body-content"},!w&&e):i.createElement("div",{style:{visibility:"inherit",overflow:"auto",height:"auto",position:"relative",transition:"transform "+g/1e3+"s ease"},key:t,className:"body-content"},e)})))}),m=t.memo(function(e){return i.createElement("div",{style:{padding:"1rem 0.5rem"}},e.children)}),p=["onInputChangedEnd","onChangedDelayed","onChangedValue","delayMs"],g=t.memo(function(e){var n=e.onInputChangedEnd,a=e.onChangedDelayed,o=e.onChangedValue,r=e.delayMs,s=function(e,t){if(null==e)return{};var i,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(i=o[n])>=0||(a[i]=e[i]);return a}(e,p),l=t.useState(e.value),c=l[0],h=l[1],u=t.useRef(),d=t.useRef(!0);function m(t){["checkbox","radio"].includes(e.type)?(h(t.target.checked),o&&o(t.target.checked)):(h(t.target.value),o&&o(t.target.value))}return t.useRef(!1),t.useEffect(function(){if(a){if(!d.current)return clearTimeout(u.current),u.current=setTimeout(function(){clearTimeout(u.current),a(c)},r||100),function(){clearTimeout(u.current)};d.current=!1}},[c]),i.createElement(i.Fragment,null,n&&i.createElement("input",Object.assign({},s,{className:null==s?void 0:s.className,style:s.style,value:e.value,onChange:m,onBlur:function(e){n(e.target.value)},onKeyDown:function(e){"Enter"==e.key&&n(c)}})),!n&&i.createElement("input",Object.assign({},s,{className:null==s?void 0:s.className,style:s.style,value:e.value,onChange:m})))}),f={contrast:1,blur:0,brightness:1,grayscale:0,invert:0,saturate:1,sepia:0},v=t.memo(function(e){var a=e.labels,o=e.color,r=e.initialState,s=void 0===r?f:r,l=e.changeFilter,c=void 0===l?function(){}:l,h=t.useState(s),u=h[0],d=h[1];return t.useEffect(function(){d(s?JSON.parse(JSON.stringify(n({},u,s))):f)},[s]),i.createElement("div",null,i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},a.Contrast),i.createElement("p",{className:"item-panel"},(+u.contrast).toFixed(2))),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{className:"input-range",onChangedDelayed:function(e){c(n({},u,{contrast:e}))},delayMs:100,onChangedValue:function(e){d(n({},u,{contrast:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.contrast})),i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},a.Brightness),i.createElement("p",{className:"item-panel"},(+u.brightness).toFixed(2))),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{className:"input-range",onChangedDelayed:function(e){c(n({},u,{brightness:e}))},onChangedValue:function(e){d(n({},u,{brightness:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.brightness})),i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},a.Grayscale),i.createElement("p",{className:"item-panel"},(+u.grayscale).toFixed(2))),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{className:"input-range",onChangedDelayed:function(e){c(n({},u,{grayscale:e}))},onChangedValue:function(e){d(n({},u,{grayscale:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.grayscale})),i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},a.Saturate),i.createElement("p",{className:"item-panel"},(+u.saturate).toFixed(2))),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{className:"input-range",onChangedDelayed:function(e){c(n({},u,{saturate:e}))},onChangedValue:function(e){d(n({},u,{saturate:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.saturate})),i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},a.Sepia),i.createElement("p",{className:"item-panel"},(+u.sepia).toFixed(2))),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{className:"input-range",onChangedDelayed:function(e){c(n({},u,{sepia:e}))},onChangedValue:function(e){d(n({},u,{sepia:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.sepia})),i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},a.Blur),i.createElement("p",{className:"item-panel"},(+u.blur).toFixed(2))),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{className:"input-range",onChangedDelayed:function(e){c(n({},u,{blur:e}))},onChangedValue:function(e){d(n({},u,{blur:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.blur})))});!function(){for(var e=0,t=["ms","moz","webkit","o"],i=0;i<t.length&&!window.requestAnimationFrame;i++)window.requestAnimationFrame=window[t[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[t[i]+"CancelAnimationFrame"]||window[t[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(t,i){var n=(new Date).getTime(),a=Math.max(0,16-(n-e)),o=window.setTimeout(function(){t(n+a)},a);return e=n+a,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(e){clearTimeout(e)})}(),function(){if("function"==typeof window.CustomEvent)return!1;function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),function(e){try{return new CustomEvent("test"),!1}catch(e){}function t(t,i){i=i||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(t,i.bubbles,i.cancelable,e,0,0,0,0,0,!1,!1,!1,!1,0,null),n}t.prototype=Event.prototype,e.MouseEvent=t}(window);var y=function(e,t,i,n){var a=this;function o(e){e.stopPropagation(),document.removeEventListener("mouseup",o),document.removeEventListener("mousemove",r),a.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:a}}))}function r(e){e.stopPropagation(),a.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}this.position=e,this.constraints=t,this.cursor=i,this.eventBus=n,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=i,this.el.addEventListener("mousedown",function(e){e.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",r),a.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:a}}))})},E=function(){function e(e,t,i,n){this.x1=e,this.y1=t,this.x2=i,this.y2=n}var t=e.prototype;return t.set=function(e,t,i,n){return void 0===e&&(e=null),void 0===t&&(t=null),void 0===i&&(i=null),void 0===n&&(n=null),this.x1=null==e?this.x1:e,this.y1=null==t?this.y1:t,this.x2=null==i?this.x2:i,this.y2=null==n?this.y2:n,this},t.width=function(){return Math.abs(this.x2-this.x1)},t.height=function(){return Math.abs(this.y2-this.y1)},t.resize=function(e,t,i){void 0===i&&(i=[0,0]);var n=this.x1+this.width()*i[0],a=this.y1+this.height()*i[1];return this.x1=n-e*i[0],this.y1=a-t*i[1],this.x2=this.x1+e,this.y2=this.y1+t,this},t.scale=function(e,t){void 0===t&&(t=[0,0]);var i=this.width()*e,n=this.height()*e;return this.resize(i,n,t),this},t.move=function(e,t){void 0===e&&(e=null),void 0===t&&(t=null);var i=this.width(),n=this.height();return t=null===t?this.y1:t,this.x1=e=null===e?this.x1:e,this.y1=t,this.x2=e+i,this.y2=t+n,this},t.getRelativePoint=function(e){return void 0===e&&(e=[0,0]),[this.width()*e[0],this.height()*e[1]]},t.getAbsolutePoint=function(e){return void 0===e&&(e=[0,0]),[this.x1+this.width()*e[0],this.y1+this.height()*e[1]]},t.constrainToRatio=function(e,t,i){if(void 0===t&&(t=[0,0]),void 0===i&&(i="height"),null!==e){switch(this.width(),this.height(),i){case"height":this.resize(this.width(),this.width()*e,t);break;case"width":this.resize(1*this.height()/e,this.height(),t);break;default:this.resize(this.width(),this.width()*e,t)}return this}},t.constrainToBoundary=function(e,t,i){void 0===i&&(i=[0,0]);var n=this.getAbsolutePoint(i),a=n[0],o=n[1],r=a,s=o,l=e-a,c=t-o,h=-2*i[1]+1,u=null,d=null;switch(-2*i[0]+1){case-1:u=r;break;case 0:u=2*Math.min(r,l);break;case 1:u=l}switch(h){case-1:d=s;break;case 0:d=2*Math.min(s,c);break;case 1:d=c}if(this.width()>u){var m=u/this.width();this.scale(m,i)}if(this.height()>d){var p=d/this.height();this.scale(p,i)}return this},t.constrainToSize=function(e,t,i,n,a,o){if(void 0===e&&(e=null),void 0===t&&(t=null),void 0===i&&(i=null),void 0===n&&(n=null),void 0===a&&(a=[0,0]),void 0===o&&(o=null),o&&(o>1?(e=1*t/o,n*=o):o<1&&(t=e*o,i=1*n/o)),e&&this.width()>e){var r=e,s=null===o?this.height():t;this.resize(r,s,a)}if(t&&this.height()>t){var l=null===o?this.width():e;this.resize(l,t,a)}if(i&&this.width()<i){var c=i,h=null===o?this.height():n;this.resize(c,h,a)}if(n&&this.height()<n){var u=null===o?this.width():i;this.resize(u,n,a)}return this},e}();function x(e){e.preventDefault();var t=e.changedTouches[0];t.target.dispatchEvent(new MouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[e.type],{bubbles:!0,cancelable:!0,view:window,clientX:t.clientX,clientY:t.clientY,screenX:t.screenX,screenY:t.screenY}))}var w=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}];function b(e,t){return Number(Math.round(e+"e"+t)+"e-"+t)}var C=function(e){var t,i;function o(t,i,n){return void 0===n&&(n=!1),e.call(this,t,i,n)||this}i=e,(t=o).prototype=Object.create(i.prototype),t.prototype.constructor=t,a(t,i);var r=o.prototype;return r.getValue=function(t){return e.prototype.getValue.call(this,t)},r.setImage=function(t){return e.prototype.setImage.call(this,t)},r.destroy=function(){return e.prototype.destroy.call(this)},r.moveTo=function(e,t){return this.box.move(e,t),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},r.resizeTo=function(e,t,i){return void 0===i&&(i=[.5,.5]),this.box.resize(e,t,i),this.box.constrainToBoundary(this.cropperEl.offsetWidth,this.cropperEl.offsetHeight,[.5,.5]),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},r.scaleBy=function(e,t){return void 0===t&&(t=[.5,.5]),this.box.scale(e,t),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},r.reset=function(e){return e&&(this.options=n({},this.options,{newOptions:e})),this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},r.enableVisibility=function(e){var t=document.querySelector(".croppr-container");if(!t)throw new Error("THere is not any croppr");t.style.display=e?"block":"none"},o}(function(){function e(t,i,n){var a=this;if(void 0===n&&(n=!1),this.options=e.parseOptions(i||{}),!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";if(!t.getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:t.parentNode,element:t},n||(0===t.width||0===t.height?t.onload=function(){a.initialize(t)}:this.initialize(t))}var t=e.prototype;return t.initialize=function(e){this.createDOM(e),this.options.convertToPixels(this.cropperEl),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.box=this.initializeBox(this.options),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this)},t.createDOM=function(e){var t;this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,(t=this.containerEl).addEventListener("touchstart",x),t.addEventListener("touchend",x),t.addEventListener("touchmove",x),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",e.getAttribute("src")),this.imageEl.setAttribute("alt",e.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.innerHTML=new Array(9).fill(1).map(function(){return'<div style="border: 1px dashed #fafafa"></div>'}).join(""),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var i=document.createElement("div");i.className="croppr-handleContainer",this.handles=[];for(var n=0;n<w.length;n++){var a=new y(w[n].position,w[n].constraints,w[n].cursor,this.eventBus);this.handles.push(a),i.appendChild(a.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(i),this.containerEl.appendChild(this.cropperEl),e.parentElement.replaceChild(this.containerEl,e)},t.setImage=function(e){var t=this;return this.imageEl.onload=function(){t.box=t.initializeBox(t.options),t.redraw()},this.imageEl.src=e,this.imageClippedEl.src=e,this},t.destroy=function(){this._restore.parent.replaceChild(this._restore.element,this.containerEl)},t.initializeBox=function(e){var t=new E(0,0,e.startSize.width,e.startSize.height);t.constrainToRatio(e.aspectRatio,[.5,.5]);var i=e.minSize,n=e.maxSize;t.constrainToSize(n.width,n.height,i.width,i.height,[.5,.5],e.aspectRatio),t.constrainToBoundary(this.cropperEl.offsetWidth,this.cropperEl.offsetHeight,[.5,.5]);var a=this.cropperEl.offsetWidth/2-t.width()/2,o=this.cropperEl.offsetHeight/2-t.height()/2;return t.move(a,o),t},t.redraw=function(){var e=this,t=Math.round(this.box.width()),i=Math.round(this.box.height()),n=Math.round(this.box.x1),a=Math.round(this.box.y1),o=Math.round(this.box.x2),r=Math.round(this.box.y2);window.requestAnimationFrame(function(){e.regionEl.style.transform="translate("+n+"px, "+a+"px)",e.regionEl.style.width=t+"px",e.regionEl.style.height=i+"px",e.imageClippedEl.style.clip="rect("+a+"px, "+o+"px, "+r+"px, "+n+"px)";for(var s=e.box.getAbsolutePoint([.5,.5]),l=s[1]-e.cropperEl.offsetHeight/2>>31,c=-2*((s[0]-e.cropperEl.offsetWidth/2>>31^l)+l+l+4)+8,h=0;h<e.handles.length;h++){var u=e.handles[h],d=a+i*u.position[1]-u.el.offsetHeight/2;u.el.style.transform="translate("+Math.round(n+t*u.position[0]-u.el.offsetWidth/2)+"px, "+Math.round(d)+"px)",u.el.style.zIndex=c==h?5:4}})},t.attachHandlerEvents=function(){var e=this.eventBus;e.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),e.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),e.addEventListener("handleend",this.onHandleMoveEnd.bind(this))},t.attachRegionEvents=function(){var e=this.eventBus;function t(t){t.stopPropagation(),e.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function i(n){n.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",t),e.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}this.regionEl.addEventListener("mousedown",function(n){n.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",t),e.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}),e.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),e.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),e.addEventListener("regionend",this.onRegionMoveEnd.bind(this))},t.attachOverlayEvents=function(){var e=this,t=null;function i(t){t.stopPropagation(),e.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function n(a){a.stopPropagation(),document.removeEventListener("mouseup",n),document.removeEventListener("mousemove",i),1!==e.box.width()||1!==e.box.height()?e.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:a.clientX,mouseY:a.clientY}})):e.box=t}this.overlayEl.addEventListener("mousedown",function(a){a.stopPropagation(),document.addEventListener("mouseup",n),document.addEventListener("mousemove",i);var o=e.cropperEl.getBoundingClientRect(),r=a.clientX-o.left,s=a.clientY-o.top;t=e.box,e.box=new E(r,s,r+1,s+1),e.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:e.handles[4]}}))})},t.onHandleMoveStart=function(e){var t=e.detail.handle,i=[1-t.position[0],1-t.position[1]],n=this.box.getAbsolutePoint(i);this.activeHandle={handle:t,originPoint:i,originX:n[0],originY:n[1]},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())},t.onHandleMoveMoving=function(e){var t=e.detail,i=t.mouseX,n=t.mouseY,a=this.cropperEl.getBoundingClientRect();(i-=a.left)<0?i=0:i>a.width&&(i=a.width),(n-=a.top)<0?n=0:n>a.height&&(n=a.height);var o=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,s=this.activeHandle.originY,l=this.activeHandle.handle,c=1===l.constraints[0],h=1===l.constraints[1],u=1===l.constraints[2],d=1===l.constraints[3],m=(d||h)&&(c||u),p=d||h?r:this.box.x1,g=d||h?r:this.box.x2,f=c||u?s:this.box.y1,v=c||u?s:this.box.y2;p=d?i:p,g=h?i:g,f=c?n:f,v=u?n:v;var y=!1,x=!1;if((d||h)&&(y=d?i>r:i<r),(c||u)&&(x=c?n>s:n<s),y){var w=p;p=g,g=w,o[0]=1-o[0]}if(x){var b=f;f=v,v=b,o[1]=1-o[1]}var C=new E(p,f,g,v);if(this.options.aspectRatio){var S=this.options.aspectRatio,N=!1;m?N=n>C.y1+S*C.width()||n<C.y2-S*C.width():(c||u)&&(N=!0),C.constrainToRatio(S,o,N?"width":"height")}var I=this.options.minSize,z=this.options.maxSize;C.constrainToSize(z.width,z.height,I.width,I.height,o,this.options.aspectRatio),C.constrainToBoundary(this.cropperEl.offsetWidth,this.cropperEl.offsetHeight,o),this.box=C,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())},t.onHandleMoveEnd=function(e){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())},t.onRegionMoveStart=function(e){var t=e.detail,i=t.mouseX,n=t.mouseY,a=this.cropperEl.getBoundingClientRect();this.currentMove={offsetX:(i-=a.left)-this.box.x1,offsetY:(n-=a.top)-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())},t.onRegionMoveMoving=function(e){var t=e.detail,i=t.mouseX,n=t.mouseY,a=this.currentMove,o=a.offsetX,r=a.offsetY,s=this.cropperEl.getBoundingClientRect();this.box.move((i-=s.left)-o,(n-=s.top)-r),this.box.x1<0&&this.box.move(0,null),this.box.x2>s.width&&this.box.move(s.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>s.height&&this.box.move(null,s.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())},t.onRegionMoveEnd=function(e){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())},t.getValue=function(e){if(void 0===e&&(e=null),null===e&&(e=this.options.returnMode),"real"==e){var t=this.imageEl.naturalWidth,i=this.imageEl.naturalHeight,n=this.imageEl.getBoundingClientRect(),a=t/n.width,o=i/n.height;return{x:Math.round(this.box.x1*a),y:Math.round(this.box.y1*o),width:Math.round(this.box.width()*a),height:Math.round(this.box.height()*o)}}if("ratio"==e){var r=this.imageEl.getBoundingClientRect(),s=r.width,l=r.height;return{x:b(this.box.x1/s,3),y:b(this.box.y1/l,3),width:b(this.box.width()/s,3),height:b(this.box.height()/l,3)}}if("raw"==e)return{x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}},e.parseOptions=function(e){var t=null;void 0!==e.aspectRatio&&("number"==typeof e.aspectRatio?t=e.aspectRatio:e.aspectRatio instanceof Array&&(t=e.aspectRatio[1]/e.aspectRatio[0]));var i=null;null!=e.maxSize&&(i={width:e.maxSize[0]||null,height:e.maxSize[1]||null,unit:e.maxSize[2]||"px"});var n=null;null!=e.minSize&&(n={width:e.minSize[0]||null,height:e.minSize[1]||null,unit:e.minSize[2]||"px"});var a=null;null!=e.startSize&&(a={width:e.startSize[0]||null,height:e.startSize[1]||null,unit:e.startSize[2]||"%"});var o=null;"function"==typeof e.onInitialize&&(o=e.onInitialize);var r=null;"function"==typeof e.onCropStart&&(r=e.onCropStart);var s=null;"function"==typeof e.onCropEnd&&(s=e.onCropEnd);var l=null;"function"==typeof e.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),l=e.onUpdate),"function"==typeof e.onCropMove&&(l=e.onCropMove);var c=null;if(void 0!==e.returnMode){var h=e.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(h))throw"Invalid return mode.";c=h}var u=function(e,t){return null!==e?e:t};return{aspectRatio:u(t,null),maxSize:u(i,{width:null,height:null}),minSize:u(n,{width:null,height:null}),startSize:u(a,{width:100,height:100,unit:"%"}),returnMode:u(c,"real"),onInitialize:u(o,null),onCropStart:u(r,null),onCropMove:u(l,null),onCropEnd:u(s,null),convertToPixels:function(e){for(var t=e.offsetWidth,i=e.offsetHeight,n=["maxSize","minSize","startSize"],a=0;a<n.length;a++){var o=n[a];null!==this[o]&&("%"==this[o].unit&&(null!==this[o].width&&(this[o].width=this[o].width/100*t),null!==this[o].height&&(this[o].height=this[o].height/100*i)),delete this[o].unit)}}}},e}()),S=t.memo(function(e){var a=e.src,o=e.size,r=e.croppUpdate,s=t.useState(),l=s[0],c=s[1],h=t.useState({width:150,height:150}),u=h[0],d=h[1],m=t.useRef(null),p=t.useRef();return t.useEffect(function(){o&&(d(n({},o)),m.current&&m.current.resizeTo(o.width,o.height))},[o]),t.useEffect(function(){a&&c(a)},[a]),t.useEffect(function(){return p.current&&l&&(m.current=new C("#croppr",{minSize:[32,32,"px"],startSize:[u.width,u.height,"px"],onInitialize:function(e){r(null==e?void 0:e.getValue())},onCropEnd:function(e){r(e)}})),function(){var e;return null==m||null===(e=m.current)||void 0===e?void 0:e.destroy()}},[p.current,l]),i.createElement("div",{className:"CropprWrapper"},i.createElement("img",{ref:p,src:l,id:"croppr"}))}),N={quality:92,maxHeight:1e3,maxWidth:1e3,cropHeight:150,cropWidth:150,maintainAspectRatio:!0,format:"jpeg",arrayCopiedImages:[],originImageSrc:""},I=t.memo(function(e){var a=function(e,t){void 0===t&&(t=!1);try{var i=Math.max(Math.min(e,4e3),32),a=n({},I);if(t){if(a.maxHeight===i)return Promise.resolve();a.maxHeight=i}else{if(a.maxWidth===i)return Promise.resolve();a.maxWidth=i}z(a);var r=u(function(){return Promise.resolve(o(a,t)).then(function(){})},function(e){console.log("onChangeSize ~ error",e)});return Promise.resolve(r&&r.then?r.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},o=function(e,t){void 0===t&&(t=!1);try{var i=u(function(){return Promise.resolve(c(I.originImageSrc,t,e)).then(function(e){var t=e.state;P(e.imageUri),z(t)})},function(e){console.log("🚀 ~ file: EditImage.tsx ~ line 73 ~ applyChanges ~ error",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},r=e.labels,s=void 0===r?{}:r,l=e.image,p=void 0===l?"":l,f=e.color,y=void 0===f?"#1e88e5":f,E=e.initialState,x=void 0===E?N:E,w=e.saveUpdates,b=void 0===w?function(){}:w,C=t.useState(x),I=C[0],z=C[1],M=t.useState(""),R=M[0],P=M[1],B=t.useState(!1),F=B[0],H=B[1],k=t.useState({width:150,height:150}),j=k[0],W=k[1],O=t.useState(),T=O[0],A=O[1],D=t.useRef(!1);function U(e,t){e&&(z(n({},I,{cropWidth:e})),W(n({},j,{width:e}))),t&&(z(n({},I,{cropHeight:t})),W(n({},j,{height:t})))}function L(e){void 0===e&&(e=!1),H(!1),b(e?{state:I,imageSrc:R}:null)}t.useEffect(function(){D.current=window.innerWidth<800,z(JSON.parse(JSON.stringify(n({},I,x))))},[x]),t.useEffect(function(){P(p)},[p]),t.useEffect(function(){F||W({width:150,height:150})},[F]);var q=t.useMemo(function(){return R&&R.length?Math.ceil(3/4*R.length/1024):""},[R]);function V(e){return JSON.parse(JSON.stringify(e))}return i.createElement("div",{className:"EditImage"},i.createElement("div",{id:"popup",className:"popup"},i.createElement("div",{style:{flexDirection:"row",boxSizing:"border-box",display:"flex",placeContent:"center flex-end",alignItems:"center",padding:"0px 16px"}},i.createElement("button",{className:"icon-btn",onClick:function(){L(!1)}},i.createElement("span",{className:"material-icons"},"clear"))),i.createElement("div",{className:"image-container"},i.createElement("div",{className:"image-holder-full"},!F&&i.createElement("img",{id:"image-full",src:R}),F&&i.createElement(S,{src:R,size:j,croppUpdate:function(e){A(e),z(n({},I,{cropHeight:e.height,cropWidth:e.width}))}})),i.createElement("div",{className:"control-panel"},i.createElement(d,{lazy:!0,borderLine:!0},i.createElement(m,{name:"Basic"},(!D.current||D.current&&!F)&&i.createElement(i.Fragment,null,i.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},i.createElement("p",{className:"item-panel"},s.Quality),i.createElement("p",{className:"item-panel"},I.quality+"%")),i.createElement("div",{className:"flex-row-start"},i.createElement(g,{readOnly:F,disabled:F,className:"input-range",onChangedDelayed:function(e){try{e=Math.max(Math.min(e,100),1);var t=n({},I,{quality:e});z(t);var i=u(function(){return Promise.resolve(o(t,!1)).then(function(){})},function(e){console.log("onUpdateQuality ~ error",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},onChangedValue:function(e){z(n({},I,{quality:e}))},style:{maxWidth:"100%",width:"100%",color:y},type:"range",min:1,max:100,value:I.quality})),i.createElement("div",{className:"item-panel",style:{display:"flex",width:"100%",justifyContent:"space-between"}},s["Max dimensions"],i.createElement("div",{style:{display:"flex",alignItems:"center"}},i.createElement("input",{disabled:F,readOnly:F,type:"checkbox",checked:I.maintainAspectRatio,onChange:function(e){return z(n({},I,{maintainAspectRatio:e.target.checked}))},style:{color:y}}),i.createElement("span",{className:"caption"},s["aspect-ratio"]))),i.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between"}},i.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},i.createElement("label",null,s["max-width(px)"]),i.createElement(g,{readOnly:F,disabled:F,placeholder:s["max-width(px)"],value:I.maxWidth,onChangedValue:function(e){return z(n({},I,{maxWidth:e}))},type:"number",min:0,max:2e3,onInputChangedEnd:function(e){a(e,!1)}})),i.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},i.createElement("label",null,s["max-height(px)"]),i.createElement(g,{readOnly:F,disabled:F,placeholder:s["max-height(px)"],value:I.maxHeight,onChangedValue:function(e){return z(n({},I,{maxHeight:e}))},type:"number",min:0,max:2e3,onInputChangedEnd:function(e){a(e,!0)}}))),i.createElement("p",{className:"item-panel"},s.Format),i.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between"}},i.createElement("div",{className:"form-field",style:{width:"100%"}},i.createElement("select",{disabled:F,value:I.format,onChange:function(e){try{var t=n({},I,{format:e.target.value}),i=u(function(){return z(t),Promise.resolve(o(t,!1)).then(function(){})},function(e){console.log("onChangeFormat ~ error",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}},["webp","jpeg","png"].map(function(e,t){return i.createElement("option",{key:t,value:e},e)}))))),i.createElement("div",{className:"flex-row-start",style:{marginTop:"5px",justifyContent:"space-between"}},i.createElement("span",{style:{display:"flex",alignItems:"center"}},i.createElement("input",{type:"checkbox",onChange:function(e){H(e.target.checked)},checked:F,style:{color:y,marginBottom:"3px"}}),i.createElement("span",{className:"item-panel",style:{marginLeft:"4px"}},s.Crop))),F&&i.createElement(i.Fragment,null,i.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between"}},i.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},i.createElement("label",null,s["width(px)"]),i.createElement(g,{type:"number",min:0,value:I.cropWidth,onChangedValue:function(e){return z(n({},I,{cropWidth:e}))},onInputChangedEnd:function(e){U(+e,null)},placeholder:s["width(px)"]})),i.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},i.createElement("label",null,s["height(px)"]),i.createElement(g,{type:"number",min:0,value:I.cropHeight,onInputChangedEnd:function(e){U(null,+e)},onChangedValue:function(e){return z(n({},I,{cropHeight:e}))},placeholder:s["height(px)"]}))),i.createElement("p",{style:{marginBottom:"4px !important"}},i.createElement("button",{title:"Cut the image",className:"icon-btn",onClick:function(){var e=V(I),t=document.createElement("canvas");return new Promise(function(i,n){var a=t.getContext("2d"),o=new Image;o.src=R,o.onload=function(){var n=null==T?void 0:T.width;return t.height=null==T?void 0:T.height,t.width=n,a.drawImage(o,Math.abs(null==T?void 0:T.x),Math.abs(null==T?void 0:T.y),null==T?void 0:T.width,null==T?void 0:T.height,0,0,null==T?void 0:T.width,null==T?void 0:T.height),i(t.toDataURL("image/"+e.format,e.quality))},o.onerror=function(e){n(e)}}).then(function(i){e.maxWidth=t.width,e.maxHeight=t.height,e.originImageSrc=i,e=h(e,i),z(e),P(i),H(!1)}).catch(function(e){console.log(e)})}},i.createElement("span",{className:"material-icons"}," crop "))))),i.createElement(m,{disabled:F,name:"Filters"},i.createElement(v,{color:y,labels:s,initialState:I.basicFilters,changeFilter:function(e){try{var t=u(function(){var t=V(I);return t.basicFilters=t.basicFilters?n({},t.basicFilters,e):e,Promise.resolve(o(t,!1)).then(function(){})},function(e){console.log("🚀 ~ file: EditImage.tsx ~ line 259 ~ onChangeFilters ~ e",e)});return Promise.resolve(t&&t.then?t.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}}))),i.createElement("button",{title:s.Undo,disabled:I.arrayCopiedImages.length<=1,style:{position:"absolute",right:"10px",top:"30px"},className:"icon-btn",onClick:function(){try{try{var e=V(I);if(e.arrayCopiedImages.length>1){e.arrayCopiedImages.pop();var t=e.arrayCopiedImages[e.arrayCopiedImages.length-1];e=n({},I,{arrayCopiedImages:e.arrayCopiedImages,maxHeight:t.height,maxWidth:t.width,quality:t.quality,format:t.format,originImageSrc:t.originImageSrc,basicFilters:t.basicFilters}),z(e),P(t.lastImage)}}catch(e){console.log("🚀 ~ file: edit-image.component.ts ~ line 126 ~ EditImageComponent ~ onRestore ~ e",e)}return Promise.resolve()}catch(e){return Promise.reject(e)}}},i.createElement("span",{className:"material-icons"}," refresh ")),i.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between",alignItems:"center"}},i.createElement("button",{className:"save-btn",onClick:function(){L(!0)}},s.Save),q&&i.createElement("p",{className:"caption image-caption",style:{color:q>120?"#f44336":"unset",fontWeight:q>120?"500":"unset"}},"size: ",q,"Kb   ",I.format))))))}),z={language:"en",objectFit:"cover",hideDeleteBtn:!1,hideDownloadBtn:!1,hideEditBtn:!1,hideAddBtn:!1,compressInitial:null},M={maxHeight:3e3,maxWidth:3e3,cropHeight:150,cropWidth:150,maintainAspectRatio:!0,format:"jpeg",arrayCopiedImages:[],originImageSrc:"",basicFilters:void 0,quality:100},R=t.memo(function(e){var a=function(e){try{var t=btoa(e.target.result),i=n({},E),a=U.current+t;i.originImageSrc=U.current+t;var o=function(){if(O.compressInitial)return i=n({},i,{quality:Math.min(O.compressInitial||92,100),maintainAspectRatio:!0,format:"jpeg"}),Promise.resolve(c(i.originImageSrc,!1,i,{getDimFromImage:!0})).then(function(e){x(e.state),C(e.imageUri),R(!0)});var e=document.createElement("img");e.src=a,e.onload=function(){i.arrayCopiedImages=[],i.maxHeight=e.height,i.maxWidth=e.width,i.format=D.current.split("image/")[1],i.arrayCopiedImages.push({lastImage:a,width:e.width,height:e.height,quality:i.quality,format:D.current.split("image/")[1],originImageSrc:i.originImageSrc}),x(i),C(a),R(!0)}}();return Promise.resolve(o&&o.then?o.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},h=e.config,u=void 0===h?{}:h,d=e.imageSrcProp,m=void 0===d?"":d,p=e.color,g=void 0===p?"#1e88e5":p,f=e.imageChanged,v=void 0===f?function(){}:f,y=t.useState(n({},M)),E=y[0],x=y[1],w=t.useState(""),b=w[0],C=w[1],S=t.useState(!1),N=S[0],R=S[1],P=t.useState(!1),B=P[0],F=P[1],H=t.useState(r),k=H[0],j=H[1],W=t.useState(z),O=W[0],T=W[1],A=t.useRef(null),D=t.useRef(""),U=t.useRef(""),L=Date.now().toString(20),q=t.useRef("download");function V(e){var t;e.preventDefault(),null==A||null===(t=A.current)||void 0===t||t.click()}function Y(e){var t,i=null===(t=e.target)||void 0===t?void 0:t.files;if(i){var o=i[0];if(q.current=o.name.split(".")[0],D.current=o.type,!D.current.includes("image"))return;if(U.current="data:"+o.type+";base64,",o){x(n({},E,{format:D.current.split("image/")[1]}));var r=new FileReader;r.onload=a.bind(this),r.readAsBinaryString(o)}}}t.useRef(!1),t.useEffect(function(){var e;!function(){var e=document.head;if(!e.querySelector("#ngp-image-picker-icons-id")){var t=document.createElement("link");t.href="https://fonts.googleapis.com/icon?family=Material+Icons",t.rel="stylesheet",t.id="ngp-image-picker-icons-id",e.appendChild(t)}}(),e=n({},O,u),T(e),null!=u.language&&("en"==u.language&&j(n({},r)),"es"==u.language&&j(n({},o)),"fr"==u.language&&j(n({},s)),"de"==u.language&&j(n({},l)))},[u]),t.useEffect(function(){!function(){try{var e=function(){if(m)return Promise.resolve(function(e){var t=n({},E),i=e.split("."),a=i[i.length-1];if(t.format=a=!a||"png"!=a&&"jpeg"!=a&&"webp"!=a?"jpeg":a,null!=u.compressInitial){var o=1;u.compressInitial>=0&&u.compressInitial<=100&&(o=u.compressInitial),t.quality=o}return new Promise(function(i,n){var o=new Image;o.crossOrigin="Anonymous",t.maxHeight=o.height,t.maxWidth=o.width,o.onload=function(){var e=document.createElement("canvas"),n=e.getContext("2d");e.width=1*o.width,e.height=1*o.height,n.drawImage(o,0,0,e.width,e.height),console.log(t.quality);var r=e.toDataURL("image/"+a,t.quality/100);return i({dataUri:r,width:e.width,height:e.height})},o.onerror=function(t){return n(t.message||"Error loading the src = "+e)},o.src=e}).then(function(e){return t=n({},t,{maxHeight:e.height,maxWidth:e.width}),{imageUri:e.dataUri,state:t}})}(m)).then(function(e){var t=e.state;t.originImageSrc=m,t.arrayCopiedImages=[{lastImage:e.imageUri,width:t.maxWidth,height:t.maxHeight,quality:t.quality,format:t.format,originImageSrc:m}],C(e.imageUri),x(t),R(!0)});var e=n({},E);e.originImageSrc=null,e.arrayCopiedImages=[],R(!1),C(null),x(e)}();Promise.resolve(e&&e.then?e.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}()},[m]),t.useEffect(function(){v(b)},[b]);var X=t.useMemo(function(){return b&&b.length?Math.ceil(3/4*b.length/1024):""},[b]);return i.createElement("div",{className:"ReactImagePickerEditor"},!N&&i.createElement("div",{className:"place-image"},i.createElement("div",{className:"image-holder",style:{width:O.width,height:O.height,borderRadius:O.borderRadius,aspectRatio:O.aspectRatio+""}},i.createElement("button",{title:k["Upload a image"],className:"icon-btn image-upload-btn",onClick:V},i.createElement("span",{className:"material-icons"},"add_a_photo")),i.createElement("input",{ref:A,type:"file",style:{display:"none"},id:"filePicker-"+L,onChange:Y}))),N&&i.createElement("div",{className:"place-image"},i.createElement("div",{className:"image-holder-loaded",style:{width:O.width,height:O.height,borderRadius:O.borderRadius,aspectRatio:O.aspectRatio+""}},i.createElement("img",{src:b,alt:"image-loaded",style:{borderRadius:O.borderRadius,objectFit:O.objectFit}}),i.createElement("div",{className:"curtain",onClick:V},i.createElement("button",{title:k["Upload a image"]},i.createElement("span",{className:"material-icons"},"add_a_photo"))),i.createElement("input",{ref:A,type:"file",style:{display:"none"},id:"filePicker-"+L,onChange:Y})),X&&i.createElement("p",{className:"caption image-caption",style:{color:X>120?"#f44336":"unset",fontWeight:X>120?"500":"unset"}},"size: ",X,"Kb   ",E.format),i.createElement("div",{style:{flexDirection:"row",boxSizing:"border-box",display:"flex",placeContent:"flex-start",alignItems:"flex-start"},className:"editing-bar-btn"},!O.hideAddBtn&&i.createElement("button",{className:"icon-btn",id:"upload-img",title:k["Upload a image"],onClick:V},i.createElement("span",{className:"material-icons"},"add_a_photo")),!O.hideEditBtn&&i.createElement("button",{className:"icon-btn",id:"edit-img",title:k["Open the editor panel"],onClick:function(){F(!0)}},i.createElement("span",{className:"material-icons"},"edit")),!O.hideDownloadBtn&&i.createElement("a",{id:"download-img",title:k["Download the image"],href:b,download:q.current},i.createElement("span",{className:"material-icons"},"cloud_download")),!O.hideDeleteBtn&&i.createElement("button",{className:"icon-btn",id:"delete-img",title:k.Remove,onClick:function(){return function(){C(null),R(!1);var e=n({},E,M);x(e),F(!1)}()}},i.createElement("span",{className:"material-icons"},"delete")))),B&&i.createElement(I,{saveUpdates:function(e){F(!1),e&&(x(e.state),C(e.imageSrc))},labels:k,color:g,image:b,initialState:E}))});module.exports=R;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -1,2 +0,2 @@
-import e,{memo as t,useState as i,useRef as n,useEffect as a,useMemo as o}from"react";function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e}).apply(this,arguments)}function s(e,t){return(s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}var l={"Upload a image":"Suba una imagen","You must edit the image in order to resize it":"Debe editar la imagen para disminuir su tamaño","too large":"muy grande","Open the editor panel":"Abra el panel de edición","Download the image":"Descarge la imagen","Control Panel":"Panel de control",Remove:"Quitar",Quality:"Calidad","Max dimensions":"Dimensiones","aspect-ratio":"relación-aspecto","max-width(px)":"max. ancho","max-height(px)":"max. alto",Format:"Formato",Crop:"Recortar","width(px)":"ancho(px)","height(px)":"altura(px)",Save:"Guardar",Contrast:"Contraste",Blur:"Blur",Brightness:"Brillo",Grayscale:"Scala de gris",Saturate:"Saturación",Sepia:"Sepia",Rotate:"Rotar",Undo:"Deshacer"},c={"Upload a image":"Upload a image","You must edit the image in order to resize it":"You must edit the image in order to resize it","too large":"too large","Open the editor panel":"Open the editor panel","Download the image":"Download the image","Control Panel":"Control Panel",Quality:"Quality","Max dimensions":"Max dimensions","aspect-ratio":"aspect-ratio","max-width(px)":"max-width(px)","max-height(px)":"max-height(px)",Format:"Format",Crop:"Crop","width(px)":"width(px)","height(px)":"height(px)",Remove:"Remove",Save:"Save",Contrast:"Contrast",Blur:"Blur",Brightness:"Brightness",Grayscale:"Grayscale",Saturate:"Saturate",Sepia:"Sepia",Rotate:"Rotate",Undo:"Undo"},h={"Upload a image":"Charger une image","You must edit the image in order to resize it":"Vous devez éditer l'image pour changer sa taille","too large":"Trop grande","Open the editor panel":"Ouvrir le panneau d'édition","Download the image":"Télécharger l'image","Control Panel":"Panneau de commande",Remove:"Supprimer",Quality:"Qualité","Max dimensions":"Dimensions maximales","aspect-ratio":"rapport de forme","max-width(px)":"largeur max.","max-height(px)":"hauteur max",Format:"Format",Crop:"Recadrer","width(px)":"largeur(px)","height(px)":"hauteur(px)",Save:"Sauvez",Contrast:"Contraste",Blur:"Blur",Brightness:"Luminosité",Grayscale:"Grayscale",Saturate:"Saturer",Sepia:"Seiche",Undo:"Annuler"},d={"Upload a image":"Bild hochladen","You must edit the image in order to resize it":"Sie müssen das Bild bearbeiten, um seine Größe zu ändern","too large":"zu groß","Open the editor panel":"Editor-Fenster öffnen","Download the image":"Bild herunterladen","Control Panel":"Bedienfeld",Quality:"Qualität","Max dimensions":"Maximale Größe","aspect-ratio":"Seitenverhältnis","max-width(px)":"Max. Breite(px)","max-height(px)":"Max. Höhe(px)",Format:"Format",Crop:"Zuschneiden","width(px)":"Breite(px)","height(px)":"Höhe(px)",Remove:"Entfernen",Save:"Speichern",Contrast:"Kontrast",Blur:"Blur",Brightness:"Helligkeit",Grayscale:"Graustufen",Saturer:"Sättigen",Sepia:"Tintenfisch",Undo:"Undo"},u=function(e,t,i,n){return void 0===t&&(t=!1),new Promise(function(a,o){try{var r=document.createElement("img");r.src=e+"",r.crossOrigin="Anonymous";var s=i.quality/100,l=i.maintainAspectRatio;return r.onload=function(){var e,o=document.createElement("canvas"),c=o.getContext("2d"),h=r.width/r.height,d=i.maxWidth,u=i.maxHeight;null!=n&&n.getDimFromImage&&(d=r.width,u=r.height),l?(o.width=d,o.height=d/h,t&&(o.width=u*h,o.height=u)):(o.width=d,o.height=u),i.basicFilters&&(c.filter=(e=i.basicFilters,Object.keys(e).map(function(t){return["blur"].includes(t)?t+"("+e[t]+"px)":t+"("+e[t]+")"}).join(""))),c.drawImage(r,0,0,o.width,o.height);var m=o.toDataURL("image/"+i.format,s);a({dataUri:m,width:o.width,height:o.height})},Promise.resolve()}catch(e){return Promise.reject(e)}}).then(function(e){return i.maxHeight=e.height,i.maxWidth=e.width,{imageUri:e.dataUri,state:m(i,e.dataUri)}})},m=function(e,t){return e.arrayCopiedImages.length<=25?e.arrayCopiedImages.push({lastImage:t,width:e.maxWidth,height:e.maxHeight,quality:e.quality,format:e.format,originImageSrc:e.originImageSrc,basicFilters:e.basicFilters}):e.arrayCopiedImages[e.arrayCopiedImages.length-1]={lastImage:t,width:e.maxWidth,height:e.maxHeight,quality:e.quality,format:e.format,originImageSrc:e.originImageSrc,basicFilters:e.basicFilters},JSON.parse(JSON.stringify(e))};function p(e,t){try{var i=e()}catch(e){return t(e)}return i&&i.then?i.then(void 0,t):i}"undefined"!=typeof Symbol&&(Symbol.iterator||(Symbol.iterator=Symbol("Symbol.iterator"))),"undefined"!=typeof Symbol&&(Symbol.asyncIterator||(Symbol.asyncIterator=Symbol("Symbol.asyncIterator")));var g=t(function(t){var o=t.activeIndex,r=void 0===o?0:o,s=t.children,l=t.backgroundColor,c=void 0===l?"inherit":l,h=t.color,d=void 0===h?"#428CFF":h,u=t.indicatorStyle,m=void 0===u?"bottomLine":u,p=t.onTabChange,g=void 0===p?function(e){}:p,v=t.transitionMs,f=void 0===v?375:v,y=t.borderLine,E=void 0!==y&&y,x=t.fontColor,w=void 0===x?"inherit":x,b=t.lazy,C=void 0!==b&&b,S=i([]),N=S[0],I=S[1],z=i(r),M=z[0],R=z[1],B=n(null);a(function(){var e=s instanceof Array?s:[s];!function(e){try{e.map(function(e){if(!e.props.name)throw new Error("Inside of TabContainer component only can be rendered TabItem component, and its need a name prop");return!0})}catch(e){throw new Error("The TabContainer Component must has a TabItem as child component")}}(e);var t=e.map(function(e){return{label:e.props.name,icon:e.props.icon,disabled:e.props.disabled}});if(r>t.length-1||r<0)throw new Error("Invalid range for activeIndex "+r);I(t)},[s]),a(function(){var e,t,i=s instanceof Array?s:[s];if(r>i.length-1||r<0)throw new Error("Invalid range for activeIndex "+r);R(null!==(e=i[r])&&void 0!==e&&null!==(t=e.props)&&void 0!==t&&t.disabled?0:r)},[r]),a(function(){N&&N.length&&g(M)},[M]);var P=s instanceof Array?s:[s];return e.createElement("div",{ref:B,className:"tab-pp"},e.createElement("div",{className:"header",style:{backgroundColor:c,borderBottom:E?"1px solid #323232":"undet"}},N.map(function(t,i){return e.createElement("button",{onClick:function(){t.disabled||R(i)},key:t.label,style:{color:i!=M||"simple"!==m&&"bottomLine"!==m?w:d,backgroundColor:i==M&&"button"===m?d:"inherit"},className:i==M?"itemlabel "+m+" active":"itemlabel",disabled:t.disabled},t.icon," ",t.label,"bottomLine"===m&&e.createElement("div",{style:{backgroundColor:d}}))})),e.createElement("div",{className:"body"},P.map(function(t,i){return i<M?e.createElement("div",{style:{transform:"translate3d(-100%, 0px, 0px)",height:"0px",overflow:"hidden",transition:"transform "+f/1e3+"s ease"},key:i,className:"body-content"},!C&&t):i>M?e.createElement("div",{style:{transform:"translate3d(100%, 0px, 0px)",height:"0px",overflow:"hidden",transition:"transform "+f/1e3+"s ease"},key:i,className:"body-content"},!C&&t):e.createElement("div",{style:{visibility:"inherit",overflow:"auto",height:"auto",position:"relative",transition:"transform "+f/1e3+"s ease"},key:i,className:"body-content"},t)})))}),v=t(function(t){return e.createElement("div",{style:{padding:"1rem 0.5rem"}},t.children)}),f=["onInputChangedEnd","onChangedDelayed","onChangedValue","delayMs"],y=t(function(t){var o=t.onInputChangedEnd,r=t.onChangedDelayed,s=t.onChangedValue,l=t.delayMs,c=function(e,t){if(null==e)return{};var i,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(i=o[n])>=0||(a[i]=e[i]);return a}(t,f),h=i(t.value),d=h[0],u=h[1],m=n(),p=n(!0);function g(e){["checkbox","radio"].includes(t.type)?(u(e.target.checked),s&&s(e.target.checked)):(u(e.target.value),s&&s(e.target.value))}return n(!1),a(function(){if(r){if(!p.current)return clearTimeout(m.current),m.current=setTimeout(function(){clearTimeout(m.current),r(d)},l||100),function(){clearTimeout(m.current)};p.current=!1}},[d]),e.createElement(e.Fragment,null,o&&e.createElement("input",Object.assign({},c,{className:null==c?void 0:c.className,style:c.style,value:t.value,onChange:g,onBlur:function(e){o(e.target.value)},onKeyDown:function(e){"Enter"==e.key&&o(d)}})),!o&&e.createElement("input",Object.assign({},c,{className:null==c?void 0:c.className,style:c.style,value:t.value,onChange:g})))}),E={contrast:1,blur:0,brightness:1,grayscale:0,invert:0,saturate:1,sepia:0},x=t(function(t){var n=t.labels,o=t.color,s=t.initialState,l=void 0===s?E:s,c=t.changeFilter,h=void 0===c?function(){}:c,d=i(l),u=d[0],m=d[1];return a(function(){m(l?JSON.parse(JSON.stringify(r({},u,l))):E)},[l]),e.createElement("div",null,e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},n.Contrast),e.createElement("p",{className:"item-panel"},(+u.contrast).toFixed(2))),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{className:"input-range",onChangedDelayed:function(e){h(r({},u,{contrast:e}))},delayMs:100,onChangedValue:function(e){m(r({},u,{contrast:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.contrast})),e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},n.Brightness),e.createElement("p",{className:"item-panel"},(+u.brightness).toFixed(2))),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{className:"input-range",onChangedDelayed:function(e){h(r({},u,{brightness:e}))},onChangedValue:function(e){m(r({},u,{brightness:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.brightness})),e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},n.Grayscale),e.createElement("p",{className:"item-panel"},(+u.grayscale).toFixed(2))),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{className:"input-range",onChangedDelayed:function(e){h(r({},u,{grayscale:e}))},onChangedValue:function(e){m(r({},u,{grayscale:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.grayscale})),e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},n.Saturate),e.createElement("p",{className:"item-panel"},(+u.saturate).toFixed(2))),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{className:"input-range",onChangedDelayed:function(e){h(r({},u,{saturate:e}))},onChangedValue:function(e){m(r({},u,{saturate:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.saturate})),e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},n.Sepia),e.createElement("p",{className:"item-panel"},(+u.sepia).toFixed(2))),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{className:"input-range",onChangedDelayed:function(e){h(r({},u,{sepia:e}))},onChangedValue:function(e){m(r({},u,{sepia:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.sepia})),e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},n.Blur),e.createElement("p",{className:"item-panel"},(+u.blur).toFixed(2))),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{className:"input-range",onChangedDelayed:function(e){h(r({},u,{blur:e}))},onChangedValue:function(e){m(r({},u,{blur:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.blur})))});!function(){for(var e=0,t=["ms","moz","webkit","o"],i=0;i<t.length&&!window.requestAnimationFrame;i++)window.requestAnimationFrame=window[t[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[t[i]+"CancelAnimationFrame"]||window[t[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(t,i){var n=(new Date).getTime(),a=Math.max(0,16-(n-e)),o=window.setTimeout(function(){t(n+a)},a);return e=n+a,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(e){clearTimeout(e)})}(),function(){if("function"==typeof window.CustomEvent)return!1;function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),function(e){try{return new CustomEvent("test"),!1}catch(e){}function t(t,i){i=i||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(t,i.bubbles,i.cancelable,e,0,0,0,0,0,!1,!1,!1,!1,0,null),n}t.prototype=Event.prototype,e.MouseEvent=t}(window);var w=function(e,t,i,n){var a=this;function o(e){e.stopPropagation(),document.removeEventListener("mouseup",o),document.removeEventListener("mousemove",r),a.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:a}}))}function r(e){e.stopPropagation(),a.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}this.position=e,this.constraints=t,this.cursor=i,this.eventBus=n,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=i,this.el.addEventListener("mousedown",function(e){e.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",r),a.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:a}}))})},b=function(){function e(e,t,i,n){this.x1=e,this.y1=t,this.x2=i,this.y2=n}var t=e.prototype;return t.set=function(e,t,i,n){return void 0===e&&(e=null),void 0===t&&(t=null),void 0===i&&(i=null),void 0===n&&(n=null),this.x1=null==e?this.x1:e,this.y1=null==t?this.y1:t,this.x2=null==i?this.x2:i,this.y2=null==n?this.y2:n,this},t.width=function(){return Math.abs(this.x2-this.x1)},t.height=function(){return Math.abs(this.y2-this.y1)},t.resize=function(e,t,i){void 0===i&&(i=[0,0]);var n=this.x1+this.width()*i[0],a=this.y1+this.height()*i[1];return this.x1=n-e*i[0],this.y1=a-t*i[1],this.x2=this.x1+e,this.y2=this.y1+t,this},t.scale=function(e,t){void 0===t&&(t=[0,0]);var i=this.width()*e,n=this.height()*e;return this.resize(i,n,t),this},t.move=function(e,t){void 0===e&&(e=null),void 0===t&&(t=null);var i=this.width(),n=this.height();return t=null===t?this.y1:t,this.x1=e=null===e?this.x1:e,this.y1=t,this.x2=e+i,this.y2=t+n,this},t.getRelativePoint=function(e){return void 0===e&&(e=[0,0]),[this.width()*e[0],this.height()*e[1]]},t.getAbsolutePoint=function(e){return void 0===e&&(e=[0,0]),[this.x1+this.width()*e[0],this.y1+this.height()*e[1]]},t.constrainToRatio=function(e,t,i){if(void 0===t&&(t=[0,0]),void 0===i&&(i="height"),null!==e){switch(this.width(),this.height(),i){case"height":this.resize(this.width(),this.width()*e,t);break;case"width":this.resize(1*this.height()/e,this.height(),t);break;default:this.resize(this.width(),this.width()*e,t)}return this}},t.constrainToBoundary=function(e,t,i){void 0===i&&(i=[0,0]);var n=this.getAbsolutePoint(i),a=n[0],o=n[1],r=a,s=o,l=e-a,c=t-o,h=-2*i[1]+1,d=null,u=null;switch(-2*i[0]+1){case-1:d=r;break;case 0:d=2*Math.min(r,l);break;case 1:d=l}switch(h){case-1:u=s;break;case 0:u=2*Math.min(s,c);break;case 1:u=c}if(this.width()>d){var m=d/this.width();this.scale(m,i)}if(this.height()>u){var p=u/this.height();this.scale(p,i)}return this},t.constrainToSize=function(e,t,i,n,a,o){if(void 0===e&&(e=null),void 0===t&&(t=null),void 0===i&&(i=null),void 0===n&&(n=null),void 0===a&&(a=[0,0]),void 0===o&&(o=null),o&&(o>1?(e=1*t/o,n*=o):o<1&&(t=e*o,i=1*n/o)),e&&this.width()>e){var r=e,s=null===o?this.height():t;this.resize(r,s,a)}if(t&&this.height()>t){var l=null===o?this.width():e;this.resize(l,t,a)}if(i&&this.width()<i){var c=i,h=null===o?this.height():n;this.resize(c,h,a)}if(n&&this.height()<n){var d=null===o?this.width():i;this.resize(d,n,a)}return this},e}();function C(e){e.preventDefault();var t=e.changedTouches[0];t.target.dispatchEvent(new MouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[e.type],{bubbles:!0,cancelable:!0,view:window,clientX:t.clientX,clientY:t.clientY,screenX:t.screenX,screenY:t.screenY}))}var S=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}];function N(e,t){return Number(Math.round(e+"e"+t)+"e-"+t)}var I=function(e){var t,i;function n(t,i,n){return void 0===n&&(n=!1),e.call(this,t,i,n)||this}i=e,(t=n).prototype=Object.create(i.prototype),t.prototype.constructor=t,s(t,i);var a=n.prototype;return a.getValue=function(t){return e.prototype.getValue.call(this,t)},a.setImage=function(t){return e.prototype.setImage.call(this,t)},a.destroy=function(){return e.prototype.destroy.call(this)},a.moveTo=function(e,t){return this.box.move(e,t),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},a.resizeTo=function(e,t,i){return void 0===i&&(i=[.5,.5]),this.box.resize(e,t,i),this.box.constrainToBoundary(this.cropperEl.offsetWidth,this.cropperEl.offsetHeight,[.5,.5]),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},a.scaleBy=function(e,t){return void 0===t&&(t=[.5,.5]),this.box.scale(e,t),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},a.reset=function(e){return e&&(this.options=r({},this.options,{newOptions:e})),this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},a.enableVisibility=function(e){var t=document.querySelector(".croppr-container");if(!t)throw new Error("THere is not any croppr");t.style.display=e?"block":"none"},n}(function(){function e(t,i,n){var a=this;if(void 0===n&&(n=!1),this.options=e.parseOptions(i||{}),!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";if(!t.getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:t.parentNode,element:t},n||(0===t.width||0===t.height?t.onload=function(){a.initialize(t)}:this.initialize(t))}var t=e.prototype;return t.initialize=function(e){this.createDOM(e),this.options.convertToPixels(this.cropperEl),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.box=this.initializeBox(this.options),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this)},t.createDOM=function(e){var t;this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,(t=this.containerEl).addEventListener("touchstart",C),t.addEventListener("touchend",C),t.addEventListener("touchmove",C),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",e.getAttribute("src")),this.imageEl.setAttribute("alt",e.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.innerHTML=new Array(9).fill(1).map(function(){return'<div style="border: 1px dashed #fafafa"></div>'}).join(""),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var i=document.createElement("div");i.className="croppr-handleContainer",this.handles=[];for(var n=0;n<S.length;n++){var a=new w(S[n].position,S[n].constraints,S[n].cursor,this.eventBus);this.handles.push(a),i.appendChild(a.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(i),this.containerEl.appendChild(this.cropperEl),e.parentElement.replaceChild(this.containerEl,e)},t.setImage=function(e){var t=this;return this.imageEl.onload=function(){t.box=t.initializeBox(t.options),t.redraw()},this.imageEl.src=e,this.imageClippedEl.src=e,this},t.destroy=function(){this._restore.parent.replaceChild(this._restore.element,this.containerEl)},t.initializeBox=function(e){var t=new b(0,0,e.startSize.width,e.startSize.height);t.constrainToRatio(e.aspectRatio,[.5,.5]);var i=e.minSize,n=e.maxSize;t.constrainToSize(n.width,n.height,i.width,i.height,[.5,.5],e.aspectRatio),t.constrainToBoundary(this.cropperEl.offsetWidth,this.cropperEl.offsetHeight,[.5,.5]);var a=this.cropperEl.offsetWidth/2-t.width()/2,o=this.cropperEl.offsetHeight/2-t.height()/2;return t.move(a,o),t},t.redraw=function(){var e=this,t=Math.round(this.box.width()),i=Math.round(this.box.height()),n=Math.round(this.box.x1),a=Math.round(this.box.y1),o=Math.round(this.box.x2),r=Math.round(this.box.y2);window.requestAnimationFrame(function(){e.regionEl.style.transform="translate("+n+"px, "+a+"px)",e.regionEl.style.width=t+"px",e.regionEl.style.height=i+"px",e.imageClippedEl.style.clip="rect("+a+"px, "+o+"px, "+r+"px, "+n+"px)";for(var s=e.box.getAbsolutePoint([.5,.5]),l=s[1]-e.cropperEl.offsetHeight/2>>31,c=-2*((s[0]-e.cropperEl.offsetWidth/2>>31^l)+l+l+4)+8,h=0;h<e.handles.length;h++){var d=e.handles[h],u=a+i*d.position[1]-d.el.offsetHeight/2;d.el.style.transform="translate("+Math.round(n+t*d.position[0]-d.el.offsetWidth/2)+"px, "+Math.round(u)+"px)",d.el.style.zIndex=c==h?5:4}})},t.attachHandlerEvents=function(){var e=this.eventBus;e.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),e.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),e.addEventListener("handleend",this.onHandleMoveEnd.bind(this))},t.attachRegionEvents=function(){var e=this.eventBus;function t(t){t.stopPropagation(),e.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function i(n){n.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",t),e.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}this.regionEl.addEventListener("mousedown",function(n){n.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",t),e.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}),e.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),e.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),e.addEventListener("regionend",this.onRegionMoveEnd.bind(this))},t.attachOverlayEvents=function(){var e=this,t=null;function i(t){t.stopPropagation(),e.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function n(a){a.stopPropagation(),document.removeEventListener("mouseup",n),document.removeEventListener("mousemove",i),1!==e.box.width()||1!==e.box.height()?e.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:a.clientX,mouseY:a.clientY}})):e.box=t}this.overlayEl.addEventListener("mousedown",function(a){a.stopPropagation(),document.addEventListener("mouseup",n),document.addEventListener("mousemove",i);var o=e.cropperEl.getBoundingClientRect(),r=a.clientX-o.left,s=a.clientY-o.top;t=e.box,e.box=new b(r,s,r+1,s+1),e.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:e.handles[4]}}))})},t.onHandleMoveStart=function(e){var t=e.detail.handle,i=[1-t.position[0],1-t.position[1]],n=this.box.getAbsolutePoint(i);this.activeHandle={handle:t,originPoint:i,originX:n[0],originY:n[1]},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())},t.onHandleMoveMoving=function(e){var t=e.detail,i=t.mouseX,n=t.mouseY,a=this.cropperEl.getBoundingClientRect();(i-=a.left)<0?i=0:i>a.width&&(i=a.width),(n-=a.top)<0?n=0:n>a.height&&(n=a.height);var o=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,s=this.activeHandle.originY,l=this.activeHandle.handle,c=1===l.constraints[0],h=1===l.constraints[1],d=1===l.constraints[2],u=1===l.constraints[3],m=(u||h)&&(c||d),p=u||h?r:this.box.x1,g=u||h?r:this.box.x2,v=c||d?s:this.box.y1,f=c||d?s:this.box.y2;p=u?i:p,g=h?i:g,v=c?n:v,f=d?n:f;var y=!1,E=!1;if((u||h)&&(y=u?i>r:i<r),(c||d)&&(E=c?n>s:n<s),y){var x=p;p=g,g=x,o[0]=1-o[0]}if(E){var w=v;v=f,f=w,o[1]=1-o[1]}var C=new b(p,v,g,f);if(this.options.aspectRatio){var S=this.options.aspectRatio,N=!1;m?N=n>C.y1+S*C.width()||n<C.y2-S*C.width():(c||d)&&(N=!0),C.constrainToRatio(S,o,N?"width":"height")}var I=this.options.minSize,z=this.options.maxSize;C.constrainToSize(z.width,z.height,I.width,I.height,o,this.options.aspectRatio),C.constrainToBoundary(this.cropperEl.offsetWidth,this.cropperEl.offsetHeight,o),this.box=C,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())},t.onHandleMoveEnd=function(e){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())},t.onRegionMoveStart=function(e){var t=e.detail,i=t.mouseX,n=t.mouseY,a=this.cropperEl.getBoundingClientRect();this.currentMove={offsetX:(i-=a.left)-this.box.x1,offsetY:(n-=a.top)-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())},t.onRegionMoveMoving=function(e){var t=e.detail,i=t.mouseX,n=t.mouseY,a=this.currentMove,o=a.offsetX,r=a.offsetY,s=this.cropperEl.getBoundingClientRect();this.box.move((i-=s.left)-o,(n-=s.top)-r),this.box.x1<0&&this.box.move(0,null),this.box.x2>s.width&&this.box.move(s.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>s.height&&this.box.move(null,s.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())},t.onRegionMoveEnd=function(e){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())},t.getValue=function(e){if(void 0===e&&(e=null),null===e&&(e=this.options.returnMode),"real"==e){var t=this.imageEl.naturalWidth,i=this.imageEl.naturalHeight,n=this.imageEl.getBoundingClientRect(),a=t/n.width,o=i/n.height;return{x:Math.round(this.box.x1*a),y:Math.round(this.box.y1*o),width:Math.round(this.box.width()*a),height:Math.round(this.box.height()*o)}}if("ratio"==e){var r=this.imageEl.getBoundingClientRect(),s=r.width,l=r.height;return{x:N(this.box.x1/s,3),y:N(this.box.y1/l,3),width:N(this.box.width()/s,3),height:N(this.box.height()/l,3)}}if("raw"==e)return{x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}},e.parseOptions=function(e){var t=null;void 0!==e.aspectRatio&&("number"==typeof e.aspectRatio?t=e.aspectRatio:e.aspectRatio instanceof Array&&(t=e.aspectRatio[1]/e.aspectRatio[0]));var i=null;null!=e.maxSize&&(i={width:e.maxSize[0]||null,height:e.maxSize[1]||null,unit:e.maxSize[2]||"px"});var n=null;null!=e.minSize&&(n={width:e.minSize[0]||null,height:e.minSize[1]||null,unit:e.minSize[2]||"px"});var a=null;null!=e.startSize&&(a={width:e.startSize[0]||null,height:e.startSize[1]||null,unit:e.startSize[2]||"%"});var o=null;"function"==typeof e.onInitialize&&(o=e.onInitialize);var r=null;"function"==typeof e.onCropStart&&(r=e.onCropStart);var s=null;"function"==typeof e.onCropEnd&&(s=e.onCropEnd);var l=null;"function"==typeof e.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),l=e.onUpdate),"function"==typeof e.onCropMove&&(l=e.onCropMove);var c=null;if(void 0!==e.returnMode){var h=e.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(h))throw"Invalid return mode.";c=h}var d=function(e,t){return null!==e?e:t};return{aspectRatio:d(t,null),maxSize:d(i,{width:null,height:null}),minSize:d(n,{width:null,height:null}),startSize:d(a,{width:100,height:100,unit:"%"}),returnMode:d(c,"real"),onInitialize:d(o,null),onCropStart:d(r,null),onCropMove:d(l,null),onCropEnd:d(s,null),convertToPixels:function(e){for(var t=e.offsetWidth,i=e.offsetHeight,n=["maxSize","minSize","startSize"],a=0;a<n.length;a++){var o=n[a];null!==this[o]&&("%"==this[o].unit&&(null!==this[o].width&&(this[o].width=this[o].width/100*t),null!==this[o].height&&(this[o].height=this[o].height/100*i)),delete this[o].unit)}}}},e}()),z=t(function(t){var o=t.src,s=t.size,l=t.croppUpdate,c=i(),h=c[0],d=c[1],u=i({width:150,height:150}),m=u[0],p=u[1],g=n(null),v=n();return a(function(){s&&(p(r({},s)),g.current&&g.current.resizeTo(s.width,s.height))},[s]),a(function(){o&&d(o)},[o]),a(function(){return v.current&&h&&(g.current=new I("#croppr",{minSize:[32,32,"px"],startSize:[m.width,m.height,"px"],onInitialize:function(e){l(null==e?void 0:e.getValue())},onCropEnd:function(e){l(e)}})),function(){var e;return null==g||null===(e=g.current)||void 0===e?void 0:e.destroy()}},[v.current,h]),e.createElement("div",{className:"CropprWrapper"},e.createElement("img",{ref:v,src:h,id:"croppr"}))}),M={quality:92,maxHeight:1e3,maxWidth:1e3,cropHeight:150,cropWidth:150,maintainAspectRatio:!0,format:"jpeg",arrayCopiedImages:[],originImageSrc:""},R=t(function(t){var s=function(e,t){void 0===t&&(t=!1);try{var i=Math.max(Math.min(e,4e3),32),n=r({},R);if(t){if(n.maxHeight===i)return Promise.resolve();n.maxHeight=i}else{if(n.maxWidth===i)return Promise.resolve();n.maxWidth=i}B(n);var a=p(function(){return Promise.resolve(l(n,t)).then(function(){})},function(e){console.log("onChangeSize ~ error",e)});return Promise.resolve(a&&a.then?a.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},l=function(e,t){void 0===t&&(t=!1);try{var i=p(function(){return Promise.resolve(u(R.originImageSrc,t,e)).then(function(e){var t=e.state;H(e.imageUri),B(t)})},function(e){console.log("🚀 ~ file: EditImage.tsx ~ line 73 ~ applyChanges ~ error",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},c=t.labels,h=void 0===c?{}:c,d=t.image,f=void 0===d?"":d,E=t.color,w=void 0===E?"#1e88e5":E,b=t.initialState,C=void 0===b?M:b,S=t.saveUpdates,N=void 0===S?function(){}:S,I=i(C),R=I[0],B=I[1],P=i(""),F=P[0],H=P[1],k=i(!1),W=k[0],j=k[1],O=i({width:150,height:150}),T=O[0],A=O[1],D=i(),U=D[0],L=D[1],q=n(!1);function V(e,t){e&&(B(r({},R,{cropWidth:e})),A(r({},T,{width:e}))),t&&(B(r({},R,{cropHeight:t})),A(r({},T,{height:t})))}function Y(e){void 0===e&&(e=!1),j(!1),N(e?{state:R,imageSrc:F}:null)}a(function(){q.current=window.innerWidth<800,B(JSON.parse(JSON.stringify(r({},R,C))))},[C]),a(function(){H(f)},[f]),a(function(){W||A({width:150,height:150})},[W]);var X=o(function(){return F&&F.length?Math.ceil(3/4*F.length/1024):""},[F]);function _(e){return JSON.parse(JSON.stringify(e))}return e.createElement("div",{className:"EditImage"},e.createElement("div",{id:"popup",className:"popup"},e.createElement("div",{style:{flexDirection:"row",boxSizing:"border-box",display:"flex",placeContent:"center flex-end",alignItems:"center",padding:"0px 16px"}},e.createElement("button",{className:"icon-btn",onClick:function(){Y(!1)}},e.createElement("span",{className:"material-icons"},"clear"))),e.createElement("div",{className:"image-container"},e.createElement("div",{className:"image-holder-full"},!W&&e.createElement("img",{id:"image-full",src:F}),W&&e.createElement(z,{src:F,size:T,croppUpdate:function(e){L(e),B(r({},R,{cropHeight:e.height,cropWidth:e.width}))}})),e.createElement("div",{className:"control-panel"},e.createElement(g,{lazy:!0,borderLine:!0},e.createElement(v,{name:"Basic"},(!q.current||q.current&&!W)&&e.createElement(e.Fragment,null,e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},h.Quality),e.createElement("p",{className:"item-panel"},R.quality+"%")),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{readOnly:W,disabled:W,className:"input-range",onChangedDelayed:function(e){try{e=Math.max(Math.min(e,100),1);var t=r({},R,{quality:e});B(t);var i=p(function(){return Promise.resolve(l(t,!1)).then(function(){})},function(e){console.log("onUpdateQuality ~ error",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},onChangedValue:function(e){B(r({},R,{quality:e}))},style:{maxWidth:"100%",width:"100%",color:w},type:"range",min:1,max:100,value:R.quality})),e.createElement("div",{className:"item-panel",style:{display:"flex",width:"100%",justifyContent:"space-between"}},h["Max dimensions"],e.createElement("div",{style:{display:"flex",alignItems:"center"}},e.createElement("input",{disabled:W,readOnly:W,type:"checkbox",checked:R.maintainAspectRatio,onChange:function(e){return B(r({},R,{maintainAspectRatio:e.target.checked}))},style:{color:w}}),e.createElement("span",{className:"caption"},h["aspect-ratio"]))),e.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between"}},e.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},e.createElement("label",null,h["max-width(px)"]),e.createElement(y,{readOnly:W,disabled:W,placeholder:h["max-width(px)"],value:R.maxWidth,onChangedValue:function(e){return B(r({},R,{maxWidth:e}))},type:"number",min:0,max:2e3,onInputChangedEnd:function(e){s(e,!1)}})),e.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},e.createElement("label",null,h["max-height(px)"]),e.createElement(y,{readOnly:W,disabled:W,placeholder:h["max-height(px)"],value:R.maxHeight,onChangedValue:function(e){return B(r({},R,{maxHeight:e}))},type:"number",min:0,max:2e3,onInputChangedEnd:function(e){s(e,!0)}}))),e.createElement("p",{className:"item-panel"},h.Format),e.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between"}},e.createElement("div",{className:"form-field",style:{width:"100%"}},e.createElement("select",{disabled:W,value:R.format,onChange:function(e){try{var t=r({},R,{format:e.target.value}),i=p(function(){return B(t),Promise.resolve(l(t,!1)).then(function(){})},function(e){console.log("onChangeFormat ~ error",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}},["webp","jpeg","png"].map(function(t,i){return e.createElement("option",{key:i,value:t},t)}))))),e.createElement("div",{className:"flex-row-start",style:{marginTop:"5px",justifyContent:"space-between"}},e.createElement("span",{style:{display:"flex",alignItems:"center"}},e.createElement("input",{type:"checkbox",onChange:function(e){j(e.target.checked)},checked:W,style:{color:w,marginBottom:"3px"}}),e.createElement("span",{className:"item-panel",style:{marginLeft:"4px"}},h.Crop))),W&&e.createElement(e.Fragment,null,e.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between"}},e.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},e.createElement("label",null,h["width(px)"]),e.createElement(y,{type:"number",min:0,value:R.cropWidth,onChangedValue:function(e){return B(r({},R,{cropWidth:e}))},onInputChangedEnd:function(e){V(+e,null)},placeholder:h["width(px)"]})),e.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},e.createElement("label",null,h["height(px)"]),e.createElement(y,{type:"number",min:0,value:R.cropHeight,onInputChangedEnd:function(e){V(null,+e)},onChangedValue:function(e){return B(r({},R,{cropHeight:e}))},placeholder:h["height(px)"]}))),e.createElement("p",{style:{marginBottom:"4px !important"}},e.createElement("button",{title:"Cut the image",className:"icon-btn",onClick:function(){var e=_(R),t=document.createElement("canvas");return new Promise(function(i,n){var a=t.getContext("2d"),o=new Image;o.src=F,o.onload=function(){var n=null==U?void 0:U.width;return t.height=null==U?void 0:U.height,t.width=n,a.drawImage(o,Math.abs(null==U?void 0:U.x),Math.abs(null==U?void 0:U.y),null==U?void 0:U.width,null==U?void 0:U.height,0,0,null==U?void 0:U.width,null==U?void 0:U.height),i(t.toDataURL("image/"+e.format,e.quality))},o.onerror=function(e){n(e)}}).then(function(i){e.maxWidth=t.width,e.maxHeight=t.height,e.originImageSrc=i,e=m(e,i),B(e),H(i),j(!1)}).catch(function(e){console.log(e)})}},e.createElement("span",{className:"material-icons"}," crop "))))),e.createElement(v,{disabled:W,name:"Filters"},e.createElement(x,{color:w,labels:h,initialState:R.basicFilters,changeFilter:function(e){try{var t=p(function(){var t=_(R);return t.basicFilters=t.basicFilters?r({},t.basicFilters,e):e,Promise.resolve(l(t,!1)).then(function(){})},function(e){console.log("🚀 ~ file: EditImage.tsx ~ line 259 ~ onChangeFilters ~ e",e)});return Promise.resolve(t&&t.then?t.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}}))),e.createElement("button",{title:h.Undo,disabled:R.arrayCopiedImages.length<=1,style:{position:"absolute",right:"10px",top:"30px"},className:"icon-btn",onClick:function(){try{try{var e=_(R);if(e.arrayCopiedImages.length>1){e.arrayCopiedImages.pop();var t=e.arrayCopiedImages[e.arrayCopiedImages.length-1];e=r({},R,{arrayCopiedImages:e.arrayCopiedImages,maxHeight:t.height,maxWidth:t.width,quality:t.quality,format:t.format,originImageSrc:t.originImageSrc,basicFilters:t.basicFilters}),B(e),H(t.lastImage)}}catch(e){console.log("🚀 ~ file: edit-image.component.ts ~ line 126 ~ EditImageComponent ~ onRestore ~ e",e)}return Promise.resolve()}catch(e){return Promise.reject(e)}}},e.createElement("span",{className:"material-icons"}," refresh ")),e.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between",alignItems:"center"}},e.createElement("button",{className:"save-btn",onClick:function(){Y(!0)}},h.Save),X&&e.createElement("p",{className:"caption image-caption",style:{color:X>120?"#f44336":"unset",fontWeight:X>120?"500":"unset"}},"size: ",X,"Kb   ",R.format))))))}),B={language:"en",objectFit:"cover",hideDeleteBtn:!1,hideDownloadBtn:!1,hideEditBtn:!1,hideAddBtn:!1,compressInitial:null},P={maxHeight:3e3,maxWidth:3e3,cropHeight:150,cropWidth:150,maintainAspectRatio:!0,format:"jpeg",arrayCopiedImages:[],originImageSrc:"",basicFilters:void 0,quality:100},F=t(function(t){var s=function(e){try{var t=btoa(e.target.result),i=r({},b),n=V.current+t;i.originImageSrc=V.current+t;var a=function(){if(D.compressInitial)return i=r({},i,{quality:Math.min(D.compressInitial||92,100),maintainAspectRatio:!0,format:"jpeg"}),Promise.resolve(u(i.originImageSrc,!1,i,{getDimFromImage:!0})).then(function(e){C(e.state),I(e.imageUri),F(!0)});var e=document.createElement("img");e.src=n,e.onload=function(){i.arrayCopiedImages=[],i.maxHeight=e.height,i.maxWidth=e.width,i.format=q.current.split("image/")[1],i.arrayCopiedImages.push({lastImage:n,width:e.width,height:e.height,quality:i.quality,format:q.current.split("image/")[1],originImageSrc:i.originImageSrc}),C(i),I(n),F(!0)}}();return Promise.resolve(a&&a.then?a.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},m=t.config,p=void 0===m?{}:m,g=t.imageSrcProp,v=void 0===g?"":g,f=t.color,y=void 0===f?"#1e88e5":f,E=t.imageChanged,x=void 0===E?function(){}:E,w=i(r({},P)),b=w[0],C=w[1],S=i(""),N=S[0],I=S[1],z=i(!1),M=z[0],F=z[1],H=i(!1),k=H[0],W=H[1],j=i(c),O=j[0],T=j[1],A=i(B),D=A[0],U=A[1],L=n(null),q=n(""),V=n(""),Y=Date.now().toString(20),X=n("download"),_=n(!1);function G(e){var t;e.preventDefault(),null==L||null===(t=L.current)||void 0===t||t.click()}function Q(e){var t,i=null===(t=e.target)||void 0===t?void 0:t.files;if(i){var n=i[0];if(X.current=n.name.split(".")[0],q.current=n.type,!q.current.includes("image"))return;if(V.current="data:"+n.type+";base64,",n){C(r({},b,{format:q.current.split("image/")[1]}));var a=new FileReader;a.onload=s.bind(this),a.readAsBinaryString(n)}}}a(function(){var e;!function(){var e=document.head;if(!e.querySelector("#ngp-image-picker-icons-id")){var t=document.createElement("link");t.href="https://fonts.googleapis.com/icon?family=Material+Icons",t.rel="stylesheet",t.id="ngp-image-picker-icons-id",e.appendChild(t)}}(),e=r({},D,p),U(e),null!=p.language&&("en"==p.language&&T(r({},c)),"es"==p.language&&T(r({},l)),"fr"==p.language&&T(r({},h)),"de"==p.language&&T(r({},d)))},[p]),a(function(){_.current||(_.current=!0,function(){try{var e=function(){if(v)return Promise.resolve(function(e){var t=r({},b),i=e.split("."),n=i[i.length-1];if(t.format=n=!n||"png"!=n&&"jpeg"!=n&&"webp"!=n?"jpeg":n,null!=p.compressInitial){var a=1;p.compressInitial>=0&&p.compressInitial<=100&&(a=p.compressInitial),t.quality=a}return new Promise(function(i,a){var o=new Image;o.crossOrigin="Anonymous",t.maxHeight=o.height,t.maxWidth=o.width,o.onload=function(){var e=document.createElement("canvas"),a=e.getContext("2d");e.width=1*o.width,e.height=1*o.height,a.drawImage(o,0,0,e.width,e.height),console.log(t.quality);var r=e.toDataURL("image/"+n,t.quality/100);return i({dataUri:r,width:e.width,height:e.height})},o.onerror=function(t){return a(t.message||"Error loading the src = "+e)},o.src=e}).then(function(e){return t=r({},t,{maxHeight:e.height,maxWidth:e.width}),{imageUri:e.dataUri,state:t}})}(v)).then(function(e){var t=e.state;t.originImageSrc=v,t.arrayCopiedImages.push({lastImage:e.imageUri,width:t.maxWidth,height:t.maxHeight,quality:t.quality,format:t.format,originImageSrc:v}),console.log("NEW STATE",t),I(e.imageUri),C(t),F(!0)});var e=r({},b);e.originImageSrc=null,e.arrayCopiedImages=[],F(!1),I(null),C(e)}();e&&e.then&&e.then(function(){})}catch(e){Promise.reject(e)}}())},[v]),a(function(){x(N)},[N]);var J=o(function(){return N&&N.length?Math.ceil(3/4*N.length/1024):""},[N]);return e.createElement("div",{className:"ReactImagePickerEditor"},!M&&e.createElement("div",{className:"place-image"},e.createElement("div",{className:"image-holder",style:{width:D.width,height:D.height,borderRadius:D.borderRadius,aspectRatio:D.aspectRatio+""}},e.createElement("button",{title:O["Upload a image"],className:"icon-btn image-upload-btn",onClick:G},e.createElement("span",{className:"material-icons"},"add_a_photo")),e.createElement("input",{ref:L,type:"file",style:{display:"none"},id:"filePicker-"+Y,onChange:Q}))),M&&e.createElement("div",{className:"place-image"},e.createElement("div",{className:"image-holder-loaded",style:{width:D.width,height:D.height,borderRadius:D.borderRadius,aspectRatio:D.aspectRatio+""}},e.createElement("img",{src:N,alt:"image-loaded",style:{borderRadius:D.borderRadius,objectFit:D.objectFit}}),e.createElement("div",{className:"curtain",onClick:G},e.createElement("button",{title:O["Upload a image"]},e.createElement("span",{className:"material-icons"},"add_a_photo"))),e.createElement("input",{ref:L,type:"file",style:{display:"none"},id:"filePicker-"+Y,onChange:Q})),J&&e.createElement("p",{className:"caption image-caption",style:{color:J>120?"#f44336":"unset",fontWeight:J>120?"500":"unset"}},"size: ",J,"Kb   ",b.format),e.createElement("div",{style:{flexDirection:"row",boxSizing:"border-box",display:"flex",placeContent:"flex-start",alignItems:"flex-start"},className:"editing-bar-btn"},!D.hideAddBtn&&e.createElement("button",{className:"icon-btn",id:"upload-img",title:O["Upload a image"],onClick:G},e.createElement("span",{className:"material-icons"},"add_a_photo")),!D.hideEditBtn&&e.createElement("button",{className:"icon-btn",id:"edit-img",title:O["Open the editor panel"],onClick:function(){W(!0)}},e.createElement("span",{className:"material-icons"},"edit")),!D.hideDownloadBtn&&e.createElement("a",{id:"download-img",title:O["Download the image"],href:N,download:X.current},e.createElement("span",{className:"material-icons"},"cloud_download")),!D.hideDeleteBtn&&e.createElement("button",{className:"icon-btn",id:"delete-img",title:O.Remove,onClick:function(){return function(){I(null),F(!1);var e=r({},b,P);C(e),W(!1)}()}},e.createElement("span",{className:"material-icons"},"delete")))),k&&e.createElement(R,{saveUpdates:function(e){W(!1),e&&(C(e.state),I(e.imageSrc))},labels:O,color:y,image:N,initialState:b}))});export default F;
+import e,{memo as t,useState as i,useRef as n,useEffect as a,useMemo as o}from"react";function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e}).apply(this,arguments)}function s(e,t){return(s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}var l={"Upload a image":"Suba una imagen","You must edit the image in order to resize it":"Debe editar la imagen para disminuir su tamaño","too large":"muy grande","Open the editor panel":"Abra el panel de edición","Download the image":"Descarge la imagen","Control Panel":"Panel de control",Remove:"Quitar",Quality:"Calidad","Max dimensions":"Dimensiones","aspect-ratio":"relación-aspecto","max-width(px)":"max. ancho","max-height(px)":"max. alto",Format:"Formato",Crop:"Recortar","width(px)":"ancho(px)","height(px)":"altura(px)",Save:"Guardar",Contrast:"Contraste",Blur:"Blur",Brightness:"Brillo",Grayscale:"Scala de gris",Saturate:"Saturación",Sepia:"Sepia",Rotate:"Rotar",Undo:"Deshacer"},c={"Upload a image":"Upload a image","You must edit the image in order to resize it":"You must edit the image in order to resize it","too large":"too large","Open the editor panel":"Open the editor panel","Download the image":"Download the image","Control Panel":"Control Panel",Quality:"Quality","Max dimensions":"Max dimensions","aspect-ratio":"aspect-ratio","max-width(px)":"max-width(px)","max-height(px)":"max-height(px)",Format:"Format",Crop:"Crop","width(px)":"width(px)","height(px)":"height(px)",Remove:"Remove",Save:"Save",Contrast:"Contrast",Blur:"Blur",Brightness:"Brightness",Grayscale:"Grayscale",Saturate:"Saturate",Sepia:"Sepia",Rotate:"Rotate",Undo:"Undo"},h={"Upload a image":"Charger une image","You must edit the image in order to resize it":"Vous devez éditer l'image pour changer sa taille","too large":"Trop grande","Open the editor panel":"Ouvrir le panneau d'édition","Download the image":"Télécharger l'image","Control Panel":"Panneau de commande",Remove:"Supprimer",Quality:"Qualité","Max dimensions":"Dimensions maximales","aspect-ratio":"rapport de forme","max-width(px)":"largeur max.","max-height(px)":"hauteur max",Format:"Format",Crop:"Recadrer","width(px)":"largeur(px)","height(px)":"hauteur(px)",Save:"Sauvez",Contrast:"Contraste",Blur:"Blur",Brightness:"Luminosité",Grayscale:"Grayscale",Saturate:"Saturer",Sepia:"Seiche",Undo:"Annuler"},d={"Upload a image":"Bild hochladen","You must edit the image in order to resize it":"Sie müssen das Bild bearbeiten, um seine Größe zu ändern","too large":"zu groß","Open the editor panel":"Editor-Fenster öffnen","Download the image":"Bild herunterladen","Control Panel":"Bedienfeld",Quality:"Qualität","Max dimensions":"Maximale Größe","aspect-ratio":"Seitenverhältnis","max-width(px)":"Max. Breite(px)","max-height(px)":"Max. Höhe(px)",Format:"Format",Crop:"Zuschneiden","width(px)":"Breite(px)","height(px)":"Höhe(px)",Remove:"Entfernen",Save:"Speichern",Contrast:"Kontrast",Blur:"Blur",Brightness:"Helligkeit",Grayscale:"Graustufen",Saturer:"Sättigen",Sepia:"Tintenfisch",Undo:"Undo"},u=function(e,t,i,n){return void 0===t&&(t=!1),new Promise(function(a,o){try{var r=document.createElement("img");r.src=e+"",r.crossOrigin="Anonymous";var s=i.quality/100,l=i.maintainAspectRatio;return r.onload=function(){var e,o=document.createElement("canvas"),c=o.getContext("2d"),h=r.width/r.height,d=i.maxWidth,u=i.maxHeight;null!=n&&n.getDimFromImage&&(d=r.width,u=r.height),l?(o.width=d,o.height=d/h,t&&(o.width=u*h,o.height=u)):(o.width=d,o.height=u),i.basicFilters&&(c.filter=(e=i.basicFilters,Object.keys(e).map(function(t){return["blur"].includes(t)?t+"("+e[t]+"px)":t+"("+e[t]+")"}).join(""))),c.drawImage(r,0,0,o.width,o.height);var m=o.toDataURL("image/"+i.format,s);a({dataUri:m,width:o.width,height:o.height})},Promise.resolve()}catch(e){return Promise.reject(e)}}).then(function(e){return i.maxHeight=e.height,i.maxWidth=e.width,{imageUri:e.dataUri,state:m(i,e.dataUri)}})},m=function(e,t){return e.arrayCopiedImages.length<=25?e.arrayCopiedImages.push({lastImage:t,width:e.maxWidth,height:e.maxHeight,quality:e.quality,format:e.format,originImageSrc:e.originImageSrc,basicFilters:e.basicFilters}):e.arrayCopiedImages[e.arrayCopiedImages.length-1]={lastImage:t,width:e.maxWidth,height:e.maxHeight,quality:e.quality,format:e.format,originImageSrc:e.originImageSrc,basicFilters:e.basicFilters},JSON.parse(JSON.stringify(e))};function p(e,t){try{var i=e()}catch(e){return t(e)}return i&&i.then?i.then(void 0,t):i}"undefined"!=typeof Symbol&&(Symbol.iterator||(Symbol.iterator=Symbol("Symbol.iterator"))),"undefined"!=typeof Symbol&&(Symbol.asyncIterator||(Symbol.asyncIterator=Symbol("Symbol.asyncIterator")));var g=t(function(t){var o=t.activeIndex,r=void 0===o?0:o,s=t.children,l=t.backgroundColor,c=void 0===l?"inherit":l,h=t.color,d=void 0===h?"#428CFF":h,u=t.indicatorStyle,m=void 0===u?"bottomLine":u,p=t.onTabChange,g=void 0===p?function(e){}:p,v=t.transitionMs,f=void 0===v?375:v,y=t.borderLine,x=void 0!==y&&y,E=t.fontColor,w=void 0===E?"inherit":E,b=t.lazy,C=void 0!==b&&b,S=i([]),N=S[0],I=S[1],z=i(r),M=z[0],R=z[1],P=n(null);a(function(){var e=s instanceof Array?s:[s];!function(e){try{e.map(function(e){if(!e.props.name)throw new Error("Inside of TabContainer component only can be rendered TabItem component, and its need a name prop");return!0})}catch(e){throw new Error("The TabContainer Component must has a TabItem as child component")}}(e);var t=e.map(function(e){return{label:e.props.name,icon:e.props.icon,disabled:e.props.disabled}});if(r>t.length-1||r<0)throw new Error("Invalid range for activeIndex "+r);I(t)},[s]),a(function(){var e,t,i=s instanceof Array?s:[s];if(r>i.length-1||r<0)throw new Error("Invalid range for activeIndex "+r);R(null!==(e=i[r])&&void 0!==e&&null!==(t=e.props)&&void 0!==t&&t.disabled?0:r)},[r]),a(function(){N&&N.length&&g(M)},[M]);var B=s instanceof Array?s:[s];return e.createElement("div",{ref:P,className:"tab-pp"},e.createElement("div",{className:"header",style:{backgroundColor:c,borderBottom:x?"1px solid #323232":"undet"}},N.map(function(t,i){return e.createElement("button",{onClick:function(){t.disabled||R(i)},key:t.label,style:{color:i!=M||"simple"!==m&&"bottomLine"!==m?w:d,backgroundColor:i==M&&"button"===m?d:"inherit"},className:i==M?"itemlabel "+m+" active":"itemlabel",disabled:t.disabled},t.icon," ",t.label,"bottomLine"===m&&e.createElement("div",{style:{backgroundColor:d}}))})),e.createElement("div",{className:"body"},B.map(function(t,i){return i<M?e.createElement("div",{style:{transform:"translate3d(-100%, 0px, 0px)",height:"0px",overflow:"hidden",transition:"transform "+f/1e3+"s ease"},key:i,className:"body-content"},!C&&t):i>M?e.createElement("div",{style:{transform:"translate3d(100%, 0px, 0px)",height:"0px",overflow:"hidden",transition:"transform "+f/1e3+"s ease"},key:i,className:"body-content"},!C&&t):e.createElement("div",{style:{visibility:"inherit",overflow:"auto",height:"auto",position:"relative",transition:"transform "+f/1e3+"s ease"},key:i,className:"body-content"},t)})))}),v=t(function(t){return e.createElement("div",{style:{padding:"1rem 0.5rem"}},t.children)}),f=["onInputChangedEnd","onChangedDelayed","onChangedValue","delayMs"],y=t(function(t){var o=t.onInputChangedEnd,r=t.onChangedDelayed,s=t.onChangedValue,l=t.delayMs,c=function(e,t){if(null==e)return{};var i,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(i=o[n])>=0||(a[i]=e[i]);return a}(t,f),h=i(t.value),d=h[0],u=h[1],m=n(),p=n(!0);function g(e){["checkbox","radio"].includes(t.type)?(u(e.target.checked),s&&s(e.target.checked)):(u(e.target.value),s&&s(e.target.value))}return n(!1),a(function(){if(r){if(!p.current)return clearTimeout(m.current),m.current=setTimeout(function(){clearTimeout(m.current),r(d)},l||100),function(){clearTimeout(m.current)};p.current=!1}},[d]),e.createElement(e.Fragment,null,o&&e.createElement("input",Object.assign({},c,{className:null==c?void 0:c.className,style:c.style,value:t.value,onChange:g,onBlur:function(e){o(e.target.value)},onKeyDown:function(e){"Enter"==e.key&&o(d)}})),!o&&e.createElement("input",Object.assign({},c,{className:null==c?void 0:c.className,style:c.style,value:t.value,onChange:g})))}),x={contrast:1,blur:0,brightness:1,grayscale:0,invert:0,saturate:1,sepia:0},E=t(function(t){var n=t.labels,o=t.color,s=t.initialState,l=void 0===s?x:s,c=t.changeFilter,h=void 0===c?function(){}:c,d=i(l),u=d[0],m=d[1];return a(function(){m(l?JSON.parse(JSON.stringify(r({},u,l))):x)},[l]),e.createElement("div",null,e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},n.Contrast),e.createElement("p",{className:"item-panel"},(+u.contrast).toFixed(2))),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{className:"input-range",onChangedDelayed:function(e){h(r({},u,{contrast:e}))},delayMs:100,onChangedValue:function(e){m(r({},u,{contrast:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.contrast})),e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},n.Brightness),e.createElement("p",{className:"item-panel"},(+u.brightness).toFixed(2))),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{className:"input-range",onChangedDelayed:function(e){h(r({},u,{brightness:e}))},onChangedValue:function(e){m(r({},u,{brightness:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.brightness})),e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},n.Grayscale),e.createElement("p",{className:"item-panel"},(+u.grayscale).toFixed(2))),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{className:"input-range",onChangedDelayed:function(e){h(r({},u,{grayscale:e}))},onChangedValue:function(e){m(r({},u,{grayscale:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.grayscale})),e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},n.Saturate),e.createElement("p",{className:"item-panel"},(+u.saturate).toFixed(2))),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{className:"input-range",onChangedDelayed:function(e){h(r({},u,{saturate:e}))},onChangedValue:function(e){m(r({},u,{saturate:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.saturate})),e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},n.Sepia),e.createElement("p",{className:"item-panel"},(+u.sepia).toFixed(2))),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{className:"input-range",onChangedDelayed:function(e){h(r({},u,{sepia:e}))},onChangedValue:function(e){m(r({},u,{sepia:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.sepia})),e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},n.Blur),e.createElement("p",{className:"item-panel"},(+u.blur).toFixed(2))),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{className:"input-range",onChangedDelayed:function(e){h(r({},u,{blur:e}))},onChangedValue:function(e){m(r({},u,{blur:e}))},style:{maxWidth:"100%",width:"100%",color:o},type:"range",min:"0",max:"5",step:"0.01",value:u.blur})))});!function(){for(var e=0,t=["ms","moz","webkit","o"],i=0;i<t.length&&!window.requestAnimationFrame;i++)window.requestAnimationFrame=window[t[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[t[i]+"CancelAnimationFrame"]||window[t[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(t,i){var n=(new Date).getTime(),a=Math.max(0,16-(n-e)),o=window.setTimeout(function(){t(n+a)},a);return e=n+a,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(e){clearTimeout(e)})}(),function(){if("function"==typeof window.CustomEvent)return!1;function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=window.Event.prototype,window.CustomEvent=e}(),function(e){try{return new CustomEvent("test"),!1}catch(e){}function t(t,i){i=i||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(t,i.bubbles,i.cancelable,e,0,0,0,0,0,!1,!1,!1,!1,0,null),n}t.prototype=Event.prototype,e.MouseEvent=t}(window);var w=function(e,t,i,n){var a=this;function o(e){e.stopPropagation(),document.removeEventListener("mouseup",o),document.removeEventListener("mousemove",r),a.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:a}}))}function r(e){e.stopPropagation(),a.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}this.position=e,this.constraints=t,this.cursor=i,this.eventBus=n,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=i,this.el.addEventListener("mousedown",function(e){e.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",r),a.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:a}}))})},b=function(){function e(e,t,i,n){this.x1=e,this.y1=t,this.x2=i,this.y2=n}var t=e.prototype;return t.set=function(e,t,i,n){return void 0===e&&(e=null),void 0===t&&(t=null),void 0===i&&(i=null),void 0===n&&(n=null),this.x1=null==e?this.x1:e,this.y1=null==t?this.y1:t,this.x2=null==i?this.x2:i,this.y2=null==n?this.y2:n,this},t.width=function(){return Math.abs(this.x2-this.x1)},t.height=function(){return Math.abs(this.y2-this.y1)},t.resize=function(e,t,i){void 0===i&&(i=[0,0]);var n=this.x1+this.width()*i[0],a=this.y1+this.height()*i[1];return this.x1=n-e*i[0],this.y1=a-t*i[1],this.x2=this.x1+e,this.y2=this.y1+t,this},t.scale=function(e,t){void 0===t&&(t=[0,0]);var i=this.width()*e,n=this.height()*e;return this.resize(i,n,t),this},t.move=function(e,t){void 0===e&&(e=null),void 0===t&&(t=null);var i=this.width(),n=this.height();return t=null===t?this.y1:t,this.x1=e=null===e?this.x1:e,this.y1=t,this.x2=e+i,this.y2=t+n,this},t.getRelativePoint=function(e){return void 0===e&&(e=[0,0]),[this.width()*e[0],this.height()*e[1]]},t.getAbsolutePoint=function(e){return void 0===e&&(e=[0,0]),[this.x1+this.width()*e[0],this.y1+this.height()*e[1]]},t.constrainToRatio=function(e,t,i){if(void 0===t&&(t=[0,0]),void 0===i&&(i="height"),null!==e){switch(this.width(),this.height(),i){case"height":this.resize(this.width(),this.width()*e,t);break;case"width":this.resize(1*this.height()/e,this.height(),t);break;default:this.resize(this.width(),this.width()*e,t)}return this}},t.constrainToBoundary=function(e,t,i){void 0===i&&(i=[0,0]);var n=this.getAbsolutePoint(i),a=n[0],o=n[1],r=a,s=o,l=e-a,c=t-o,h=-2*i[1]+1,d=null,u=null;switch(-2*i[0]+1){case-1:d=r;break;case 0:d=2*Math.min(r,l);break;case 1:d=l}switch(h){case-1:u=s;break;case 0:u=2*Math.min(s,c);break;case 1:u=c}if(this.width()>d){var m=d/this.width();this.scale(m,i)}if(this.height()>u){var p=u/this.height();this.scale(p,i)}return this},t.constrainToSize=function(e,t,i,n,a,o){if(void 0===e&&(e=null),void 0===t&&(t=null),void 0===i&&(i=null),void 0===n&&(n=null),void 0===a&&(a=[0,0]),void 0===o&&(o=null),o&&(o>1?(e=1*t/o,n*=o):o<1&&(t=e*o,i=1*n/o)),e&&this.width()>e){var r=e,s=null===o?this.height():t;this.resize(r,s,a)}if(t&&this.height()>t){var l=null===o?this.width():e;this.resize(l,t,a)}if(i&&this.width()<i){var c=i,h=null===o?this.height():n;this.resize(c,h,a)}if(n&&this.height()<n){var d=null===o?this.width():i;this.resize(d,n,a)}return this},e}();function C(e){e.preventDefault();var t=e.changedTouches[0];t.target.dispatchEvent(new MouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[e.type],{bubbles:!0,cancelable:!0,view:window,clientX:t.clientX,clientY:t.clientY,screenX:t.screenX,screenY:t.screenY}))}var S=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}];function N(e,t){return Number(Math.round(e+"e"+t)+"e-"+t)}var I=function(e){var t,i;function n(t,i,n){return void 0===n&&(n=!1),e.call(this,t,i,n)||this}i=e,(t=n).prototype=Object.create(i.prototype),t.prototype.constructor=t,s(t,i);var a=n.prototype;return a.getValue=function(t){return e.prototype.getValue.call(this,t)},a.setImage=function(t){return e.prototype.setImage.call(this,t)},a.destroy=function(){return e.prototype.destroy.call(this)},a.moveTo=function(e,t){return this.box.move(e,t),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},a.resizeTo=function(e,t,i){return void 0===i&&(i=[.5,.5]),this.box.resize(e,t,i),this.box.constrainToBoundary(this.cropperEl.offsetWidth,this.cropperEl.offsetHeight,[.5,.5]),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},a.scaleBy=function(e,t){return void 0===t&&(t=[.5,.5]),this.box.scale(e,t),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},a.reset=function(e){return e&&(this.options=r({},this.options,{newOptions:e})),this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this},a.enableVisibility=function(e){var t=document.querySelector(".croppr-container");if(!t)throw new Error("THere is not any croppr");t.style.display=e?"block":"none"},n}(function(){function e(t,i,n){var a=this;if(void 0===n&&(n=!1),this.options=e.parseOptions(i||{}),!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";if(!t.getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:t.parentNode,element:t},n||(0===t.width||0===t.height?t.onload=function(){a.initialize(t)}:this.initialize(t))}var t=e.prototype;return t.initialize=function(e){this.createDOM(e),this.options.convertToPixels(this.cropperEl),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.box=this.initializeBox(this.options),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this)},t.createDOM=function(e){var t;this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,(t=this.containerEl).addEventListener("touchstart",C),t.addEventListener("touchend",C),t.addEventListener("touchmove",C),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",e.getAttribute("src")),this.imageEl.setAttribute("alt",e.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.innerHTML=new Array(9).fill(1).map(function(){return'<div style="border: 1px dashed #fafafa"></div>'}).join(""),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var i=document.createElement("div");i.className="croppr-handleContainer",this.handles=[];for(var n=0;n<S.length;n++){var a=new w(S[n].position,S[n].constraints,S[n].cursor,this.eventBus);this.handles.push(a),i.appendChild(a.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(i),this.containerEl.appendChild(this.cropperEl),e.parentElement.replaceChild(this.containerEl,e)},t.setImage=function(e){var t=this;return this.imageEl.onload=function(){t.box=t.initializeBox(t.options),t.redraw()},this.imageEl.src=e,this.imageClippedEl.src=e,this},t.destroy=function(){this._restore.parent.replaceChild(this._restore.element,this.containerEl)},t.initializeBox=function(e){var t=new b(0,0,e.startSize.width,e.startSize.height);t.constrainToRatio(e.aspectRatio,[.5,.5]);var i=e.minSize,n=e.maxSize;t.constrainToSize(n.width,n.height,i.width,i.height,[.5,.5],e.aspectRatio),t.constrainToBoundary(this.cropperEl.offsetWidth,this.cropperEl.offsetHeight,[.5,.5]);var a=this.cropperEl.offsetWidth/2-t.width()/2,o=this.cropperEl.offsetHeight/2-t.height()/2;return t.move(a,o),t},t.redraw=function(){var e=this,t=Math.round(this.box.width()),i=Math.round(this.box.height()),n=Math.round(this.box.x1),a=Math.round(this.box.y1),o=Math.round(this.box.x2),r=Math.round(this.box.y2);window.requestAnimationFrame(function(){e.regionEl.style.transform="translate("+n+"px, "+a+"px)",e.regionEl.style.width=t+"px",e.regionEl.style.height=i+"px",e.imageClippedEl.style.clip="rect("+a+"px, "+o+"px, "+r+"px, "+n+"px)";for(var s=e.box.getAbsolutePoint([.5,.5]),l=s[1]-e.cropperEl.offsetHeight/2>>31,c=-2*((s[0]-e.cropperEl.offsetWidth/2>>31^l)+l+l+4)+8,h=0;h<e.handles.length;h++){var d=e.handles[h],u=a+i*d.position[1]-d.el.offsetHeight/2;d.el.style.transform="translate("+Math.round(n+t*d.position[0]-d.el.offsetWidth/2)+"px, "+Math.round(u)+"px)",d.el.style.zIndex=c==h?5:4}})},t.attachHandlerEvents=function(){var e=this.eventBus;e.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),e.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),e.addEventListener("handleend",this.onHandleMoveEnd.bind(this))},t.attachRegionEvents=function(){var e=this.eventBus;function t(t){t.stopPropagation(),e.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function i(n){n.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",t),e.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}this.regionEl.addEventListener("mousedown",function(n){n.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",t),e.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}),e.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),e.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),e.addEventListener("regionend",this.onRegionMoveEnd.bind(this))},t.attachOverlayEvents=function(){var e=this,t=null;function i(t){t.stopPropagation(),e.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function n(a){a.stopPropagation(),document.removeEventListener("mouseup",n),document.removeEventListener("mousemove",i),1!==e.box.width()||1!==e.box.height()?e.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:a.clientX,mouseY:a.clientY}})):e.box=t}this.overlayEl.addEventListener("mousedown",function(a){a.stopPropagation(),document.addEventListener("mouseup",n),document.addEventListener("mousemove",i);var o=e.cropperEl.getBoundingClientRect(),r=a.clientX-o.left,s=a.clientY-o.top;t=e.box,e.box=new b(r,s,r+1,s+1),e.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:e.handles[4]}}))})},t.onHandleMoveStart=function(e){var t=e.detail.handle,i=[1-t.position[0],1-t.position[1]],n=this.box.getAbsolutePoint(i);this.activeHandle={handle:t,originPoint:i,originX:n[0],originY:n[1]},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())},t.onHandleMoveMoving=function(e){var t=e.detail,i=t.mouseX,n=t.mouseY,a=this.cropperEl.getBoundingClientRect();(i-=a.left)<0?i=0:i>a.width&&(i=a.width),(n-=a.top)<0?n=0:n>a.height&&(n=a.height);var o=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,s=this.activeHandle.originY,l=this.activeHandle.handle,c=1===l.constraints[0],h=1===l.constraints[1],d=1===l.constraints[2],u=1===l.constraints[3],m=(u||h)&&(c||d),p=u||h?r:this.box.x1,g=u||h?r:this.box.x2,v=c||d?s:this.box.y1,f=c||d?s:this.box.y2;p=u?i:p,g=h?i:g,v=c?n:v,f=d?n:f;var y=!1,x=!1;if((u||h)&&(y=u?i>r:i<r),(c||d)&&(x=c?n>s:n<s),y){var E=p;p=g,g=E,o[0]=1-o[0]}if(x){var w=v;v=f,f=w,o[1]=1-o[1]}var C=new b(p,v,g,f);if(this.options.aspectRatio){var S=this.options.aspectRatio,N=!1;m?N=n>C.y1+S*C.width()||n<C.y2-S*C.width():(c||d)&&(N=!0),C.constrainToRatio(S,o,N?"width":"height")}var I=this.options.minSize,z=this.options.maxSize;C.constrainToSize(z.width,z.height,I.width,I.height,o,this.options.aspectRatio),C.constrainToBoundary(this.cropperEl.offsetWidth,this.cropperEl.offsetHeight,o),this.box=C,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())},t.onHandleMoveEnd=function(e){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())},t.onRegionMoveStart=function(e){var t=e.detail,i=t.mouseX,n=t.mouseY,a=this.cropperEl.getBoundingClientRect();this.currentMove={offsetX:(i-=a.left)-this.box.x1,offsetY:(n-=a.top)-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())},t.onRegionMoveMoving=function(e){var t=e.detail,i=t.mouseX,n=t.mouseY,a=this.currentMove,o=a.offsetX,r=a.offsetY,s=this.cropperEl.getBoundingClientRect();this.box.move((i-=s.left)-o,(n-=s.top)-r),this.box.x1<0&&this.box.move(0,null),this.box.x2>s.width&&this.box.move(s.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>s.height&&this.box.move(null,s.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())},t.onRegionMoveEnd=function(e){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())},t.getValue=function(e){if(void 0===e&&(e=null),null===e&&(e=this.options.returnMode),"real"==e){var t=this.imageEl.naturalWidth,i=this.imageEl.naturalHeight,n=this.imageEl.getBoundingClientRect(),a=t/n.width,o=i/n.height;return{x:Math.round(this.box.x1*a),y:Math.round(this.box.y1*o),width:Math.round(this.box.width()*a),height:Math.round(this.box.height()*o)}}if("ratio"==e){var r=this.imageEl.getBoundingClientRect(),s=r.width,l=r.height;return{x:N(this.box.x1/s,3),y:N(this.box.y1/l,3),width:N(this.box.width()/s,3),height:N(this.box.height()/l,3)}}if("raw"==e)return{x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}},e.parseOptions=function(e){var t=null;void 0!==e.aspectRatio&&("number"==typeof e.aspectRatio?t=e.aspectRatio:e.aspectRatio instanceof Array&&(t=e.aspectRatio[1]/e.aspectRatio[0]));var i=null;null!=e.maxSize&&(i={width:e.maxSize[0]||null,height:e.maxSize[1]||null,unit:e.maxSize[2]||"px"});var n=null;null!=e.minSize&&(n={width:e.minSize[0]||null,height:e.minSize[1]||null,unit:e.minSize[2]||"px"});var a=null;null!=e.startSize&&(a={width:e.startSize[0]||null,height:e.startSize[1]||null,unit:e.startSize[2]||"%"});var o=null;"function"==typeof e.onInitialize&&(o=e.onInitialize);var r=null;"function"==typeof e.onCropStart&&(r=e.onCropStart);var s=null;"function"==typeof e.onCropEnd&&(s=e.onCropEnd);var l=null;"function"==typeof e.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),l=e.onUpdate),"function"==typeof e.onCropMove&&(l=e.onCropMove);var c=null;if(void 0!==e.returnMode){var h=e.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(h))throw"Invalid return mode.";c=h}var d=function(e,t){return null!==e?e:t};return{aspectRatio:d(t,null),maxSize:d(i,{width:null,height:null}),minSize:d(n,{width:null,height:null}),startSize:d(a,{width:100,height:100,unit:"%"}),returnMode:d(c,"real"),onInitialize:d(o,null),onCropStart:d(r,null),onCropMove:d(l,null),onCropEnd:d(s,null),convertToPixels:function(e){for(var t=e.offsetWidth,i=e.offsetHeight,n=["maxSize","minSize","startSize"],a=0;a<n.length;a++){var o=n[a];null!==this[o]&&("%"==this[o].unit&&(null!==this[o].width&&(this[o].width=this[o].width/100*t),null!==this[o].height&&(this[o].height=this[o].height/100*i)),delete this[o].unit)}}}},e}()),z=t(function(t){var o=t.src,s=t.size,l=t.croppUpdate,c=i(),h=c[0],d=c[1],u=i({width:150,height:150}),m=u[0],p=u[1],g=n(null),v=n();return a(function(){s&&(p(r({},s)),g.current&&g.current.resizeTo(s.width,s.height))},[s]),a(function(){o&&d(o)},[o]),a(function(){return v.current&&h&&(g.current=new I("#croppr",{minSize:[32,32,"px"],startSize:[m.width,m.height,"px"],onInitialize:function(e){l(null==e?void 0:e.getValue())},onCropEnd:function(e){l(e)}})),function(){var e;return null==g||null===(e=g.current)||void 0===e?void 0:e.destroy()}},[v.current,h]),e.createElement("div",{className:"CropprWrapper"},e.createElement("img",{ref:v,src:h,id:"croppr"}))}),M={quality:92,maxHeight:1e3,maxWidth:1e3,cropHeight:150,cropWidth:150,maintainAspectRatio:!0,format:"jpeg",arrayCopiedImages:[],originImageSrc:""},R=t(function(t){var s=function(e,t){void 0===t&&(t=!1);try{var i=Math.max(Math.min(e,4e3),32),n=r({},R);if(t){if(n.maxHeight===i)return Promise.resolve();n.maxHeight=i}else{if(n.maxWidth===i)return Promise.resolve();n.maxWidth=i}P(n);var a=p(function(){return Promise.resolve(l(n,t)).then(function(){})},function(e){console.log("onChangeSize ~ error",e)});return Promise.resolve(a&&a.then?a.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},l=function(e,t){void 0===t&&(t=!1);try{var i=p(function(){return Promise.resolve(u(R.originImageSrc,t,e)).then(function(e){var t=e.state;H(e.imageUri),P(t)})},function(e){console.log("🚀 ~ file: EditImage.tsx ~ line 73 ~ applyChanges ~ error",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},c=t.labels,h=void 0===c?{}:c,d=t.image,f=void 0===d?"":d,x=t.color,w=void 0===x?"#1e88e5":x,b=t.initialState,C=void 0===b?M:b,S=t.saveUpdates,N=void 0===S?function(){}:S,I=i(C),R=I[0],P=I[1],B=i(""),F=B[0],H=B[1],k=i(!1),j=k[0],W=k[1],O=i({width:150,height:150}),T=O[0],A=O[1],D=i(),U=D[0],L=D[1],q=n(!1);function V(e,t){e&&(P(r({},R,{cropWidth:e})),A(r({},T,{width:e}))),t&&(P(r({},R,{cropHeight:t})),A(r({},T,{height:t})))}function Y(e){void 0===e&&(e=!1),W(!1),N(e?{state:R,imageSrc:F}:null)}a(function(){q.current=window.innerWidth<800,P(JSON.parse(JSON.stringify(r({},R,C))))},[C]),a(function(){H(f)},[f]),a(function(){j||A({width:150,height:150})},[j]);var X=o(function(){return F&&F.length?Math.ceil(3/4*F.length/1024):""},[F]);function _(e){return JSON.parse(JSON.stringify(e))}return e.createElement("div",{className:"EditImage"},e.createElement("div",{id:"popup",className:"popup"},e.createElement("div",{style:{flexDirection:"row",boxSizing:"border-box",display:"flex",placeContent:"center flex-end",alignItems:"center",padding:"0px 16px"}},e.createElement("button",{className:"icon-btn",onClick:function(){Y(!1)}},e.createElement("span",{className:"material-icons"},"clear"))),e.createElement("div",{className:"image-container"},e.createElement("div",{className:"image-holder-full"},!j&&e.createElement("img",{id:"image-full",src:F}),j&&e.createElement(z,{src:F,size:T,croppUpdate:function(e){L(e),P(r({},R,{cropHeight:e.height,cropWidth:e.width}))}})),e.createElement("div",{className:"control-panel"},e.createElement(g,{lazy:!0,borderLine:!0},e.createElement(v,{name:"Basic"},(!q.current||q.current&&!j)&&e.createElement(e.Fragment,null,e.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},e.createElement("p",{className:"item-panel"},h.Quality),e.createElement("p",{className:"item-panel"},R.quality+"%")),e.createElement("div",{className:"flex-row-start"},e.createElement(y,{readOnly:j,disabled:j,className:"input-range",onChangedDelayed:function(e){try{e=Math.max(Math.min(e,100),1);var t=r({},R,{quality:e});P(t);var i=p(function(){return Promise.resolve(l(t,!1)).then(function(){})},function(e){console.log("onUpdateQuality ~ error",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},onChangedValue:function(e){P(r({},R,{quality:e}))},style:{maxWidth:"100%",width:"100%",color:w},type:"range",min:1,max:100,value:R.quality})),e.createElement("div",{className:"item-panel",style:{display:"flex",width:"100%",justifyContent:"space-between"}},h["Max dimensions"],e.createElement("div",{style:{display:"flex",alignItems:"center"}},e.createElement("input",{disabled:j,readOnly:j,type:"checkbox",checked:R.maintainAspectRatio,onChange:function(e){return P(r({},R,{maintainAspectRatio:e.target.checked}))},style:{color:w}}),e.createElement("span",{className:"caption"},h["aspect-ratio"]))),e.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between"}},e.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},e.createElement("label",null,h["max-width(px)"]),e.createElement(y,{readOnly:j,disabled:j,placeholder:h["max-width(px)"],value:R.maxWidth,onChangedValue:function(e){return P(r({},R,{maxWidth:e}))},type:"number",min:0,max:2e3,onInputChangedEnd:function(e){s(e,!1)}})),e.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},e.createElement("label",null,h["max-height(px)"]),e.createElement(y,{readOnly:j,disabled:j,placeholder:h["max-height(px)"],value:R.maxHeight,onChangedValue:function(e){return P(r({},R,{maxHeight:e}))},type:"number",min:0,max:2e3,onInputChangedEnd:function(e){s(e,!0)}}))),e.createElement("p",{className:"item-panel"},h.Format),e.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between"}},e.createElement("div",{className:"form-field",style:{width:"100%"}},e.createElement("select",{disabled:j,value:R.format,onChange:function(e){try{var t=r({},R,{format:e.target.value}),i=p(function(){return P(t),Promise.resolve(l(t,!1)).then(function(){})},function(e){console.log("onChangeFormat ~ error",e)});return Promise.resolve(i&&i.then?i.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}},["webp","jpeg","png"].map(function(t,i){return e.createElement("option",{key:i,value:t},t)}))))),e.createElement("div",{className:"flex-row-start",style:{marginTop:"5px",justifyContent:"space-between"}},e.createElement("span",{style:{display:"flex",alignItems:"center"}},e.createElement("input",{type:"checkbox",onChange:function(e){W(e.target.checked)},checked:j,style:{color:w,marginBottom:"3px"}}),e.createElement("span",{className:"item-panel",style:{marginLeft:"4px"}},h.Crop))),j&&e.createElement(e.Fragment,null,e.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between"}},e.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},e.createElement("label",null,h["width(px)"]),e.createElement(y,{type:"number",min:0,value:R.cropWidth,onChangedValue:function(e){return P(r({},R,{cropWidth:e}))},onInputChangedEnd:function(e){V(+e,null)},placeholder:h["width(px)"]})),e.createElement("div",{className:"form-field",style:{maxWidth:"48%",width:"48%"}},e.createElement("label",null,h["height(px)"]),e.createElement(y,{type:"number",min:0,value:R.cropHeight,onInputChangedEnd:function(e){V(null,+e)},onChangedValue:function(e){return P(r({},R,{cropHeight:e}))},placeholder:h["height(px)"]}))),e.createElement("p",{style:{marginBottom:"4px !important"}},e.createElement("button",{title:"Cut the image",className:"icon-btn",onClick:function(){var e=_(R),t=document.createElement("canvas");return new Promise(function(i,n){var a=t.getContext("2d"),o=new Image;o.src=F,o.onload=function(){var n=null==U?void 0:U.width;return t.height=null==U?void 0:U.height,t.width=n,a.drawImage(o,Math.abs(null==U?void 0:U.x),Math.abs(null==U?void 0:U.y),null==U?void 0:U.width,null==U?void 0:U.height,0,0,null==U?void 0:U.width,null==U?void 0:U.height),i(t.toDataURL("image/"+e.format,e.quality))},o.onerror=function(e){n(e)}}).then(function(i){e.maxWidth=t.width,e.maxHeight=t.height,e.originImageSrc=i,e=m(e,i),P(e),H(i),W(!1)}).catch(function(e){console.log(e)})}},e.createElement("span",{className:"material-icons"}," crop "))))),e.createElement(v,{disabled:j,name:"Filters"},e.createElement(E,{color:w,labels:h,initialState:R.basicFilters,changeFilter:function(e){try{var t=p(function(){var t=_(R);return t.basicFilters=t.basicFilters?r({},t.basicFilters,e):e,Promise.resolve(l(t,!1)).then(function(){})},function(e){console.log("🚀 ~ file: EditImage.tsx ~ line 259 ~ onChangeFilters ~ e",e)});return Promise.resolve(t&&t.then?t.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}}))),e.createElement("button",{title:h.Undo,disabled:R.arrayCopiedImages.length<=1,style:{position:"absolute",right:"10px",top:"30px"},className:"icon-btn",onClick:function(){try{try{var e=_(R);if(e.arrayCopiedImages.length>1){e.arrayCopiedImages.pop();var t=e.arrayCopiedImages[e.arrayCopiedImages.length-1];e=r({},R,{arrayCopiedImages:e.arrayCopiedImages,maxHeight:t.height,maxWidth:t.width,quality:t.quality,format:t.format,originImageSrc:t.originImageSrc,basicFilters:t.basicFilters}),P(e),H(t.lastImage)}}catch(e){console.log("🚀 ~ file: edit-image.component.ts ~ line 126 ~ EditImageComponent ~ onRestore ~ e",e)}return Promise.resolve()}catch(e){return Promise.reject(e)}}},e.createElement("span",{className:"material-icons"}," refresh ")),e.createElement("div",{className:"flex-row-start",style:{marginTop:"10px",justifyContent:"space-between",alignItems:"center"}},e.createElement("button",{className:"save-btn",onClick:function(){Y(!0)}},h.Save),X&&e.createElement("p",{className:"caption image-caption",style:{color:X>120?"#f44336":"unset",fontWeight:X>120?"500":"unset"}},"size: ",X,"Kb   ",R.format))))))}),P={language:"en",objectFit:"cover",hideDeleteBtn:!1,hideDownloadBtn:!1,hideEditBtn:!1,hideAddBtn:!1,compressInitial:null},B={maxHeight:3e3,maxWidth:3e3,cropHeight:150,cropWidth:150,maintainAspectRatio:!0,format:"jpeg",arrayCopiedImages:[],originImageSrc:"",basicFilters:void 0,quality:100},F=t(function(t){var s=function(e){try{var t=btoa(e.target.result),i=r({},b),n=V.current+t;i.originImageSrc=V.current+t;var a=function(){if(D.compressInitial)return i=r({},i,{quality:Math.min(D.compressInitial||92,100),maintainAspectRatio:!0,format:"jpeg"}),Promise.resolve(u(i.originImageSrc,!1,i,{getDimFromImage:!0})).then(function(e){C(e.state),I(e.imageUri),F(!0)});var e=document.createElement("img");e.src=n,e.onload=function(){i.arrayCopiedImages=[],i.maxHeight=e.height,i.maxWidth=e.width,i.format=q.current.split("image/")[1],i.arrayCopiedImages.push({lastImage:n,width:e.width,height:e.height,quality:i.quality,format:q.current.split("image/")[1],originImageSrc:i.originImageSrc}),C(i),I(n),F(!0)}}();return Promise.resolve(a&&a.then?a.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},m=t.config,p=void 0===m?{}:m,g=t.imageSrcProp,v=void 0===g?"":g,f=t.color,y=void 0===f?"#1e88e5":f,x=t.imageChanged,E=void 0===x?function(){}:x,w=i(r({},B)),b=w[0],C=w[1],S=i(""),N=S[0],I=S[1],z=i(!1),M=z[0],F=z[1],H=i(!1),k=H[0],j=H[1],W=i(c),O=W[0],T=W[1],A=i(P),D=A[0],U=A[1],L=n(null),q=n(""),V=n(""),Y=Date.now().toString(20),X=n("download");function _(e){var t;e.preventDefault(),null==L||null===(t=L.current)||void 0===t||t.click()}function G(e){var t,i=null===(t=e.target)||void 0===t?void 0:t.files;if(i){var n=i[0];if(X.current=n.name.split(".")[0],q.current=n.type,!q.current.includes("image"))return;if(V.current="data:"+n.type+";base64,",n){C(r({},b,{format:q.current.split("image/")[1]}));var a=new FileReader;a.onload=s.bind(this),a.readAsBinaryString(n)}}}n(!1),a(function(){var e;!function(){var e=document.head;if(!e.querySelector("#ngp-image-picker-icons-id")){var t=document.createElement("link");t.href="https://fonts.googleapis.com/icon?family=Material+Icons",t.rel="stylesheet",t.id="ngp-image-picker-icons-id",e.appendChild(t)}}(),e=r({},D,p),U(e),null!=p.language&&("en"==p.language&&T(r({},c)),"es"==p.language&&T(r({},l)),"fr"==p.language&&T(r({},h)),"de"==p.language&&T(r({},d)))},[p]),a(function(){!function(){try{var e=function(){if(v)return Promise.resolve(function(e){var t=r({},b),i=e.split("."),n=i[i.length-1];if(t.format=n=!n||"png"!=n&&"jpeg"!=n&&"webp"!=n?"jpeg":n,null!=p.compressInitial){var a=1;p.compressInitial>=0&&p.compressInitial<=100&&(a=p.compressInitial),t.quality=a}return new Promise(function(i,a){var o=new Image;o.crossOrigin="Anonymous",t.maxHeight=o.height,t.maxWidth=o.width,o.onload=function(){var e=document.createElement("canvas"),a=e.getContext("2d");e.width=1*o.width,e.height=1*o.height,a.drawImage(o,0,0,e.width,e.height),console.log(t.quality);var r=e.toDataURL("image/"+n,t.quality/100);return i({dataUri:r,width:e.width,height:e.height})},o.onerror=function(t){return a(t.message||"Error loading the src = "+e)},o.src=e}).then(function(e){return t=r({},t,{maxHeight:e.height,maxWidth:e.width}),{imageUri:e.dataUri,state:t}})}(v)).then(function(e){var t=e.state;t.originImageSrc=v,t.arrayCopiedImages=[{lastImage:e.imageUri,width:t.maxWidth,height:t.maxHeight,quality:t.quality,format:t.format,originImageSrc:v}],I(e.imageUri),C(t),F(!0)});var e=r({},b);e.originImageSrc=null,e.arrayCopiedImages=[],F(!1),I(null),C(e)}();Promise.resolve(e&&e.then?e.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}()},[v]),a(function(){E(N)},[N]);var Q=o(function(){return N&&N.length?Math.ceil(3/4*N.length/1024):""},[N]);return e.createElement("div",{className:"ReactImagePickerEditor"},!M&&e.createElement("div",{className:"place-image"},e.createElement("div",{className:"image-holder",style:{width:D.width,height:D.height,borderRadius:D.borderRadius,aspectRatio:D.aspectRatio+""}},e.createElement("button",{title:O["Upload a image"],className:"icon-btn image-upload-btn",onClick:_},e.createElement("span",{className:"material-icons"},"add_a_photo")),e.createElement("input",{ref:L,type:"file",style:{display:"none"},id:"filePicker-"+Y,onChange:G}))),M&&e.createElement("div",{className:"place-image"},e.createElement("div",{className:"image-holder-loaded",style:{width:D.width,height:D.height,borderRadius:D.borderRadius,aspectRatio:D.aspectRatio+""}},e.createElement("img",{src:N,alt:"image-loaded",style:{borderRadius:D.borderRadius,objectFit:D.objectFit}}),e.createElement("div",{className:"curtain",onClick:_},e.createElement("button",{title:O["Upload a image"]},e.createElement("span",{className:"material-icons"},"add_a_photo"))),e.createElement("input",{ref:L,type:"file",style:{display:"none"},id:"filePicker-"+Y,onChange:G})),Q&&e.createElement("p",{className:"caption image-caption",style:{color:Q>120?"#f44336":"unset",fontWeight:Q>120?"500":"unset"}},"size: ",Q,"Kb   ",b.format),e.createElement("div",{style:{flexDirection:"row",boxSizing:"border-box",display:"flex",placeContent:"flex-start",alignItems:"flex-start"},className:"editing-bar-btn"},!D.hideAddBtn&&e.createElement("button",{className:"icon-btn",id:"upload-img",title:O["Upload a image"],onClick:_},e.createElement("span",{className:"material-icons"},"add_a_photo")),!D.hideEditBtn&&e.createElement("button",{className:"icon-btn",id:"edit-img",title:O["Open the editor panel"],onClick:function(){j(!0)}},e.createElement("span",{className:"material-icons"},"edit")),!D.hideDownloadBtn&&e.createElement("a",{id:"download-img",title:O["Download the image"],href:N,download:X.current},e.createElement("span",{className:"material-icons"},"cloud_download")),!D.hideDeleteBtn&&e.createElement("button",{className:"icon-btn",id:"delete-img",title:O.Remove,onClick:function(){return function(){I(null),F(!1);var e=r({},b,B);C(e),j(!1)}()}},e.createElement("span",{className:"material-icons"},"delete")))),k&&e.createElement(R,{saveUpdates:function(e){j(!1),e&&(C(e.state),I(e.imageSrc))},labels:O,color:y,image:N,initialState:b}))});export default F;
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "react-image-picker-editor",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "React library for the selection, edition and compression of images in png, jpeg and webp formats.",
@@ -5,0 +5,0 @@ "author": {

No alert changes

Improved metrics

Total package byte prevSize

465304

increased by0.47%

Worsened metrics

Lines of code

834

decreased by-0.12%

No dependency changes