@cropper/elements - npm Package Compare versions

Comparing version 2.0.0-beta to 2.0.0-beta.1

dist/elements.esm.min.js

@@ -1,1 +0,1 @@
-const t="undefined"!=typeof window&&void 0!==window.document,e=t?window:{},s=!!t&&"ontouchstart"in e.document.documentElement,i=!!t&&"PointerEvent"in e,n=i?"pointerdown":s?"touchstart":"mousedown",a=i?"pointermove":s?"touchmove":"mousemove",o=i?"pointerup pointercancel":s?"touchend touchcancel":"mouseup";const r=Number.isNaN||e.isNaN;function h(t){return"number"==typeof t&&!r(t)}function c(t){return h(t)&&t>0&&t<1/0}function l(t){return"object"==typeof t&&null!==t}const{hasOwnProperty:d}=Object.prototype;function u(t){if(!l(t))return!1;try{const{constructor:e}=t,{prototype:s}=e;return e&&s&&d.call(s,"isPrototypeOf")}catch(t){return!1}}function p(t){return"function"==typeof t}function $(t){return"object"==typeof t&&null!==t&&1===t.nodeType}const g=/([a-z\d])([A-Z])/g;function m(t){return String(t).replace(g,"$1-$2").toLowerCase()}const b=/-[A-z\d]/g;function f(t){return t.replace(b,(t=>t.slice(1).toUpperCase()))}const v=/\s\s*/;function w(t,e,s,i){e.trim().split(v).forEach((e=>{t.removeEventListener(e,s,i)}))}function y(t,e,s,i){e.trim().split(v).forEach((e=>{t.addEventListener(e,s,i)}))}function C(t,e,s,i){y(t,e,s,Object.assign(Object.assign({},i),{once:!0}))}const k={bubbles:!0,cancelable:!0,composed:!0};const x=Promise.resolve();function S(t){const{documentElement:s}=t.ownerDocument,i=t.getBoundingClientRect();return{left:i.left+(e.pageXOffset-s.clientLeft),top:i.top+(e.pageYOffset-s.clientTop)}}const A=/deg|g?rad|turn$/i;function z(t){const e=parseFloat(t)||0;if(0!==e){const[s="rad"]=String(t).match(A)||[];switch(s.toLowerCase()){case"deg":return e/360*(2*Math.PI);case"grad":return e/400*(2*Math.PI);case"turn":return e*(2*Math.PI)}}return e}function M(t,e="contain"){const{aspectRatio:s}=t;let{width:i,height:n}=t;const a=c(i),o=c(n);if(a&&o){const t=n*s;"contain"===e&&t>i||"cover"===e&&t<i?n=i/s:i=n*s}else a?n=i/s:o&&(i=n*s);return{width:i,height:n}}const E=/left|top|width|height/i,D=new WeakMap,T=new WeakMap,P=new Map,O=e.document&&Array.isArray(e.document.adoptedStyleSheets)&&"replaceSync"in e.CSSStyleSheet.prototype;class I extends HTMLElement{constructor(){var t,e;super(),this.shadowRootMode="open",this.slottable=!0;const s=null===(e=null===(t=Object.getPrototypeOf(this))||void 0===t?void 0:t.constructor)||void 0===e?void 0:e.$name;s&&P.set(s,this.tagName.toLowerCase())}get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,e,s){if(Object.is(s,e))return;const i=f(t);let n=s;switch(typeof this[i]){case"boolean":n=null!==s&&"false"!==s;break;case"number":n=Number(s)}switch(this[i]=n,t){case"theme-color":{const t=T.get(this),e=this.$sharedStyle;t&&e&&(O?t.replaceSync(e):t.textContent=e);break}}}$propertyChangedCallback(t,e,s){if(!Object.is(s,e))switch(t=m(t),typeof s){case"boolean":!0===s?this.hasAttribute(t)||this.setAttribute(t,""):this.removeAttribute(t);break;case"number":s=r(s)?"":String(s);default:s?this.getAttribute(t)!==s&&this.setAttribute(t,s):this.removeAttribute(t)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((t=>{const e=f(t);let s=this[e];(function(t){return void 0===t})(s)||this.$propertyChangedCallback(e,void 0,s),Object.defineProperty(this,e,{enumerable:!0,configurable:!0,get:()=>s,set(t){const i=s;s=t,this.$propertyChangedCallback(e,i,t)}})}));const t=this.attachShadow({mode:this.shadowRootMode||"open"});if(this.shadowRoot||D.set(this,t),T.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){const e=document.createElement("template");e.innerHTML=this.$template,t.appendChild(e.content)}if(this.slottable){const e=document.createElement("slot");t.appendChild(e)}}disconnectedCallback(){T.has(this)&&T.delete(this),D.has(this)&&D.delete(this)}$getTagNameOf(t){var e;return null!==(e=P.get(t))&&void 0!==e?e:t}$setStyles(t){return Object.keys(t).forEach((e=>{let s=t[e];h(s)&&(s=0!==s&&E.test(e)?`${s}px`:String(s)),this.style[e]=s})),this}$getShadowRoot(){return this.shadowRoot||D.get(this)}$addStyles(t){let e;const s=this.$getShadowRoot();return O?(e=new CSSStyleSheet,e.replaceSync(t),s.adoptedStyleSheets=s.adoptedStyleSheets.concat(e)):(e=document.createElement("style"),e.textContent=t,s.appendChild(e)),e}$emit(t,e,s){return function(t,e,s,i){return t.dispatchEvent(new CustomEvent(e,Object.assign(Object.assign(Object.assign({},k),{detail:s}),i)))}(this,t,e,s)}$nextTick(t){return function(t,e){return e?x.then(t?e.bind(t):e):x}(this,t)}static $define(s,i){l(s)&&(i=s,s=""),s||(s=this.$name||this.name),s=m(s);const{customElements:n}=e;t&&n&&!n.get(s)&&n.define(s,this,i)}}I.$version="2.0.0-beta";class R extends I{constructor(){super(...arguments),this.$onPointerDown=null,this.$onPointerMove=null,this.$onPointerUp=null,this.$onWheel=null,this.$wheeling=!1,this.$pointers=new Map,this.$style=':host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}',this.$action="none",this.background=!1,this.disabled=!1,this.scaleStep=.1,this.themeColor="#39f"}static get observedAttributes(){return super.observedAttributes.concat(["background","disabled","scale-step"])}connectedCallback(){super.connectedCallback(),this.disabled||this.$bind()}disconnectedCallback(){this.disabled||this.$unbind(),super.disconnectedCallback()}$propertyChangedCallback(t,e,s){if(!Object.is(s,e)&&(super.$propertyChangedCallback(t,e,s),"disabled"===t))s?this.$unbind():this.$bind()}$bind(){this.$onPointerDown||(this.$onPointerDown=this.$handlePointerDown.bind(this),y(this,n,this.$onPointerDown)),this.$onPointerMove||(this.$onPointerMove=this.$handlePointerMove.bind(this),y(this.ownerDocument,a,this.$onPointerMove)),this.$onPointerUp||(this.$onPointerUp=this.$handlePointerUp.bind(this),y(this.ownerDocument,o,this.$onPointerUp)),this.$onWheel||(this.$onWheel=this.$handleWheel.bind(this),y(this,"wheel",this.$onWheel,{passive:!1,capture:!0}))}$unbind(){this.$onPointerDown&&(w(this,n,this.$onPointerDown),this.$onPointerDown=null),this.$onPointerMove&&(w(this.ownerDocument,a,this.$onPointerMove),this.$onPointerMove=null),this.$onPointerUp&&(w(this.ownerDocument,o,this.$onPointerUp),this.$onPointerUp=null),this.$onWheel&&(w(this,"wheel",this.$onWheel,{capture:!0}),this.$onWheel=null)}$handlePointerDown(t){const{buttons:e,button:s,type:i}=t;if(this.disabled||("pointerdown"===i&&"mouse"===t.pointerType||"mousedown"===i)&&(h(e)&&1!==e||h(s)&&0!==s||t.ctrlKey))return;const{$pointers:n}=this;let a="";if(t.changedTouches)Array.from(t.changedTouches).forEach((({identifier:t,pageX:e,pageY:s})=>{n.set(t,{startX:e,startY:s,endX:e,endY:s})}));else{const{pointerId:e=0,pageX:s,pageY:i}=t;n.set(e,{startX:s,startY:i,endX:s,endY:i})}n.size>1?a="transform":$(t.target)&&(a=t.target.action||t.target.getAttribute("action")||""),!1!==this.$emit("actionstart",{action:a,relatedEvent:t})&&(t.preventDefault(),this.$action=a,this.style.willChange="transform")}$handlePointerMove(t){const{$action:e,$pointers:s}=this;if(this.disabled||"none"===e||0===s.size)return;if(!1===this.$emit("actionmove",{action:e,relatedEvent:t}))return;if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach((({identifier:t,pageX:e,pageY:i})=>{const n=s.get(t);n&&Object.assign(n,{endX:e,endY:i})}));else{const{pointerId:e=0,pageX:i,pageY:n}=t,a=s.get(e);a&&Object.assign(a,{endX:i,endY:n})}const i={action:e,relatedEvent:t};if("transform"===e){const e=new Map(s);let n=0,a=0,o=0,r=0,h=t.pageX,c=t.pageY;s.forEach(((t,s)=>{e.delete(s),e.forEach((e=>{let s=e.startX-t.startX,i=e.startY-t.startY,l=e.endX-t.endX,d=e.endY-t.endY,u=0,p=0,$=0,g=0;if(0===s?i<0?$=2*Math.PI:i>0&&($=Math.PI):s>0?$=Math.PI/2+Math.atan(i/s):s<0&&($=1.5*Math.PI+Math.atan(i/s)),0===l?d<0?g=2*Math.PI:d>0&&(g=Math.PI):l>0?g=Math.PI/2+Math.atan(d/l):l<0&&(g=1.5*Math.PI+Math.atan(d/l)),g>0||$>0){const s=g-$,i=Math.abs(s);i>n&&(n=i,o=s,h=(t.startX+e.startX)/2,c=(t.startY+e.startY)/2)}if(s=Math.abs(s),i=Math.abs(i),l=Math.abs(l),d=Math.abs(d),s>0&&i>0?u=Math.sqrt(s*s+i*i):s>0?u=s:i>0&&(u=i),l>0&&d>0?p=Math.sqrt(l*l+d*d):l>0?p=l:d>0&&(p=d),u>0&&p>0){const s=(p-u)/u,i=Math.abs(s);i>a&&(a=i,r=s,h=(t.startX+e.startX)/2,c=(t.startY+e.startY)/2)}}))}));const l=n>0,d=a>0;l&&d?(i.rotate=o,i.scale=r,i.centerX=h,i.centerY=c):l?(i.action="rotate",i.rotate=o,i.centerX=h,i.centerY=c):d?(i.action="scale",i.scale=r,i.centerX=h,i.centerY=c):i.action="none"}else{const[t]=Array.from(s.values());Object.assign(i,t)}s.forEach((t=>{t.startX=t.endX,t.startY=t.endY})),"none"!==i.action&&this.$emit("action",i,{cancelable:!1})}$handlePointerUp(t){const{$action:e,$pointers:s}=this;if(!this.disabled&&"none"!==e&&!1!==this.$emit("actionend",{action:e,relatedEvent:t})){if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach((({identifier:t})=>{s.delete(t)}));else{const{pointerId:e=0}=t;s.delete(e)}0===s.size&&(this.style.willChange="",this.$action="none")}}$handleWheel(t){if(this.disabled)return;if(t.preventDefault(),this.$wheeling)return;this.$wheeling=!0,setTimeout((()=>{this.$wheeling=!1}),50);const e=(t.deltaY>0?1:-1)*this.scaleStep;this.$emit("action",{action:"scale",scale:e,relatedEvent:t},{cancelable:!1})}$setAction(t){return"string"==typeof t&&(this.$action=t),this}$toCanvas(t){return new Promise(((e,s)=>{if(!this.isConnected)return void s(new Error("The current element is not connected to the DOM."));const i=document.createElement("canvas"),n=this.offsetWidth,a=this.offsetHeight;i.width=n,i.height=a;const o=this.querySelector(this.$getTagNameOf("cropper-image"));o?o.$ready().then((s=>{const r=i.getContext("2d");if(r){const[e,h,c,l,d,$]=o.$getTransform(),g=s.naturalWidth/2,m=s.naturalHeight/2;r.fillStyle="transparent",r.fillRect(0,0,n,a),u(t)&&p(t.beforeDraw)&&t.beforeDraw.call(this,r,i),r.save(),r.translate(g,m),r.transform(e,h,c,l,d,$),r.translate(-g,-m),r.drawImage(s,0,0),r.restore()}e(i)})).catch(s):e(i)})).then((e=>{if(u(t)&&(c(t.width)||c(t.height))){let{width:s,height:i}=e;if(({width:s,height:i}=M({aspectRatio:s/i,width:t.width,height:t.height})),s!==e.width){const t=document.createElement("canvas"),n=t.getContext("2d");return t.width=s,t.height=i,n&&n.drawImage(e,0,0,s,i),t}}return e}))}}R.$name="cropper-canvas",R.$version="2.0.0-beta";const Y=new WeakMap,X=["alt","crossorigin","decoding","importance","loading","referrerpolicy","sizes","src","srcset"];class N extends I{constructor(){super(...arguments),this.$matrix=[1,0,0,1,0,0],this.$onCanvasAction=null,this.$style=":host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}",this.$image=new Image,this.rotatable=!0,this.scalable=!0,this.skewable=!0,this.slottable=!1,this.translatable=!0}set $canvas(t){Y.set(this,t)}get $canvas(){return Y.get(this)}static get observedAttributes(){return super.observedAttributes.concat(X,["rotatable","scalable","skewable","translatable"])}attributeChangedCallback(t,e,s){Object.is(s,e)||(super.attributeChangedCallback(t,e,s),X.includes(t)&&this.$image.setAttribute(t,s))}connectedCallback(){super.connectedCallback();const{$image:t}=this;t.src&&this.$ready((t=>{this.$setStyles({width:t.naturalWidth,height:t.naturalHeight})}));const e=this.closest(this.$getTagNameOf("cropper-canvas"));e&&(this.$canvas=e,this.$setStyles({position:"absolute"}),t.src&&this.$ready((()=>{this.$center("cover")})),this.$onCanvasAction=this.$handleAction.bind(this),y(e,"action",this.$onCanvasAction)),this.$getShadowRoot().appendChild(t)}disconnectedCallback(){const{$canvas:t}=this;t&&this.$onCanvasAction&&(w(t,"action",this.$onCanvasAction),this.$onCanvasAction=null),this.$getShadowRoot().removeChild(this.$image),super.disconnectedCallback()}$handleAction(t){if(this.hidden||!(this.rotatable||this.scalable||this.translatable))return;const{$canvas:e}=this,{detail:s}=t;if(s){const{relatedEvent:t}=s;let{action:i}=s;switch("transform"!==i||this.rotatable&&this.scalable||(i=this.rotatable?"rotate":this.scalable?"scale":"none"),i){case"move":if(this.translatable){const i=this.$getTagNameOf("cropper-selection");let n=e.querySelector(i);n&&n.multiple&&!n.active&&(n=e.querySelector(`${i}[active]`)),n&&!n.hidden&&n.movable&&t&&n.contains(t.target)||this.$move(s.endX-s.startX,s.endY-s.startY)}break;case"rotate":if(this.rotatable)if(t){const{x:e,y:i}=this.getBoundingClientRect();this.$rotate(s.rotate,t.clientX-e,t.clientY-i)}else this.$rotate(s.rotate);break;case"scale":if(this.scalable)if(t){const{x:e,y:i}=this.getBoundingClientRect();this.$zoom(s.scale,t.clientX-e,t.clientY-i)}else this.$zoom(s.scale);break;case"transform":if(this.rotatable&&this.scalable){const{rotate:e}=s;let{scale:i}=s;i<0?i=1/(1-i):i+=1;const n=Math.cos(e),a=Math.sin(e),[o,r,h,c]=[n*i,a*i,-a*i,n*i];if(t){const e=this.getBoundingClientRect(),s=t.clientX-e.x,i=t.clientY-e.y,[n,a,l,d]=this.$matrix,u=e.width/2,p=i-e.height/2,$=((s-u)*d-l*p)/(n*d-l*a),g=(p-a*$)/d;this.$transform(o,r,h,c,$*(1-o)+g*h,g*(1-c)+$*r)}else this.$transform(o,r,h,c,0,0)}}}}$ready(t){const{$image:e}=this,s=new Promise(((t,s)=>{const i=new Error("Failed to load the image source");if(e.complete)e.naturalWidth>0&&e.naturalHeight>0?t(e):s(i);else{const n=()=>{w(e,"error",a),t(e)},a=()=>{w(e,"load",n),s(i)};C(e,"load",n),C(e,"error",a)}}));return p(t)&&s.then((e=>(t(e),e))),s}$center(t){const{parentElement:e}=this;if(!e)return this;const s=e.getBoundingClientRect(),i=s.width,n=s.height,{x:a,y:o,width:r,height:h}=this.getBoundingClientRect(),c=a+r/2,l=o+h/2,d=s.x+i/2,u=s.y+n/2;if(this.$move(d-c,u-l),t&&(r!==i||h!==n)){const e=i/r,s=n/h;switch(t){case"cover":this.$scale(Math.max(e,s));break;case"contain":this.$scale(Math.min(e,s))}}return this}$move(t,e=t){if(this.translatable&&h(t)&&h(e)){const[s,i,n,a]=this.$matrix,o=(t*a-n*e)/(s*a-n*i),r=(e-i*o)/a;this.$translate(o,r)}return this}$moveTo(t,e=t){if(this.translatable&&h(t)&&h(e)){const[s,i,n,a]=this.$matrix,o=(t*a-n*e)/(s*a-n*i),r=(e-i*o)/a;this.$setTransform(s,i,n,a,o,r)}return this}$rotate(t,e,s){if(this.rotatable){const i=z(t),n=Math.cos(i),a=Math.sin(i),[o,r,c,l]=[n,a,-a,n];if(h(e)&&h(s)){const[t,i,n,a]=this.$matrix,{width:h,height:d}=this.getBoundingClientRect(),u=s-d/2,p=((e-h/2)*a-n*u)/(t*a-n*i),$=(u-i*p)/a;this.$transform(o,r,c,l,p*(1-o)-$*c,$*(1-l)-p*r)}else this.$transform(o,r,c,l,0,0)}return this}$zoom(t,e,s){if(!this.scalable||0===t)return this;if(t<0?t=1/(1-t):t+=1,h(e)&&h(s)){const[i,n,a,o]=this.$matrix,{width:r,height:h}=this.getBoundingClientRect(),c=s-h/2,l=((e-r/2)*o-a*c)/(i*o-a*n),d=(c-n*l)/o;this.$transform(t,0,0,t,l*(1-t),d*(1-t))}else this.$scale(t);return this}$scale(t,e=t){return this.scalable&&this.$transform(t,0,0,e,0,0),this}$skew(t,e=0){if(this.skewable){const s=z(t),i=z(e);this.$transform(1,Math.tan(i),Math.tan(s),1,0,0)}return this}$translate(t,e=t){return this.translatable&&h(t)&&h(e)&&this.$transform(1,0,0,1,t,e),this}$transform(t,e,s,i,n,a){if(h(t)&&h(e)&&h(s)&&h(i)&&h(n)&&h(a)){const[o,r,h,c,l,d]=this.$matrix,[u,p,$,g,m,b]=[t,e,s,i,n,a];return this.$setTransform(o*u+h*p,r*u+c*p,o*$+h*g,r*$+c*g,o*m+h*b+l,r*m+c*b+d)}return this}$setTransform(t,e,s,i,n,a){if((this.rotatable||this.scalable||this.skewable||this.translatable)&&(Array.isArray(t)&&([t,e,s,i,n,a]=t),h(t)&&h(e)&&h(s)&&h(i)&&h(n)&&h(a))){const o=[t,e,s,i,n,a];if(!1===this.$emit("transform",{matrix:o,oldMatrix:this.$matrix}))return this;this.$matrix=o,this.style.transform=`matrix(${o.join(", ")})`}return this}$getTransform(){return this.$matrix.slice()}$resetTransform(){return this.$setTransform([1,0,0,1,0,0])}}N.$name="cropper-image",N.$version="2.0.0-beta";const W=new WeakMap;class j extends I{constructor(){super(...arguments),this.$onCanvasChange=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=null,this.$style=":host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}",this.x=0,this.y=0,this.width=0,this.height=0,this.slottable=!1,this.themeColor="rgba(0, 0, 0, 0.65)"}set $canvas(t){W.set(this,t)}get $canvas(){return W.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["height","width","x","y"])}connectedCallback(){super.connectedCallback();const t=this.closest(this.$getTagNameOf("cropper-canvas"));if(t){this.$canvas=t,this.style.position="absolute";const e=t.querySelector(this.$getTagNameOf("cropper-selection"));e&&(this.$onCanvasActionStart=t=>{e.hidden&&"select"===t.detail.action&&(this.hidden=!1)},this.$onCanvasActionEnd=t=>{e.hidden&&"select"===t.detail.action&&(this.hidden=!0)},this.$onCanvasChange=t=>{const{x:s,y:i,width:n,height:a}=t.detail;this.$change(s,i,n,a),(e.hidden||0===s&&0===i&&0===n&&0===a)&&(this.hidden=!0)},y(t,"actionstart",this.$onCanvasActionStart),y(t,"actionend",this.$onCanvasActionEnd),y(t,"change",this.$onCanvasChange))}this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&(this.$onCanvasActionStart&&(w(t,"actionstart",this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(w(t,"actionend",this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasChange&&(w(t,"change",this.$onCanvasChange),this.$onCanvasChange=null)),super.disconnectedCallback()}$change(t,e,s=this.width,i=this.height){return h(t)&&h(e)&&h(s)&&h(i)&&(t!==this.x||e!==this.y||s!==this.width||i!==this.height)?(this.hidden&&(this.hidden=!1),this.x=t,this.y=e,this.width=s,this.height=i,this.$render()):this}$reset(){return this.$change(0,0,0,0)}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height,outlineWidth:e.innerWidth})}}j.$name="cropper-shade",j.$version="2.0.0-beta";class B extends I{constructor(){super(...arguments),this.$onCanvasCropEnd=null,this.$onCanvasCropStart=null,this.$style=':host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}',this.action="none",this.plain=!1,this.slottable=!1,this.themeColor="rgba(51, 153, 255, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["action","plain"])}}B.$name="cropper-handle",B.$version="2.0.0-beta";const H=new WeakMap;class K extends I{constructor(){super(...arguments),this.$onCanvasAction=null,this.$onCanvasActionStart=null,this.$onDocumentKeyDown=null,this.$style=':host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}',this.x=0,this.y=0,this.width=0,this.height=0,this.aspectRatio=NaN,this.initialAspectRatio=NaN,this.initialCoverage=NaN,this.active=!1,this.movable=!1,this.resizable=!1,this.zoomable=!1,this.multiple=!1,this.keyboard=!1,this.outlined=!1,this.precise=!1}set $canvas(t){H.set(this,t)}get $canvas(){return H.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["active","aspect-ratio","height","initial-aspect-ratio","initial-coverage","keyboard","movable","multiple","outlined","precise","resizable","width","x","y","zoomable"])}$propertyChangedCallback(t,e,s){if(!Object.is(s,e))switch(super.$propertyChangedCallback(t,e,s),t){case"aspectRatio":c(s)||(this.aspectRatio=NaN);break;case"initialAspectRatio":c(s)||(this.initialAspectRatio=NaN);break;case"initialCoverage":(!c(s)||s>1)&&(this.initialCoverage=NaN);break;case"keyboard":this.$nextTick((()=>{this.$canvas&&(s?this.$onDocumentKeyDown||(this.$onDocumentKeyDown=this.$handleKeyDown.bind(this),y(this.ownerDocument,"keydown",this.$onDocumentKeyDown)):this.$onDocumentKeyDown&&(w(this.ownerDocument,"keydown",this.$onDocumentKeyDown),this.$onDocumentKeyDown=null))}));break;case"multiple":this.$nextTick((()=>{this.$canvas&&(s?(this.active=!0,this.$onCanvasActionStart||(this.$onCanvasActionStart=this.$handleActionStart.bind(this),y(this.$canvas,"actionstart",this.$onCanvasActionStart))):(this.$onCanvasActionStart&&(w(this.$canvas,"actionstart",this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$getSelections().forEach(((t,e)=>{e>0&&this.$removeSelection(t)})),this.active=!1))}))}}connectedCallback(){super.connectedCallback(),this.multiple&&!this.active&&(this.active=!0);const t=this.closest(this.$getTagNameOf("cropper-canvas"));if(t){this.$canvas=t,this.$setStyles({position:"absolute",transform:`translate(${this.x}px, ${this.y}px)`}),this.hidden||this.$render();const{initialCoverage:e,parentElement:s}=this;if(c(e)&&s){const t=this.aspectRatio||this.initialAspectRatio,{offsetWidth:i,offsetHeight:n}=s;let a=i*e,o=n*e;c(t)&&({width:a,height:o}=M({aspectRatio:t,width:a,height:o})),this.$change(this.x,this.y,a,o),this.$center()}this.$onCanvasAction=this.$handleAction.bind(this),y(t,"action",this.$onCanvasAction)}else this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&this.$onCanvasAction&&(w(t,"action",this.$onCanvasAction),this.$onCanvasAction=null),super.disconnectedCallback()}$getSelections(){let t=[];return this.parentElement&&(t=Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf("cropper-selection")))),t}$createSelection(){const t=this.cloneNode(!0);return this.hasAttribute("id")&&t.removeAttribute("id"),this.active=!1,this.parentElement&&this.parentElement.insertBefore(t,this.nextSibling),t}$removeSelection(t=this){if(this.parentElement){const e=this.$getSelections();if(e.length>1){const s=e.indexOf(t),i=e[s+1]||e[s-1];i&&(this.parentElement.removeChild(t),i.active=!0,i.$emit("change",{x:i.x,y:i.y,width:i.width,height:i.height}))}else this.$reset(),this.hidden=!0}}$handleActionStart(t){if(this.hidden||!this.multiple||this.active)return;const{detail:e}=t,{relatedEvent:s}=e;s.target===this&&this.parentElement&&(this.$getSelections().forEach((t=>{t.active=!1})),this.active=!0,this.$emit("change",{x:this.x,y:this.y,width:this.width,height:this.height}))}$handleAction(t){if(this.multiple&&!this.active)return;const{currentTarget:e,detail:s}=t;if(e&&s){const{relatedEvent:i}=s;let{action:n}=s;if(!n&&this.multiple&&(n=null==i?void 0:i.target.action),!n||this.hidden&&"select"!==n)return;const a=s.endX-s.startX,o=s.endY-s.startY,{width:r,height:h}=this;let{aspectRatio:l}=this;switch(!c(l)&&t.shiftKey&&(l=c(r)&&c(h)?r/h:1),n){case"select":{const{$canvas:t}=this,i=S(e);(this.multiple&&!this.hidden?this.$createSelection():this).$change(s.startX-i.left,s.startY-i.top,a,o,l),n="se-resize",a<0?o>0?n="sw-resize":o<0&&(n="nw-resize"):a>0&&o<0&&(n="ne-resize"),t&&(t.$action=n);break}case"move":!this.movable||i&&!this.contains(i.target)||this.$move(a,o);break;case"scale":if(i&&this.zoomable){const t=S(e);this.$zoom(s.scale,i.pageX-t.left,i.pageY-t.top)}break;default:this.$resize(n,a,o,l)}}}$handleKeyDown(t){if(!(this.hidden||!this.keyboard||this.multiple&&!this.active||t.defaultPrevented))switch(t.key){case"Backspace":t.metaKey&&(t.preventDefault(),this.$removeSelection());break;case"Delete":t.preventDefault(),this.$removeSelection();break;case"ArrowLeft":t.preventDefault(),this.$move(-1,0);break;case"ArrowRight":t.preventDefault(),this.$move(1,0);break;case"ArrowUp":t.preventDefault(),this.$move(0,-1);break;case"ArrowDown":t.preventDefault(),this.$move(0,1);break;case"+":t.preventDefault(),this.$zoom(.1);break;case"-":t.preventDefault(),this.$zoom(-.1)}}$center(){const{parentElement:t}=this;if(!t)return this;const e=(t.offsetWidth-this.width)/2,s=(t.offsetHeight-this.height)/2;return this.$change(e,s)}$move(t,e=t){return this.$moveTo(this.x+t,this.y+e)}$moveTo(t,e=t){return this.movable?this.$change(t,e):this}$resize(t,e=0,s=0,i=this.aspectRatio){if(!this.resizable)return this;const n=c(i),{$canvas:a}=this;let{x:o,y:r,width:h,height:l}=this;switch(t){case"n-resize":r+=s,l-=s,l<0&&(t="s-resize",l=-l,r-=l),n&&(o+=(e=s*i)/2,h-=e,h<0&&(h=-h,o-=h));break;case"e-resize":h+=e,h<0&&(t="w-resize",h=-h,o-=h),n&&(r-=(s=e/i)/2,l+=s,l<0&&(l=-l,r-=l));break;case"s-resize":l+=s,l<0&&(t="n-resize",l=-l,r-=l),n&&(o-=(e=s*i)/2,h+=e,h<0&&(h=-h,o-=h));break;case"w-resize":o+=e,h-=e,h<0&&(t="e-resize",h=-h,o-=h),n&&(r+=(s=e/i)/2,l-=s,l<0&&(l=-l,r-=l));break;case"ne-resize":n&&(s=-e/i),r+=s,l-=s,h+=e,h<0&&l<0?(t="sw-resize",h=-h,l=-l,o-=h,r-=l):h<0?(t="nw-resize",h=-h,o-=h):l<0&&(t="se-resize",l=-l,r-=l);break;case"nw-resize":n&&(s=e/i),o+=e,r+=s,h-=e,l-=s,h<0&&l<0?(t="se-resize",h=-h,l=-l,o-=h,r-=l):h<0?(t="ne-resize",h=-h,o-=h):l<0&&(t="sw-resize",l=-l,r-=l);break;case"se-resize":n&&(s=e/i),h+=e,l+=s,h<0&&l<0?(t="nw-resize",h=-h,l=-l,o-=h,r-=l):h<0?(t="sw-resize",h=-h,o-=h):l<0&&(t="ne-resize",l=-l,r-=l);break;case"sw-resize":n&&(s=-e/i),o+=e,h-=e,l+=s,h<0&&l<0?(t="ne-resize",h=-h,l=-l,o-=h,r-=l):h<0?(t="se-resize",h=-h,o-=h):l<0&&(t="nw-resize",l=-l,r-=l)}return a&&a.$setAction(t),this.$change(o,r,h,l)}$zoom(t,e,s){if(!this.zoomable||0===t)return this;t<0?t=1/(1-t):t+=1;const{width:i,height:n}=this,a=i*t,o=n*t;let r=this.x,c=this.y;return h(e)&&h(s)?(r-=(a-i)*((e-this.x)/i),c-=(o-n)*((s-this.y)/n)):(r-=(a-i)/2,c-=(o-n)/2),this.$change(r,c,a,o)}$change(t,e,s=this.width,i=this.height,n=this.aspectRatio){return h(t)&&h(e)&&h(s)&&h(i)?(this.precise||(t=Math.round(t),e=Math.round(e),s=Math.round(s),i=Math.round(i)),t===this.x&&e===this.y&&s===this.width&&i===this.height?this:(this.hidden&&(this.hidden=!1),c(n)&&({width:s,height:i}=M({aspectRatio:n,width:s,height:i},"cover")),!1===this.$emit("change",{x:t,y:e,width:s,height:i})?this:(this.x=t,this.y=e,this.width=s,this.height=i,this.$render()))):this}$reset(){return this.$change(0,0,0,0)}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height})}$toCanvas(t){return new Promise(((e,s)=>{if(!this.isConnected)return void s(new Error("The current element is not connected to the DOM."));const i=document.createElement("canvas"),{$canvas:n,width:a,height:o}=this;if(i.width=a,i.height=o,!n)return void e(i);const r=n.querySelector(this.$getTagNameOf("cropper-image"));r?r.$ready().then((s=>{const n=i.getContext("2d");if(n){const[e,h,c,l,d,$]=r.$getTransform(),g=s.naturalWidth/2,m=s.naturalHeight/2,b=-this.x,f=-this.y,v=(b*l-c*f)/(e*l-c*h),w=(f-h*d)/l,y=e*v+c*w+d,C=h*v+l*w+$;n.fillStyle="transparent",n.fillRect(0,0,a,o),u(t)&&p(t.beforeDraw)&&t.beforeDraw.call(this,n,i),n.save(),n.translate(g,m),n.transform(e,h,c,l,y,C),n.translate(-g,-m),n.drawImage(s,0,0),n.restore()}e(i)})).catch(s):e(i)})).then((e=>{if(u(t)&&(c(t.width)||c(t.height))){let{width:s,height:i}=e;if(({width:s,height:i}=M({aspectRatio:s/i,width:t.width,height:t.height})),s!==e.width){const t=document.createElement("canvas"),n=t.getContext("2d");return t.width=s,t.height=i,n&&n.drawImage(e,0,0,s,i),t}}return e}))}}K.$name="cropper-selection",K.$version="2.0.0-beta";class U extends I{constructor(){super(...arguments),this.$style=":host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}",this.bordered=!1,this.columns=3,this.covered=!1,this.rows=3,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["bordered","columns","covered","rows"])}$propertyChangedCallback(t,e,s){Object.is(s,e)||(super.$propertyChangedCallback(t,e,s),"rows"!==t&&"columns"!==t||this.$render())}connectedCallback(){super.connectedCallback(),this.$render()}$render(){const t=this.$getShadowRoot(),e=document.createDocumentFragment();for(let t=0;t<this.rows;t+=1){const t=document.createElement("span");t.setAttribute("role","row");for(let e=0;e<this.columns;e+=1){const e=document.createElement("span");e.setAttribute("role","gridcell"),t.appendChild(e)}e.appendChild(t)}t&&(t.innerHTML="",t.appendChild(e))}}U.$name="cropper-grid",U.$version="2.0.0-beta";class q extends I{constructor(){super(...arguments),this.$style=':host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}',this.centered=!1,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["centered"])}}q.$name="cropper-crosshair",q.$version="2.0.0-beta";const L=new WeakMap,F=new WeakMap,Z=new WeakMap;class G extends I{constructor(){super(...arguments),this.$onSourceImageTransform=null,this.$onSelectionChange=null,this.$scale=1,this.$style=":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}",this.resize="vertical",this.selection="",this.slottable=!1}set $image(t){L.set(this,t)}get $image(){return L.get(this)}set $sourceImage(t){Z.set(this,t)}get $sourceImage(){return Z.get(this)}set $selection(t){F.set(this,t)}get $selection(){return F.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["resize","selection"])}connectedCallback(){super.connectedCallback();let t=null;if(t=this.selection?this.ownerDocument.querySelector(this.selection):this.closest(this.$getTagNameOf("cropper-selection")),$(t)){this.$selection=t,this.$onSelectionChange=this.$handleSelectionChange.bind(this),y(t,"change",this.$onSelectionChange);const e=t.closest(this.$getTagNameOf("cropper-canvas"));if(e){const t=e.querySelector(this.$getTagNameOf("cropper-image"));t&&(this.$sourceImage=t,this.$image=t.cloneNode(!0),this.$getShadowRoot().appendChild(this.$image),this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this),y(t,"transform",this.$onSourceImageTransform))}this.$render()}}disconnectedCallback(){const{$selection:t,$sourceImage:e}=this;t&&this.$onSelectionChange&&(w(t,"change",this.$onSelectionChange),this.$onSelectionChange=null),e&&this.$onSourceImageTransform&&(w(e,"transform",this.$onSourceImageTransform),this.$onSourceImageTransform=null),super.disconnectedCallback()}$handleSelectionChange(t){this.$render(t.detail)}$handleSourceImageTransform(t){const{x:e,y:s}=this.$selection;this.$transformImageByOffset(t.detail.matrix,-e,-s)}$render(t){const{x:e,y:s,width:i,height:n}=t||this.$selection,a={},{clientWidth:o,clientHeight:r}=this;let h=o,c=r,l=NaN;switch(this.resize){case"both":l=1,h=i,c=n,a.width=i,a.height=n;break;case"horizontal":l=r/n,h=i*l,a.width=h;break;case"vertical":l=o/i,c=n*l,a.height=c;break;default:o>0?l=o/i:r>0&&(l=r/n)}this.$scale=l,this.$setStyles(a),this.$sourceImage&&this.$transformImageByOffset(this.$sourceImage.$getTransform(),-e,-s)}$transformImageByOffset(t,e,s){const{$image:i,$scale:n,$sourceImage:a}=this;if(a&&i&&n>0){const[a,o,r,h,c,l]=t,d=(e*h-r*s)/(a*h-r*o),u=(s-o*d)/h,p=a*d+r*u+c,$=o*d+h*u+l;i.$ready((t=>{this.$setStyles.call(i,{width:t.naturalWidth*n,height:t.naturalHeight*n})})),i.$setTransform(a,o,r,h,p*n,$*n)}}}G.$name="cropper-viewer",G.$version="2.0.0-beta";export{R as CropperCanvas,q as CropperCrosshair,I as CropperElement,U as CropperGrid,B as CropperHandle,N as CropperImage,K as CropperSelection,j as CropperShade,G as CropperViewer};
+const t="undefined"!=typeof window&&void 0!==window.document,e=t?window:{},s=!!t&&"ontouchstart"in e.document.documentElement,i=!!t&&"PointerEvent"in e,n=i?"pointerdown":s?"touchstart":"mousedown",a=i?"pointermove":s?"touchmove":"mousemove",o=i?"pointerup pointercancel":s?"touchend touchcancel":"mouseup";const r=Number.isNaN||e.isNaN;function h(t){return"number"==typeof t&&!r(t)}function c(t){return h(t)&&t>0&&t<1/0}function l(t){return"object"==typeof t&&null!==t}const{hasOwnProperty:d}=Object.prototype;function u(t){if(!l(t))return!1;try{const{constructor:e}=t,{prototype:s}=e;return e&&s&&d.call(s,"isPrototypeOf")}catch(t){return!1}}function $(t){return"function"==typeof t}function p(t){return"object"==typeof t&&null!==t&&1===t.nodeType}const g=/([a-z\d])([A-Z])/g;function m(t){return String(t).replace(g,"$1-$2").toLowerCase()}const b=/-[A-z\d]/g;function f(t){return t.replace(b,(t=>t.slice(1).toUpperCase()))}const v=/\s\s*/;function w(t,e,s,i){e.trim().split(v).forEach((e=>{t.removeEventListener(e,s,i)}))}function y(t,e,s,i){e.trim().split(v).forEach((e=>{t.addEventListener(e,s,i)}))}function C(t,e,s,i){y(t,e,s,Object.assign(Object.assign({},i),{once:!0}))}const k={bubbles:!0,cancelable:!0,composed:!0};const x=Promise.resolve();function S(t){const{documentElement:s}=t.ownerDocument,i=t.getBoundingClientRect();return{left:i.left+(e.pageXOffset-s.clientLeft),top:i.top+(e.pageYOffset-s.clientTop)}}const A=/deg|g?rad|turn$/i;function z(t){const e=parseFloat(t)||0;if(0!==e){const[s="rad"]=String(t).match(A)||[];switch(s.toLowerCase()){case"deg":return e/360*(2*Math.PI);case"grad":return e/400*(2*Math.PI);case"turn":return e*(2*Math.PI)}}return e}function M(t,e="contain"){const{aspectRatio:s}=t;let{width:i,height:n}=t;const a=c(i),o=c(n);if(a&&o){const t=n*s;"contain"===e&&t>i||"cover"===e&&t<i?n=i/s:i=n*s}else a?n=i/s:o&&(i=n*s);return{width:i,height:n}}const E=/left|top|width|height/i,D=new WeakMap,T=new WeakMap,P=new Map,I=e.document&&Array.isArray(e.document.adoptedStyleSheets)&&"replaceSync"in e.CSSStyleSheet.prototype;class O extends HTMLElement{constructor(){var t,e;super(),this.shadowRootMode="open",this.slottable=!0;const s=null===(e=null===(t=Object.getPrototypeOf(this))||void 0===t?void 0:t.constructor)||void 0===e?void 0:e.$name;s&&P.set(s,this.tagName.toLowerCase())}get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,e,s){if(Object.is(s,e))return;const i=f(t);let n=s;switch(typeof this[i]){case"boolean":n=null!==s&&"false"!==s;break;case"number":n=Number(s)}switch(this[i]=n,t){case"theme-color":{const t=T.get(this),e=this.$sharedStyle;t&&e&&(I?t.replaceSync(e):t.textContent=e);break}}}$propertyChangedCallback(t,e,s){if(!Object.is(s,e))switch(t=m(t),typeof s){case"boolean":!0===s?this.hasAttribute(t)||this.setAttribute(t,""):this.removeAttribute(t);break;case"number":s=r(s)?"":String(s);default:s?this.getAttribute(t)!==s&&this.setAttribute(t,s):this.removeAttribute(t)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((t=>{const e=f(t);let s=this[e];(function(t){return void 0===t})(s)||this.$propertyChangedCallback(e,void 0,s),Object.defineProperty(this,e,{enumerable:!0,configurable:!0,get:()=>s,set(t){const i=s;s=t,this.$propertyChangedCallback(e,i,t)}})}));const t=this.attachShadow({mode:this.shadowRootMode||"open"});if(this.shadowRoot||D.set(this,t),T.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){const e=document.createElement("template");e.innerHTML=this.$template,t.appendChild(e.content)}if(this.slottable){const e=document.createElement("slot");t.appendChild(e)}}disconnectedCallback(){T.has(this)&&T.delete(this),D.has(this)&&D.delete(this)}$getTagNameOf(t){var e;return null!==(e=P.get(t))&&void 0!==e?e:t}$setStyles(t){return Object.keys(t).forEach((e=>{let s=t[e];h(s)&&(s=0!==s&&E.test(e)?`${s}px`:String(s)),this.style[e]=s})),this}$getShadowRoot(){return this.shadowRoot||D.get(this)}$addStyles(t){let e;const s=this.$getShadowRoot();return I?(e=new CSSStyleSheet,e.replaceSync(t),s.adoptedStyleSheets=s.adoptedStyleSheets.concat(e)):(e=document.createElement("style"),e.textContent=t,s.appendChild(e)),e}$emit(t,e,s){return function(t,e,s,i){return t.dispatchEvent(new CustomEvent(e,Object.assign(Object.assign(Object.assign({},k),{detail:s}),i)))}(this,t,e,s)}$nextTick(t){return function(t,e){return e?x.then(t?e.bind(t):e):x}(this,t)}static $define(s,i){l(s)&&(i=s,s=""),s||(s=this.$name||this.name),s=m(s),t&&e.customElements&&!e.customElements.get(s)&&customElements.define(s,this,i)}}O.$version="2.0.0-beta.1";class R extends O{constructor(){super(...arguments),this.$onPointerDown=null,this.$onPointerMove=null,this.$onPointerUp=null,this.$onWheel=null,this.$wheeling=!1,this.$pointers=new Map,this.$style=':host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}',this.$action="none",this.background=!1,this.disabled=!1,this.scaleStep=.1,this.themeColor="#39f"}static get observedAttributes(){return super.observedAttributes.concat(["background","disabled","scale-step"])}connectedCallback(){super.connectedCallback(),this.disabled||this.$bind()}disconnectedCallback(){this.disabled||this.$unbind(),super.disconnectedCallback()}$propertyChangedCallback(t,e,s){if(!Object.is(s,e)&&(super.$propertyChangedCallback(t,e,s),"disabled"===t))s?this.$unbind():this.$bind()}$bind(){this.$onPointerDown||(this.$onPointerDown=this.$handlePointerDown.bind(this),y(this,n,this.$onPointerDown)),this.$onPointerMove||(this.$onPointerMove=this.$handlePointerMove.bind(this),y(this.ownerDocument,a,this.$onPointerMove)),this.$onPointerUp||(this.$onPointerUp=this.$handlePointerUp.bind(this),y(this.ownerDocument,o,this.$onPointerUp)),this.$onWheel||(this.$onWheel=this.$handleWheel.bind(this),y(this,"wheel",this.$onWheel,{passive:!1,capture:!0}))}$unbind(){this.$onPointerDown&&(w(this,n,this.$onPointerDown),this.$onPointerDown=null),this.$onPointerMove&&(w(this.ownerDocument,a,this.$onPointerMove),this.$onPointerMove=null),this.$onPointerUp&&(w(this.ownerDocument,o,this.$onPointerUp),this.$onPointerUp=null),this.$onWheel&&(w(this,"wheel",this.$onWheel,{capture:!0}),this.$onWheel=null)}$handlePointerDown(t){const{buttons:e,button:s,type:i}=t;if(this.disabled||("pointerdown"===i&&"mouse"===t.pointerType||"mousedown"===i)&&(h(e)&&1!==e||h(s)&&0!==s||t.ctrlKey))return;const{$pointers:n}=this;let a="";if(t.changedTouches)Array.from(t.changedTouches).forEach((({identifier:t,pageX:e,pageY:s})=>{n.set(t,{startX:e,startY:s,endX:e,endY:s})}));else{const{pointerId:e=0,pageX:s,pageY:i}=t;n.set(e,{startX:s,startY:i,endX:s,endY:i})}n.size>1?a="transform":p(t.target)&&(a=t.target.action||t.target.getAttribute("action")||""),!1!==this.$emit("actionstart",{action:a,relatedEvent:t})&&(t.preventDefault(),this.$action=a,this.style.willChange="transform")}$handlePointerMove(t){const{$action:e,$pointers:s}=this;if(this.disabled||"none"===e||0===s.size)return;if(!1===this.$emit("actionmove",{action:e,relatedEvent:t}))return;if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach((({identifier:t,pageX:e,pageY:i})=>{const n=s.get(t);n&&Object.assign(n,{endX:e,endY:i})}));else{const{pointerId:e=0,pageX:i,pageY:n}=t,a=s.get(e);a&&Object.assign(a,{endX:i,endY:n})}const i={action:e,relatedEvent:t};if("transform"===e){const e=new Map(s);let n=0,a=0,o=0,r=0,h=t.pageX,c=t.pageY;s.forEach(((t,s)=>{e.delete(s),e.forEach((e=>{let s=e.startX-t.startX,i=e.startY-t.startY,l=e.endX-t.endX,d=e.endY-t.endY,u=0,$=0,p=0,g=0;if(0===s?i<0?p=2*Math.PI:i>0&&(p=Math.PI):s>0?p=Math.PI/2+Math.atan(i/s):s<0&&(p=1.5*Math.PI+Math.atan(i/s)),0===l?d<0?g=2*Math.PI:d>0&&(g=Math.PI):l>0?g=Math.PI/2+Math.atan(d/l):l<0&&(g=1.5*Math.PI+Math.atan(d/l)),g>0||p>0){const s=g-p,i=Math.abs(s);i>n&&(n=i,o=s,h=(t.startX+e.startX)/2,c=(t.startY+e.startY)/2)}if(s=Math.abs(s),i=Math.abs(i),l=Math.abs(l),d=Math.abs(d),s>0&&i>0?u=Math.sqrt(s*s+i*i):s>0?u=s:i>0&&(u=i),l>0&&d>0?$=Math.sqrt(l*l+d*d):l>0?$=l:d>0&&($=d),u>0&&$>0){const s=($-u)/u,i=Math.abs(s);i>a&&(a=i,r=s,h=(t.startX+e.startX)/2,c=(t.startY+e.startY)/2)}}))}));const l=n>0,d=a>0;l&&d?(i.rotate=o,i.scale=r,i.centerX=h,i.centerY=c):l?(i.action="rotate",i.rotate=o,i.centerX=h,i.centerY=c):d?(i.action="scale",i.scale=r,i.centerX=h,i.centerY=c):i.action="none"}else{const[t]=Array.from(s.values());Object.assign(i,t)}s.forEach((t=>{t.startX=t.endX,t.startY=t.endY})),"none"!==i.action&&this.$emit("action",i,{cancelable:!1})}$handlePointerUp(t){const{$action:e,$pointers:s}=this;if(!this.disabled&&"none"!==e&&!1!==this.$emit("actionend",{action:e,relatedEvent:t})){if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach((({identifier:t})=>{s.delete(t)}));else{const{pointerId:e=0}=t;s.delete(e)}0===s.size&&(this.style.willChange="",this.$action="none")}}$handleWheel(t){if(this.disabled)return;if(t.preventDefault(),this.$wheeling)return;this.$wheeling=!0,setTimeout((()=>{this.$wheeling=!1}),50);const e=(t.deltaY>0?-1:1)*this.scaleStep;this.$emit("action",{action:"scale",scale:e,relatedEvent:t},{cancelable:!1})}$setAction(t){return"string"==typeof t&&(this.$action=t),this}$toCanvas(t){return new Promise(((e,s)=>{if(!this.isConnected)return void s(new Error("The current element is not connected to the DOM."));const i=document.createElement("canvas"),n=this.offsetWidth,a=this.offsetHeight;i.width=n,i.height=a;const o=this.querySelector(this.$getTagNameOf("cropper-image"));o?o.$ready().then((s=>{const r=i.getContext("2d");if(r){const[e,h,c,l,d,p]=o.$getTransform(),g=s.naturalWidth/2,m=s.naturalHeight/2;r.fillStyle="transparent",r.fillRect(0,0,n,a),u(t)&&$(t.beforeDraw)&&t.beforeDraw.call(this,r,i),r.save(),r.translate(g,m),r.transform(e,h,c,l,d,p),r.translate(-g,-m),r.drawImage(s,0,0),r.restore()}e(i)})).catch(s):e(i)})).then((e=>{if(u(t)&&(c(t.width)||c(t.height))){let{width:s,height:i}=e;if(({width:s,height:i}=M({aspectRatio:s/i,width:t.width,height:t.height})),s!==e.width){const t=document.createElement("canvas"),n=t.getContext("2d");return t.width=s,t.height=i,n&&n.drawImage(e,0,0,s,i),t}}return e}))}}R.$name="cropper-canvas",R.$version="2.0.0-beta.1";const Y=new WeakMap,X=["alt","crossorigin","decoding","importance","loading","referrerpolicy","sizes","src","srcset"];class N extends O{constructor(){super(...arguments),this.$matrix=[1,0,0,1,0,0],this.$onLoad=null,this.$onCanvasAction=null,this.$style=":host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}",this.$image=new Image,this.rotatable=!0,this.scalable=!0,this.skewable=!0,this.slottable=!1,this.translatable=!0}set $canvas(t){Y.set(this,t)}get $canvas(){return Y.get(this)}static get observedAttributes(){return super.observedAttributes.concat(X,["rotatable","scalable","skewable","translatable"])}attributeChangedCallback(t,e,s){Object.is(s,e)||(super.attributeChangedCallback(t,e,s),X.includes(t)&&this.$image.setAttribute(t,s))}connectedCallback(){super.connectedCallback();const{$image:t}=this,e=this.closest(this.$getTagNameOf("cropper-canvas"));e&&(this.$canvas=e,this.$setStyles({position:"absolute"}),this.$onCanvasAction=this.$handleAction.bind(this),y(e,"action",this.$onCanvasAction)),this.$onLoad=this.$handleLoad.bind(this),y(t,"load",this.$onLoad),this.$getShadowRoot().appendChild(t)}disconnectedCallback(){const{$image:t,$canvas:e}=this;e&&this.$onCanvasAction&&(w(e,"action",this.$onCanvasAction),this.$onCanvasAction=null),t&&this.$onLoad&&(w(t,"load",this.$onLoad),this.$onLoad=null),this.$getShadowRoot().removeChild(t),super.disconnectedCallback()}$handleLoad(){const{$image:t}=this;this.$setStyles({width:t.naturalWidth,height:t.naturalHeight}),this.$canvas&&this.$center("cover")}$handleAction(t){if(this.hidden||!(this.rotatable||this.scalable||this.translatable))return;const{$canvas:e}=this,{detail:s}=t;if(s){const{relatedEvent:t}=s;let{action:i}=s;switch("transform"!==i||this.rotatable&&this.scalable||(i=this.rotatable?"rotate":this.scalable?"scale":"none"),i){case"move":if(this.translatable){const i=this.$getTagNameOf("cropper-selection");let n=e.querySelector(i);n&&n.multiple&&!n.active&&(n=e.querySelector(`${i}[active]`)),n&&!n.hidden&&n.movable&&t&&n.contains(t.target)||this.$move(s.endX-s.startX,s.endY-s.startY)}break;case"rotate":if(this.rotatable)if(t){const{x:e,y:i}=this.getBoundingClientRect();this.$rotate(s.rotate,t.clientX-e,t.clientY-i)}else this.$rotate(s.rotate);break;case"scale":if(this.scalable)if(t){const{x:e,y:i}=this.getBoundingClientRect();this.$zoom(s.scale,t.clientX-e,t.clientY-i)}else this.$zoom(s.scale);break;case"transform":if(this.rotatable&&this.scalable){const{rotate:e}=s;let{scale:i}=s;i<0?i=1/(1-i):i+=1;const n=Math.cos(e),a=Math.sin(e),[o,r,h,c]=[n*i,a*i,-a*i,n*i];if(t){const e=this.getBoundingClientRect(),s=t.clientX-e.x,i=t.clientY-e.y,[n,a,l,d]=this.$matrix,u=e.width/2,$=i-e.height/2,p=((s-u)*d-l*$)/(n*d-l*a),g=($-a*p)/d;this.$transform(o,r,h,c,p*(1-o)+g*h,g*(1-c)+p*r)}else this.$transform(o,r,h,c,0,0)}}}}$ready(t){const{$image:e}=this,s=new Promise(((t,s)=>{const i=new Error("Failed to load the image source");if(e.complete)e.naturalWidth>0&&e.naturalHeight>0?t(e):s(i);else{const n=()=>{w(e,"error",a),t(e)},a=()=>{w(e,"load",n),s(i)};C(e,"load",n),C(e,"error",a)}}));return $(t)&&s.then((e=>(t(e),e))),s}$center(t){const{parentElement:e}=this;if(!e)return this;const s=e.getBoundingClientRect(),i=s.width,n=s.height,{x:a,y:o,width:r,height:h}=this.getBoundingClientRect(),c=a+r/2,l=o+h/2,d=s.x+i/2,u=s.y+n/2;if(this.$move(d-c,u-l),t&&(r!==i||h!==n)){const e=i/r,s=n/h;switch(t){case"cover":this.$scale(Math.max(e,s));break;case"contain":this.$scale(Math.min(e,s))}}return this}$move(t,e=t){if(this.translatable&&h(t)&&h(e)){const[s,i,n,a]=this.$matrix,o=(t*a-n*e)/(s*a-n*i),r=(e-i*o)/a;this.$translate(o,r)}return this}$moveTo(t,e=t){if(this.translatable&&h(t)&&h(e)){const[s,i,n,a]=this.$matrix,o=(t*a-n*e)/(s*a-n*i),r=(e-i*o)/a;this.$setTransform(s,i,n,a,o,r)}return this}$rotate(t,e,s){if(this.rotatable){const i=z(t),n=Math.cos(i),a=Math.sin(i),[o,r,c,l]=[n,a,-a,n];if(h(e)&&h(s)){const[t,i,n,a]=this.$matrix,{width:h,height:d}=this.getBoundingClientRect(),u=s-d/2,$=((e-h/2)*a-n*u)/(t*a-n*i),p=(u-i*$)/a;this.$transform(o,r,c,l,$*(1-o)-p*c,p*(1-l)-$*r)}else this.$transform(o,r,c,l,0,0)}return this}$zoom(t,e,s){if(!this.scalable||0===t)return this;if(t<0?t=1/(1-t):t+=1,h(e)&&h(s)){const[i,n,a,o]=this.$matrix,{width:r,height:h}=this.getBoundingClientRect(),c=s-h/2,l=((e-r/2)*o-a*c)/(i*o-a*n),d=(c-n*l)/o;this.$transform(t,0,0,t,l*(1-t),d*(1-t))}else this.$scale(t);return this}$scale(t,e=t){return this.scalable&&this.$transform(t,0,0,e,0,0),this}$skew(t,e=0){if(this.skewable){const s=z(t),i=z(e);this.$transform(1,Math.tan(i),Math.tan(s),1,0,0)}return this}$translate(t,e=t){return this.translatable&&h(t)&&h(e)&&this.$transform(1,0,0,1,t,e),this}$transform(t,e,s,i,n,a){if(h(t)&&h(e)&&h(s)&&h(i)&&h(n)&&h(a)){const[o,r,h,c,l,d]=this.$matrix,[u,$,p,g,m,b]=[t,e,s,i,n,a];return this.$setTransform(o*u+h*$,r*u+c*$,o*p+h*g,r*p+c*g,o*m+h*b+l,r*m+c*b+d)}return this}$setTransform(t,e,s,i,n,a){if((this.rotatable||this.scalable||this.skewable||this.translatable)&&(Array.isArray(t)&&([t,e,s,i,n,a]=t),h(t)&&h(e)&&h(s)&&h(i)&&h(n)&&h(a))){const o=[t,e,s,i,n,a];if(!1===this.$emit("transform",{matrix:o,oldMatrix:this.$matrix}))return this;this.$matrix=o,this.style.transform=`matrix(${o.join(", ")})`}return this}$getTransform(){return this.$matrix.slice()}$resetTransform(){return this.$setTransform([1,0,0,1,0,0])}}N.$name="cropper-image",N.$version="2.0.0-beta.1";const W=new WeakMap;class L extends O{constructor(){super(...arguments),this.$onCanvasChange=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=null,this.$style=":host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}",this.x=0,this.y=0,this.width=0,this.height=0,this.slottable=!1,this.themeColor="rgba(0, 0, 0, 0.65)"}set $canvas(t){W.set(this,t)}get $canvas(){return W.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["height","width","x","y"])}connectedCallback(){super.connectedCallback();const t=this.closest(this.$getTagNameOf("cropper-canvas"));if(t){this.$canvas=t,this.style.position="absolute";const e=t.querySelector(this.$getTagNameOf("cropper-selection"));e&&(this.$onCanvasActionStart=t=>{e.hidden&&"select"===t.detail.action&&(this.hidden=!1)},this.$onCanvasActionEnd=t=>{e.hidden&&"select"===t.detail.action&&(this.hidden=!0)},this.$onCanvasChange=t=>{const{x:s,y:i,width:n,height:a}=t.detail;this.$change(s,i,n,a),(e.hidden||0===s&&0===i&&0===n&&0===a)&&(this.hidden=!0)},y(t,"actionstart",this.$onCanvasActionStart),y(t,"actionend",this.$onCanvasActionEnd),y(t,"change",this.$onCanvasChange))}this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&(this.$onCanvasActionStart&&(w(t,"actionstart",this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(w(t,"actionend",this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasChange&&(w(t,"change",this.$onCanvasChange),this.$onCanvasChange=null)),super.disconnectedCallback()}$change(t,e,s=this.width,i=this.height){return h(t)&&h(e)&&h(s)&&h(i)&&(t!==this.x||e!==this.y||s!==this.width||i!==this.height)?(this.hidden&&(this.hidden=!1),this.x=t,this.y=e,this.width=s,this.height=i,this.$render()):this}$reset(){return this.$change(0,0,0,0)}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height,outlineWidth:e.innerWidth})}}L.$name="cropper-shade",L.$version="2.0.0-beta.1";class j extends O{constructor(){super(...arguments),this.$onCanvasCropEnd=null,this.$onCanvasCropStart=null,this.$style=':host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}',this.action="none",this.plain=!1,this.slottable=!1,this.themeColor="rgba(51, 153, 255, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["action","plain"])}}j.$name="cropper-handle",j.$version="2.0.0-beta.1";const B=new WeakMap;class H extends O{constructor(){super(...arguments),this.$onCanvasAction=null,this.$onCanvasActionStart=null,this.$onDocumentKeyDown=null,this.$style=':host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}',this.x=0,this.y=0,this.width=0,this.height=0,this.aspectRatio=NaN,this.initialAspectRatio=NaN,this.initialCoverage=NaN,this.active=!1,this.movable=!1,this.resizable=!1,this.zoomable=!1,this.multiple=!1,this.keyboard=!1,this.outlined=!1,this.precise=!1}set $canvas(t){B.set(this,t)}get $canvas(){return B.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["active","aspect-ratio","height","initial-aspect-ratio","initial-coverage","keyboard","movable","multiple","outlined","precise","resizable","width","x","y","zoomable"])}$propertyChangedCallback(t,e,s){if(!Object.is(s,e))switch(super.$propertyChangedCallback(t,e,s),t){case"aspectRatio":c(s)||(this.aspectRatio=NaN);break;case"initialAspectRatio":c(s)||(this.initialAspectRatio=NaN);break;case"initialCoverage":(!c(s)||s>1)&&(this.initialCoverage=NaN);break;case"keyboard":this.$nextTick((()=>{this.$canvas&&(s?this.$onDocumentKeyDown||(this.$onDocumentKeyDown=this.$handleKeyDown.bind(this),y(this.ownerDocument,"keydown",this.$onDocumentKeyDown)):this.$onDocumentKeyDown&&(w(this.ownerDocument,"keydown",this.$onDocumentKeyDown),this.$onDocumentKeyDown=null))}));break;case"multiple":this.$nextTick((()=>{this.$canvas&&(s?(this.active=!0,this.$onCanvasActionStart||(this.$onCanvasActionStart=this.$handleActionStart.bind(this),y(this.$canvas,"actionstart",this.$onCanvasActionStart))):(this.$onCanvasActionStart&&(w(this.$canvas,"actionstart",this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$getSelections().forEach(((t,e)=>{e>0&&this.$removeSelection(t)})),this.active=!1))}))}}connectedCallback(){super.connectedCallback(),this.multiple&&!this.active&&(this.active=!0);const t=this.closest(this.$getTagNameOf("cropper-canvas"));if(t){this.$canvas=t,this.$setStyles({position:"absolute",transform:`translate(${this.x}px, ${this.y}px)`}),this.hidden||this.$render();const{initialCoverage:e,parentElement:s}=this;if(c(e)&&s){const t=this.aspectRatio||this.initialAspectRatio,{offsetWidth:i,offsetHeight:n}=s;let a=i*e,o=n*e;c(t)&&({width:a,height:o}=M({aspectRatio:t,width:a,height:o})),this.$change(this.x,this.y,a,o),this.$center()}this.$onCanvasAction=this.$handleAction.bind(this),y(t,"action",this.$onCanvasAction)}else this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&this.$onCanvasAction&&(w(t,"action",this.$onCanvasAction),this.$onCanvasAction=null),super.disconnectedCallback()}$getSelections(){let t=[];return this.parentElement&&(t=Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf("cropper-selection")))),t}$createSelection(){const t=this.cloneNode(!0);return this.hasAttribute("id")&&t.removeAttribute("id"),this.active=!1,this.parentElement&&this.parentElement.insertBefore(t,this.nextSibling),t}$removeSelection(t=this){if(this.parentElement){const e=this.$getSelections();if(e.length>1){const s=e.indexOf(t),i=e[s+1]||e[s-1];i&&(this.parentElement.removeChild(t),i.active=!0,i.$emit("change",{x:i.x,y:i.y,width:i.width,height:i.height}))}else this.$reset(),this.hidden=!0}}$handleActionStart(t){if(this.hidden||!this.multiple||this.active)return;const{detail:e}=t,{relatedEvent:s}=e;s.target===this&&this.parentElement&&(this.$getSelections().forEach((t=>{t.active=!1})),this.active=!0,this.$emit("change",{x:this.x,y:this.y,width:this.width,height:this.height}))}$handleAction(t){if(this.multiple&&!this.active)return;const{currentTarget:e,detail:s}=t;if(e&&s){const{relatedEvent:i}=s;let{action:n}=s;if(!n&&this.multiple&&(n=null==i?void 0:i.target.action),!n||this.hidden&&"select"!==n)return;const a=s.endX-s.startX,o=s.endY-s.startY,{width:r,height:h}=this;let{aspectRatio:l}=this;switch(!c(l)&&t.shiftKey&&(l=c(r)&&c(h)?r/h:1),n){case"select":{const{$canvas:t}=this,i=S(e);(this.multiple&&!this.hidden?this.$createSelection():this).$change(s.startX-i.left,s.startY-i.top,a,o,l),n="se-resize",a<0?o>0?n="sw-resize":o<0&&(n="nw-resize"):a>0&&o<0&&(n="ne-resize"),t&&(t.$action=n);break}case"move":!this.movable||i&&!this.contains(i.target)||this.$move(a,o);break;case"scale":if(i&&this.zoomable){const t=S(e);this.$zoom(s.scale,i.pageX-t.left,i.pageY-t.top)}break;default:this.$resize(n,a,o,l)}}}$handleKeyDown(t){if(!(this.hidden||!this.keyboard||this.multiple&&!this.active||t.defaultPrevented))switch(t.key){case"Backspace":t.metaKey&&(t.preventDefault(),this.$removeSelection());break;case"Delete":t.preventDefault(),this.$removeSelection();break;case"ArrowLeft":t.preventDefault(),this.$move(-1,0);break;case"ArrowRight":t.preventDefault(),this.$move(1,0);break;case"ArrowUp":t.preventDefault(),this.$move(0,-1);break;case"ArrowDown":t.preventDefault(),this.$move(0,1);break;case"+":t.preventDefault(),this.$zoom(.1);break;case"-":t.preventDefault(),this.$zoom(-.1)}}$center(){const{parentElement:t}=this;if(!t)return this;const e=(t.offsetWidth-this.width)/2,s=(t.offsetHeight-this.height)/2;return this.$change(e,s)}$move(t,e=t){return this.$moveTo(this.x+t,this.y+e)}$moveTo(t,e=t){return this.movable?this.$change(t,e):this}$resize(t,e=0,s=0,i=this.aspectRatio){if(!this.resizable)return this;const n=c(i),{$canvas:a}=this;let{x:o,y:r,width:h,height:l}=this;switch(t){case"n-resize":r+=s,l-=s,l<0&&(t="s-resize",l=-l,r-=l),n&&(o+=(e=s*i)/2,h-=e,h<0&&(h=-h,o-=h));break;case"e-resize":h+=e,h<0&&(t="w-resize",h=-h,o-=h),n&&(r-=(s=e/i)/2,l+=s,l<0&&(l=-l,r-=l));break;case"s-resize":l+=s,l<0&&(t="n-resize",l=-l,r-=l),n&&(o-=(e=s*i)/2,h+=e,h<0&&(h=-h,o-=h));break;case"w-resize":o+=e,h-=e,h<0&&(t="e-resize",h=-h,o-=h),n&&(r+=(s=e/i)/2,l-=s,l<0&&(l=-l,r-=l));break;case"ne-resize":n&&(s=-e/i),r+=s,l-=s,h+=e,h<0&&l<0?(t="sw-resize",h=-h,l=-l,o-=h,r-=l):h<0?(t="nw-resize",h=-h,o-=h):l<0&&(t="se-resize",l=-l,r-=l);break;case"nw-resize":n&&(s=e/i),o+=e,r+=s,h-=e,l-=s,h<0&&l<0?(t="se-resize",h=-h,l=-l,o-=h,r-=l):h<0?(t="ne-resize",h=-h,o-=h):l<0&&(t="sw-resize",l=-l,r-=l);break;case"se-resize":n&&(s=e/i),h+=e,l+=s,h<0&&l<0?(t="nw-resize",h=-h,l=-l,o-=h,r-=l):h<0?(t="sw-resize",h=-h,o-=h):l<0&&(t="ne-resize",l=-l,r-=l);break;case"sw-resize":n&&(s=-e/i),o+=e,h-=e,l+=s,h<0&&l<0?(t="ne-resize",h=-h,l=-l,o-=h,r-=l):h<0?(t="se-resize",h=-h,o-=h):l<0&&(t="nw-resize",l=-l,r-=l)}return a&&a.$setAction(t),this.$change(o,r,h,l)}$zoom(t,e,s){if(!this.zoomable||0===t)return this;t<0?t=1/(1-t):t+=1;const{width:i,height:n}=this,a=i*t,o=n*t;let r=this.x,c=this.y;return h(e)&&h(s)?(r-=(a-i)*((e-this.x)/i),c-=(o-n)*((s-this.y)/n)):(r-=(a-i)/2,c-=(o-n)/2),this.$change(r,c,a,o)}$change(t,e,s=this.width,i=this.height,n=this.aspectRatio){return h(t)&&h(e)&&h(s)&&h(i)?(this.precise||(t=Math.round(t),e=Math.round(e),s=Math.round(s),i=Math.round(i)),t===this.x&&e===this.y&&s===this.width&&i===this.height?this:(this.hidden&&(this.hidden=!1),c(n)&&({width:s,height:i}=M({aspectRatio:n,width:s,height:i},"cover")),!1===this.$emit("change",{x:t,y:e,width:s,height:i})?this:(this.x=t,this.y=e,this.width=s,this.height=i,this.$render()))):this}$reset(){return this.$change(0,0,0,0)}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height})}$toCanvas(t){return new Promise(((e,s)=>{if(!this.isConnected)return void s(new Error("The current element is not connected to the DOM."));const i=document.createElement("canvas"),{$canvas:n,width:a,height:o}=this;if(i.width=a,i.height=o,!n)return void e(i);const r=n.querySelector(this.$getTagNameOf("cropper-image"));r?r.$ready().then((s=>{const n=i.getContext("2d");if(n){const[e,h,c,l,d,p]=r.$getTransform(),g=s.naturalWidth/2,m=s.naturalHeight/2,b=-this.x,f=-this.y,v=(b*l-c*f)/(e*l-c*h),w=(f-h*v)/l,y=e*v+c*w+d,C=h*v+l*w+p;n.fillStyle="transparent",n.fillRect(0,0,a,o),u(t)&&$(t.beforeDraw)&&t.beforeDraw.call(this,n,i),n.save(),n.translate(g,m),n.transform(e,h,c,l,y,C),n.translate(-g,-m),n.drawImage(s,0,0),n.restore()}e(i)})).catch(s):e(i)})).then((e=>{if(u(t)&&(c(t.width)||c(t.height))){let{width:s,height:i}=e;if(({width:s,height:i}=M({aspectRatio:s/i,width:t.width,height:t.height})),s!==e.width){const t=document.createElement("canvas"),n=t.getContext("2d");return t.width=s,t.height=i,n&&n.drawImage(e,0,0,s,i),t}}return e}))}}H.$name="cropper-selection",H.$version="2.0.0-beta.1";class K extends O{constructor(){super(...arguments),this.$style=":host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}",this.bordered=!1,this.columns=3,this.covered=!1,this.rows=3,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["bordered","columns","covered","rows"])}$propertyChangedCallback(t,e,s){Object.is(s,e)||(super.$propertyChangedCallback(t,e,s),"rows"!==t&&"columns"!==t||this.$render())}connectedCallback(){super.connectedCallback(),this.$render()}$render(){const t=this.$getShadowRoot(),e=document.createDocumentFragment();for(let t=0;t<this.rows;t+=1){const t=document.createElement("span");t.setAttribute("role","row");for(let e=0;e<this.columns;e+=1){const e=document.createElement("span");e.setAttribute("role","gridcell"),t.appendChild(e)}e.appendChild(t)}t&&(t.innerHTML="",t.appendChild(e))}}K.$name="cropper-grid",K.$version="2.0.0-beta.1";class U extends O{constructor(){super(...arguments),this.$style=':host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}',this.centered=!1,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["centered"])}}U.$name="cropper-crosshair",U.$version="2.0.0-beta.1";const q=new WeakMap,F=new WeakMap,Z=new WeakMap;class G extends O{constructor(){super(...arguments),this.$onSelectionChange=null,this.$onSourceImageLoad=null,this.$onSourceImageTransform=null,this.$scale=1,this.$style=":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}",this.resize="vertical",this.selection="",this.slottable=!1}set $image(t){q.set(this,t)}get $image(){return q.get(this)}set $sourceImage(t){Z.set(this,t)}get $sourceImage(){return Z.get(this)}set $selection(t){F.set(this,t)}get $selection(){return F.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["resize","selection"])}connectedCallback(){super.connectedCallback();let t=null;if(t=this.selection?this.ownerDocument.querySelector(this.selection):this.closest(this.$getTagNameOf("cropper-selection")),p(t)){this.$selection=t,this.$onSelectionChange=this.$handleSelectionChange.bind(this),y(t,"change",this.$onSelectionChange);const e=t.closest(this.$getTagNameOf("cropper-canvas"));if(e){const t=e.querySelector(this.$getTagNameOf("cropper-image"));t&&(this.$sourceImage=t,this.$image=t.cloneNode(!0),this.$getShadowRoot().appendChild(this.$image),this.$onSourceImageLoad=this.$handleSourceImageLoad.bind(this),this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this),y(t.$image,"load",this.$onSourceImageLoad),y(t,"transform",this.$onSourceImageTransform))}this.$render()}}disconnectedCallback(){const{$selection:t,$sourceImage:e}=this;t&&this.$onSelectionChange&&(w(t,"change",this.$onSelectionChange),this.$onSelectionChange=null),e&&this.$onSourceImageLoad&&(w(e.$image,"load",this.$onSourceImageLoad),this.$onSourceImageLoad=null),e&&this.$onSourceImageTransform&&(w(e,"transform",this.$onSourceImageTransform),this.$onSourceImageTransform=null),super.disconnectedCallback()}$handleSelectionChange(t){this.$render(t.detail)}$handleSourceImageLoad(){const{$image:t,$sourceImage:e}=this,s=t.getAttribute("src"),i=e.getAttribute("src");i&&i!==s&&(t.setAttribute("src",i),t.$ready((()=>{setTimeout((()=>{const{x:t,y:s}=this.$selection;this.$transformImageByOffset(e.$getTransform(),-t,-s)}))})))}$handleSourceImageTransform(t){const{x:e,y:s}=this.$selection;this.$transformImageByOffset(t.detail.matrix,-e,-s)}$render(t){const{x:e,y:s,width:i,height:n}=t||this.$selection,a={},{clientWidth:o,clientHeight:r}=this;let h=o,c=r,l=NaN;switch(this.resize){case"both":l=1,h=i,c=n,a.width=i,a.height=n;break;case"horizontal":l=r/n,h=i*l,a.width=h;break;case"vertical":l=o/i,c=n*l,a.height=c;break;default:o>0?l=o/i:r>0&&(l=r/n)}this.$scale=l,this.$setStyles(a),this.$sourceImage&&this.$transformImageByOffset(this.$sourceImage.$getTransform(),-e,-s)}$transformImageByOffset(t,e,s){const{$image:i,$scale:n,$sourceImage:a}=this;if(a&&i&&n>0){const[a,o,r,h,c,l]=t,d=(e*h-r*s)/(a*h-r*o),u=(s-o*d)/h,$=a*d+r*u+c,p=o*d+h*u+l;i.$ready((t=>{this.$setStyles.call(i,{width:t.naturalWidth*n,height:t.naturalHeight*n})})),i.$setTransform(a,o,r,h,$*n,p*n)}}}G.$name="cropper-viewer",G.$version="2.0.0-beta.1";export{R as CropperCanvas,U as CropperCrosshair,O as CropperElement,K as CropperGrid,j as CropperHandle,N as CropperImage,H as CropperSelection,L as CropperShade,G as CropperViewer};

