notebooks/assets/ImageComparisonComponent-D9i_gkAF.js

import{aE as D,c as k,j as x}from"./index-DgI7bmFZ.js";var T,M,p={},L={},P=function(){if(M)return p;M=1;var E=p&&p.__createBinding||(Object.create?function(d,c,l,t){t===void 0&&(t=l),Object.defineProperty(d,t,{enumerable:!0,get:function(){return c[l]}})}:function(d,c,l,t){t===void 0&&(t=l),d[t]=c[l]}),i=p&&p.__setModuleDefault||(Object.create?function(d,c){Object.defineProperty(d,"default",{enumerable:!0,value:c})}:function(d,c){d.default=c}),y=p&&p.__importStar||function(d){if(d&&d.__esModule)return d;var c={};if(d!=null)for(var l in d)l!=="default"&&Object.prototype.hasOwnProperty.call(d,l)&&E(c,d,l);return i(c,d),c};Object.defineProperty(p,"__esModule",{value:!0}),p.ImgComparisonSlider=void 0;const w=D();return typeof document<"u"&&Promise.resolve().then(()=>y((T||(T=1,(()=>{var d={792:(t,a,r)=>{r.d(a,{Z:()=>v});var n=r(609),u=r.n(n)()(function(f){return f[1]});u.push([t.id,':host{--divider-width: 1px;--divider-color: #fff;--divider-shadow: none;--default-handle-width: 50px;--default-handle-color: #fff;--default-handle-opacity: 1;--default-handle-shadow: none;--handle-position-start: 50%;position:relative;display:inline-block;overflow:hidden;line-height:0;direction:ltr}@media screen and (-webkit-min-device-pixel-ratio: 0)and (min-resolution: 0.001dpcm){:host{outline-offset:1px}}:host(:focus){outline:2px solid -webkit-focus-ring-color}::slotted(*){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.first{position:absolute;left:0;top:0;right:0;line-height:normal;font-size:100%;max-height:100%;height:100%;width:100%;--exposure: 50%;--keyboard-transition-time: 0ms;--default-transition-time: 0ms;--transition-time: var(--default-transition-time)}.first .first-overlay-container{position:relative;clip-path:inset(0 var(--exposure) 0 0);transition:clip-path var(--transition-time);height:100%}.first .first-overlay{overflow:hidden;height:100%}.first.focused{will-change:clip-path}.first.focused .first-overlay-container{will-change:clip-path}.second{position:relative}.handle-container{transform:translateX(50%);position:absolute;top:0;right:var(--exposure);height:100%;transition:right var(--transition-time),bottom var(--transition-time)}.focused .handle-container{will-change:right}.divider{position:absolute;height:100%;width:100%;left:0;top:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.divider:after{content:" ";display:block;height:100%;border-left-width:var(--divider-width);border-left-style:solid;border-left-color:var(--divider-color);box-shadow:var(--divider-shadow)}.handle{position:absolute;top:var(--handle-position-start);pointer-events:none;box-sizing:border-box;margin-left:1px;transform:translate(calc(-50% - 0.5px), -50%);line-height:0}.default-handle{width:var(--default-handle-width);opacity:var(--default-handle-opacity);transition:all 1s;filter:drop-shadow(var(--default-handle-shadow))}.default-handle path{stroke:var(--default-handle-color)}.vertical .first-overlay-container{clip-path:inset(0 0 var(--exposure) 0)}.vertical .handle-container{transform:translateY(50%);height:auto;top:unset;bottom:var(--exposure);width:100%;left:0;flex-direction:row}.vertical .divider:after{height:1px;width:100%;border-top-width:var(--divider-width);border-top-style:solid;border-top-color:var(--divider-color);border-left:0}.vertical .handle{top:auto;left:var(--handle-position-start);transform:translate(calc(-50% - 0.5px), -50%) rotate(90deg)}',""]);const v=u},609:t=>{t.exports=function(a){var r=[];return r.toString=function(){return this.map(function(n){var u=a(n);return n[2]?"@media ".concat(n[2]," {").concat(u,"}"):u}).join("")},r.i=function(n,u,v){typeof n=="string"&&(n=[[null,n,""]]);var f={};if(v)for(var m=0;m<this.length;m++){var g=this[m][0];g!=null&&(f[g]=!0)}for(var e=0;e<n.length;e++){var s=[].concat(n[e]);v&&f[s[0]]||(u&&(s[2]?s[2]="".concat(u," and ").concat(s[2]):s[2]=u),r.push(s))}},r}}},c={};function l(t){var a=c[t];if(a!==void 0)return a.exports;var r=c[t]={id:t,exports:{}};return d[t](r,r.exports,l),r.exports}l.n=t=>{var a=t&&t.__esModule?()=>t.default:()=>t;return l.d(a,{a}),a},l.d=(t,a)=>{for(var r in a)l.o(a,r)&&!l.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:a[r]})},l.o=(t,a)=>Object.prototype.hasOwnProperty.call(t,a),(()=>{var t=l(792);const a="rendered",r=(e,s)=>{const o=e.getBoundingClientRect();let h,b;return s.type==="mousedown"?(h=s.clientX,b=s.clientY):(h=s.touches[0].clientX,b=s.touches[0].clientY),h>=o.x&&h<=o.x+o.width&&b>=o.y&&b<=o.y+o.height};let n;const u={ArrowLeft:-1,ArrowRight:1},v=["horizontal","vertical"],f=e=>({x:e.touches[0].pageX,y:e.touches[0].pageY}),m=e=>({x:e.pageX,y:e.pageY}),g=typeof window<"u"&&(window==null?void 0:window.HTMLElement);typeof window<"u"&&(window.document&&(n=document.createElement("template"),n.innerHTML='<div class="second" id="second"> <slot name="second"><slot name="before"></slot></slot> </div> <div class="first" id="first"> <div class="first-overlay"> <div class="first-overlay-container" id="firstImageContainer"> <slot name="first"><slot name="after"></slot></slot> </div> </div> <div class="handle-container"> <div class="divider"></div> <div class="handle" id="handle"> <slot name="handle"> <svg xmlns="http://www.w3.org/2000/svg" class="default-handle" viewBox="-8 -3 16 6"> <path d="M -5 -2 L -7 0 L -5 2 M 5 -2 L 7 0 L 5 2" fill="none" vector-effect="non-scaling-stroke"/> </svg> </slot> </div> </div> </div> '),window.customElements.define("img-comparison-slider",class extends g{constructor(){super(),this.exposure=this.hasAttribute("value")?parseFloat(this.getAttribute("value")):50,this.slideOnHover=!1,this.slideDirection="horizontal",this.keyboard="enabled",this.isMouseDown=!1,this.animationDirection=0,this.isFocused=!1,this.dragByHandle=!1,this.onMouseMove=o=>{if(this.isMouseDown||this.slideOnHover){const h=m(o);this.slideToPage(h)}},this.bodyUserSelectStyle="",this.bodyWebkitUserSelectStyle="",this.onMouseDown=o=>{if(this.slideOnHover||this.handle&&!r(this.handleElement,o))return;o.preventDefault(),window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onWindowMouseUp),this.isMouseDown=!0,this.enableTransition();const h=m(o);this.slideToPage(h),this.focus(),this.bodyUserSelectStyle=window.document.body.style.userSelect,this.bodyWebkitUserSelectStyle=window.document.body.style.webkitUserSelect,window.document.body.style.userSelect="none",window.document.body.style.webkitUserSelect="none"},this.onWindowMouseUp=()=>{this.isMouseDown=!1,window.document.body.style.userSelect=this.bodyUserSelectStyle,window.document.body.style.webkitUserSelect=this.bodyWebkitUserSelectStyle,window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onWindowMouseUp)},this.touchStartPoint=null,this.isTouchComparing=!1,this.hasTouchMoved=!1,this.onTouchStart=o=>{this.dragByHandle&&!r(this.handleElement,o)||(this.touchStartPoint=f(o),this.isFocused&&(this.enableTransition(),this.slideToPage(this.touchStartPoint)))},this.onTouchMove=o=>{if(this.touchStartPoint===null)return;const h=f(o);if(this.isTouchComparing)return this.slideToPage(h),o.preventDefault(),!1;if(!this.hasTouchMoved){const b=Math.abs(h.y-this.touchStartPoint.y),S=Math.abs(h.x-this.touchStartPoint.x);if(this.slideDirection==="horizontal"&&b<S||this.slideDirection==="vertical"&&b>S)return this.isTouchComparing=!0,this.focus(),this.slideToPage(h),o.preventDefault(),!1;this.hasTouchMoved=!0}},this.onTouchEnd=()=>{this.isTouchComparing=!1,this.hasTouchMoved=!1,this.touchStartPoint=null},this.onBlur=()=>{this.stopSlideAnimation(),this.isFocused=!1,this.firstElement.classList.remove("focused")},this.onFocus=()=>{this.isFocused=!0,this.firstElement.classList.add("focused")},this.onKeyDown=o=>{if(this.keyboard==="disabled")return;const h=u[o.key];this.animationDirection!==h&&h!==void 0&&(this.animationDirection=h,this.startSlideAnimation())},this.onKeyUp=o=>{if(this.keyboard==="disabled")return;const h=u[o.key];h!==void 0&&this.animationDirection===h&&this.stopSlideAnimation()},this.resetDimensions=()=>{this.imageWidth=this.offsetWidth,this.imageHeight=this.offsetHeight};const e=this.attachShadow({mode:"open"}),s=document.createElement("style");s.innerHTML=t.Z,this.getAttribute("nonce")&&s.setAttribute("nonce",this.getAttribute("nonce")),e.appendChild(s),e.appendChild(n.content.cloneNode(!0)),this.firstElement=e.getElementById("first"),this.handleElement=e.getElementById("handle")}set handle(e){this.dragByHandle=e.toString().toLowerCase()!=="false"}get handle(){return this.dragByHandle}get value(){return this.exposure}set value(e){const s=parseFloat(e);s!==this.exposure&&(this.exposure=s,this.enableTransition(),this.setExposure())}get hover(){return this.slideOnHover}set hover(e){this.slideOnHover=e.toString().toLowerCase()!=="false",this.removeEventListener("mousemove",this.onMouseMove),this.slideOnHover&&this.addEventListener("mousemove",this.onMouseMove)}get direction(){return this.slideDirection}set direction(e){this.slideDirection=e.toString().toLowerCase(),this.slide(0),this.firstElement.classList.remove(...v),v.includes(this.slideDirection)&&this.firstElement.classList.add(this.slideDirection)}static get observedAttributes(){return["hover","direction"]}connectedCallback(){this.hasAttribute("tabindex")||(this.tabIndex=0),this.addEventListener("dragstart",e=>(e.preventDefault(),!1)),new ResizeObserver(this.resetDimensions).observe(this),this.setExposure(0),this.keyboard=this.hasAttribute("keyboard")&&this.getAttribute("keyboard")==="disabled"?"disabled":"enabled",this.addEventListener("keydown",this.onKeyDown),this.addEventListener("keyup",this.onKeyUp),this.addEventListener("focus",this.onFocus),this.addEventListener("blur",this.onBlur),this.addEventListener("touchstart",this.onTouchStart,{passive:!0}),this.addEventListener("touchmove",this.onTouchMove,{passive:!1}),this.addEventListener("touchend",this.onTouchEnd),this.addEventListener("mousedown",this.onMouseDown),this.handle=this.hasAttribute("handle")?this.getAttribute("handle"):this.dragByHandle,this.hover=this.hasAttribute("hover")?this.getAttribute("hover"):this.slideOnHover,this.direction=this.hasAttribute("direction")?this.getAttribute("direction"):this.slideDirection,this.resetDimensions(),this.classList.contains(a)||this.classList.add(a)}disconnectedCallback(){this.transitionTimer&&window.clearTimeout(this.transitionTimer)}attributeChangedCallback(e,s,o){e==="hover"&&(this.hover=o),e==="direction"&&(this.direction=o),e==="keyboard"&&(this.keyboard=o==="disabled"?"disabled":"enabled")}setExposure(e=0){var s;this.exposure=(s=this.exposure+e)<0?0:s>100?100:s,this.firstElement.style.setProperty("--exposure",100-this.exposure+"%")}slide(e=0){this.setExposure(e);const s=new Event("slide");this.dispatchEvent(s)}slideToPage(e){this.slideDirection==="horizontal"&&this.slideToPageX(e.x),this.slideDirection==="vertical"&&this.slideToPageY(e.y)}slideToPageX(e){const s=e-this.getBoundingClientRect().left-window.scrollX;this.exposure=s/this.imageWidth*100,this.slide(0)}slideToPageY(e){const s=e-this.getBoundingClientRect().top-window.scrollY;this.exposure=s/this.imageHeight*100,this.slide(0)}enableTransition(){this.firstElement.style.setProperty("--transition-time","100ms"),this.transitionTimer=window.setTimeout(()=>{this.firstElement.style.setProperty("--transition-time","var(--default-transition-time)"),this.transitionTimer=null},100)}startSlideAnimation(){let e=null,s=this.animationDirection;this.firstElement.style.setProperty("--transition-time","var(--keyboard-transition-time)");const o=h=>{if(this.animationDirection===0||s!==this.animationDirection)return;e===null&&(e=h);const b=(h-e)/16.666666666666668*this.animationDirection;this.slide(b),setTimeout(()=>window.requestAnimationFrame(o),0),e=h};window.requestAnimationFrame(o)}stopSlideAnimation(){this.animationDirection=0,this.firstElement.style.setProperty("--transition-time","var(--default-transition-time)")}}))})()})()),L))),p.ImgComparisonSlider=(0,w.forwardRef)(({children:d,onSlide:c,value:l,className:t,...a},r)=>{const n=(0,w.useRef)();return(0,w.useEffect)(()=>{l!==void 0&&(n.current.value=parseFloat(l.toString()))},[l,n]),(0,w.useEffect)(()=>{c&&n.current.addEventListener("slide",c)},[]),(0,w.useImperativeHandle)(r,()=>n.current,[n]),(0,w.createElement)("img-comparison-slider",Object.assign({class:t?`${t} rendered`:"rendered",tabIndex:0,ref:n},a),d)}),p}();const A=E=>{const i=k.c(15),{beforeSrc:y,afterSrc:w,value:d,direction:c,width:l,height:t}=E,a=l||"100%",r=t||(c==="vertical"?"400px":"auto");let n;i[0]!==a||i[1]!==r?(n={width:a,height:r,maxWidth:"100%"},i[0]=a,i[1]=r,i[2]=n):n=i[2];const u=n;let v,f,m,g;return i[3]!==y?(v=x.jsx("img",{slot:"first",src:y,alt:"Before",width:"100%"}),i[3]=y,i[4]=v):v=i[4],i[5]!==w?(f=x.jsx("img",{slot:"second",src:w,alt:"After",width:"100%"}),i[5]=w,i[6]=f):f=i[6],i[7]!==c||i[8]!==v||i[9]!==f||i[10]!==d?(m=x.jsxs(P.ImgComparisonSlider,{value:d,direction:c,children:[v,f]}),i[7]=c,i[8]=v,i[9]=f,i[10]=d,i[11]=m):m=i[11],i[12]!==u||i[13]!==m?(g=x.jsx("div",{style:u,children:m}),i[12]=u,i[13]=m,i[14]=g):g=i[14],g};export{A as default};