@getflip/swirl-components 0.477.0 → 0.478.0

package/dist/components/swirl-file-viewer-image2.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as t,createEvent as s,h as e,Host as h,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{d as o}from"./swirl-icon-error2.js";import{d as n}from"./swirl-inline-error2.js";import{d as l}from"./swirl-spinner2.js";import{d as c}from"./swirl-visually-hidden2.js";const m=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.activate=s(this,"activate",7),this.description="",this.errorMessage="File could not be loaded.",this.maxZoom=3,this.loading=!0,this.transformed=!1,this.panX=0,this.panY=0,this.zoom=1,this.onError=()=>{this.error=!0,this.loading=!1},this.onLoad=()=>{this.error=!1,this.loading=!1},this.onDblClick=i=>{this.clickToZoom(i)},this.onWheel=i=>{i.preventDefault();const t=Math.min(Math.max(1,this.zoom+-1*i.deltaY/100),this.maxZoom);t!==this.zoom&&(this.updateTransformOrigin(i.offsetX,i.offsetY),this.updateZoomAndPan(t,0,0))},this.onPointerDown=i=>{this.startPan(i)},this.onPointerMove=i=>{this.pan(i)},this.onPointerUp=()=>{this.endPan()},this.onTouchStart=i=>{i.preventDefault(),2===i.touches.length&&this.startPinchToZoom(i)},this.onTouchMove=i=>{i.preventDefault(),this.pinching&&this.pinchToZoom(i)},this.onTouchEnd=i=>{i.preventDefault(),this.pinching&&this.endPinchToZoom()},this.startPinchToZoom=i=>{Boolean(this.imageEl)&&(this.pinchDistance=this.getPinchDistance(i),this.pinching=!0)},this.pinchToZoom=i=>{const t=this.getPinchDistance(i)-this.pinchDistance,s=Math.min(Math.max(1,this.zoom+t/100),this.maxZoom);this.zoom!==s&&(this.pinchDistance=this.getPinchDistance(i),this.updateZoomAndPan(s))},this.endPinchToZoom=()=>{this.pinching=!1,Math.abs(this.zoom-1)<.2&&(this.zoom=1,this.imageEl.style.transform="")},this.getPinchDistance=i=>Math.hypot(i.touches[0].pageX-i.touches[1].pageX,i.touches[0].pageY-i.touches[1].pageY),this.clickToZoom=i=>{if(!(navigator.maxTouchPoints>1))if(1===this.zoom){const t=i.pageX-this.el.getBoundingClientRect().x,s=i.pageY-this.el.getBoundingClientRect().y;this.updateTransformOrigin(t,s),this.updateZoomAndPan(2)}else this.updateZoomAndPan(1)},this.updateZoomAndPan=(i,t,s)=>{const e=void 0===i?this.zoom:i,h=e-this.zoom,r=void 0===t?this.panX+this.panX*h:t,a=void 0===t?this.panY+this.panY*h:s,o=this.panX,n=this.panY;this.zoom=e,this.panX=r,this.panY=a;const l=(this.el.parentElement||this.el).getBoundingClientRect(),c=this.imageEl.getBoundingClientRect(),m=c.bottom<l.bottom&&a<n||c.top>l.top&&a>n;(c.right<l.right&&r<o||c.left>l.left&&r>o)&&(this.panX=o),m&&(this.panY=n),1===this.zoom&&(this.panX=0,this.panY=0),this.imageEl.style.transform=`matrix(${this.zoom}, 0, 0, ${this.zoom}, ${this.panX}, ${this.panY})`;const f=1!==this.zoom||0!==this.panX||0!==this.panY;f!==this.transformed&&(this.transformed=f)},this.updateTransformOrigin=(i,t)=>{this.transformOriginX=i,this.transformOriginY=t,this.imageEl.style.transformOrigin=`${this.transformOriginX}px ${this.transformOriginY}px`},this.startPan=i=>{this.panning=!0,this.previousScreenX=i.screenX,this.previousScreenY=i.screenY},this.pan=i=>{const t=this.previousScreenX||0,s=this.previousScreenY||0;this.previousScreenX=i.screenX,this.previousScreenY=i.screenY,this.panning&&!this.pinching&&(i.preventDefault(),this.updateZoomAndPan(this.zoom,this.panX+i.screenX-t,this.panY+i.screenY-s))},this.endPan=()=>{this.panning=!1},this.onImageElementUpdate=i=>{this.imageEl?.removeEventListener("load",this.onLoad),this.imageEl?.removeEventListener("error",this.onError),this.imageEl=i,this.imageEl&&(this.imageEl.addEventListener("load",this.onLoad),this.imageEl.addEventListener("error",this.onError))}}componentDidLoad(){this.activate.emit(this.el)}disconnectedCallback(){this.imageEl?.removeEventListener("load",this.onLoad),this.imageEl?.removeEventListener("error",this.onError)}watchFile(){this.error=!1,this.loading=!0}async getZoom(){return this.zoom}async resetZoom(){return this.updateZoomAndPan(1)}render(){const i=!!this.el.querySelector('[slot="watermark"]'),t=a("file-viewer-image",{"file-viewer-image--show-watermark":i&&!this.transformed&&!this.loading});return e(h,{key:"8d6ccc3b7eb4e7174071b7d88f55a19be56bfa63",onDblClick:this.onDblClick,onWheel:this.onWheel,onPointerDown:this.onPointerDown,onPointerMove:this.onPointerMove,onPointerUp:this.onPointerUp,onTouchStart:this.onTouchStart,onTouchMove:this.onTouchMove,onTouchEnd:this.onTouchEnd},this.error&&e("swirl-inline-error",{key:"b2a0e1a0bd883dc46c9aaaf333d6e167d9523784",class:"file-viewer-image__error",message:this.errorMessage}),e("figure",{key:"42246ffddbf023401bcac78b942c4e6a85e81205",class:t},e("span",{key:"16b35439ebb91d26decda488129b37ceaf9e0564",class:"file-viewer-image__container"},e("img",{key:"6834de080105e992cbc9f6b932ca4637495f51ac",alt:this.description,class:"file-viewer-image__image",ref:this.onImageElementUpdate,src:this.file}),e("span",{key:"17fc8f4a5b719dead7f40570525d4c9555e51fa4",class:"file-viewer-image__watermark"},e("slot",{key:"ba029d13f8d17fcf52bf6cf2ba7eea80b23c7bab",name:"watermark"}))),this.loading&&e("div",{key:"612820304ff2775a40ab8daa02e192e6a192eba6",class:"file-viewer-image__spinner"},e("swirl-spinner",{key:"81d3427661731ef60c5b320086143cc414f144af"}))))}get el(){return this}static get watchers(){return{file:[{watchFile:0}]}}static get style(){return":host{position:relative;display:inline-flex;max-height:100%;pointer-events:none}:host *{box-sizing:border-box}.file-viewer-image{display:inline-flex;margin:0;justify-content:center}.file-viewer-image--show-watermark .file-viewer-image__watermark{display:inline-flex}.file-viewer-image__container{position:relative;display:flex;max-width:100%}.file-viewer-image__image{max-width:100%;pointer-events:auto;-o-object-fit:contain;object-fit:contain}.file-viewer-image__watermark{position:absolute;z-index:1;top:var(--s-space-12);right:var(--s-space-12);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.file-viewer-image__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.file-viewer-image__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-image__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}"}},[257,"swirl-file-viewer-image",{description:[1],errorMessage:[1,"error-message"],file:[1],maxZoom:[2,"max-zoom"],error:[32],loading:[32],transformed:[32],getZoom:[64],resetZoom:[64]},void 0,{file:[{watchFile:0}]}]);function f(){"undefined"!=typeof customElements&&["swirl-file-viewer-image","swirl-icon-error","swirl-inline-error","swirl-spinner","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-file-viewer-image":customElements.get(r(i))||customElements.define(r(i),m);break;case"swirl-icon-error":customElements.get(r(i))||o();break;case"swirl-inline-error":customElements.get(r(i))||n();break;case"swirl-spinner":customElements.get(r(i))||l();break;case"swirl-visually-hidden":customElements.get(r(i))||c()}}))}export{m as S,f as d}
+import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as h,transformTag as r}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{d as a}from"./swirl-icon-error2.js";import{d as n}from"./swirl-inline-error2.js";import{d as l}from"./swirl-spinner2.js";import{d as c}from"./swirl-visually-hidden2.js";const m=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.activate=e(this,"activate",7),this.description="",this.errorMessage="File could not be loaded.",this.maxZoom=3,this.loading=!0,this.transformed=!1,this.panX=0,this.panY=0,this.zoom=1,this.onError=()=>{this.error=!0,this.loading=!1},this.onLoad=()=>{this.error=!1,this.loading=!1},this.onDblClick=i=>{this.clickToZoom(i)},this.onWheel=i=>{i.preventDefault();const t=Math.min(Math.max(1,this.zoom+-1*i.deltaY/100),this.maxZoom);t!==this.zoom&&(this.updateTransformOrigin(i.offsetX,i.offsetY),this.updateZoomAndPan(t,0,0))},this.onPointerDown=i=>{this.startPan(i)},this.onPointerMove=i=>{this.pan(i)},this.onPointerUp=()=>{this.endPan()},this.onTouchStart=i=>{i.preventDefault(),2===i.touches.length&&this.startPinchToZoom(i)},this.onTouchMove=i=>{i.preventDefault(),this.pinching&&this.pinchToZoom(i)},this.onTouchEnd=i=>{i.preventDefault(),this.pinching&&this.endPinchToZoom()},this.startPinchToZoom=i=>{Boolean(this.imageEl)&&(this.pinchDistance=this.getPinchDistance(i),this.pinching=!0)},this.pinchToZoom=i=>{const t=this.getPinchDistance(i)-this.pinchDistance,e=Math.min(Math.max(1,this.zoom+t/100),this.maxZoom);this.zoom!==e&&(this.pinchDistance=this.getPinchDistance(i),this.updateZoomAndPan(e))},this.endPinchToZoom=()=>{this.pinching=!1,Math.abs(this.zoom-1)<.2&&(this.zoom=1,this.imageEl.style.transform="")},this.getPinchDistance=i=>Math.hypot(i.touches[0].pageX-i.touches[1].pageX,i.touches[0].pageY-i.touches[1].pageY),this.clickToZoom=i=>{if(!(navigator.maxTouchPoints>1))if(1===this.zoom){const t=i.pageX-this.el.getBoundingClientRect().x,e=i.pageY-this.el.getBoundingClientRect().y;this.updateTransformOrigin(t,e),this.updateZoomAndPan(2)}else this.updateZoomAndPan(1)},this.updateZoomAndPan=(i,t,e)=>{const s=void 0===i?this.zoom:i,h=s-this.zoom,r=void 0===t?this.panX+this.panX*h:t,o=void 0===t?this.panY+this.panY*h:e,a=this.panX,n=this.panY;this.zoom=s,this.panX=r,this.panY=o;const l=(this.el.parentElement||this.el).getBoundingClientRect(),c=this.imageEl.getBoundingClientRect(),m=c.bottom<l.bottom&&o<n||c.top>l.top&&o>n;(c.right<l.right&&r<a||c.left>l.left&&r>a)&&(this.panX=a),m&&(this.panY=n),1===this.zoom&&(this.panX=0,this.panY=0),this.imageEl.style.transform=`matrix(${this.zoom}, 0, 0, ${this.zoom}, ${this.panX}, ${this.panY})`;const d=1!==this.zoom||0!==this.panX||0!==this.panY;d!==this.transformed&&(this.transformed=d)},this.updateTransformOrigin=(i,t)=>{this.transformOriginX=i,this.transformOriginY=t,this.imageEl.style.transformOrigin=`${this.transformOriginX}px ${this.transformOriginY}px`},this.startPan=i=>{this.panning=!0,this.previousScreenX=i.screenX,this.previousScreenY=i.screenY},this.pan=i=>{const t=this.previousScreenX||0,e=this.previousScreenY||0;this.previousScreenX=i.screenX,this.previousScreenY=i.screenY,this.panning&&!this.pinching&&(i.preventDefault(),this.updateZoomAndPan(this.zoom,this.panX+i.screenX-t,this.panY+i.screenY-e))},this.endPan=()=>{this.panning=!1},this.onImageElementUpdate=i=>{this.imageEl?.removeEventListener("load",this.onLoad),this.imageEl?.removeEventListener("error",this.onError),this.imageEl=i,this.imageEl&&(this.imageEl.addEventListener("load",this.onLoad),this.imageEl.addEventListener("error",this.onError))}}componentDidLoad(){this.activate.emit(this.el)}disconnectedCallback(){this.imageEl?.removeEventListener("load",this.onLoad),this.imageEl?.removeEventListener("error",this.onError)}watchFile(){this.error=!1,this.loading=!0}async getZoom(){return this.zoom}async resetZoom(){return this.updateZoomAndPan(1)}render(){const i=!!this.el.querySelector('[slot="watermark"]'),t=o("file-viewer-image",{"file-viewer-image--show-watermark":i&&!this.transformed&&!this.loading});return s(h,{key:"c59b39ede55832743bd9be54419349984c0fb3f1",onDblClick:this.onDblClick,onWheel:this.onWheel,onPointerDown:this.onPointerDown,onPointerMove:this.onPointerMove,onPointerUp:this.onPointerUp,onTouchStart:this.onTouchStart,onTouchMove:this.onTouchMove,onTouchEnd:this.onTouchEnd},this.error&&s("swirl-inline-error",{key:"d115b5c266b52d99238098d2f4ba4f067b91763a",class:"file-viewer-image__error",message:this.errorMessage}),s("figure",{key:"3631dbb3895e6c997911b2dac2e02df8c012e9ed",class:t},s("span",{key:"8d968364c562be9dcfabaeb7db8df25a1cf458f1",class:"file-viewer-image__container"},s("img",{key:"c2b889e3264e42e328358dcb6744c6ea26a06d61",alt:this.description,class:"file-viewer-image__image",ref:this.onImageElementUpdate,src:this.file}),s("span",{key:"c5324e8a2a54ea6f27b34bfd2ea0a9b3cb19ad88",class:"file-viewer-image__watermark"},s("slot",{key:"c9b71e9259ebbf4439f0e6a62bcd8263344bb32c",name:"watermark"}))),this.loading&&s("div",{key:"b4e14393e348f2732a7bdd984f4cbc65d0ece538",class:"file-viewer-image__spinner"},s("swirl-spinner",{key:"6acadd121754fb39d1090699de59f9f497426e6f"}))))}get el(){return this}static get watchers(){return{file:[{watchFile:0}]}}static get style(){return":host{position:relative;display:inline-flex;max-height:100%;pointer-events:none}:host *{box-sizing:border-box}.file-viewer-image{display:inline-flex;margin:0;justify-content:center}.file-viewer-image--show-watermark .file-viewer-image__watermark{display:inline-flex}.file-viewer-image__container{position:relative;display:flex;max-width:100%}.file-viewer-image__image{max-width:100%;pointer-events:auto;-o-object-fit:contain;object-fit:contain}.file-viewer-image__watermark{position:absolute;z-index:1;top:var(--s-space-12);right:var(--s-space-12);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.file-viewer-image__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.file-viewer-image__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-image__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}"}},[257,"swirl-file-viewer-image",{description:[1],errorMessage:[1,"error-message"],file:[1],maxZoom:[2,"max-zoom"],error:[32],loading:[32],transformed:[32],getZoom:[64],resetZoom:[64]},void 0,{file:[{watchFile:0}]}]);function d(){"undefined"!=typeof customElements&&["swirl-file-viewer-image","swirl-icon-error","swirl-inline-error","swirl-spinner","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-file-viewer-image":customElements.get(r(i))||customElements.define(r(i),m);break;case"swirl-icon-error":customElements.get(r(i))||a();break;case"swirl-inline-error":customElements.get(r(i))||n();break;case"swirl-spinner":customElements.get(r(i))||l();break;case"swirl-visually-hidden":customElements.get(r(i))||c()}}))}export{m as S,d}