dist/elements.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).CropperElements={})}(this,(function(t){"use strict";const e="undefined"!=typeof window&&void 0!==window.document,s=e?window:{},i=!!e&&"ontouchstart"in s.document.documentElement,n=!!e&&"PointerEvent"in s,o="cropper-canvas",a="cropper-image",r="cropper-selection",h="select",c="move",l="scale",d="rotate",u="transform",p="none",$="n-resize",g="e-resize",m="s-resize",b="w-resize",f="ne-resize",v="nw-resize",w="se-resize",y="sw-resize",C=n?"pointerdown":i?"touchstart":"mousedown",k=n?"pointermove":i?"touchmove":"mousemove",x=n?"pointerup pointercancel":i?"touchend touchcancel":"mouseup",S="error",A="keydown",M="load",z="wheel",E="action",D="actionend",T="actionstart",P="change",O="transform";const I=Number.isNaN||s.isNaN;function R(t){return"number"==typeof t&&!I(t)}function Y(t){return R(t)&&t>0&&t<1/0}function X(t){return"object"==typeof t&&null!==t}const{hasOwnProperty:N}=Object.prototype;function W(t){if(!X(t))return!1;try{const{constructor:e}=t,{prototype:s}=e;return e&&s&&N.call(s,"isPrototypeOf")}catch(t){return!1}}function j(t){return"function"==typeof t}function B(t){return"object"==typeof t&&null!==t&&1===t.nodeType}const H=/([a-z\d])([A-Z])/g;function K(t){return String(t).replace(H,"$1-$2").toLowerCase()}const U=/-[A-z\d]/g;function q(t){return t.replace(U,(t=>t.slice(1).toUpperCase()))}const L=/\s\s*/;function F(t,e,s,i){e.trim().split(L).forEach((e=>{t.removeEventListener(e,s,i)}))}function _(t,e,s,i){e.trim().split(L).forEach((e=>{t.addEventListener(e,s,i)}))}function G(t,e,s,i){_(t,e,s,Object.assign(Object.assign({},i),{once:!0}))}const V={bubbles:!0,cancelable:!0,composed:!0};const Z=Promise.resolve();function J(t){const{documentElement:e}=t.ownerDocument,i=t.getBoundingClientRect();return{left:i.left+(s.pageXOffset-e.clientLeft),top:i.top+(s.pageYOffset-e.clientTop)}}const Q=/deg|g?rad|turn$/i;function tt(t){const e=parseFloat(t)||0;if(0!==e){const[s="rad"]=String(t).match(Q)||[];switch(s.toLowerCase()){case"deg":return e/360*(2*Math.PI);case"grad":return e/400*(2*Math.PI);case"turn":return e*(2*Math.PI)}}return e}const et="contain";function st(t,e="contain"){const{aspectRatio:s}=t;let{width:i,height:n}=t;const o=Y(i),a=Y(n);if(o&&a){const t=n*s;e===et&&t>i||"cover"===e&&t<i?n=i/s:i=n*s}else o?n=i/s:a&&(i=n*s);return{width:i,height:n}}const it=/left|top|width|height/i,nt="open",ot=new WeakMap,at=new WeakMap,rt=new Map,ht=s.document&&Array.isArray(s.document.adoptedStyleSheets)&&"replaceSync"in s.CSSStyleSheet.prototype;class ct extends HTMLElement{constructor(){var t,e;super(),this.shadowRootMode=nt,this.slottable=!0;const s=null===(e=null===(t=Object.getPrototypeOf(this))||void 0===t?void 0:t.constructor)||void 0===e?void 0:e.$name;s&&rt.set(s,this.tagName.toLowerCase())}get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,e,s){if(Object.is(s,e))return;const i=q(t);let n=s;switch(typeof this[i]){case"boolean":n=null!==s&&"false"!==s;break;case"number":n=Number(s)}switch(this[i]=n,t){case"theme-color":{const t=at.get(this),e=this.$sharedStyle;t&&e&&(ht?t.replaceSync(e):t.textContent=e);break}}}$propertyChangedCallback(t,e,s){if(!Object.is(s,e))switch(t=K(t),typeof s){case"boolean":!0===s?this.hasAttribute(t)||this.setAttribute(t,""):this.removeAttribute(t);break;case"number":s=I(s)?"":String(s);default:s?this.getAttribute(t)!==s&&this.setAttribute(t,s):this.removeAttribute(t)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((t=>{const e=q(t);let s=this[e];(function(t){return void 0===t})(s)||this.$propertyChangedCallback(e,void 0,s),Object.defineProperty(this,e,{enumerable:!0,configurable:!0,get:()=>s,set(t){const i=s;s=t,this.$propertyChangedCallback(e,i,t)}})}));const t=this.attachShadow({mode:this.shadowRootMode||nt});if(this.shadowRoot||ot.set(this,t),at.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){const e=document.createElement("template");e.innerHTML=this.$template,t.appendChild(e.content)}if(this.slottable){const e=document.createElement("slot");t.appendChild(e)}}disconnectedCallback(){at.has(this)&&at.delete(this),ot.has(this)&&ot.delete(this)}$getTagNameOf(t){var e;return null!==(e=rt.get(t))&&void 0!==e?e:t}$setStyles(t){return Object.keys(t).forEach((e=>{let s=t[e];R(s)&&(s=0!==s&&it.test(e)?`${s}px`:String(s)),this.style[e]=s})),this}$getShadowRoot(){return this.shadowRoot||ot.get(this)}$addStyles(t){let e;const s=this.$getShadowRoot();return ht?(e=new CSSStyleSheet,e.replaceSync(t),s.adoptedStyleSheets=s.adoptedStyleSheets.concat(e)):(e=document.createElement("style"),e.textContent=t,s.appendChild(e)),e}$emit(t,e,s){return function(t,e,s,i){return t.dispatchEvent(new CustomEvent(e,Object.assign(Object.assign(Object.assign({},V),{detail:s}),i)))}(this,t,e,s)}$nextTick(t){return function(t,e){return e?Z.then(t?e.bind(t):e):Z}(this,t)}static $define(t,i){X(t)&&(i=t,t=""),t||(t=this.$name||this.name),t=K(t);const{customElements:n}=s;e&&n&&!n.get(t)&&n.define(t,this,i)}}ct.$version="2.0.0-beta";class lt extends ct{constructor(){super(...arguments),this.$onPointerDown=null,this.$onPointerMove=null,this.$onPointerUp=null,this.$onWheel=null,this.$wheeling=!1,this.$pointers=new Map,this.$style=':host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}',this.$action=p,this.background=!1,this.disabled=!1,this.scaleStep=.1,this.themeColor="#39f"}static get observedAttributes(){return super.observedAttributes.concat(["background","disabled","scale-step"])}connectedCallback(){super.connectedCallback(),this.disabled||this.$bind()}disconnectedCallback(){this.disabled||this.$unbind(),super.disconnectedCallback()}$propertyChangedCallback(t,e,s){if(!Object.is(s,e)&&(super.$propertyChangedCallback(t,e,s),"disabled"===t))s?this.$unbind():this.$bind()}$bind(){this.$onPointerDown||(this.$onPointerDown=this.$handlePointerDown.bind(this),_(this,C,this.$onPointerDown)),this.$onPointerMove||(this.$onPointerMove=this.$handlePointerMove.bind(this),_(this.ownerDocument,k,this.$onPointerMove)),this.$onPointerUp||(this.$onPointerUp=this.$handlePointerUp.bind(this),_(this.ownerDocument,x,this.$onPointerUp)),this.$onWheel||(this.$onWheel=this.$handleWheel.bind(this),_(this,z,this.$onWheel,{passive:!1,capture:!0}))}$unbind(){this.$onPointerDown&&(F(this,C,this.$onPointerDown),this.$onPointerDown=null),this.$onPointerMove&&(F(this.ownerDocument,k,this.$onPointerMove),this.$onPointerMove=null),this.$onPointerUp&&(F(this.ownerDocument,x,this.$onPointerUp),this.$onPointerUp=null),this.$onWheel&&(F(this,z,this.$onWheel,{capture:!0}),this.$onWheel=null)}$handlePointerDown(t){const{buttons:e,button:s,type:i}=t;if(this.disabled||("pointerdown"===i&&"mouse"===t.pointerType||"mousedown"===i)&&(R(e)&&1!==e||R(s)&&0!==s||t.ctrlKey))return;const{$pointers:n}=this;let o="";if(t.changedTouches)Array.from(t.changedTouches).forEach((({identifier:t,pageX:e,pageY:s})=>{n.set(t,{startX:e,startY:s,endX:e,endY:s})}));else{const{pointerId:e=0,pageX:s,pageY:i}=t;n.set(e,{startX:s,startY:i,endX:s,endY:i})}n.size>1?o=u:B(t.target)&&(o=t.target.action||t.target.getAttribute("action")||""),!1!==this.$emit(T,{action:o,relatedEvent:t})&&(t.preventDefault(),this.$action=o,this.style.willChange="transform")}$handlePointerMove(t){const{$action:e,$pointers:s}=this;if(this.disabled||e===p||0===s.size)return;if(!1===this.$emit("actionmove",{action:e,relatedEvent:t}))return;if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach((({identifier:t,pageX:e,pageY:i})=>{const n=s.get(t);n&&Object.assign(n,{endX:e,endY:i})}));else{const{pointerId:e=0,pageX:i,pageY:n}=t,o=s.get(e);o&&Object.assign(o,{endX:i,endY:n})}const i={action:e,relatedEvent:t};if(e===u){const e=new Map(s);let n=0,o=0,a=0,r=0,h=t.pageX,c=t.pageY;s.forEach(((t,s)=>{e.delete(s),e.forEach((e=>{let s=e.startX-t.startX,i=e.startY-t.startY,l=e.endX-t.endX,d=e.endY-t.endY,u=0,p=0,$=0,g=0;if(0===s?i<0?$=2*Math.PI:i>0&&($=Math.PI):s>0?$=Math.PI/2+Math.atan(i/s):s<0&&($=1.5*Math.PI+Math.atan(i/s)),0===l?d<0?g=2*Math.PI:d>0&&(g=Math.PI):l>0?g=Math.PI/2+Math.atan(d/l):l<0&&(g=1.5*Math.PI+Math.atan(d/l)),g>0||$>0){const s=g-$,i=Math.abs(s);i>n&&(n=i,a=s,h=(t.startX+e.startX)/2,c=(t.startY+e.startY)/2)}if(s=Math.abs(s),i=Math.abs(i),l=Math.abs(l),d=Math.abs(d),s>0&&i>0?u=Math.sqrt(s*s+i*i):s>0?u=s:i>0&&(u=i),l>0&&d>0?p=Math.sqrt(l*l+d*d):l>0?p=l:d>0&&(p=d),u>0&&p>0){const s=(p-u)/u,i=Math.abs(s);i>o&&(o=i,r=s,h=(t.startX+e.startX)/2,c=(t.startY+e.startY)/2)}}))}));const u=n>0,$=o>0;u&&$?(i.rotate=a,i.scale=r,i.centerX=h,i.centerY=c):u?(i.action=d,i.rotate=a,i.centerX=h,i.centerY=c):$?(i.action=l,i.scale=r,i.centerX=h,i.centerY=c):i.action=p}else{const[t]=Array.from(s.values());Object.assign(i,t)}s.forEach((t=>{t.startX=t.endX,t.startY=t.endY})),i.action!==p&&this.$emit(E,i,{cancelable:!1})}$handlePointerUp(t){const{$action:e,$pointers:s}=this;if(!this.disabled&&e!==p&&!1!==this.$emit(D,{action:e,relatedEvent:t})){if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach((({identifier:t})=>{s.delete(t)}));else{const{pointerId:e=0}=t;s.delete(e)}0===s.size&&(this.style.willChange="",this.$action=p)}}$handleWheel(t){if(this.disabled)return;if(t.preventDefault(),this.$wheeling)return;this.$wheeling=!0,setTimeout((()=>{this.$wheeling=!1}),50);const e=(t.deltaY>0?1:-1)*this.scaleStep;this.$emit(E,{action:l,scale:e,relatedEvent:t},{cancelable:!1})}$setAction(t){return"string"==typeof t&&(this.$action=t),this}$toCanvas(t){return new Promise(((e,s)=>{if(!this.isConnected)return void s(new Error("The current element is not connected to the DOM."));const i=document.createElement("canvas"),n=this.offsetWidth,o=this.offsetHeight;i.width=n,i.height=o;const r=this.querySelector(this.$getTagNameOf(a));r?r.$ready().then((s=>{const a=i.getContext("2d");if(a){const[e,h,c,l,d,u]=r.$getTransform(),p=s.naturalWidth/2,$=s.naturalHeight/2;a.fillStyle="transparent",a.fillRect(0,0,n,o),W(t)&&j(t.beforeDraw)&&t.beforeDraw.call(this,a,i),a.save(),a.translate(p,$),a.transform(e,h,c,l,d,u),a.translate(-p,-$),a.drawImage(s,0,0),a.restore()}e(i)})).catch(s):e(i)})).then((e=>{if(W(t)&&(Y(t.width)||Y(t.height))){let{width:s,height:i}=e;if(({width:s,height:i}=st({aspectRatio:s/i,width:t.width,height:t.height})),s!==e.width){const t=document.createElement("canvas"),n=t.getContext("2d");return t.width=s,t.height=i,n&&n.drawImage(e,0,0,s,i),t}}return e}))}}lt.$name=o,lt.$version="2.0.0-beta";const dt=new WeakMap,ut=["alt","crossorigin","decoding","importance","loading","referrerpolicy","sizes","src","srcset"];class pt extends ct{constructor(){super(...arguments),this.$matrix=[1,0,0,1,0,0],this.$onCanvasAction=null,this.$style=":host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}",this.$image=new Image,this.rotatable=!0,this.scalable=!0,this.skewable=!0,this.slottable=!1,this.translatable=!0}set $canvas(t){dt.set(this,t)}get $canvas(){return dt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(ut,["rotatable","scalable","skewable","translatable"])}attributeChangedCallback(t,e,s){Object.is(s,e)||(super.attributeChangedCallback(t,e,s),ut.includes(t)&&this.$image.setAttribute(t,s))}connectedCallback(){super.connectedCallback();const{$image:t}=this;t.src&&this.$ready((t=>{this.$setStyles({width:t.naturalWidth,height:t.naturalHeight})}));const e=this.closest(this.$getTagNameOf(o));e&&(this.$canvas=e,this.$setStyles({position:"absolute"}),t.src&&this.$ready((()=>{this.$center("cover")})),this.$onCanvasAction=this.$handleAction.bind(this),_(e,E,this.$onCanvasAction)),this.$getShadowRoot().appendChild(t)}disconnectedCallback(){const{$canvas:t}=this;t&&this.$onCanvasAction&&(F(t,E,this.$onCanvasAction),this.$onCanvasAction=null),this.$getShadowRoot().removeChild(this.$image),super.disconnectedCallback()}$handleAction(t){if(this.hidden||!(this.rotatable||this.scalable||this.translatable))return;const{$canvas:e}=this,{detail:s}=t;if(s){const{relatedEvent:t}=s;let{action:i}=s;switch(i!==u||this.rotatable&&this.scalable||(i=this.rotatable?d:this.scalable?l:p),i){case c:if(this.translatable){const i=this.$getTagNameOf(r);let n=e.querySelector(i);n&&n.multiple&&!n.active&&(n=e.querySelector(`${i}[active]`)),n&&!n.hidden&&n.movable&&t&&n.contains(t.target)||this.$move(s.endX-s.startX,s.endY-s.startY)}break;case d:if(this.rotatable)if(t){const{x:e,y:i}=this.getBoundingClientRect();this.$rotate(s.rotate,t.clientX-e,t.clientY-i)}else this.$rotate(s.rotate);break;case l:if(this.scalable)if(t){const{x:e,y:i}=this.getBoundingClientRect();this.$zoom(s.scale,t.clientX-e,t.clientY-i)}else this.$zoom(s.scale);break;case u:if(this.rotatable&&this.scalable){const{rotate:e}=s;let{scale:i}=s;i<0?i=1/(1-i):i+=1;const n=Math.cos(e),o=Math.sin(e),[a,r,h,c]=[n*i,o*i,-o*i,n*i];if(t){const e=this.getBoundingClientRect(),s=t.clientX-e.x,i=t.clientY-e.y,[n,o,l,d]=this.$matrix,u=e.width/2,p=i-e.height/2,$=((s-u)*d-l*p)/(n*d-l*o),g=(p-o*$)/d;this.$transform(a,r,h,c,$*(1-a)+g*h,g*(1-c)+$*r)}else this.$transform(a,r,h,c,0,0)}}}}$ready(t){const{$image:e}=this,s=new Promise(((t,s)=>{const i=new Error("Failed to load the image source");if(e.complete)e.naturalWidth>0&&e.naturalHeight>0?t(e):s(i);else{const n=()=>{F(e,S,o),t(e)},o=()=>{F(e,M,n),s(i)};G(e,M,n),G(e,S,o)}}));return j(t)&&s.then((e=>(t(e),e))),s}$center(t){const{parentElement:e}=this;if(!e)return this;const s=e.getBoundingClientRect(),i=s.width,n=s.height,{x:o,y:a,width:r,height:h}=this.getBoundingClientRect(),c=o+r/2,l=a+h/2,d=s.x+i/2,u=s.y+n/2;if(this.$move(d-c,u-l),t&&(r!==i||h!==n)){const e=i/r,s=n/h;switch(t){case"cover":this.$scale(Math.max(e,s));break;case"contain":this.$scale(Math.min(e,s))}}return this}$move(t,e=t){if(this.translatable&&R(t)&&R(e)){const[s,i,n,o]=this.$matrix,a=(t*o-n*e)/(s*o-n*i),r=(e-i*a)/o;this.$translate(a,r)}return this}$moveTo(t,e=t){if(this.translatable&&R(t)&&R(e)){const[s,i,n,o]=this.$matrix,a=(t*o-n*e)/(s*o-n*i),r=(e-i*a)/o;this.$setTransform(s,i,n,o,a,r)}return this}$rotate(t,e,s){if(this.rotatable){const i=tt(t),n=Math.cos(i),o=Math.sin(i),[a,r,h,c]=[n,o,-o,n];if(R(e)&&R(s)){const[t,i,n,o]=this.$matrix,{width:l,height:d}=this.getBoundingClientRect(),u=s-d/2,p=((e-l/2)*o-n*u)/(t*o-n*i),$=(u-i*p)/o;this.$transform(a,r,h,c,p*(1-a)-$*h,$*(1-c)-p*r)}else this.$transform(a,r,h,c,0,0)}return this}$zoom(t,e,s){if(!this.scalable||0===t)return this;if(t<0?t=1/(1-t):t+=1,R(e)&&R(s)){const[i,n,o,a]=this.$matrix,{width:r,height:h}=this.getBoundingClientRect(),c=s-h/2,l=((e-r/2)*a-o*c)/(i*a-o*n),d=(c-n*l)/a;this.$transform(t,0,0,t,l*(1-t),d*(1-t))}else this.$scale(t);return this}$scale(t,e=t){return this.scalable&&this.$transform(t,0,0,e,0,0),this}$skew(t,e=0){if(this.skewable){const s=tt(t),i=tt(e);this.$transform(1,Math.tan(i),Math.tan(s),1,0,0)}return this}$translate(t,e=t){return this.translatable&&R(t)&&R(e)&&this.$transform(1,0,0,1,t,e),this}$transform(t,e,s,i,n,o){if(R(t)&&R(e)&&R(s)&&R(i)&&R(n)&&R(o)){const[a,r,h,c,l,d]=this.$matrix,[u,p,$,g,m,b]=[t,e,s,i,n,o];return this.$setTransform(a*u+h*p,r*u+c*p,a*$+h*g,r*$+c*g,a*m+h*b+l,r*m+c*b+d)}return this}$setTransform(t,e,s,i,n,o){if((this.rotatable||this.scalable||this.skewable||this.translatable)&&(Array.isArray(t)&&([t,e,s,i,n,o]=t),R(t)&&R(e)&&R(s)&&R(i)&&R(n)&&R(o))){const a=[t,e,s,i,n,o];if(!1===this.$emit(O,{matrix:a,oldMatrix:this.$matrix}))return this;this.$matrix=a,this.style.transform=`matrix(${a.join(", ")})`}return this}$getTransform(){return this.$matrix.slice()}$resetTransform(){return this.$setTransform([1,0,0,1,0,0])}}pt.$name=a,pt.$version="2.0.0-beta";const $t=new WeakMap;class gt extends ct{constructor(){super(...arguments),this.$onCanvasChange=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=null,this.$style=":host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}",this.x=0,this.y=0,this.width=0,this.height=0,this.slottable=!1,this.themeColor="rgba(0, 0, 0, 0.65)"}set $canvas(t){$t.set(this,t)}get $canvas(){return $t.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["height","width","x","y"])}connectedCallback(){super.connectedCallback();const t=this.closest(this.$getTagNameOf(o));if(t){this.$canvas=t,this.style.position="absolute";const e=t.querySelector(this.$getTagNameOf(r));e&&(this.$onCanvasActionStart=t=>{e.hidden&&t.detail.action===h&&(this.hidden=!1)},this.$onCanvasActionEnd=t=>{e.hidden&&t.detail.action===h&&(this.hidden=!0)},this.$onCanvasChange=t=>{const{x:s,y:i,width:n,height:o}=t.detail;this.$change(s,i,n,o),(e.hidden||0===s&&0===i&&0===n&&0===o)&&(this.hidden=!0)},_(t,T,this.$onCanvasActionStart),_(t,D,this.$onCanvasActionEnd),_(t,P,this.$onCanvasChange))}this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&(this.$onCanvasActionStart&&(F(t,T,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(F(t,D,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasChange&&(F(t,P,this.$onCanvasChange),this.$onCanvasChange=null)),super.disconnectedCallback()}$change(t,e,s=this.width,i=this.height){return R(t)&&R(e)&&R(s)&&R(i)&&(t!==this.x||e!==this.y||s!==this.width||i!==this.height)?(this.hidden&&(this.hidden=!1),this.x=t,this.y=e,this.width=s,this.height=i,this.$render()):this}$reset(){return this.$change(0,0,0,0)}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height,outlineWidth:s.innerWidth})}}gt.$name="cropper-shade",gt.$version="2.0.0-beta";class mt extends ct{constructor(){super(...arguments),this.$onCanvasCropEnd=null,this.$onCanvasCropStart=null,this.$style=':host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}',this.action=p,this.plain=!1,this.slottable=!1,this.themeColor="rgba(51, 153, 255, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["action","plain"])}}mt.$name="cropper-handle",mt.$version="2.0.0-beta";const bt=new WeakMap;class ft extends ct{constructor(){super(...arguments),this.$onCanvasAction=null,this.$onCanvasActionStart=null,this.$onDocumentKeyDown=null,this.$style=':host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}',this.x=0,this.y=0,this.width=0,this.height=0,this.aspectRatio=NaN,this.initialAspectRatio=NaN,this.initialCoverage=NaN,this.active=!1,this.movable=!1,this.resizable=!1,this.zoomable=!1,this.multiple=!1,this.keyboard=!1,this.outlined=!1,this.precise=!1}set $canvas(t){bt.set(this,t)}get $canvas(){return bt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["active","aspect-ratio","height","initial-aspect-ratio","initial-coverage","keyboard","movable","multiple","outlined","precise","resizable","width","x","y","zoomable"])}$propertyChangedCallback(t,e,s){if(!Object.is(s,e))switch(super.$propertyChangedCallback(t,e,s),t){case"aspectRatio":Y(s)||(this.aspectRatio=NaN);break;case"initialAspectRatio":Y(s)||(this.initialAspectRatio=NaN);break;case"initialCoverage":(!Y(s)||s>1)&&(this.initialCoverage=NaN);break;case"keyboard":this.$nextTick((()=>{this.$canvas&&(s?this.$onDocumentKeyDown||(this.$onDocumentKeyDown=this.$handleKeyDown.bind(this),_(this.ownerDocument,A,this.$onDocumentKeyDown)):this.$onDocumentKeyDown&&(F(this.ownerDocument,A,this.$onDocumentKeyDown),this.$onDocumentKeyDown=null))}));break;case"multiple":this.$nextTick((()=>{this.$canvas&&(s?(this.active=!0,this.$onCanvasActionStart||(this.$onCanvasActionStart=this.$handleActionStart.bind(this),_(this.$canvas,T,this.$onCanvasActionStart))):(this.$onCanvasActionStart&&(F(this.$canvas,T,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$getSelections().forEach(((t,e)=>{e>0&&this.$removeSelection(t)})),this.active=!1))}))}}connectedCallback(){super.connectedCallback(),this.multiple&&!this.active&&(this.active=!0);const t=this.closest(this.$getTagNameOf(o));if(t){this.$canvas=t,this.$setStyles({position:"absolute",transform:`translate(${this.x}px, ${this.y}px)`}),this.hidden||this.$render();const{initialCoverage:e,parentElement:s}=this;if(Y(e)&&s){const t=this.aspectRatio||this.initialAspectRatio,{offsetWidth:i,offsetHeight:n}=s;let o=i*e,a=n*e;Y(t)&&({width:o,height:a}=st({aspectRatio:t,width:o,height:a})),this.$change(this.x,this.y,o,a),this.$center()}this.$onCanvasAction=this.$handleAction.bind(this),_(t,E,this.$onCanvasAction)}else this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&this.$onCanvasAction&&(F(t,E,this.$onCanvasAction),this.$onCanvasAction=null),super.disconnectedCallback()}$getSelections(){let t=[];return this.parentElement&&(t=Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(r)))),t}$createSelection(){const t=this.cloneNode(!0);return this.hasAttribute("id")&&t.removeAttribute("id"),this.active=!1,this.parentElement&&this.parentElement.insertBefore(t,this.nextSibling),t}$removeSelection(t=this){if(this.parentElement){const e=this.$getSelections();if(e.length>1){const s=e.indexOf(t),i=e[s+1]||e[s-1];i&&(this.parentElement.removeChild(t),i.active=!0,i.$emit(P,{x:i.x,y:i.y,width:i.width,height:i.height}))}else this.$reset(),this.hidden=!0}}$handleActionStart(t){if(this.hidden||!this.multiple||this.active)return;const{detail:e}=t,{relatedEvent:s}=e;s.target===this&&this.parentElement&&(this.$getSelections().forEach((t=>{t.active=!1})),this.active=!0,this.$emit(P,{x:this.x,y:this.y,width:this.width,height:this.height}))}$handleAction(t){if(this.multiple&&!this.active)return;const{currentTarget:e,detail:s}=t;if(e&&s){const{relatedEvent:i}=s;let{action:n}=s;if(!n&&this.multiple&&(n=null==i?void 0:i.target.action),!n||this.hidden&&n!==h)return;const o=s.endX-s.startX,a=s.endY-s.startY,{width:r,height:d}=this;let{aspectRatio:u}=this;switch(!Y(u)&&t.shiftKey&&(u=Y(r)&&Y(d)?r/d:1),n){case h:{const{$canvas:t}=this,i=J(e);(this.multiple&&!this.hidden?this.$createSelection():this).$change(s.startX-i.left,s.startY-i.top,o,a,u),n=w,o<0?a>0?n=y:a<0&&(n=v):o>0&&a<0&&(n=f),t&&(t.$action=n);break}case c:!this.movable||i&&!this.contains(i.target)||this.$move(o,a);break;case l:if(i&&this.zoomable){const t=J(e);this.$zoom(s.scale,i.pageX-t.left,i.pageY-t.top)}break;default:this.$resize(n,o,a,u)}}}$handleKeyDown(t){if(!(this.hidden||!this.keyboard||this.multiple&&!this.active||t.defaultPrevented))switch(t.key){case"Backspace":t.metaKey&&(t.preventDefault(),this.$removeSelection());break;case"Delete":t.preventDefault(),this.$removeSelection();break;case"ArrowLeft":t.preventDefault(),this.$move(-1,0);break;case"ArrowRight":t.preventDefault(),this.$move(1,0);break;case"ArrowUp":t.preventDefault(),this.$move(0,-1);break;case"ArrowDown":t.preventDefault(),this.$move(0,1);break;case"+":t.preventDefault(),this.$zoom(.1);break;case"-":t.preventDefault(),this.$zoom(-.1)}}$center(){const{parentElement:t}=this;if(!t)return this;const e=(t.offsetWidth-this.width)/2,s=(t.offsetHeight-this.height)/2;return this.$change(e,s)}$move(t,e=t){return this.$moveTo(this.x+t,this.y+e)}$moveTo(t,e=t){return this.movable?this.$change(t,e):this}$resize(t,e=0,s=0,i=this.aspectRatio){if(!this.resizable)return this;const n=Y(i),{$canvas:o}=this;let{x:a,y:r,width:h,height:c}=this;switch(t){case $:r+=s,c-=s,c<0&&(t=m,c=-c,r-=c),n&&(a+=(e=s*i)/2,h-=e,h<0&&(h=-h,a-=h));break;case g:h+=e,h<0&&(t=b,h=-h,a-=h),n&&(r-=(s=e/i)/2,c+=s,c<0&&(c=-c,r-=c));break;case m:c+=s,c<0&&(t=$,c=-c,r-=c),n&&(a-=(e=s*i)/2,h+=e,h<0&&(h=-h,a-=h));break;case b:a+=e,h-=e,h<0&&(t=g,h=-h,a-=h),n&&(r+=(s=e/i)/2,c-=s,c<0&&(c=-c,r-=c));break;case f:n&&(s=-e/i),r+=s,c-=s,h+=e,h<0&&c<0?(t=y,h=-h,c=-c,a-=h,r-=c):h<0?(t=v,h=-h,a-=h):c<0&&(t=w,c=-c,r-=c);break;case v:n&&(s=e/i),a+=e,r+=s,h-=e,c-=s,h<0&&c<0?(t=w,h=-h,c=-c,a-=h,r-=c):h<0?(t=f,h=-h,a-=h):c<0&&(t=y,c=-c,r-=c);break;case w:n&&(s=e/i),h+=e,c+=s,h<0&&c<0?(t=v,h=-h,c=-c,a-=h,r-=c):h<0?(t=y,h=-h,a-=h):c<0&&(t=f,c=-c,r-=c);break;case y:n&&(s=-e/i),a+=e,h-=e,c+=s,h<0&&c<0?(t=f,h=-h,c=-c,a-=h,r-=c):h<0?(t=w,h=-h,a-=h):c<0&&(t=v,c=-c,r-=c)}return o&&o.$setAction(t),this.$change(a,r,h,c)}$zoom(t,e,s){if(!this.zoomable||0===t)return this;t<0?t=1/(1-t):t+=1;const{width:i,height:n}=this,o=i*t,a=n*t;let r=this.x,h=this.y;return R(e)&&R(s)?(r-=(o-i)*((e-this.x)/i),h-=(a-n)*((s-this.y)/n)):(r-=(o-i)/2,h-=(a-n)/2),this.$change(r,h,o,a)}$change(t,e,s=this.width,i=this.height,n=this.aspectRatio){return R(t)&&R(e)&&R(s)&&R(i)?(this.precise||(t=Math.round(t),e=Math.round(e),s=Math.round(s),i=Math.round(i)),t===this.x&&e===this.y&&s===this.width&&i===this.height?this:(this.hidden&&(this.hidden=!1),Y(n)&&({width:s,height:i}=st({aspectRatio:n,width:s,height:i},"cover")),!1===this.$emit(P,{x:t,y:e,width:s,height:i})?this:(this.x=t,this.y=e,this.width=s,this.height=i,this.$render()))):this}$reset(){return this.$change(0,0,0,0)}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height})}$toCanvas(t){return new Promise(((e,s)=>{if(!this.isConnected)return void s(new Error("The current element is not connected to the DOM."));const i=document.createElement("canvas"),{$canvas:n,width:o,height:r}=this;if(i.width=o,i.height=r,!n)return void e(i);const h=n.querySelector(this.$getTagNameOf(a));h?h.$ready().then((s=>{const n=i.getContext("2d");if(n){const[e,a,c,l,d,u]=h.$getTransform(),p=s.naturalWidth/2,$=s.naturalHeight/2,g=-this.x,m=-this.y,b=(g*l-c*m)/(e*l-c*a),f=(m-a*d)/l,v=e*b+c*f+d,w=a*b+l*f+u;n.fillStyle="transparent",n.fillRect(0,0,o,r),W(t)&&j(t.beforeDraw)&&t.beforeDraw.call(this,n,i),n.save(),n.translate(p,$),n.transform(e,a,c,l,v,w),n.translate(-p,-$),n.drawImage(s,0,0),n.restore()}e(i)})).catch(s):e(i)})).then((e=>{if(W(t)&&(Y(t.width)||Y(t.height))){let{width:s,height:i}=e;if(({width:s,height:i}=st({aspectRatio:s/i,width:t.width,height:t.height})),s!==e.width){const t=document.createElement("canvas"),n=t.getContext("2d");return t.width=s,t.height=i,n&&n.drawImage(e,0,0,s,i),t}}return e}))}}ft.$name=r,ft.$version="2.0.0-beta";class vt extends ct{constructor(){super(...arguments),this.$style=":host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}",this.bordered=!1,this.columns=3,this.covered=!1,this.rows=3,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["bordered","columns","covered","rows"])}$propertyChangedCallback(t,e,s){Object.is(s,e)||(super.$propertyChangedCallback(t,e,s),"rows"!==t&&"columns"!==t||this.$render())}connectedCallback(){super.connectedCallback(),this.$render()}$render(){const t=this.$getShadowRoot(),e=document.createDocumentFragment();for(let t=0;t<this.rows;t+=1){const t=document.createElement("span");t.setAttribute("role","row");for(let e=0;e<this.columns;e+=1){const e=document.createElement("span");e.setAttribute("role","gridcell"),t.appendChild(e)}e.appendChild(t)}t&&(t.innerHTML="",t.appendChild(e))}}vt.$name="cropper-grid",vt.$version="2.0.0-beta";class wt extends ct{constructor(){super(...arguments),this.$style=':host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}',this.centered=!1,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["centered"])}}wt.$name="cropper-crosshair",wt.$version="2.0.0-beta";const yt=new WeakMap,Ct=new WeakMap,kt=new WeakMap,xt="vertical";class St extends ct{constructor(){super(...arguments),this.$onSourceImageTransform=null,this.$onSelectionChange=null,this.$scale=1,this.$style=":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}",this.resize=xt,this.selection="",this.slottable=!1}set $image(t){yt.set(this,t)}get $image(){return yt.get(this)}set $sourceImage(t){kt.set(this,t)}get $sourceImage(){return kt.get(this)}set $selection(t){Ct.set(this,t)}get $selection(){return Ct.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["resize","selection"])}connectedCallback(){super.connectedCallback();let t=null;if(t=this.selection?this.ownerDocument.querySelector(this.selection):this.closest(this.$getTagNameOf(r)),B(t)){this.$selection=t,this.$onSelectionChange=this.$handleSelectionChange.bind(this),_(t,P,this.$onSelectionChange);const e=t.closest(this.$getTagNameOf(o));if(e){const t=e.querySelector(this.$getTagNameOf(a));t&&(this.$sourceImage=t,this.$image=t.cloneNode(!0),this.$getShadowRoot().appendChild(this.$image),this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this),_(t,O,this.$onSourceImageTransform))}this.$render()}}disconnectedCallback(){const{$selection:t,$sourceImage:e}=this;t&&this.$onSelectionChange&&(F(t,P,this.$onSelectionChange),this.$onSelectionChange=null),e&&this.$onSourceImageTransform&&(F(e,O,this.$onSourceImageTransform),this.$onSourceImageTransform=null),super.disconnectedCallback()}$handleSelectionChange(t){this.$render(t.detail)}$handleSourceImageTransform(t){const{x:e,y:s}=this.$selection;this.$transformImageByOffset(t.detail.matrix,-e,-s)}$render(t){const{x:e,y:s,width:i,height:n}=t||this.$selection,o={},{clientWidth:a,clientHeight:r}=this;let h=a,c=r,l=NaN;switch(this.resize){case"both":l=1,h=i,c=n,o.width=i,o.height=n;break;case"horizontal":l=r/n,h=i*l,o.width=h;break;case xt:l=a/i,c=n*l,o.height=c;break;default:a>0?l=a/i:r>0&&(l=r/n)}this.$scale=l,this.$setStyles(o),this.$sourceImage&&this.$transformImageByOffset(this.$sourceImage.$getTransform(),-e,-s)}$transformImageByOffset(t,e,s){const{$image:i,$scale:n,$sourceImage:o}=this;if(o&&i&&n>0){const[o,a,r,h,c,l]=t,d=(e*h-r*s)/(o*h-r*a),u=(s-a*d)/h,p=o*d+r*u+c,$=a*d+h*u+l;i.$ready((t=>{this.$setStyles.call(i,{width:t.naturalWidth*n,height:t.naturalHeight*n})})),i.$setTransform(o,a,r,h,p*n,$*n)}}}St.$name="cropper-viewer",St.$version="2.0.0-beta",t.CropperCanvas=lt,t.CropperCrosshair=wt,t.CropperElement=ct,t.CropperGrid=vt,t.CropperHandle=mt,t.CropperImage=pt,t.CropperSelection=ft,t.CropperShade=gt,t.CropperViewer=St,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).CropperElements={})}(this,(function(t){"use strict";const e="undefined"!=typeof window&&void 0!==window.document,s=e?window:{},i=!!e&&"ontouchstart"in s.document.documentElement,n=!!e&&"PointerEvent"in s,o="cropper-canvas",a="cropper-image",r="cropper-selection",h="select",c="move",l="scale",d="rotate",u="transform",$="none",p="n-resize",g="e-resize",m="s-resize",b="w-resize",f="ne-resize",v="nw-resize",w="se-resize",y="sw-resize",C=n?"pointerdown":i?"touchstart":"mousedown",k=n?"pointermove":i?"touchmove":"mousemove",x=n?"pointerup pointercancel":i?"touchend touchcancel":"mouseup",S="error",A="keydown",M="load",z="wheel",E="action",T="actionend",D="actionstart",P="change",I="transform";const O=Number.isNaN||s.isNaN;function R(t){return"number"==typeof t&&!O(t)}function Y(t){return R(t)&&t>0&&t<1/0}function X(t){return"object"==typeof t&&null!==t}const{hasOwnProperty:N}=Object.prototype;function W(t){if(!X(t))return!1;try{const{constructor:e}=t,{prototype:s}=e;return e&&s&&N.call(s,"isPrototypeOf")}catch(t){return!1}}function L(t){return"function"==typeof t}function j(t){return"object"==typeof t&&null!==t&&1===t.nodeType}const B=/([a-z\d])([A-Z])/g;function H(t){return String(t).replace(B,"$1-$2").toLowerCase()}const K=/-[A-z\d]/g;function U(t){return t.replace(K,(t=>t.slice(1).toUpperCase()))}const q=/\s\s*/;function F(t,e,s,i){e.trim().split(q).forEach((e=>{t.removeEventListener(e,s,i)}))}function _(t,e,s,i){e.trim().split(q).forEach((e=>{t.addEventListener(e,s,i)}))}function G(t,e,s,i){_(t,e,s,Object.assign(Object.assign({},i),{once:!0}))}const V={bubbles:!0,cancelable:!0,composed:!0};const Z=Promise.resolve();function J(t){const{documentElement:e}=t.ownerDocument,i=t.getBoundingClientRect();return{left:i.left+(s.pageXOffset-e.clientLeft),top:i.top+(s.pageYOffset-e.clientTop)}}const Q=/deg|g?rad|turn$/i;function tt(t){const e=parseFloat(t)||0;if(0!==e){const[s="rad"]=String(t).match(Q)||[];switch(s.toLowerCase()){case"deg":return e/360*(2*Math.PI);case"grad":return e/400*(2*Math.PI);case"turn":return e*(2*Math.PI)}}return e}const et="contain";function st(t,e="contain"){const{aspectRatio:s}=t;let{width:i,height:n}=t;const o=Y(i),a=Y(n);if(o&&a){const t=n*s;e===et&&t>i||"cover"===e&&t<i?n=i/s:i=n*s}else o?n=i/s:a&&(i=n*s);return{width:i,height:n}}const it=/left|top|width|height/i,nt="open",ot=new WeakMap,at=new WeakMap,rt=new Map,ht=s.document&&Array.isArray(s.document.adoptedStyleSheets)&&"replaceSync"in s.CSSStyleSheet.prototype;class ct extends HTMLElement{constructor(){var t,e;super(),this.shadowRootMode=nt,this.slottable=!0;const s=null===(e=null===(t=Object.getPrototypeOf(this))||void 0===t?void 0:t.constructor)||void 0===e?void 0:e.$name;s&&rt.set(s,this.tagName.toLowerCase())}get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,e,s){if(Object.is(s,e))return;const i=U(t);let n=s;switch(typeof this[i]){case"boolean":n=null!==s&&"false"!==s;break;case"number":n=Number(s)}switch(this[i]=n,t){case"theme-color":{const t=at.get(this),e=this.$sharedStyle;t&&e&&(ht?t.replaceSync(e):t.textContent=e);break}}}$propertyChangedCallback(t,e,s){if(!Object.is(s,e))switch(t=H(t),typeof s){case"boolean":!0===s?this.hasAttribute(t)||this.setAttribute(t,""):this.removeAttribute(t);break;case"number":s=O(s)?"":String(s);default:s?this.getAttribute(t)!==s&&this.setAttribute(t,s):this.removeAttribute(t)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((t=>{const e=U(t);let s=this[e];(function(t){return void 0===t})(s)||this.$propertyChangedCallback(e,void 0,s),Object.defineProperty(this,e,{enumerable:!0,configurable:!0,get:()=>s,set(t){const i=s;s=t,this.$propertyChangedCallback(e,i,t)}})}));const t=this.attachShadow({mode:this.shadowRootMode||nt});if(this.shadowRoot||ot.set(this,t),at.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){const e=document.createElement("template");e.innerHTML=this.$template,t.appendChild(e.content)}if(this.slottable){const e=document.createElement("slot");t.appendChild(e)}}disconnectedCallback(){at.has(this)&&at.delete(this),ot.has(this)&&ot.delete(this)}$getTagNameOf(t){var e;return null!==(e=rt.get(t))&&void 0!==e?e:t}$setStyles(t){return Object.keys(t).forEach((e=>{let s=t[e];R(s)&&(s=0!==s&&it.test(e)?`${s}px`:String(s)),this.style[e]=s})),this}$getShadowRoot(){return this.shadowRoot||ot.get(this)}$addStyles(t){let e;const s=this.$getShadowRoot();return ht?(e=new CSSStyleSheet,e.replaceSync(t),s.adoptedStyleSheets=s.adoptedStyleSheets.concat(e)):(e=document.createElement("style"),e.textContent=t,s.appendChild(e)),e}$emit(t,e,s){return function(t,e,s,i){return t.dispatchEvent(new CustomEvent(e,Object.assign(Object.assign(Object.assign({},V),{detail:s}),i)))}(this,t,e,s)}$nextTick(t){return function(t,e){return e?Z.then(t?e.bind(t):e):Z}(this,t)}static $define(t,i){X(t)&&(i=t,t=""),t||(t=this.$name||this.name),t=H(t),e&&s.customElements&&!s.customElements.get(t)&&customElements.define(t,this,i)}}ct.$version="2.0.0-beta.1";class lt extends ct{constructor(){super(...arguments),this.$onPointerDown=null,this.$onPointerMove=null,this.$onPointerUp=null,this.$onWheel=null,this.$wheeling=!1,this.$pointers=new Map,this.$style=':host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}',this.$action=$,this.background=!1,this.disabled=!1,this.scaleStep=.1,this.themeColor="#39f"}static get observedAttributes(){return super.observedAttributes.concat(["background","disabled","scale-step"])}connectedCallback(){super.connectedCallback(),this.disabled||this.$bind()}disconnectedCallback(){this.disabled||this.$unbind(),super.disconnectedCallback()}$propertyChangedCallback(t,e,s){if(!Object.is(s,e)&&(super.$propertyChangedCallback(t,e,s),"disabled"===t))s?this.$unbind():this.$bind()}$bind(){this.$onPointerDown||(this.$onPointerDown=this.$handlePointerDown.bind(this),_(this,C,this.$onPointerDown)),this.$onPointerMove||(this.$onPointerMove=this.$handlePointerMove.bind(this),_(this.ownerDocument,k,this.$onPointerMove)),this.$onPointerUp||(this.$onPointerUp=this.$handlePointerUp.bind(this),_(this.ownerDocument,x,this.$onPointerUp)),this.$onWheel||(this.$onWheel=this.$handleWheel.bind(this),_(this,z,this.$onWheel,{passive:!1,capture:!0}))}$unbind(){this.$onPointerDown&&(F(this,C,this.$onPointerDown),this.$onPointerDown=null),this.$onPointerMove&&(F(this.ownerDocument,k,this.$onPointerMove),this.$onPointerMove=null),this.$onPointerUp&&(F(this.ownerDocument,x,this.$onPointerUp),this.$onPointerUp=null),this.$onWheel&&(F(this,z,this.$onWheel,{capture:!0}),this.$onWheel=null)}$handlePointerDown(t){const{buttons:e,button:s,type:i}=t;if(this.disabled||("pointerdown"===i&&"mouse"===t.pointerType||"mousedown"===i)&&(R(e)&&1!==e||R(s)&&0!==s||t.ctrlKey))return;const{$pointers:n}=this;let o="";if(t.changedTouches)Array.from(t.changedTouches).forEach((({identifier:t,pageX:e,pageY:s})=>{n.set(t,{startX:e,startY:s,endX:e,endY:s})}));else{const{pointerId:e=0,pageX:s,pageY:i}=t;n.set(e,{startX:s,startY:i,endX:s,endY:i})}n.size>1?o=u:j(t.target)&&(o=t.target.action||t.target.getAttribute("action")||""),!1!==this.$emit(D,{action:o,relatedEvent:t})&&(t.preventDefault(),this.$action=o,this.style.willChange="transform")}$handlePointerMove(t){const{$action:e,$pointers:s}=this;if(this.disabled||e===$||0===s.size)return;if(!1===this.$emit("actionmove",{action:e,relatedEvent:t}))return;if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach((({identifier:t,pageX:e,pageY:i})=>{const n=s.get(t);n&&Object.assign(n,{endX:e,endY:i})}));else{const{pointerId:e=0,pageX:i,pageY:n}=t,o=s.get(e);o&&Object.assign(o,{endX:i,endY:n})}const i={action:e,relatedEvent:t};if(e===u){const e=new Map(s);let n=0,o=0,a=0,r=0,h=t.pageX,c=t.pageY;s.forEach(((t,s)=>{e.delete(s),e.forEach((e=>{let s=e.startX-t.startX,i=e.startY-t.startY,l=e.endX-t.endX,d=e.endY-t.endY,u=0,$=0,p=0,g=0;if(0===s?i<0?p=2*Math.PI:i>0&&(p=Math.PI):s>0?p=Math.PI/2+Math.atan(i/s):s<0&&(p=1.5*Math.PI+Math.atan(i/s)),0===l?d<0?g=2*Math.PI:d>0&&(g=Math.PI):l>0?g=Math.PI/2+Math.atan(d/l):l<0&&(g=1.5*Math.PI+Math.atan(d/l)),g>0||p>0){const s=g-p,i=Math.abs(s);i>n&&(n=i,a=s,h=(t.startX+e.startX)/2,c=(t.startY+e.startY)/2)}if(s=Math.abs(s),i=Math.abs(i),l=Math.abs(l),d=Math.abs(d),s>0&&i>0?u=Math.sqrt(s*s+i*i):s>0?u=s:i>0&&(u=i),l>0&&d>0?$=Math.sqrt(l*l+d*d):l>0?$=l:d>0&&($=d),u>0&&$>0){const s=($-u)/u,i=Math.abs(s);i>o&&(o=i,r=s,h=(t.startX+e.startX)/2,c=(t.startY+e.startY)/2)}}))}));const u=n>0,p=o>0;u&&p?(i.rotate=a,i.scale=r,i.centerX=h,i.centerY=c):u?(i.action=d,i.rotate=a,i.centerX=h,i.centerY=c):p?(i.action=l,i.scale=r,i.centerX=h,i.centerY=c):i.action=$}else{const[t]=Array.from(s.values());Object.assign(i,t)}s.forEach((t=>{t.startX=t.endX,t.startY=t.endY})),i.action!==$&&this.$emit(E,i,{cancelable:!1})}$handlePointerUp(t){const{$action:e,$pointers:s}=this;if(!this.disabled&&e!==$&&!1!==this.$emit(T,{action:e,relatedEvent:t})){if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach((({identifier:t})=>{s.delete(t)}));else{const{pointerId:e=0}=t;s.delete(e)}0===s.size&&(this.style.willChange="",this.$action=$)}}$handleWheel(t){if(this.disabled)return;if(t.preventDefault(),this.$wheeling)return;this.$wheeling=!0,setTimeout((()=>{this.$wheeling=!1}),50);const e=(t.deltaY>0?-1:1)*this.scaleStep;this.$emit(E,{action:l,scale:e,relatedEvent:t},{cancelable:!1})}$setAction(t){return"string"==typeof t&&(this.$action=t),this}$toCanvas(t){return new Promise(((e,s)=>{if(!this.isConnected)return void s(new Error("The current element is not connected to the DOM."));const i=document.createElement("canvas"),n=this.offsetWidth,o=this.offsetHeight;i.width=n,i.height=o;const r=this.querySelector(this.$getTagNameOf(a));r?r.$ready().then((s=>{const a=i.getContext("2d");if(a){const[e,h,c,l,d,u]=r.$getTransform(),$=s.naturalWidth/2,p=s.naturalHeight/2;a.fillStyle="transparent",a.fillRect(0,0,n,o),W(t)&&L(t.beforeDraw)&&t.beforeDraw.call(this,a,i),a.save(),a.translate($,p),a.transform(e,h,c,l,d,u),a.translate(-$,-p),a.drawImage(s,0,0),a.restore()}e(i)})).catch(s):e(i)})).then((e=>{if(W(t)&&(Y(t.width)||Y(t.height))){let{width:s,height:i}=e;if(({width:s,height:i}=st({aspectRatio:s/i,width:t.width,height:t.height})),s!==e.width){const t=document.createElement("canvas"),n=t.getContext("2d");return t.width=s,t.height=i,n&&n.drawImage(e,0,0,s,i),t}}return e}))}}lt.$name=o,lt.$version="2.0.0-beta.1";const dt=new WeakMap,ut=["alt","crossorigin","decoding","importance","loading","referrerpolicy","sizes","src","srcset"];class $t extends ct{constructor(){super(...arguments),this.$matrix=[1,0,0,1,0,0],this.$onLoad=null,this.$onCanvasAction=null,this.$style=":host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}",this.$image=new Image,this.rotatable=!0,this.scalable=!0,this.skewable=!0,this.slottable=!1,this.translatable=!0}set $canvas(t){dt.set(this,t)}get $canvas(){return dt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(ut,["rotatable","scalable","skewable","translatable"])}attributeChangedCallback(t,e,s){Object.is(s,e)||(super.attributeChangedCallback(t,e,s),ut.includes(t)&&this.$image.setAttribute(t,s))}connectedCallback(){super.connectedCallback();const{$image:t}=this,e=this.closest(this.$getTagNameOf(o));e&&(this.$canvas=e,this.$setStyles({position:"absolute"}),this.$onCanvasAction=this.$handleAction.bind(this),_(e,E,this.$onCanvasAction)),this.$onLoad=this.$handleLoad.bind(this),_(t,M,this.$onLoad),this.$getShadowRoot().appendChild(t)}disconnectedCallback(){const{$image:t,$canvas:e}=this;e&&this.$onCanvasAction&&(F(e,E,this.$onCanvasAction),this.$onCanvasAction=null),t&&this.$onLoad&&(F(t,M,this.$onLoad),this.$onLoad=null),this.$getShadowRoot().removeChild(t),super.disconnectedCallback()}$handleLoad(){const{$image:t}=this;this.$setStyles({width:t.naturalWidth,height:t.naturalHeight}),this.$canvas&&this.$center("cover")}$handleAction(t){if(this.hidden||!(this.rotatable||this.scalable||this.translatable))return;const{$canvas:e}=this,{detail:s}=t;if(s){const{relatedEvent:t}=s;let{action:i}=s;switch(i!==u||this.rotatable&&this.scalable||(i=this.rotatable?d:this.scalable?l:$),i){case c:if(this.translatable){const i=this.$getTagNameOf(r);let n=e.querySelector(i);n&&n.multiple&&!n.active&&(n=e.querySelector(`${i}[active]`)),n&&!n.hidden&&n.movable&&t&&n.contains(t.target)||this.$move(s.endX-s.startX,s.endY-s.startY)}break;case d:if(this.rotatable)if(t){const{x:e,y:i}=this.getBoundingClientRect();this.$rotate(s.rotate,t.clientX-e,t.clientY-i)}else this.$rotate(s.rotate);break;case l:if(this.scalable)if(t){const{x:e,y:i}=this.getBoundingClientRect();this.$zoom(s.scale,t.clientX-e,t.clientY-i)}else this.$zoom(s.scale);break;case u:if(this.rotatable&&this.scalable){const{rotate:e}=s;let{scale:i}=s;i<0?i=1/(1-i):i+=1;const n=Math.cos(e),o=Math.sin(e),[a,r,h,c]=[n*i,o*i,-o*i,n*i];if(t){const e=this.getBoundingClientRect(),s=t.clientX-e.x,i=t.clientY-e.y,[n,o,l,d]=this.$matrix,u=e.width/2,$=i-e.height/2,p=((s-u)*d-l*$)/(n*d-l*o),g=($-o*p)/d;this.$transform(a,r,h,c,p*(1-a)+g*h,g*(1-c)+p*r)}else this.$transform(a,r,h,c,0,0)}}}}$ready(t){const{$image:e}=this,s=new Promise(((t,s)=>{const i=new Error("Failed to load the image source");if(e.complete)e.naturalWidth>0&&e.naturalHeight>0?t(e):s(i);else{const n=()=>{F(e,S,o),t(e)},o=()=>{F(e,M,n),s(i)};G(e,M,n),G(e,S,o)}}));return L(t)&&s.then((e=>(t(e),e))),s}$center(t){const{parentElement:e}=this;if(!e)return this;const s=e.getBoundingClientRect(),i=s.width,n=s.height,{x:o,y:a,width:r,height:h}=this.getBoundingClientRect(),c=o+r/2,l=a+h/2,d=s.x+i/2,u=s.y+n/2;if(this.$move(d-c,u-l),t&&(r!==i||h!==n)){const e=i/r,s=n/h;switch(t){case"cover":this.$scale(Math.max(e,s));break;case"contain":this.$scale(Math.min(e,s))}}return this}$move(t,e=t){if(this.translatable&&R(t)&&R(e)){const[s,i,n,o]=this.$matrix,a=(t*o-n*e)/(s*o-n*i),r=(e-i*a)/o;this.$translate(a,r)}return this}$moveTo(t,e=t){if(this.translatable&&R(t)&&R(e)){const[s,i,n,o]=this.$matrix,a=(t*o-n*e)/(s*o-n*i),r=(e-i*a)/o;this.$setTransform(s,i,n,o,a,r)}return this}$rotate(t,e,s){if(this.rotatable){const i=tt(t),n=Math.cos(i),o=Math.sin(i),[a,r,h,c]=[n,o,-o,n];if(R(e)&&R(s)){const[t,i,n,o]=this.$matrix,{width:l,height:d}=this.getBoundingClientRect(),u=s-d/2,$=((e-l/2)*o-n*u)/(t*o-n*i),p=(u-i*$)/o;this.$transform(a,r,h,c,$*(1-a)-p*h,p*(1-c)-$*r)}else this.$transform(a,r,h,c,0,0)}return this}$zoom(t,e,s){if(!this.scalable||0===t)return this;if(t<0?t=1/(1-t):t+=1,R(e)&&R(s)){const[i,n,o,a]=this.$matrix,{width:r,height:h}=this.getBoundingClientRect(),c=s-h/2,l=((e-r/2)*a-o*c)/(i*a-o*n),d=(c-n*l)/a;this.$transform(t,0,0,t,l*(1-t),d*(1-t))}else this.$scale(t);return this}$scale(t,e=t){return this.scalable&&this.$transform(t,0,0,e,0,0),this}$skew(t,e=0){if(this.skewable){const s=tt(t),i=tt(e);this.$transform(1,Math.tan(i),Math.tan(s),1,0,0)}return this}$translate(t,e=t){return this.translatable&&R(t)&&R(e)&&this.$transform(1,0,0,1,t,e),this}$transform(t,e,s,i,n,o){if(R(t)&&R(e)&&R(s)&&R(i)&&R(n)&&R(o)){const[a,r,h,c,l,d]=this.$matrix,[u,$,p,g,m,b]=[t,e,s,i,n,o];return this.$setTransform(a*u+h*$,r*u+c*$,a*p+h*g,r*p+c*g,a*m+h*b+l,r*m+c*b+d)}return this}$setTransform(t,e,s,i,n,o){if((this.rotatable||this.scalable||this.skewable||this.translatable)&&(Array.isArray(t)&&([t,e,s,i,n,o]=t),R(t)&&R(e)&&R(s)&&R(i)&&R(n)&&R(o))){const a=[t,e,s,i,n,o];if(!1===this.$emit(I,{matrix:a,oldMatrix:this.$matrix}))return this;this.$matrix=a,this.style.transform=`matrix(${a.join(", ")})`}return this}$getTransform(){return this.$matrix.slice()}$resetTransform(){return this.$setTransform([1,0,0,1,0,0])}}$t.$name=a,$t.$version="2.0.0-beta.1";const pt=new WeakMap;class gt extends ct{constructor(){super(...arguments),this.$onCanvasChange=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=null,this.$style=":host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}",this.x=0,this.y=0,this.width=0,this.height=0,this.slottable=!1,this.themeColor="rgba(0, 0, 0, 0.65)"}set $canvas(t){pt.set(this,t)}get $canvas(){return pt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["height","width","x","y"])}connectedCallback(){super.connectedCallback();const t=this.closest(this.$getTagNameOf(o));if(t){this.$canvas=t,this.style.position="absolute";const e=t.querySelector(this.$getTagNameOf(r));e&&(this.$onCanvasActionStart=t=>{e.hidden&&t.detail.action===h&&(this.hidden=!1)},this.$onCanvasActionEnd=t=>{e.hidden&&t.detail.action===h&&(this.hidden=!0)},this.$onCanvasChange=t=>{const{x:s,y:i,width:n,height:o}=t.detail;this.$change(s,i,n,o),(e.hidden||0===s&&0===i&&0===n&&0===o)&&(this.hidden=!0)},_(t,D,this.$onCanvasActionStart),_(t,T,this.$onCanvasActionEnd),_(t,P,this.$onCanvasChange))}this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&(this.$onCanvasActionStart&&(F(t,D,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(F(t,T,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasChange&&(F(t,P,this.$onCanvasChange),this.$onCanvasChange=null)),super.disconnectedCallback()}$change(t,e,s=this.width,i=this.height){return R(t)&&R(e)&&R(s)&&R(i)&&(t!==this.x||e!==this.y||s!==this.width||i!==this.height)?(this.hidden&&(this.hidden=!1),this.x=t,this.y=e,this.width=s,this.height=i,this.$render()):this}$reset(){return this.$change(0,0,0,0)}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height,outlineWidth:s.innerWidth})}}gt.$name="cropper-shade",gt.$version="2.0.0-beta.1";class mt extends ct{constructor(){super(...arguments),this.$onCanvasCropEnd=null,this.$onCanvasCropStart=null,this.$style=':host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}',this.action=$,this.plain=!1,this.slottable=!1,this.themeColor="rgba(51, 153, 255, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["action","plain"])}}mt.$name="cropper-handle",mt.$version="2.0.0-beta.1";const bt=new WeakMap;class ft extends ct{constructor(){super(...arguments),this.$onCanvasAction=null,this.$onCanvasActionStart=null,this.$onDocumentKeyDown=null,this.$style=':host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}',this.x=0,this.y=0,this.width=0,this.height=0,this.aspectRatio=NaN,this.initialAspectRatio=NaN,this.initialCoverage=NaN,this.active=!1,this.movable=!1,this.resizable=!1,this.zoomable=!1,this.multiple=!1,this.keyboard=!1,this.outlined=!1,this.precise=!1}set $canvas(t){bt.set(this,t)}get $canvas(){return bt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["active","aspect-ratio","height","initial-aspect-ratio","initial-coverage","keyboard","movable","multiple","outlined","precise","resizable","width","x","y","zoomable"])}$propertyChangedCallback(t,e,s){if(!Object.is(s,e))switch(super.$propertyChangedCallback(t,e,s),t){case"aspectRatio":Y(s)||(this.aspectRatio=NaN);break;case"initialAspectRatio":Y(s)||(this.initialAspectRatio=NaN);break;case"initialCoverage":(!Y(s)||s>1)&&(this.initialCoverage=NaN);break;case"keyboard":this.$nextTick((()=>{this.$canvas&&(s?this.$onDocumentKeyDown||(this.$onDocumentKeyDown=this.$handleKeyDown.bind(this),_(this.ownerDocument,A,this.$onDocumentKeyDown)):this.$onDocumentKeyDown&&(F(this.ownerDocument,A,this.$onDocumentKeyDown),this.$onDocumentKeyDown=null))}));break;case"multiple":this.$nextTick((()=>{this.$canvas&&(s?(this.active=!0,this.$onCanvasActionStart||(this.$onCanvasActionStart=this.$handleActionStart.bind(this),_(this.$canvas,D,this.$onCanvasActionStart))):(this.$onCanvasActionStart&&(F(this.$canvas,D,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$getSelections().forEach(((t,e)=>{e>0&&this.$removeSelection(t)})),this.active=!1))}))}}connectedCallback(){super.connectedCallback(),this.multiple&&!this.active&&(this.active=!0);const t=this.closest(this.$getTagNameOf(o));if(t){this.$canvas=t,this.$setStyles({position:"absolute",transform:`translate(${this.x}px, ${this.y}px)`}),this.hidden||this.$render();const{initialCoverage:e,parentElement:s}=this;if(Y(e)&&s){const t=this.aspectRatio||this.initialAspectRatio,{offsetWidth:i,offsetHeight:n}=s;let o=i*e,a=n*e;Y(t)&&({width:o,height:a}=st({aspectRatio:t,width:o,height:a})),this.$change(this.x,this.y,o,a),this.$center()}this.$onCanvasAction=this.$handleAction.bind(this),_(t,E,this.$onCanvasAction)}else this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&this.$onCanvasAction&&(F(t,E,this.$onCanvasAction),this.$onCanvasAction=null),super.disconnectedCallback()}$getSelections(){let t=[];return this.parentElement&&(t=Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(r)))),t}$createSelection(){const t=this.cloneNode(!0);return this.hasAttribute("id")&&t.removeAttribute("id"),this.active=!1,this.parentElement&&this.parentElement.insertBefore(t,this.nextSibling),t}$removeSelection(t=this){if(this.parentElement){const e=this.$getSelections();if(e.length>1){const s=e.indexOf(t),i=e[s+1]||e[s-1];i&&(this.parentElement.removeChild(t),i.active=!0,i.$emit(P,{x:i.x,y:i.y,width:i.width,height:i.height}))}else this.$reset(),this.hidden=!0}}$handleActionStart(t){if(this.hidden||!this.multiple||this.active)return;const{detail:e}=t,{relatedEvent:s}=e;s.target===this&&this.parentElement&&(this.$getSelections().forEach((t=>{t.active=!1})),this.active=!0,this.$emit(P,{x:this.x,y:this.y,width:this.width,height:this.height}))}$handleAction(t){if(this.multiple&&!this.active)return;const{currentTarget:e,detail:s}=t;if(e&&s){const{relatedEvent:i}=s;let{action:n}=s;if(!n&&this.multiple&&(n=null==i?void 0:i.target.action),!n||this.hidden&&n!==h)return;const o=s.endX-s.startX,a=s.endY-s.startY,{width:r,height:d}=this;let{aspectRatio:u}=this;switch(!Y(u)&&t.shiftKey&&(u=Y(r)&&Y(d)?r/d:1),n){case h:{const{$canvas:t}=this,i=J(e);(this.multiple&&!this.hidden?this.$createSelection():this).$change(s.startX-i.left,s.startY-i.top,o,a,u),n=w,o<0?a>0?n=y:a<0&&(n=v):o>0&&a<0&&(n=f),t&&(t.$action=n);break}case c:!this.movable||i&&!this.contains(i.target)||this.$move(o,a);break;case l:if(i&&this.zoomable){const t=J(e);this.$zoom(s.scale,i.pageX-t.left,i.pageY-t.top)}break;default:this.$resize(n,o,a,u)}}}$handleKeyDown(t){if(!(this.hidden||!this.keyboard||this.multiple&&!this.active||t.defaultPrevented))switch(t.key){case"Backspace":t.metaKey&&(t.preventDefault(),this.$removeSelection());break;case"Delete":t.preventDefault(),this.$removeSelection();break;case"ArrowLeft":t.preventDefault(),this.$move(-1,0);break;case"ArrowRight":t.preventDefault(),this.$move(1,0);break;case"ArrowUp":t.preventDefault(),this.$move(0,-1);break;case"ArrowDown":t.preventDefault(),this.$move(0,1);break;case"+":t.preventDefault(),this.$zoom(.1);break;case"-":t.preventDefault(),this.$zoom(-.1)}}$center(){const{parentElement:t}=this;if(!t)return this;const e=(t.offsetWidth-this.width)/2,s=(t.offsetHeight-this.height)/2;return this.$change(e,s)}$move(t,e=t){return this.$moveTo(this.x+t,this.y+e)}$moveTo(t,e=t){return this.movable?this.$change(t,e):this}$resize(t,e=0,s=0,i=this.aspectRatio){if(!this.resizable)return this;const n=Y(i),{$canvas:o}=this;let{x:a,y:r,width:h,height:c}=this;switch(t){case p:r+=s,c-=s,c<0&&(t=m,c=-c,r-=c),n&&(a+=(e=s*i)/2,h-=e,h<0&&(h=-h,a-=h));break;case g:h+=e,h<0&&(t=b,h=-h,a-=h),n&&(r-=(s=e/i)/2,c+=s,c<0&&(c=-c,r-=c));break;case m:c+=s,c<0&&(t=p,c=-c,r-=c),n&&(a-=(e=s*i)/2,h+=e,h<0&&(h=-h,a-=h));break;case b:a+=e,h-=e,h<0&&(t=g,h=-h,a-=h),n&&(r+=(s=e/i)/2,c-=s,c<0&&(c=-c,r-=c));break;case f:n&&(s=-e/i),r+=s,c-=s,h+=e,h<0&&c<0?(t=y,h=-h,c=-c,a-=h,r-=c):h<0?(t=v,h=-h,a-=h):c<0&&(t=w,c=-c,r-=c);break;case v:n&&(s=e/i),a+=e,r+=s,h-=e,c-=s,h<0&&c<0?(t=w,h=-h,c=-c,a-=h,r-=c):h<0?(t=f,h=-h,a-=h):c<0&&(t=y,c=-c,r-=c);break;case w:n&&(s=e/i),h+=e,c+=s,h<0&&c<0?(t=v,h=-h,c=-c,a-=h,r-=c):h<0?(t=y,h=-h,a-=h):c<0&&(t=f,c=-c,r-=c);break;case y:n&&(s=-e/i),a+=e,h-=e,c+=s,h<0&&c<0?(t=f,h=-h,c=-c,a-=h,r-=c):h<0?(t=w,h=-h,a-=h):c<0&&(t=v,c=-c,r-=c)}return o&&o.$setAction(t),this.$change(a,r,h,c)}$zoom(t,e,s){if(!this.zoomable||0===t)return this;t<0?t=1/(1-t):t+=1;const{width:i,height:n}=this,o=i*t,a=n*t;let r=this.x,h=this.y;return R(e)&&R(s)?(r-=(o-i)*((e-this.x)/i),h-=(a-n)*((s-this.y)/n)):(r-=(o-i)/2,h-=(a-n)/2),this.$change(r,h,o,a)}$change(t,e,s=this.width,i=this.height,n=this.aspectRatio){return R(t)&&R(e)&&R(s)&&R(i)?(this.precise||(t=Math.round(t),e=Math.round(e),s=Math.round(s),i=Math.round(i)),t===this.x&&e===this.y&&s===this.width&&i===this.height?this:(this.hidden&&(this.hidden=!1),Y(n)&&({width:s,height:i}=st({aspectRatio:n,width:s,height:i},"cover")),!1===this.$emit(P,{x:t,y:e,width:s,height:i})?this:(this.x=t,this.y=e,this.width=s,this.height=i,this.$render()))):this}$reset(){return this.$change(0,0,0,0)}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height})}$toCanvas(t){return new Promise(((e,s)=>{if(!this.isConnected)return void s(new Error("The current element is not connected to the DOM."));const i=document.createElement("canvas"),{$canvas:n,width:o,height:r}=this;if(i.width=o,i.height=r,!n)return void e(i);const h=n.querySelector(this.$getTagNameOf(a));h?h.$ready().then((s=>{const n=i.getContext("2d");if(n){const[e,a,c,l,d,u]=h.$getTransform(),$=s.naturalWidth/2,p=s.naturalHeight/2,g=-this.x,m=-this.y,b=(g*l-c*m)/(e*l-c*a),f=(m-a*b)/l,v=e*b+c*f+d,w=a*b+l*f+u;n.fillStyle="transparent",n.fillRect(0,0,o,r),W(t)&&L(t.beforeDraw)&&t.beforeDraw.call(this,n,i),n.save(),n.translate($,p),n.transform(e,a,c,l,v,w),n.translate(-$,-p),n.drawImage(s,0,0),n.restore()}e(i)})).catch(s):e(i)})).then((e=>{if(W(t)&&(Y(t.width)||Y(t.height))){let{width:s,height:i}=e;if(({width:s,height:i}=st({aspectRatio:s/i,width:t.width,height:t.height})),s!==e.width){const t=document.createElement("canvas"),n=t.getContext("2d");return t.width=s,t.height=i,n&&n.drawImage(e,0,0,s,i),t}}return e}))}}ft.$name=r,ft.$version="2.0.0-beta.1";class vt extends ct{constructor(){super(...arguments),this.$style=":host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}",this.bordered=!1,this.columns=3,this.covered=!1,this.rows=3,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["bordered","columns","covered","rows"])}$propertyChangedCallback(t,e,s){Object.is(s,e)||(super.$propertyChangedCallback(t,e,s),"rows"!==t&&"columns"!==t||this.$render())}connectedCallback(){super.connectedCallback(),this.$render()}$render(){const t=this.$getShadowRoot(),e=document.createDocumentFragment();for(let t=0;t<this.rows;t+=1){const t=document.createElement("span");t.setAttribute("role","row");for(let e=0;e<this.columns;e+=1){const e=document.createElement("span");e.setAttribute("role","gridcell"),t.appendChild(e)}e.appendChild(t)}t&&(t.innerHTML="",t.appendChild(e))}}vt.$name="cropper-grid",vt.$version="2.0.0-beta.1";class wt extends ct{constructor(){super(...arguments),this.$style=':host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}',this.centered=!1,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["centered"])}}wt.$name="cropper-crosshair",wt.$version="2.0.0-beta.1";const yt=new WeakMap,Ct=new WeakMap,kt=new WeakMap,xt="vertical";class St extends ct{constructor(){super(...arguments),this.$onSelectionChange=null,this.$onSourceImageLoad=null,this.$onSourceImageTransform=null,this.$scale=1,this.$style=":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}",this.resize=xt,this.selection="",this.slottable=!1}set $image(t){yt.set(this,t)}get $image(){return yt.get(this)}set $sourceImage(t){kt.set(this,t)}get $sourceImage(){return kt.get(this)}set $selection(t){Ct.set(this,t)}get $selection(){return Ct.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["resize","selection"])}connectedCallback(){super.connectedCallback();let t=null;if(t=this.selection?this.ownerDocument.querySelector(this.selection):this.closest(this.$getTagNameOf(r)),j(t)){this.$selection=t,this.$onSelectionChange=this.$handleSelectionChange.bind(this),_(t,P,this.$onSelectionChange);const e=t.closest(this.$getTagNameOf(o));if(e){const t=e.querySelector(this.$getTagNameOf(a));t&&(this.$sourceImage=t,this.$image=t.cloneNode(!0),this.$getShadowRoot().appendChild(this.$image),this.$onSourceImageLoad=this.$handleSourceImageLoad.bind(this),this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this),_(t.$image,M,this.$onSourceImageLoad),_(t,I,this.$onSourceImageTransform))}this.$render()}}disconnectedCallback(){const{$selection:t,$sourceImage:e}=this;t&&this.$onSelectionChange&&(F(t,P,this.$onSelectionChange),this.$onSelectionChange=null),e&&this.$onSourceImageLoad&&(F(e.$image,M,this.$onSourceImageLoad),this.$onSourceImageLoad=null),e&&this.$onSourceImageTransform&&(F(e,I,this.$onSourceImageTransform),this.$onSourceImageTransform=null),super.disconnectedCallback()}$handleSelectionChange(t){this.$render(t.detail)}$handleSourceImageLoad(){const{$image:t,$sourceImage:e}=this,s=t.getAttribute("src"),i=e.getAttribute("src");i&&i!==s&&(t.setAttribute("src",i),t.$ready((()=>{setTimeout((()=>{const{x:t,y:s}=this.$selection;this.$transformImageByOffset(e.$getTransform(),-t,-s)}))})))}$handleSourceImageTransform(t){const{x:e,y:s}=this.$selection;this.$transformImageByOffset(t.detail.matrix,-e,-s)}$render(t){const{x:e,y:s,width:i,height:n}=t||this.$selection,o={},{clientWidth:a,clientHeight:r}=this;let h=a,c=r,l=NaN;switch(this.resize){case"both":l=1,h=i,c=n,o.width=i,o.height=n;break;case"horizontal":l=r/n,h=i*l,o.width=h;break;case xt:l=a/i,c=n*l,o.height=c;break;default:a>0?l=a/i:r>0&&(l=r/n)}this.$scale=l,this.$setStyles(o),this.$sourceImage&&this.$transformImageByOffset(this.$sourceImage.$getTransform(),-e,-s)}$transformImageByOffset(t,e,s){const{$image:i,$scale:n,$sourceImage:o}=this;if(o&&i&&n>0){const[o,a,r,h,c,l]=t,d=(e*h-r*s)/(o*h-r*a),u=(s-a*d)/h,$=o*d+r*u+c,p=a*d+h*u+l;i.$ready((t=>{this.$setStyles.call(i,{width:t.naturalWidth*n,height:t.naturalHeight*n})})),i.$setTransform(o,a,r,h,$*n,p*n)}}}St.$name="cropper-viewer",St.$version="2.0.0-beta.1",t.CropperCanvas=lt,t.CropperCrosshair=wt,t.CropperElement=ct,t.CropperGrid=vt,t.CropperHandle=mt,t.CropperImage=$t,t.CropperSelection=ft,t.CropperShade=gt,t.CropperViewer=St,Object.defineProperty(t,"__esModule",{value:!0})}));

package.json

 {
   "name": "@cropper/elements",
-  "version": "2.0.0-beta",
+  "version": "2.0.0-beta.1",
   "description": "A series of custom elements for the Cropper.",
@@ -8,2 +8,4 @@ "main": "dist/elements.raw.js",
   "types": "dist/elements.d.ts",
+  "unpkg": "dist/elements.js",
+  "jsdelivr": "dist/elements.js",
   "files": [
@@ -35,11 +37,11 @@ "dist"
   "dependencies": {
-    "@cropper/element": "^2.0.0-beta",
-    "@cropper/element-canvas": "^2.0.0-beta",
-    "@cropper/element-crosshair": "^2.0.0-beta",
-    "@cropper/element-grid": "^2.0.0-beta",
-    "@cropper/element-handle": "^2.0.0-beta",
-    "@cropper/element-image": "^2.0.0-beta",
-    "@cropper/element-selection": "^2.0.0-beta",
-    "@cropper/element-shade": "^2.0.0-beta",
-    "@cropper/element-viewer": "^2.0.0-beta"
+    "@cropper/element": "^2.0.0-beta.1",
+    "@cropper/element-canvas": "^2.0.0-beta.1",
+    "@cropper/element-crosshair": "^2.0.0-beta.1",
+    "@cropper/element-grid": "^2.0.0-beta.1",
+    "@cropper/element-handle": "^2.0.0-beta.1",
+    "@cropper/element-image": "^2.0.0-beta.1",
+    "@cropper/element-selection": "^2.0.0-beta.1",
+    "@cropper/element-shade": "^2.0.0-beta.1",
+    "@cropper/element-viewer": "^2.0.0-beta.1"
   },
@@ -50,3 +52,3 @@ "publishConfig": {
   },
-  "gitHead": "f13e2bdac88e0846a66e406c6122c8d70de43c15"
+  "gitHead": "f9b7e9fef403d95f5364d28481f185d95c6f6100"
 }

New alerts

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

290140

1.27%

Lines of code

5641

0.95%

Dependency changes

• Updated

  @cropper/element@^2.0.0-beta.1

• Updated

  @cropper/element-canvas@^2.0.0-beta.1

• Updated

  @cropper/element-crosshair@^2.0.0-beta.1

• Updated

  @cropper/element-grid@^2.0.0-beta.1

• Updated

  @cropper/element-handle@^2.0.0-beta.1

• Updated

  @cropper/element-image@^2.0.0-beta.1

• Updated

  @cropper/element-selection@^2.0.0-beta.1

• Updated

  @cropper/element-shade@^2.0.0-beta.1

• Updated

  @cropper/element-viewer@^2.0.0-beta.1