@dnncommunity/dnn-elements 0.24.0-beta.8 → 0.24.0

package/dist/dnn/{p-70b71aeb.entry.js → p-5b8e0904.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as t,H as s,g as o}from"./p-978abd50.js";import{g as a}from"./p-dcf42da6.js";var h;(function(e){e[e["nw"]=0]="nw";e[e["ne"]=1]="ne";e[e["se"]=2]="se";e[e["sw"]=3]="sw"})(h||(h={}));function r(e,i){let t=e.split(",");let s=t[0].match(/:(.*?);/)[1];let o=atob(t[1]);let a=o.length;let h=new Uint8Array(a);while(a>0){a--;h[a]=o.charCodeAt(a)}let r=new Blob([h],{type:s});return new File([r],i,{type:s})}const c=":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{backdrop-filter:saturate(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;box-shadow:black 0 0 0px 2px;backdrop-filter:saturate(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";const d=c;const n=class{constructor(t){e(this,t);this.imageCropChanged=i(this,"imageCropChanged",7);this.imageFileCropChanged=i(this,"imageFileCropChanged",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.defaultResx={capture:"Capture",dragAndDropFile:"Drag and drop an image",or:"or",takePicture:"Take a picture",uploadFile:"Upload an image",imageTooSmall:"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.",modalCloseText:"Close"};this.initializeCropBox=()=>{const e=this.image.getBoundingClientRect();const i=this.width/this.height;let t,s;if(e.width/e.height>i){s=e.height;t=s*i}else{t=e.width;s=t/i}const o=(e.height-s)/2;const a=(e.width-t)/2;this.crop.style.top=`${Math.round(o)}px`;this.crop.style.left=`${Math.round(a)}px`;this.crop.style.width=`${Math.round(t)}px`;this.crop.style.height=`${Math.round(s)}px`};this.handleCropMouseDown=e=>{e.stopPropagation();e.preventDefault();const i=e.target;const t=i.classList[0];document.addEventListener("mouseup",this.handleImageCropFinished,false);document.addEventListener("touchend",this.handleImageCropFinished,false);switch(t){case"crop":document.addEventListener("mousemove",this.handleCropDrag,false);document.addEventListener("touchmove",this.handleCropDrag,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleCropDrag)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleCropDrag)));break;case"nw":document.addEventListener("mousemove",this.handleNwMouseMove,false);document.addEventListener("touchmove",this.handleNwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNwMouseMove)));break;case"ne":document.addEventListener("mousemove",this.handleNeMouseMove,false);document.addEventListener("touchmove",this.handleNeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNeMouseMove)));break;case"se":document.addEventListener("mousemove",this.handleSeMouseMove,false);document.addEventListener("touchmove",this.handleSeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSeMouseMove)));break;case"sw":document.addEventListener("mousemove",this.handleSwMouseMove,false);document.addEventListener("touchmove",this.handleSwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSwMouseMove)));break}};this.handleImageCropFinished=e=>{this.emitImage();document.removeEventListener("mouseup",this.handleImageCropFinished);this.previousTouch=undefined};this.handleNwMouseMove=e=>{this.handleCornerDrag(e,h.nw)};this.handleNeMouseMove=e=>{this.handleCornerDrag(e,h.ne)};this.handleSeMouseMove=e=>{this.handleCornerDrag(e,h.se)};this.handleSwMouseMove=e=>{this.handleCornerDrag(e,h.sw)};this.handleCornerDrag=(e,i)=>{const t=this.width/this.height;const s=this.crop.getBoundingClientRect();const o=this.image.getBoundingClientRect();let{movementX:r,movementY:c}=a(e,this.previousTouch);let d,n;switch(i){case h.nw:d=s.width-r;n=s.height-c;break;case h.ne:d=s.width+r;n=s.height-c;break;case h.se:d=s.width+r;n=s.height+c;break;case h.sw:d=s.width-r;n=s.height+c}let u,p;if(!isNaN(t)){switch(i){case h.nw:n=d/t;u=s.bottom-n;break;case h.se:d=n*t;break;case h.ne:n=d/t;u=s.bottom-n;break;case h.sw:d=n*t;p=s.right-d;break}}switch(i){case h.nw:u=this.crop.offsetTop+(s.height-n);p=this.crop.offsetLeft+(s.width-d);break;case h.ne:u=this.crop.offsetTop+(s.height-n);p=this.crop.offsetLeft;break;case h.se:u=this.crop.offsetTop;p=this.crop.offsetLeft;break;case h.sw:u=this.crop.offsetTop;p=this.crop.offsetLeft+(s.width-d);break}if(p<0){d+=p;p=0}if(u<0){n+=u;u=0}if(p+d>o.width){d=o.width-p}if(u+n>o.height){n=o.height-u}if(!isNaN(t)){switch(i){case h.se:case h.sw:d=n*t;if(p+d>o.width){d=o.width-p;n=d/t}break}}if(this.preventUndersized){const e=this.image.width/this.image.naturalWidth;if(d/e<this.width||n/e<this.height){return}}this.crop.style.top=`${u}px`;this.crop.style.left=`${p}px`;this.crop.style.width=`${d}px`;this.crop.style.height=`${n}px`};this.handleCropDrag=e=>{if(!this.isMouseStillInTarget(e)){return}let{movementX:i,movementY:t}=a(e,this.previousTouch);let s=this.crop.offsetLeft+i;let o=this.crop.offsetTop+t;var h=this.image.getBoundingClientRect();var r=this.crop.getBoundingClientRect();if(s<0){s=0}if(o<0){o=0}if(s+r.width>h.width){s=this.crop.offsetLeft}if(o+r.height>h.height){o=this.crop.offsetTop}this.crop.style.left=s+"px";this.crop.style.top=o+"px"};this.width=undefined;this.height=undefined;this.resx=undefined;this.quality=.8;this.preventUndersized=false;this.name=undefined;this.view=undefined;this.localResx=undefined;this.fileName=undefined;this.focused=false}async clear(){this.setView("noPictureView")}componentWillLoad(){this.mergeResx()}componentDidLoad(){requestAnimationFrame((()=>{this.setView("noPictureView")}))}resxChanged(){this.mergeResx()}formResetCallback(){this.clear();this.internals.setValidity({});this.internals.setFormValue("")}mergeResx(){this.localResx=Object.assign(Object.assign({},this.defaultResx),this.resx)}setView(e){const i=this.host.shadowRoot.querySelectorAll(".view");i.forEach((e=>e.classList.remove("visible")));switch(e){case"noPictureView":this.noPictureView.classList.add("visible");break;case"hasPictureView":this.hasPictureView.classList.add("visible");break}this.view=e}initCrop(){this.crop.style.top="0px";this.crop.style.left="0px";this.crop.style.width="100%";this.crop.style.height="100%";var e=this.width/this.height;var i=this.image.getBoundingClientRect();var t=i.width/i.height;if(e>t){var s=i.width/e;var o=i.height-s;this.crop.style.top=Math.round(o/2).toString()+"px";this.crop.style.height=Math.round(s).toString()+"px"}else{var a=i.height*e;var o=i.width-a;this.crop.style.left=Math.round(o/2).toString()+"px";this.crop.style.width=Math.round(a).toString()+"px"}}setImage(){this.image.addEventListener("load",(()=>{this.initCrop();this.emitImage()}));this.image.src=this.canvas.toDataURL()}handleNewFile(e){if(e.type.split("/")[0]!="image"){return}this.fileName=e.name;var i=new FileReader;i.onload=e=>{var i=new Image;i.onload=()=>{this.canvas.width=i.width;this.canvas.height=i.height;if(this.preventUndersized&&(i.width<this.width||i.height<this.height)){this.imageTooSmallModal.show();return}var e=this.canvas.getContext("2d");e.drawImage(i,0,0);requestAnimationFrame((()=>{this.setView("hasPictureView")}));requestAnimationFrame((()=>{this.setImage()}));requestAnimationFrame((()=>{this.initializeCropBox()}))};i.src=e.target.result.toString()};i.readAsDataURL(e)}emitImage(){var e,i;var t=this.crop.offsetLeft/this.image.width*this.image.naturalWidth;var s=this.crop.offsetTop/this.image.height*this.image.naturalHeight;var o=this.crop.getBoundingClientRect();var a=o.width/this.image.width*this.image.naturalWidth;var h=o.height/this.image.height*this.image.naturalHeight;if(t<0)t=0;if(t>this.image.naturalWidth)t=this.image.naturalWidth;if(s<0)s=0;if(s>this.image.naturalWidth)s=this.image.naturalWidth;if(a>this.image.naturalWidth)a=this.image.naturalWidth;if(h>this.image.naturalHeight)h=this.image.naturalHeight;var c=this.generateCroppedImage(t,s,a,h,(e=this.width)!==null&&e!==void 0?e:a,(i=this.height)!==null&&i!==void 0?i:h);this.imageCropChanged.emit(c);var d=r(c,this.fileName);this.imageFileCropChanged.emit(d);if(this.name!=undefined){var n=new FormData;n.append(this.name,d);this.internals.setFormValue(n)}}generateCroppedImage(e,i,t,s,o,a){this.canvas.width=o;this.canvas.height=a;const h=this.canvas.getContext("2d");h.clearRect(0,0,o,a);h.drawImage(this.image,e,i,t,s,0,0,o,a);return this.canvas.toDataURL("image/jpeg",this.quality)}isMouseStillInTarget(e){var i=false;let t;let s;const o=this.image.getBoundingClientRect();if(e instanceof MouseEvent){t=e.clientX;s=e.clientY}if(typeof TouchEvent!=="undefined"){if(e instanceof TouchEvent){var a=e.touches[0];t=a.clientX;s=a.clientY}}if(t>=o.x&&s>=o.y&&t<=o.left+o.width&&s<=o.top+o.height){i=true}var h=this.crop.querySelectorAll("div");h.forEach((e=>{var o=e.getBoundingClientRect();if(t>=o.x&&s>=o.y&&t<=o.left+o.width&&s<=o.top+o.height){i=true}}));return i}render(){var e,i;return t(s,{key:"0cf57fcffcf8f7b3fd7e04ea3f85ae439e571107",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},t("canvas",{key:"46c29b18dbc1bc5583ba45aec7ab4555e5272f74",ref:e=>this.canvas=e}),t("div",{key:"6219ab6bf13079342ed400a91e4d11a9d0e7796d",class:"view",ref:e=>this.hasPictureView=e},t("div",{key:"c92ab81fc2b5bef22e759bd5be585bc3de29ed9e",class:"cropper"},t("img",{key:"0633788e3d2718288e8edfb68d9a7890bcd4e011",ref:e=>this.image=e}),t("div",{key:"87e72dbbd2f7c9aa2164fa5231215ba445cba41a",class:"backdrop"}),t("div",{key:"a7de918251132e4a8c8d563a291103958987d3ae",class:"crop",ref:e=>this.crop=e,onMouseDown:this.handleCropMouseDown,onTouchStart:this.handleCropMouseDown},t("div",{key:"47dacbe094703b8d731ab37fa160afaed81b2a9e",class:"nw"}),t("div",{key:"e22617dace42771c6148bbcaa1f406ca66b55aa7",class:"ne"}),t("div",{key:"b99d0fc12419e4a1189e7b14d482764494407350",class:"se"}),t("div",{key:"d6a18896f2db1b25b9dccfcd46495a27d39b8392",class:"sw"})))),t("div",{key:"5cde8fce68a4ad42d4c1cae5e193e6ef090caa89",class:"view",ref:e=>this.noPictureView=e},t("dnn-dropzone",{key:"811fef8f71ec0017d5b9fb5911a38440afdd83bd",allowCameraMode:true,onFilesSelected:e=>this.handleNewFile(e.detail[0]),allowedExtensions:["jpg","jpeg","gif","png","svg","webp","bmp"],resx:{capture:this.localResx.capture,dragAndDropFile:this.localResx.dragAndDropFile,or:this.localResx.or,takePicture:this.localResx.takePicture,uploadFile:this.localResx.uploadFile,uploadSizeTooLarge:"The file you tried to upload is too large.",fileSizeLimit:"The maximum size is"},ref:e=>this.inputField=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false})),t("dnn-modal",{key:"a0af03e617ea2a6ad0d642fda94cfd5350443bed",ref:e=>this.imageTooSmallModal=e,"close-text":this.localResx.modalCloseText},t("p",{key:"bb63e3854ecccdb448db5494067a50acc899b6a6"},this.localResx.imageTooSmall.replace("{width}",(e=this.width)===null||e===void 0?void 0:e.toString()).replace("{height}",(i=this.height)===null||i===void 0?void 0:i.toString()))))}static get formAssociated(){return true}get host(){return o(this)}static get watchers(){return{resx:["resxChanged"]}}};n.style=d;export{n as dnn_image_cropper};
-//# sourceMappingURL=p-70b71aeb.entry.js.map
+import{r as e,c as i,h as t,H as s,g as o}from"./p-978abd50.js";import{g as h}from"./p-dcf42da6.js";var a;(function(e){e[e["nw"]=0]="nw";e[e["ne"]=1]="ne";e[e["se"]=2]="se";e[e["sw"]=3]="sw"})(a||(a={}));function r(e,i){let t=e.split(",");let s=t[0].match(/:(.*?);/)[1];let o=atob(t[1]);let h=o.length;let a=new Uint8Array(h);while(h>0){h--;a[h]=o.charCodeAt(h)}let r=new Blob([a],{type:s});return new File([r],i,{type:s})}const c=":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{backdrop-filter:saturate(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;box-shadow:black 0 0 0px 2px;backdrop-filter:saturate(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";const d=c;const n=class{constructor(t){e(this,t);this.imageCropChanged=i(this,"imageCropChanged",7);this.imageFileCropChanged=i(this,"imageFileCropChanged",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.defaultResx={capture:"Capture",dragAndDropFile:"Drag and drop an image",or:"or",takePicture:"Take a picture",uploadFile:"Upload an image",imageTooSmall:"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.",modalCloseText:"Close"};this.initializeCropBox=()=>{const e=this.image.getBoundingClientRect();const i=this.width/this.height;let t,s;if(e.width/e.height>i){s=e.height;t=s*i}else{t=e.width;s=t/i}const o=(e.height-s)/2;const h=(e.width-t)/2;this.crop.style.top=`${Math.round(o)}px`;this.crop.style.left=`${Math.round(h)}px`;this.crop.style.width=`${Math.round(t)}px`;this.crop.style.height=`${Math.round(s)}px`};this.handleCropMouseDown=e=>{e.stopPropagation();e.preventDefault();const i=e.target;const t=i.classList[0];document.addEventListener("mouseup",this.handleImageCropFinished,false);document.addEventListener("touchend",this.handleImageCropFinished,false);switch(t){case"crop":document.addEventListener("mousemove",this.handleCropDrag,false);document.addEventListener("touchmove",this.handleCropDrag,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleCropDrag)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleCropDrag)));break;case"nw":document.addEventListener("mousemove",this.handleNwMouseMove,false);document.addEventListener("touchmove",this.handleNwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNwMouseMove)));break;case"ne":document.addEventListener("mousemove",this.handleNeMouseMove,false);document.addEventListener("touchmove",this.handleNeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNeMouseMove)));break;case"se":document.addEventListener("mousemove",this.handleSeMouseMove,false);document.addEventListener("touchmove",this.handleSeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSeMouseMove)));break;case"sw":document.addEventListener("mousemove",this.handleSwMouseMove,false);document.addEventListener("touchmove",this.handleSwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSwMouseMove)));break}};this.handleImageCropFinished=e=>{this.emitImage();document.removeEventListener("mouseup",this.handleImageCropFinished);this.previousTouch=undefined};this.handleNwMouseMove=e=>{this.handleCornerDrag(e,a.nw)};this.handleNeMouseMove=e=>{this.handleCornerDrag(e,a.ne)};this.handleSeMouseMove=e=>{this.handleCornerDrag(e,a.se)};this.handleSwMouseMove=e=>{this.handleCornerDrag(e,a.sw)};this.handleCornerDrag=(e,i)=>{const t=this.width/this.height;const s=this.crop.getBoundingClientRect();const o=this.image.getBoundingClientRect();let{movementX:r,movementY:c}=h(e,this.previousTouch);let d,n;switch(i){case a.nw:d=s.width-r;n=s.height-c;break;case a.ne:d=s.width+r;n=s.height-c;break;case a.se:d=s.width+r;n=s.height+c;break;case a.sw:d=s.width-r;n=s.height+c}let u,p;if(!isNaN(t)){switch(i){case a.nw:n=d/t;u=s.bottom-n;break;case a.se:d=n*t;break;case a.ne:n=d/t;u=s.bottom-n;break;case a.sw:d=n*t;p=s.right-d;break}}switch(i){case a.nw:u=this.crop.offsetTop+(s.height-n);p=this.crop.offsetLeft+(s.width-d);break;case a.ne:u=this.crop.offsetTop+(s.height-n);p=this.crop.offsetLeft;break;case a.se:u=this.crop.offsetTop;p=this.crop.offsetLeft;break;case a.sw:u=this.crop.offsetTop;p=this.crop.offsetLeft+(s.width-d);break}if(p<0){d+=p;p=0}if(u<0){n+=u;u=0}if(p+d>o.width){d=o.width-p}if(u+n>o.height){n=o.height-u}if(!isNaN(t)){switch(i){case a.se:case a.sw:d=n*t;if(p+d>o.width){d=o.width-p;n=d/t}break}}if(this.preventUndersized){const e=this.image.width/this.image.naturalWidth;if(d/e<this.width||n/e<this.height){return}}this.crop.style.top=`${u}px`;this.crop.style.left=`${p}px`;this.crop.style.width=`${d}px`;this.crop.style.height=`${n}px`};this.handleCropDrag=e=>{if(!this.isMouseStillInTarget(e)){return}let{movementX:i,movementY:t}=h(e,this.previousTouch);let s=this.crop.offsetLeft+i;let o=this.crop.offsetTop+t;var a=this.image.getBoundingClientRect();var r=this.crop.getBoundingClientRect();if(s<0){s=0}if(o<0){o=0}if(s+r.width>a.width){s=this.crop.offsetLeft}if(o+r.height>a.height){o=this.crop.offsetTop}this.crop.style.left=s+"px";this.crop.style.top=o+"px"};this.width=undefined;this.height=undefined;this.resx=undefined;this.quality=.8;this.preventUndersized=false;this.name=undefined;this.view=undefined;this.localResx=undefined;this.fileName=undefined;this.focused=false}async clear(){this.setView("noPictureView")}componentWillLoad(){this.mergeResx()}componentDidLoad(){requestAnimationFrame((()=>{this.setView("noPictureView")}))}resxChanged(){this.mergeResx()}formResetCallback(){this.clear();this.internals.setValidity({});this.internals.setFormValue("")}mergeResx(){this.localResx=Object.assign(Object.assign({},this.defaultResx),this.resx)}setView(e){const i=this.host.shadowRoot.querySelectorAll(".view");i.forEach((e=>e.classList.remove("visible")));switch(e){case"noPictureView":this.noPictureView.classList.add("visible");break;case"hasPictureView":this.hasPictureView.classList.add("visible");break}this.view=e}initCrop(){this.crop.style.top="0px";this.crop.style.left="0px";this.crop.style.width="100%";this.crop.style.height="100%";var e=this.width/this.height;var i=this.image.getBoundingClientRect();var t=i.width/i.height;if(e>t){var s=i.width/e;var o=i.height-s;this.crop.style.top=Math.round(o/2).toString()+"px";this.crop.style.height=Math.round(s).toString()+"px"}else{var h=i.height*e;var o=i.width-h;this.crop.style.left=Math.round(o/2).toString()+"px";this.crop.style.width=Math.round(h).toString()+"px"}}setImage(){this.image.addEventListener("load",(()=>{this.initCrop();this.emitImage()}));this.image.src=this.canvas.toDataURL()}handleNewFile(e){if(e.type.split("/")[0]!="image"){return}this.fileName=e.name;var i=new FileReader;i.onload=e=>{var i=new Image;i.onload=()=>{this.canvas.width=i.width;this.canvas.height=i.height;if(this.preventUndersized&&(i.width<this.width||i.height<this.height)){this.imageTooSmallModal.show();return}var e=this.canvas.getContext("2d");e.drawImage(i,0,0);requestAnimationFrame((()=>{this.setView("hasPictureView")}));requestAnimationFrame((()=>{this.setImage()}));requestAnimationFrame((()=>{this.initializeCropBox()}))};i.src=e.target.result.toString()};i.readAsDataURL(e)}emitImage(){var e,i;var t=this.crop.offsetLeft/this.image.width*this.image.naturalWidth;var s=this.crop.offsetTop/this.image.height*this.image.naturalHeight;var o=this.crop.getBoundingClientRect();var h=o.width/this.image.width*this.image.naturalWidth;var a=o.height/this.image.height*this.image.naturalHeight;if(t<0)t=0;if(t>this.image.naturalWidth)t=this.image.naturalWidth;if(s<0)s=0;if(s>this.image.naturalWidth)s=this.image.naturalWidth;if(h>this.image.naturalWidth)h=this.image.naturalWidth;if(a>this.image.naturalHeight)a=this.image.naturalHeight;var c=this.generateCroppedImage(t,s,h,a,(e=this.width)!==null&&e!==void 0?e:h,(i=this.height)!==null&&i!==void 0?i:a);this.imageCropChanged.emit(c);var d=r(c,this.fileName);this.imageFileCropChanged.emit(d);if(this.name!=undefined){var n=new FormData;n.append(this.name,d);this.internals.setFormValue(n)}}generateCroppedImage(e,i,t,s,o,h){this.canvas.width=o;this.canvas.height=h;const a=this.canvas.getContext("2d");a.clearRect(0,0,o,h);a.drawImage(this.image,e,i,t,s,0,0,o,h);return this.canvas.toDataURL("image/jpeg",this.quality)}isMouseStillInTarget(e){var i=false;let t;let s;const o=this.image.getBoundingClientRect();if(e instanceof MouseEvent){t=e.clientX;s=e.clientY}if(typeof TouchEvent!=="undefined"){if(e instanceof TouchEvent){var h=e.touches[0];t=h.clientX;s=h.clientY}}if(t>=o.x&&s>=o.y&&t<=o.left+o.width&&s<=o.top+o.height){i=true}var a=this.crop.querySelectorAll("div");a.forEach((e=>{var o=e.getBoundingClientRect();if(t>=o.x&&s>=o.y&&t<=o.left+o.width&&s<=o.top+o.height){i=true}}));return i}render(){var e,i;return t(s,{key:"381246ee476b95d7869bbdaef99e4032aabefb3a",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},t("canvas",{key:"86c84108ff8438cc20e840d6f6ea14597b547c7f",ref:e=>this.canvas=e}),t("div",{key:"709fcd6dbd4385a3b46b7621367a3448aa3aee30",class:"view",ref:e=>this.hasPictureView=e},t("div",{key:"d5ebd8b8ba823e62d6702254fcd4bd5d57439fe3",class:"cropper"},t("img",{key:"85c591654d1c794be00067d105b04e09d7219d7c",ref:e=>this.image=e}),t("div",{key:"e21d5065734dddac7093b51c409fcd452ed079c6",class:"backdrop"}),t("div",{key:"72ae44e6cbdcc1ac76751fb82a7be59eed5bb5d1",class:"crop",ref:e=>this.crop=e,onMouseDown:this.handleCropMouseDown,onTouchStart:this.handleCropMouseDown},t("div",{key:"1da722312999868d8c47af1608f918cbf4478713",class:"nw"}),t("div",{key:"4e5fb43ff7e69bf8b498391317df0fc5716d2999",class:"ne"}),t("div",{key:"4b2eba3a46f7514b3d9e446d6dc27d6102554fd4",class:"se"}),t("div",{key:"eb92e846bdbd2409ead0d4339f30c6d78b0e1225",class:"sw"})))),t("div",{key:"2cf6c91c1b5cb2517f84e5c39548be4213fc27c2",class:"view",ref:e=>this.noPictureView=e},t("dnn-dropzone",{key:"c9c2e904842f8462b87952836fa864a9e09079f2",allowCameraMode:true,onFilesSelected:e=>this.handleNewFile(e.detail[0]),allowedExtensions:["jpg","jpeg","gif","png","svg","webp","bmp"],resx:{capture:this.localResx.capture,dragAndDropFile:this.localResx.dragAndDropFile,or:this.localResx.or,takePicture:this.localResx.takePicture,uploadFile:this.localResx.uploadFile,uploadSizeTooLarge:"The file you tried to upload is too large.",fileSizeLimit:"The maximum size is"},ref:e=>this.inputField=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false})),t("dnn-modal",{key:"d70385ac62db570303947cd133a6dace89851fe3",ref:e=>this.imageTooSmallModal=e,"close-text":this.localResx.modalCloseText},t("p",{key:"c96b96c98b7a7918b0f954323cb30146ead874a3"},this.localResx.imageTooSmall.replace("{width}",(e=this.width)===null||e===void 0?void 0:e.toString()).replace("{height}",(i=this.height)===null||i===void 0?void 0:i.toString()))))}static get formAssociated(){return true}get host(){return o(this)}static get watchers(){return{resx:["resxChanged"]}}};n.style=d;export{n as dnn_image_cropper};
+//# sourceMappingURL=p-5b8e0904.entry.js.map