vue-cropperjs2 0.0.4 → 0.0.5

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`vue-cropperjs2`]={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=typeof window<`u`&&window.document!==void 0,r=n?window:{},i=n?`ontouchstart`in r.document.documentElement:!1,a=n?`PointerEvent`in r:!1,o=`cropper`,s=`${o}-canvas`,c=`${o}-crosshair`,l=`${o}-grid`,u=`${o}-handle`,d=`${o}-image`,f=`${o}-selection`,p=`${o}-shade`,m=`${o}-viewer`,h=`select`,g=`move`,_=`scale`,v=`rotate`,y=`transform`,b=`none`,x=`n-resize`,S=`e-resize`,C=`s-resize`,ee=`w-resize`,w=`ne-resize`,T=`nw-resize`,E=`se-resize`,D=`sw-resize`,te=i?`touchend touchcancel`:`mouseup`,ne=i?`touchmove`:`mousemove`,re=a?`pointerdown`:i?`touchstart`:`mousedown`,ie=a?`pointermove`:ne,ae=a?`pointerup pointercancel`:te,oe=`error`,se=`keydown`,O=`load`,ce=`resize`,le=`wheel`,k=`action`,A=`actionend`,j=`actionstart`,M=`change`,ue=`transform`;function N(e){return typeof e==`string`}var de=Number.isNaN||r.isNaN;function P(e){return typeof e==`number`&&!de(e)}function F(e){return P(e)&&e>0&&e<1/0}function fe(e){return e===void 0}function pe(e){return typeof e==`object`&&!!e}var{hasOwnProperty:me}=Object.prototype;function I(e){if(!pe(e))return!1;try{let{constructor:t}=e,{prototype:n}=t;return t&&n&&me.call(n,`isPrototypeOf`)}catch{return!1}}function L(e){return typeof e==`function`}function R(e){return typeof e==`object`&&!!e&&e.nodeType===1}var he=/([a-z\d])([A-Z])/g;function ge(e){return String(e).replace(he,`$1-$2`).toLowerCase()}var _e=/-[A-z\d]/g;function ve(e){return e.replace(_e,e=>e.slice(1).toUpperCase())}var ye=/\s\s*/;function z(e,t,n,r){t.trim().split(ye).forEach(t=>{e.removeEventListener(t,n,r)})}function B(e,t,n,r){t.trim().split(ye).forEach(t=>{e.addEventListener(t,n,r)})}function be(e,t,n,r){B(e,t,n,Object.assign(Object.assign({},r),{once:!0}))}var xe={bubbles:!0,cancelable:!0,composed:!0};function Se(e,t,n,r){return e.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign(Object.assign({},xe),{detail:n}),r)))}function Ce(e){return typeof e.composedPath==`function`&&e.composedPath().find(R)||e.target}var we=Promise.resolve();function Te(e,t){return t?we.then(e?t.bind(e):t):we}function Ee(e){let t=e.getRootNode();switch(t.nodeType){case 1:return t.ownerDocument;case 9:return t;case 11:return t}return null}function De(e){let{documentElement:t}=e.ownerDocument,n=e.getBoundingClientRect();return{left:n.left+(r.pageXOffset-t.clientLeft),top:n.top+(r.pageYOffset-t.clientTop)}}var Oe=/deg|g?rad|turn$/i;function V(e){let t=parseFloat(e)||0;if(t!==0){let[n=`rad`]=String(e).match(Oe)||[];switch(n.toLowerCase()){case`deg`:return t/360*(Math.PI*2);case`grad`:return t/400*(Math.PI*2);case`turn`:return Math.PI*2*t}}return t}var ke=`contain`,Ae=`cover`;function H(e,t=ke){let{aspectRatio:n}=e,{width:r,height:i}=e,a=F(r),o=F(i);if(a&&o){let e=i*n;t===ke&&e>r||t===Ae&&e<r?i=r/n:r=i*n}else a?i=r/n:o&&(r=i*n);return{width:r,height:i}}function je(e,...t){if(t.length===0)return e;let[n,r,i,a,o,s]=e,[c,l,u,d,f,p]=t[0];return e=[n*c+i*l,r*c+a*l,n*u+i*d,r*u+a*d,n*f+i*p+o,r*f+a*p+s],je(e,...t.slice(1))}var Me=`:host([hidden]){display:none!important}`,Ne=/left|top|width|height/i,Pe=`open`,U=new WeakMap,W=new WeakMap,Fe=new Map,Ie=r.document&&Array.isArray(r.document.adoptedStyleSheets)&&`replaceSync`in r.CSSStyleSheet.prototype,G=class extends HTMLElement{get $sharedStyle(){return`${this.themeColor?`:host{--theme-color: ${this.themeColor};}`:``}${Me}`}constructor(){super(),this.shadowRootMode=Pe,this.slottable=!0;let e=Object.getPrototypeOf(this)?.constructor?.$name;e&&Fe.set(e,this.tagName.toLowerCase())}static get observedAttributes(){return[`shadow-root-mode`,`slottable`,`theme-color`]}attributeChangedCallback(e,t,n){if(Object.is(n,t))return;let r=ve(e),i=this[r],a=n;switch(typeof i){case`boolean`:a=n!==null&&n!==`false`;break;case`number`:a=Number(n);break}switch(this[r]=a,e){case`theme-color`:{let e=W.get(this),t=this.$sharedStyle;e&&t&&(Ie?e.replaceSync(t):e.textContent=t);break}}}$propertyChangedCallback(e,t,n){if(!Object.is(n,t))switch(e=ge(e),typeof n){case`boolean`:n===!0?this.hasAttribute(e)||this.setAttribute(e,``):this.removeAttribute(e);break;case`number`:n=de(n)?``:String(n);default:n?this.getAttribute(e)!==n&&this.setAttribute(e,n):this.removeAttribute(e)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach(e=>{let t=ve(e),n=this[t];fe(n)||this.$propertyChangedCallback(t,void 0,n),Object.defineProperty(this,t,{enumerable:!0,configurable:!0,get(){return n},set(e){let r=n;n=e,this.$propertyChangedCallback(t,r,e)}})});let e=this.shadowRoot||this.attachShadow({mode:this.shadowRootMode||Pe});if(U.set(this,e),W.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){let t=document.createElement(`template`);t.innerHTML=this.$template,e.appendChild(t.content)}if(this.slottable){let t=document.createElement(`slot`);e.appendChild(t)}}disconnectedCallback(){W.has(this)&&W.delete(this),U.has(this)&&U.delete(this)}$getTagNameOf(e){return Fe.get(e)??e}$setStyles(e){return Object.keys(e).forEach(t=>{let n=e[t];P(n)&&(n=n!==0&&Ne.test(t)?`${n}px`:String(n)),this.style[t]=n}),this}$getShadowRoot(){return this.shadowRoot||U.get(this)}$addStyles(e){let t,n=this.$getShadowRoot();return Ie?(t=new CSSStyleSheet,t.replaceSync(e),n.adoptedStyleSheets=n.adoptedStyleSheets.concat(t)):(t=document.createElement(`style`),t.textContent=e,n.appendChild(t)),t}$emit(e,t,n){return Se(this,e,t,n)}$nextTick(e){return Te(this,e)}static $define(e,t){pe(e)&&(t=e,e=``),e||=this.$name||this.name,e=ge(e),n&&r.customElements&&!r.customElements.get(e)&&customElements.define(e,this,t)}};G.$version=`2.1.1`;var Le=`:host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-touch-callout: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}`,K=class extends G{constructor(){super(...arguments),this.$onPointerDown=null,this.$onPointerMove=null,this.$onPointerUp=null,this.$onWheel=null,this.$wheeling=!1,this.$pointers=new Map,this.$style=Le,this.$action=b,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(e,t,n){if(!Object.is(n,t))switch(super.$propertyChangedCallback(e,t,n),e){case`disabled`:n?this.$unbind():this.$bind();break}}$bind(){this.$onPointerDown||(this.$onPointerDown=this.$handlePointerDown.bind(this),B(this,re,this.$onPointerDown)),this.$onPointerMove||(this.$onPointerMove=this.$handlePointerMove.bind(this),B(this.ownerDocument,ie,this.$onPointerMove)),this.$onPointerUp||(this.$onPointerUp=this.$handlePointerUp.bind(this),B(this.ownerDocument,ae,this.$onPointerUp)),this.$onWheel||(this.$onWheel=this.$handleWheel.bind(this),B(this,le,this.$onWheel,{passive:!1,capture:!0}))}$unbind(){this.$onPointerDown&&=(z(this,re,this.$onPointerDown),null),this.$onPointerMove&&=(z(this.ownerDocument,ie,this.$onPointerMove),null),this.$onPointerUp&&=(z(this.ownerDocument,ae,this.$onPointerUp),null),this.$onWheel&&=(z(this,le,this.$onWheel,{capture:!0}),null)}$handlePointerDown(e){let{buttons:t,button:n,type:r}=e;if(this.disabled||(r===`pointerdown`&&e.pointerType===`mouse`||r===`mousedown`)&&(P(t)&&t!==1||P(n)&&n!==0||e.ctrlKey))return;let{$pointers:i}=this,a=``;if(e.changedTouches)Array.from(e.changedTouches).forEach(({identifier:e,pageX:t,pageY:n})=>{i.set(e,{startX:t,startY:n,endX:t,endY:n})});else{let{pointerId:t=0,pageX:n,pageY:r}=e;i.set(t,{startX:n,startY:r,endX:n,endY:r})}i.size>1?a=y:R(e.target)&&(a=e.target.action||e.target.getAttribute(`action`)||``),this.$emit(`actionstart`,{action:a,relatedEvent:e})!==!1&&(e.preventDefault(),this.$action=a,this.style.willChange=`transform`)}$handlePointerMove(e){let{$action:t,$pointers:n}=this;if(this.disabled||t===`none`||n.size===0||this.$emit(`actionmove`,{action:t,relatedEvent:e})===!1)return;if(e.preventDefault(),e.changedTouches)Array.from(e.changedTouches).forEach(({identifier:e,pageX:t,pageY:r})=>{let i=n.get(e);i&&Object.assign(i,{endX:t,endY:r})});else{let{pointerId:t=0,pageX:r,pageY:i}=e,a=n.get(t);a&&Object.assign(a,{endX:r,endY:i})}let r={action:t,relatedEvent:e};if(t===`transform`){let t=new Map(n),i=0,a=0,o=0,s=0,c=e.pageX,l=e.pageY;n.forEach((e,n)=>{t.delete(n),t.forEach(t=>{let n=t.startX-e.startX,r=t.startY-e.startY,u=t.endX-e.endX,d=t.endY-e.endY,f=0,p=0,m=0,h=0;if(n===0?r<0?m=Math.PI*2:r>0&&(m=Math.PI):n>0?m=Math.PI/2+Math.atan(r/n):n<0&&(m=Math.PI*1.5+Math.atan(r/n)),u===0?d<0?h=Math.PI*2:d>0&&(h=Math.PI):u>0?h=Math.PI/2+Math.atan(d/u):u<0&&(h=Math.PI*1.5+Math.atan(d/u)),h>0||m>0){let n=h-m,r=Math.abs(n);r>i&&(i=r,o=n,c=(e.startX+t.startX)/2,l=(e.startY+t.startY)/2)}if(n=Math.abs(n),r=Math.abs(r),u=Math.abs(u),d=Math.abs(d),n>0&&r>0?f=Math.sqrt(n*n+r*r):n>0?f=n:r>0&&(f=r),u>0&&d>0?p=Math.sqrt(u*u+d*d):u>0?p=u:d>0&&(p=d),f>0&&p>0){let n=(p-f)/f,r=Math.abs(n);r>a&&(a=r,s=n,c=(e.startX+t.startX)/2,l=(e.startY+t.startY)/2)}})});let u=i>0,d=a>0;u&&d?(r.rotate=o,r.scale=s,r.centerX=c,r.centerY=l):u?(r.action=v,r.rotate=o,r.centerX=c,r.centerY=l):d?(r.action=_,r.scale=s,r.centerX=c,r.centerY=l):r.action=b}else{let[e]=Array.from(n.values());Object.assign(r,e)}n.forEach(e=>{e.startX=e.endX,e.startY=e.endY}),r.action!==`none`&&this.$emit(k,r,{cancelable:!1})}$handlePointerUp(e){let{$action:t,$pointers:n}=this;if(!(this.disabled||t===`none`)&&this.$emit(`actionend`,{action:t,relatedEvent:e})!==!1){if(e.preventDefault(),e.changedTouches)Array.from(e.changedTouches).forEach(({identifier:e})=>{n.delete(e)});else{let{pointerId:t=0}=e;n.delete(t)}n.size===0&&(this.style.willChange=``,this.$action=b)}}$handleWheel(e){if(this.disabled||(e.preventDefault(),this.$wheeling))return;this.$wheeling=!0,setTimeout(()=>{this.$wheeling=!1},50);let t=(e.deltaY>0?-1:1)*this.scaleStep;this.$emit(k,{action:_,scale:t,relatedEvent:e},{cancelable:!1})}$setAction(e){return N(e)&&(this.$action=e),this}$toCanvas(e){return new Promise((t,n)=>{if(!this.isConnected){n(Error(`The current element is not connected to the DOM.`));return}let r=document.createElement(`canvas`),i=this.offsetWidth,a=this.offsetHeight,o=1;I(e)&&(F(e.width)||F(e.height))&&({width:i,height:a}=H({aspectRatio:i/a,width:e.width,height:e.height}),o=i/this.offsetWidth),r.width=i,r.height=a;let s=this.querySelector(this.$getTagNameOf(d));if(!s){t(r);return}s.$ready().then(n=>{let c=r.getContext(`2d`);if(c){let[t,l,u,d,f,p]=s.$getTransform(),m=f,h=p,g=n.naturalWidth,_=n.naturalHeight;o!==1&&(m*=o,h*=o,g*=o,_*=o);let v=g/2,y=_/2;c.fillStyle=`transparent`,c.fillRect(0,0,i,a),I(e)&&L(e.beforeDraw)&&e.beforeDraw.call(this,c,r),c.save(),c.translate(v,y),c.transform(t,l,u,d,m,h),c.translate(-v,-y),c.drawImage(n,0,0,g,_),c.restore()}t(r)}).catch(n)})}};K.$name=s,K.$version=`2.1.1`;var Re=`: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%}`,ze=new WeakMap,Be=[`alt`,`crossorigin`,`decoding`,`elementtiming`,`fetchpriority`,`loading`,`referrerpolicy`,`sizes`,`src`,`srcset`],q=class extends G{constructor(){super(...arguments),this.$isReady=!1,this.$matrix=[1,0,0,1,0,0],this.$onLoad=null,this.$onCanvasAction=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=null,this.$actionStartTarget=null,this.$style=Re,this.$image=new Image,this.initialCenterSize=`contain`,this.rotatable=!1,this.scalable=!1,this.skewable=!1,this.slottable=!1,this.translatable=!1,this.alt=``,this.crossorigin=``,this.decoding=``,this.elementtiming=``,this.fetchpriority=``,this.loading=``,this.referrerpolicy=``,this.sizes=``,this.src=``,this.srcset=``}set $canvas(e){ze.set(this,e)}get $canvas(){return ze.get(this)}static get observedAttributes(){return super.observedAttributes.concat(Be,[`initial-center-size`,`rotatable`,`scalable`,`skewable`,`translatable`])}attributeChangedCallback(e,t,n){Object.is(n,t)||(super.attributeChangedCallback(e,t,n),Be.includes(e)&&this.$image.setAttribute(e,n))}$propertyChangedCallback(e,t,n){if(!Object.is(n,t))switch(super.$propertyChangedCallback(e,t,n),e){case`initialCenterSize`:this.$nextTick(()=>{this.$center(n)});break;case`src`:this.$isReady=!1;break}}connectedCallback(){super.connectedCallback();let{$image:e}=this,t=this.closest(this.$getTagNameOf(s));t&&(this.$canvas=t,this.$setStyles({display:`block`,position:`absolute`}),this.$onCanvasActionStart=e=>{this.$actionStartTarget=e.detail?.relatedEvent?.target},this.$onCanvasActionEnd=()=>{this.$actionStartTarget=null},this.$onCanvasAction=this.$handleAction.bind(this),B(t,j,this.$onCanvasActionStart),B(t,A,this.$onCanvasActionEnd),B(t,k,this.$onCanvasAction)),this.$onLoad=this.$handleLoad.bind(this),B(e,O,this.$onLoad),this.$getShadowRoot().appendChild(e)}disconnectedCallback(){let{$image:e,$canvas:t}=this;t&&(this.$onCanvasActionStart&&=(z(t,j,this.$onCanvasActionStart),null),this.$onCanvasActionEnd&&=(z(t,A,this.$onCanvasActionEnd),null),this.$onCanvasAction&&=(z(t,k,this.$onCanvasAction),null)),e&&this.$onLoad&&(z(e,O,this.$onLoad),this.$onLoad=null),this.$getShadowRoot().removeChild(e),super.disconnectedCallback()}$handleLoad(){let{$image:e}=this;this.$setStyles({width:e.naturalWidth,height:e.naturalHeight}),this.$canvas&&this.$center(this.initialCenterSize),this.$isReady=!0}$handleAction(e){if(this.hidden||!(this.rotatable||this.scalable||this.translatable))return;let{$canvas:t}=this,{detail:n}=e;if(n){let{relatedEvent:e}=n,{action:r}=n;switch(r===`transform`&&(!this.rotatable||!this.scalable)&&(r=this.rotatable?v:this.scalable?_:b),r){case g:if(this.translatable){let r=null;e&&(r=e.target.closest(this.$getTagNameOf(f))),r||=t.querySelector(this.$getTagNameOf(f)),r&&r.multiple&&!r.active&&(r=t.querySelector(`${this.$getTagNameOf(f)}[active]`)),(!r||r.hidden||!r.movable||r.dynamic||!(this.$actionStartTarget&&r.contains(this.$actionStartTarget)))&&this.$move(n.endX-n.startX,n.endY-n.startY)}break;case v:if(this.rotatable)if(e){let{x:t,y:r}=this.getBoundingClientRect();this.$rotate(n.rotate,e.clientX-t,e.clientY-r)}else this.$rotate(n.rotate);break;case _:if(this.scalable)if(e){let t=e.target.closest(this.$getTagNameOf(f));if(!t||!t.zoomable||t.zoomable&&t.dynamic){let{x:t,y:r}=this.getBoundingClientRect();this.$zoom(n.scale,e.clientX-t,e.clientY-r)}}else this.$zoom(n.scale);break;case y:if(this.rotatable&&this.scalable){let{rotate:t}=n,{scale:r}=n;r<0?r=1/(1-r):r+=1;let i=Math.cos(t),a=Math.sin(t),[o,s,c,l]=[i*r,a*r,-a*r,i*r];if(e){let t=this.getBoundingClientRect(),n=e.clientX-t.x,r=e.clientY-t.y,[i,a,u,d]=this.$matrix,f=t.width/2,p=t.height/2,m=n-f,h=r-p,g=(m*d-u*h)/(i*d-u*a),_=(h*i-a*m)/(i*d-u*a);this.$transform(o,s,c,l,g*(1-o)+_*c,_*(1-l)+g*s)}else this.$transform(o,s,c,l,0,0)}break}}}$ready(e){let{$image:t}=this,n=new Promise((e,n)=>{let r=Error(`Failed to load the image source`);if(t.complete)t.naturalWidth>0&&t.naturalHeight>0?e(t):n(r);else{let i=()=>{z(t,oe,a),setTimeout(()=>{e(t)})},a=()=>{z(t,O,i),n(r)};be(t,O,i),be(t,oe,a)}});return L(e)&&n.then(t=>(e(t),t)),n}$center(e){let{parentElement:t}=this;if(!t)return this;let n=t.getBoundingClientRect(),r=n.width,i=n.height,{x:a,y:o,width:s,height:c}=this.getBoundingClientRect(),l=a+s/2,u=o+c/2,d=n.x+r/2,f=n.y+i/2,{translatable:p}=this;if(!p&&!this.$isReady&&(this.translatable=!0,this.$nextTick(()=>{this.translatable=p})),this.$move(d-l,f-u),e&&(s!==r||c!==i)){let t=r/s,n=i/c,{scalable:a}=this;switch(e&&!a&&!this.$isReady&&(this.scalable=!0,this.$nextTick(()=>{this.scalable=a})),e){case`cover`:this.$scale(Math.max(t,n));break;case`contain`:this.$scale(Math.min(t,n));break}}return this}$move(e,t=e){if(this.translatable&&P(e)&&P(t)){let[n,r,i,a]=this.$matrix,o=(e*a-i*t)/(n*a-i*r),s=(t*n-r*e)/(n*a-i*r);this.$translate(o,s)}return this}$moveTo(e,t=e){if(this.translatable&&P(e)&&P(t)){let[n,r,i,a]=this.$matrix,o=(e*a-i*t)/(n*a-i*r),s=(t*n-r*e)/(n*a-i*r);this.$setTransform(n,r,i,a,o,s)}return this}$rotate(e,t,n){if(this.rotatable){let r=V(e),i=Math.cos(r),a=Math.sin(r),[o,s,c,l]=[i,a,-a,i];if(P(t)&&P(n)){let[e,r,i,a]=this.$matrix,{width:u,height:d}=this.getBoundingClientRect(),f=u/2,p=d/2,m=t-f,h=n-p,g=(m*a-i*h)/(e*a-i*r),_=(h*e-r*m)/(e*a-i*r);this.$transform(o,s,c,l,g*(1-o)-_*c,_*(1-l)-g*s)}else this.$transform(o,s,c,l,0,0)}return this}$zoom(e,t,n){if(!this.scalable||e===0)return this;if(e<0?e=1/(1-e):e+=1,P(t)&&P(n)){let[r,i,a,o]=this.$matrix,{width:s,height:c}=this.getBoundingClientRect(),l=s/2,u=c/2,d=t-l,f=n-u,p=(d*o-a*f)/(r*o-a*i),m=(f*r-i*d)/(r*o-a*i);this.$transform(e,0,0,e,p*(1-e),m*(1-e))}else this.$scale(e);return this}$scale(e,t=e){return this.scalable&&this.$transform(e,0,0,t,0,0),this}$skew(e,t=0){if(this.skewable){let n=V(e),r=V(t);this.$transform(1,Math.tan(r),Math.tan(n),1,0,0)}return this}$translate(e,t=e){return this.translatable&&P(e)&&P(t)&&this.$transform(1,0,0,1,e,t),this}$transform(e,t,n,r,i,a){return P(e)&&P(t)&&P(n)&&P(r)&&P(i)&&P(a)?this.$setTransform(je(this.$matrix,[e,t,n,r,i,a])):this}$setTransform(e,t,n,r,i,a){if((this.rotatable||this.scalable||this.skewable||this.translatable)&&(Array.isArray(e)&&([e,t,n,r,i,a]=e),P(e)&&P(t)&&P(n)&&P(r)&&P(i)&&P(a))){let o=[...this.$matrix],s=[e,t,n,r,i,a];if(this.$emit(`transform`,{matrix:s,oldMatrix:o})===!1)return this;this.$matrix=s,this.style.transform=`matrix(${s.join(`, `)})`}return this}$getTransform(){return this.$matrix.slice()}$resetTransform(){return this.$setTransform([1,0,0,1,0,0])}};q.$name=d,q.$version=`2.1.1`;var Ve=`:host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}`,He=new WeakMap,J=class extends G{constructor(){super(...arguments),this.$onWindowResize=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=null,this.$onSelectionChange=null,this.$style=Ve,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(e){He.set(this,e)}get $canvas(){return He.get(this)}static get observedAttributes(){return super.observedAttributes.concat([`height`,`width`,`x`,`y`])}connectedCallback(){super.connectedCallback();let e=this.closest(this.$getTagNameOf(s));if(e){this.$canvas=e,this.style.position=`absolute`;let t=e.querySelector(this.$getTagNameOf(f));t&&(this.$onWindowResize=this.$render.bind(this),this.$onCanvasActionStart=e=>{t.hidden&&e.detail.action===`select`&&(this.hidden=!1)},this.$onCanvasActionEnd=e=>{t.hidden&&e.detail.action===`select`&&(this.hidden=!0)},this.$onSelectionChange=e=>{let{x:n,y:r,width:i,height:a}=e.defaultPrevented?t:e.detail;this.$change(n,r,i,a),(t.hidden||n===0&&r===0&&i===0&&a===0)&&(this.hidden=!0)},B(window,ce,this.$onWindowResize),B(e,j,this.$onCanvasActionStart),B(e,A,this.$onCanvasActionEnd),B(e,M,this.$onSelectionChange))}this.$render()}disconnectedCallback(){let{$canvas:e}=this;e&&(this.$onWindowResize&&=(z(window,ce,this.$onWindowResize),null),this.$onCanvasActionStart&&=(z(e,j,this.$onCanvasActionStart),null),this.$onCanvasActionEnd&&=(z(e,A,this.$onCanvasActionEnd),null),this.$onSelectionChange&&=(z(e,M,this.$onSelectionChange),null)),super.disconnectedCallback()}$change(e,t,n=this.width,r=this.height){return!P(e)||!P(t)||!P(n)||!P(r)||e===this.x&&t===this.y&&n===this.width&&r===this.height?this:(this.hidden&&=!1,this.x=e,this.y=t,this.width=n,this.height=r,this.$render())}$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:r.innerWidth*r.devicePixelRatio})}};J.$name=p,J.$version=`2.1.1`;var Ue=`: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}`,Y=class extends G{constructor(){super(...arguments),this.$onCanvasCropEnd=null,this.$onCanvasCropStart=null,this.$style=Ue,this.action=b,this.plain=!1,this.slottable=!1,this.themeColor=`rgba(51, 153, 255, 0.5)`}static get observedAttributes(){return super.observedAttributes.concat([`action`,`plain`])}};Y.$name=u,Y.$version=`2.1.1`;var We=`: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}`,Ge=new WeakMap,X=class extends G{constructor(){super(...arguments),this.$onCanvasAction=null,this.$onCanvasActionStart=null,this.$onCanvasActionEnd=null,this.$onDocumentKeyDown=null,this.$action=``,this.$actionStartTarget=null,this.$changing=!1,this.$style=We,this.$initialSelection={x:0,y:0,width:0,height:0},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.linked=!1,this.dynamic=!1,this.movable=!1,this.resizable=!1,this.zoomable=!1,this.multiple=!1,this.keyboard=!1,this.outlined=!1,this.precise=!1}set $canvas(e){Ge.set(this,e)}get $canvas(){return Ge.get(this)}static get observedAttributes(){return super.observedAttributes.concat([`active`,`aspect-ratio`,`dynamic`,`height`,`initial-aspect-ratio`,`initial-coverage`,`keyboard`,`linked`,`movable`,`multiple`,`outlined`,`precise`,`resizable`,`width`,`x`,`y`,`zoomable`])}$propertyChangedCallback(e,t,n){if(!Object.is(n,t))switch(super.$propertyChangedCallback(e,t,n),e){case`x`:case`y`:case`width`:case`height`:this.$changing||this.$nextTick(()=>{this.$change(this.x,this.y,this.width,this.height,this.aspectRatio,!0)});break;case`aspectRatio`:case`initialAspectRatio`:this.$nextTick(()=>{this.$initSelection()});break;case`initialCoverage`:this.$nextTick(()=>{F(n)&&n<=1&&this.$initSelection(!0,!0)});break;case`keyboard`:this.$nextTick(()=>{this.$canvas&&(n?this.$onDocumentKeyDown||(this.$onDocumentKeyDown=this.$handleKeyDown.bind(this),B(this.ownerDocument,se,this.$onDocumentKeyDown)):this.$onDocumentKeyDown&&=(z(this.ownerDocument,se,this.$onDocumentKeyDown),null))});break;case`multiple`:this.$nextTick(()=>{if(this.$canvas){let e=this.$getSelections();n?(e.forEach(e=>{e.active=!1}),this.active=!0,this.$emit(M,{x:this.x,y:this.y,width:this.width,height:this.height})):(this.active=!1,e.slice(1).forEach(e=>{this.$removeSelection(e)}))}});break;case`precise`:this.$nextTick(()=>{this.$change(this.x,this.y)});break;case`linked`:n&&(this.dynamic=!0);break}}connectedCallback(){super.connectedCallback();let e=this.closest(this.$getTagNameOf(s));e?(this.$canvas=e,this.$setStyles({position:`absolute`,transform:`translate(${this.x}px, ${this.y}px)`}),this.hidden||this.$render(),this.$initSelection(!0),this.$onCanvasActionStart=this.$handleActionStart.bind(this),this.$onCanvasActionEnd=this.$handleActionEnd.bind(this),this.$onCanvasAction=this.$handleAction.bind(this),B(e,j,this.$onCanvasActionStart),B(e,A,this.$onCanvasActionEnd),B(e,k,this.$onCanvasAction)):this.$render()}disconnectedCallback(){let{$canvas:e}=this;e&&(this.$onCanvasActionStart&&=(z(e,j,this.$onCanvasActionStart),null),this.$onCanvasActionEnd&&=(z(e,A,this.$onCanvasActionEnd),null),this.$onCanvasAction&&=(z(e,k,this.$onCanvasAction),null)),super.disconnectedCallback()}$getSelections(){let e=[];return this.parentElement&&(e=Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(f)))),e}$initSelection(e=!1,t=!1){let{initialCoverage:n,parentElement:r}=this;if(F(n)&&r){let i=this.aspectRatio||this.initialAspectRatio,a=(t?0:this.width)||r.offsetWidth*n,o=(t?0:this.height)||r.offsetHeight*n;F(i)&&({width:a,height:o}=H({aspectRatio:i,width:a,height:o})),this.$change(this.x,this.y,a,o),e&&this.$center(),this.$initialSelection={x:this.x,y:this.y,width:this.width,height:this.height}}}$createSelection(){let e=this.cloneNode(!0);return this.hasAttribute(`id`)&&e.removeAttribute(`id`),e.initialCoverage=NaN,this.active=!1,this.parentElement&&this.parentElement.insertBefore(e,this.nextSibling),e}$removeSelection(e=this){if(this.parentElement){let t=this.$getSelections();if(t.length>1){let n=t.indexOf(e),r=t[n+1]||t[n-1];r&&(e.active=!1,this.parentElement.removeChild(e),r.active=!0,r.$emit(M,{x:r.x,y:r.y,width:r.width,height:r.height}))}else this.$clear()}}$handleActionStart(e){let t=e.detail?.relatedEvent?.target;this.$action=``,this.$actionStartTarget=t,!this.hidden&&this.multiple&&!this.active&&t===this&&this.parentElement&&(this.$getSelections().forEach(e=>{e.active=!1}),this.active=!0,this.$emit(M,{x:this.x,y:this.y,width:this.width,height:this.height}))}$handleAction(e){let{currentTarget:t,detail:n}=e;if(!t||!n)return;let{relatedEvent:r}=n,{action:i}=n,a=r?Ce(r):null;if(!i&&this.multiple&&(i=this.$action||a?.action,this.$action=i),!i||this.hidden&&i!==`select`||this.multiple&&!this.active&&i!==`scale`)return;let{width:o,height:s}=this,c=n.endX-n.startX,l=n.endY-n.startY,{aspectRatio:u}=this;switch(!F(u)&&r.shiftKey&&(u=F(o)&&F(s)?o/s:1),i){case h:if(c!==0||l!==0){c===0?c=l:l===0&&(l=c);let{$canvas:e}=this,r=De(t);(this.multiple&&!this.hidden?this.$createSelection():this).$change(n.startX-r.left,n.startY-r.top,Math.abs(c),Math.abs(l),u),c<0?l<0?i=T:l>0&&(i=D):c>0&&(l<0?i=w:l>0&&(i=E)),e&&(e.$action=i)}break;case g:this.movable&&(this.dynamic||this.$actionStartTarget&&this.contains(this.$actionStartTarget))&&this.$move(c,l);break;case _:if(r&&this.zoomable&&(this.dynamic||this.contains(r.target))){let e=De(t);this.$zoom(n.scale,r.pageX-e.left,r.pageY-e.top)}break;default:this.$resize(i,c,l,u)}}$handleActionEnd(){this.$action=``,this.$actionStartTarget=null}$handleKeyDown(e){if(this.hidden||!this.keyboard||this.multiple&&!this.active||e.defaultPrevented)return;let{activeElement:t}=document;if(!(t&&([`INPUT`,`TEXTAREA`].includes(t.tagName)||[`true`,`plaintext-only`].includes(t.contentEditable))))switch(e.key){case`Backspace`:e.metaKey&&(e.preventDefault(),this.$removeSelection());break;case`Delete`:e.preventDefault(),this.$removeSelection();break;case`ArrowLeft`:e.preventDefault(),this.$move(-1,0);break;case`ArrowRight`:e.preventDefault(),this.$move(1,0);break;case`ArrowUp`:e.preventDefault(),this.$move(0,-1);break;case`ArrowDown`:e.preventDefault(),this.$move(0,1);break;case`+`:e.preventDefault(),this.$zoom(.1);break;case`-`:e.preventDefault(),this.$zoom(-.1);break}}$center(){let{parentElement:e}=this;if(!e)return this;let t=(e.offsetWidth-this.width)/2,n=(e.offsetHeight-this.height)/2;return this.$change(t,n)}$move(e,t=e){return this.$moveTo(this.x+e,this.y+t)}$moveTo(e,t=e){return this.movable?this.$change(e,t):this}$resize(e,t=0,n=0,r=this.aspectRatio){if(!this.resizable)return this;let i=F(r),{$canvas:a}=this,{x:o,y:s,width:c,height:l}=this;switch(e){case x:s+=n,l-=n,l<0&&(e=C,l=-l,s-=l),i&&(t=n*r,o+=t/2,c-=t,c<0&&(c=-c,o-=c));break;case S:c+=t,c<0&&(e=ee,c=-c,o-=c),i&&(n=t/r,s-=n/2,l+=n,l<0&&(l=-l,s-=l));break;case C:l+=n,l<0&&(e=x,l=-l,s-=l),i&&(t=n*r,o-=t/2,c+=t,c<0&&(c=-c,o-=c));break;case ee:o+=t,c-=t,c<0&&(e=S,c=-c,o-=c),i&&(n=t/r,s+=n/2,l-=n,l<0&&(l=-l,s-=l));break;case w:i&&(n=-t/r),s+=n,l-=n,c+=t,c<0&&l<0?(e=D,c=-c,l=-l,o-=c,s-=l):c<0?(e=T,c=-c,o-=c):l<0&&(e=E,l=-l,s-=l);break;case T:i&&(n=t/r),o+=t,s+=n,c-=t,l-=n,c<0&&l<0?(e=E,c=-c,l=-l,o-=c,s-=l):c<0?(e=w,c=-c,o-=c):l<0&&(e=D,l=-l,s-=l);break;case E:i&&(n=t/r),c+=t,l+=n,c<0&&l<0?(e=T,c=-c,l=-l,o-=c,s-=l):c<0?(e=D,c=-c,o-=c):l<0&&(e=w,l=-l,s-=l);break;case D:i&&(n=-t/r),o+=t,c-=t,l+=n,c<0&&l<0?(e=w,c=-c,l=-l,o-=c,s-=l):c<0?(e=E,c=-c,o-=c):l<0&&(e=T,l=-l,s-=l);break}return a&&a.$setAction(e),this.$change(o,s,c,l)}$zoom(e,t,n){if(!this.zoomable||e===0)return this;e<0?e=1/(1-e):e+=1;let{width:r,height:i}=this,a=r*e,o=i*e,s=this.x,c=this.y;return P(t)&&P(n)?(s-=(a-r)*((t-this.x)/r),c-=(o-i)*((n-this.y)/i)):(s-=(a-r)/2,c-=(o-i)/2),this.$change(s,c,a,o)}$change(e,t,n=this.width,r=this.height,i=this.aspectRatio,a=!1){return this.$changing||!P(e)||!P(t)||!P(n)||!P(r)||n<0||r<0||(F(i)&&({width:n,height:r}=H({aspectRatio:i,width:n,height:r},`cover`)),this.precise||(e=Math.round(e),t=Math.round(t),n=Math.round(n),r=Math.round(r)),e===this.x&&t===this.y&&n===this.width&&r===this.height&&Object.is(i,this.aspectRatio)&&!a)||(this.hidden&&=!1,this.$emit(`change`,{x:e,y:t,width:n,height:r})===!1)?this:(this.$changing=!0,this.x=e,this.y=t,this.width=n,this.height=r,this.$changing=!1,this.$render())}$reset(){let{x:e,y:t,width:n,height:r}=this.$initialSelection;return this.$change(e,t,n,r)}$clear(){return this.$change(0,0,0,0,NaN,!0),this.hidden=!0,this}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height})}$toCanvas(e){return new Promise((t,n)=>{if(!this.isConnected){n(Error(`The current element is not connected to the DOM.`));return}let r=document.createElement(`canvas`),{width:i,height:a}=this,o=1;if(I(e)&&(F(e.width)||F(e.height))&&({width:i,height:a}=H({aspectRatio:i/a,width:e.width,height:e.height}),o=i/this.width),r.width=i,r.height=a,!this.$canvas){t(r);return}let s=this.$canvas.querySelector(this.$getTagNameOf(d));if(!s){t(r);return}s.$ready().then(n=>{let c=r.getContext(`2d`);if(c){let[t,l,u,d,f,p]=s.$getTransform(),m=-this.x,h=-this.y,g=(m*d-u*h)/(t*d-u*l),_=(h*t-l*m)/(t*d-u*l),v=t*g+u*_+f,y=l*g+d*_+p,b=n.naturalWidth,x=n.naturalHeight;o!==1&&(v*=o,y*=o,b*=o,x*=o);let S=b/2,C=x/2;c.fillStyle=`transparent`,c.fillRect(0,0,i,a),I(e)&&L(e.beforeDraw)&&e.beforeDraw.call(this,c,r),c.save(),c.translate(S,C),c.transform(t,l,u,d,v,y),c.translate(-S,-C),c.drawImage(n,0,0,b,x),c.restore()}t(r)}).catch(n)})}};X.$name=f,X.$version=`2.1.1`;var Ke=`: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)}`,Z=class extends G{constructor(){super(...arguments),this.$style=Ke,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(e,t,n){Object.is(n,t)||(super.$propertyChangedCallback(e,t,n),(e===`rows`||e===`columns`)&&this.$nextTick(()=>{this.$render()}))}connectedCallback(){super.connectedCallback(),this.$render()}$render(){let e=this.$getShadowRoot(),t=document.createDocumentFragment();for(let e=0;e<this.rows;e+=1){let e=document.createElement(`span`);e.setAttribute(`role`,`row`);for(let t=0;t<this.columns;t+=1){let t=document.createElement(`span`);t.setAttribute(`role`,`gridcell`),e.appendChild(t)}t.appendChild(e)}e&&(e.innerHTML=``,e.appendChild(t))}};Z.$name=l,Z.$version=`2.1.1`;var qe=`: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%)}`,Q=class extends G{constructor(){super(...arguments),this.$style=qe,this.centered=!1,this.slottable=!1,this.themeColor=`rgba(238, 238, 238, 0.5)`}static get observedAttributes(){return super.observedAttributes.concat([`centered`])}};Q.$name=c,Q.$version=`2.1.1`;var Je=`:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}`,Ye=new WeakMap,Xe=new WeakMap,Ze=new WeakMap,Qe=new WeakMap,$e=`both`,et=`horizontal`,tt=`vertical`,nt=`none`,$=class extends G{constructor(){super(...arguments),this.$onSelectionChange=null,this.$onSourceImageLoad=null,this.$onSourceImageTransform=null,this.$scale=1,this.$style=Je,this.resize=tt,this.selection=``,this.slottable=!1}set $image(e){Xe.set(this,e)}get $image(){return Xe.get(this)}set $sourceImage(e){Qe.set(this,e)}get $sourceImage(){return Qe.get(this)}set $canvas(e){Ye.set(this,e)}get $canvas(){return Ye.get(this)}set $selection(e){Ze.set(this,e)}get $selection(){return Ze.get(this)}static get observedAttributes(){return super.observedAttributes.concat([`resize`,`selection`])}connectedCallback(){super.connectedCallback();let e=null;if(e=this.selection?Ee(this)?.querySelector(this.selection)??null:this.closest(this.$getTagNameOf(f)),R(e)){this.$selection=e,this.$onSelectionChange=this.$handleSelectionChange.bind(this),B(e,M,this.$onSelectionChange);let t=e.closest(this.$getTagNameOf(s));if(t){this.$canvas=t;let e=t.querySelector(this.$getTagNameOf(d));e&&(this.$sourceImage=e,this.$image=e.cloneNode(!0),this.$getShadowRoot().appendChild(this.$image),this.$onSourceImageLoad=this.$handleSourceImageLoad.bind(this),this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this),B(e.$image,O,this.$onSourceImageLoad),B(e,ue,this.$onSourceImageTransform))}this.$render()}}disconnectedCallback(){let{$selection:e,$sourceImage:t}=this;e&&this.$onSelectionChange&&(z(e,M,this.$onSelectionChange),this.$onSelectionChange=null),t&&this.$onSourceImageLoad&&(z(t.$image,O,this.$onSourceImageLoad),this.$onSourceImageLoad=null),t&&this.$onSourceImageTransform&&(z(t,ue,this.$onSourceImageTransform),this.$onSourceImageTransform=null),super.disconnectedCallback()}$handleSelectionChange(e){this.$render(e.defaultPrevented?this.$selection:e.detail)}$handleSourceImageLoad(){let{$image:e,$sourceImage:t}=this,n=e.getAttribute(`src`),r=t.getAttribute(`src`);r&&r!==n&&(e.setAttribute(`src`,r),e.$ready(()=>{this.$render()}))}$handleSourceImageTransform(e){this.$render(void 0,e.detail.matrix)}$render(e,t){let{$canvas:n,$selection:r}=this;!e&&!r.hidden&&(e=r),(!e||e.x===0&&e.y===0&&e.width===0&&e.height===0)&&(e={x:0,y:0,width:n.offsetWidth,height:n.offsetHeight});let{x:i,y:a,width:o,height:s}=e,c={},{clientWidth:l,clientHeight:u}=this,d=l,f=u,p=NaN;switch(this.resize){case $e:p=1,d=o,f=s,c.width=o,c.height=s;break;case et:p=s>0?u/s:0,d=o*p,c.width=d;break;case tt:p=o>0?l/o:0,f=s*p,c.height=f;break;case nt:default:l>0?p=o>0?l/o:0:u>0&&(p=s>0?u/s:0)}this.$scale=p,this.$setStyles(c),this.$sourceImage&&setTimeout(()=>{this.$transformImageByOffset(t??this.$sourceImage.$getTransform(),-i,-a)})}$transformImageByOffset(e,t,n){let{$image:r,$scale:i,$sourceImage:a}=this;if(a&&r&&i>=0){let[o,s,c,l,u,d]=e,f=(t*l-c*n)/(o*l-c*s),p=(n*o-s*t)/(o*l-c*s),m=o*f+c*p+u,h=s*f+l*p+d;a.$ready(e=>{this.$setStyles.call(r,{width:e.naturalWidth*i,height:e.naturalHeight*i})}),r.$setTransform(o,s,c,l,m*i,h*i)}}};$.$name=m,$.$version=`2.1.1`;var rt=`<cropper-canvas background><cropper-image rotatable scalable skewable translatable></cropper-image><cropper-shade hidden></cropper-shade><cropper-handle action="select" plain></cropper-handle><cropper-selection initial-coverage="0.5" movable resizable><cropper-grid role="grid" bordered covered></cropper-grid><cropper-crosshair centered></cropper-crosshair><cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle><cropper-handle action="n-resize"></cropper-handle><cropper-handle action="e-resize"></cropper-handle><cropper-handle action="s-resize"></cropper-handle><cropper-handle action="w-resize"></cropper-handle><cropper-handle action="ne-resize"></cropper-handle><cropper-handle action="nw-resize"></cropper-handle><cropper-handle action="se-resize"></cropper-handle><cropper-handle action="sw-resize"></cropper-handle></cropper-selection></cropper-canvas>`,it=/^img|canvas$/,at=/<(\/?(?:script|style)[^>]*)>/gi,ot={template:rt};K.$define(),Q.$define(),Z.$define(),Y.$define(),q.$define(),X.$define(),J.$define(),$.$define();var st=class{constructor(e,t){if(this.options=ot,N(e)&&(e=document.querySelector(e)),!R(e)||!it.test(e.localName))throw Error(`The first argument is required and must be an <img> or <canvas> element.`);this.element=e,t=Object.assign(Object.assign({},ot),t),this.options=t;let{container:n}=t;if(n&&(N(n)&&(n=Ee(e)?.querySelector(n)),!R(n)))throw Error("The `container` option must be an element or a valid selector.");R(n)||(n=e.parentElement?e.parentElement:e.ownerDocument.body),this.container=n;let r=e.localName,i=``;r===`img`?{src:i}=e:r===`canvas`&&window.HTMLCanvasElement&&(i=e.toDataURL());let{template:a}=t;if(a&&N(a)){let t=document.createElement(`template`),o=document.createDocumentFragment();t.innerHTML=a.replace(at,`&lt;$1&gt;`),o.appendChild(t.content),Array.from(o.querySelectorAll(d)).forEach(t=>{t.setAttribute(`src`,i),t.setAttribute(`alt`,e.alt||`The image to crop`),r===`img`&&[`crossorigin`,`decoding`,`elementtiming`,`fetchpriority`,`loading`,`referrerpolicy`,`sizes`,`srcset`].forEach(n=>{e.hasAttribute(n)&&t.setAttribute(n,e.getAttribute(n)||``)})}),e.parentElement?(e.style.display=`none`,n.insertBefore(o,e.nextSibling)):n.appendChild(o)}}getCropperCanvas(){return this.container.querySelector(s)}getCropperImage(){return this.container.querySelector(d)}getCropperSelection(){return this.container.querySelector(f)}getCropperSelections(){return this.container.querySelectorAll(f)}destroy(){var e;let t=this.getCropperCanvas();t&&((e=t.parentElement)==null||e.removeChild(t)),this.element&&(this.element.style.display=``)}};st.version=`2.1.1`;var ct=(0,t.defineComponent)({name:`CropperCanvas`,props:{background:{type:Boolean,default:!1}},setup(e,{slots:n}){return K.$define(),()=>(0,t.h)(`cropper-canvas`,{...e,style:`height: 500px`},n.default?.())}}),lt=(0,t.defineComponent)({name:`CropperImage`,props:{src:{type:String,required:!0},alt:{type:String,default:``},initialCenterSize:{type:String,default:`contain`},rotatable:{type:Boolean,default:!1},scalable:{type:Boolean,default:!1},skewable:{type:Boolean,default:!1},slottable:{type:Boolean,default:!1},translatable:{type:Boolean,default:!1}},setup(e,{slots:n}){return q.$define(),()=>(0,t.h)(`cropper-image`,e,n.default?.())}}),ut=(0,t.defineComponent)({name:`CropperShade`,props:{x:{type:Number,default:0},y:{type:Number,default:0},width:{type:Number,default:0},height:{type:Number,default:0},slottable:{type:Boolean,default:!1},themeColor:{type:String,default:`rgba(0, 0, 0, 0.65)`},hidden:{type:Boolean,default:!1}},setup(e,{slots:n}){return J.$define(),()=>(0,t.h)(`cropper-shade`,e,n.default?.())}}),dt=(0,t.defineComponent)({name:`CropperHandle`,props:{action:{type:String,default:`none`},plain:{type:Boolean,default:!1},slottable:{type:Boolean,default:!1},themeColor:{type:String,default:`rgba(51, 153, 255, 0.5)`}},setup(e,{slots:n}){return Y.$define(),()=>(0,t.h)(`cropper-handle`,e,n.default?.())}}),ft=(0,t.defineComponent)({name:`CropperSelection`,props:{x:{type:Number,default:0},y:{type:Number,default:0},width:{type:Number,default:0},height:{type:Number,default:0},aspectRatio:{type:Number},initialAspectRatio:{type:Number},initialCoverage:{type:Number},dynamic:{type:Boolean,default:!1},movable:{type:Boolean,default:!1},resizable:{type:Boolean,default:!1},zoomable:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},keyboard:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},precise:{type:Boolean,default:!1}},setup(e,{slots:n,expose:r}){return X.$define(),r({selection:(0,t.useTemplateRef)(`sel`)}),()=>(0,t.h)(`cropper-selection`,{ref:`sel`,...e},n.default?.())}}),pt=(0,t.defineComponent)({name:`CropperCrosshair`,props:{centered:{type:Boolean,default:!1}},setup(e,{slots:n}){return Q.$define(),()=>(0,t.h)(`cropper-crosshair`,e,n.default?.())}}),mt=(0,t.defineComponent)({name:`CropperGrid`,props:{role:{type:String,default:`grid`},covered:{type:Boolean,default:!1}},setup(e,{slots:n}){return Z.$define(),()=>(0,t.h)(`cropper-grid`,e,n.default?.())}}),ht=(0,t.defineComponent)({name:`CropperViewer`,props:{resize:{type:String,default:`vertical`},selection:{type:String,default:``}},setup(e,{slots:n}){return $.$define(),()=>(0,t.h)(`cropper-viewer`,e,n.default?.())}});e.CropperCanvas=ct,e.CropperCrosshair=pt,e.CropperGrid=mt,e.CropperHandle=dt,e.CropperImage=lt,e.CropperSelection=ft,e.CropperShade=ut,e.CropperViewer=ht,e.default={install:e=>{e.component(`CropperCanvas`,ct),e.component(`CropperImage`,lt),e.component(`CropperShade`,ut),e.component(`CropperHandle`,dt),e.component(`CropperSelection`,ft),e.component(`CropperCrosshair`,pt),e.component(`CropperGrid`,mt),e.component(`CropperViewer`,ht)}}});

package/dist/lib.d.ts

@@ -0,0 +1,14 @@
+import { App } from 'vue';
+import { default as CropperCanvas } from './components/CropperCanvas.vue';
+import { default as CropperImage } from './components/CropperImage.vue';
+import { default as CropperShade } from './components/CropperShade.vue';
+import { default as CropperHandle } from './components/CropperHandle.vue';
+import { default as CropperSelection } from './components/CropperSelection.vue';
+import { default as CropperCrosshair } from './components/CropperCrosshair.vue';
+import { default as CropperGrid } from './components/CropperGrid.vue';
+import { default as CropperViewer } from './components/CropperViewer.vue';
+export { CropperCanvas, CropperImage, CropperShade, CropperHandle, CropperSelection, CropperCrosshair, CropperGrid, CropperViewer, };
+declare const _default: {
+    install: (app: App) => void;
+};
+export default _default;

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cropperjs2",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "files": [
     "dist"