function set_slider(root) {
    const slidesContainer = root.querySelector(".slides-container");
    const slide = root.querySelector(".slide");
    const prevButton = root.querySelector(".slide-arrow-prev");
    const nextButton = root.querySelector(".slide-arrow-next");
    nextButton.addEventListener("click", (event) => {
        const slideWidth = slide.clientWidth;
        slidesContainer.scrollLeft += slideWidth;
    });
    prevButton.addEventListener("click", () => {
        const slideWidth = slide.clientWidth;
        slidesContainer.scrollLeft -= slideWidth;
    });
}
sliders = document.getElementsByClassName("slider-wrapper")
for (var i = 0; i < sliders.length; i++) set_slider(sliders[i])


var Cocoen=(()=>{var E=Object.defineProperty;var w=(i,e)=>{for(var t in e)E(i,t,{get:e[t],enumerable:!0})};var x={};w(x,{create:()=>a,parse:()=>f});var l="cocoen",r=`${l}-component`;var h=i=>Number.parseInt(window.getComputedStyle(i).height,10);var d=i=>Number.parseInt(window.getComputedStyle(i).width,10);var p=({dragElementSize:i,hostElementSize:e,value:t})=>{let n=Math.min(Math.max(t,0),e),o=.5*i,s=(n+o)/e;return 100*s};var u=(i,e,t="horizontal")=>{let n=0,o=0;return t==="horizontal"?(n=i instanceof MouseEvent?i.clientX:i.touches[0].clientX,o=e?.getBoundingClientRect().left??0):t==="vertical"&&(n=i instanceof MouseEvent?i.clientY:i.touches[0].clientY,o=e?.getBoundingClientRect().top??0),n-o};var g=(i,e)=>{let t;return(...n)=>{let o;return t&&clearTimeout(t),t=setTimeout(()=>{o=i(...n)},e),o}};var v=i=>`${i}%`;var y=`
  :host {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: pointer;
    display: block;
    overflow: hidden;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
  }

  :host *,
  :host *:after,
  :host *:before {
    box-sizing: inherit;
    -moz-box-sizing: inherit;
    -webkit-box-sizing: inherit;
  }

  #before {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 50%;
  }

  :host([orientation="vertical"]) #before {
    width: 100%;
    height: 50%;
  }

  #drag {
    background: var(--color, #fff);
    bottom: 0;
    cursor: ew-resize;
    left: 50%;
    position: absolute;
    top: 0;
    width: 2px;
    transform: translate3d(-50%, 0, 0);
  }

  :host([orientation="vertical"]) #drag {
    height: 2px;
    left: 0;
    top: 50%;
    width: 100%;
    cursor: ns-resize;
    transform: translate3d(0, -50%, 0);
  }

  #drag:before {
    border: 3px solid var(--color, #fff);
    content: '';
    height: 30px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 14px;
    transform: translate3d(-50%, -50%, 0);
  }

  :host([orientation="vertical"]) #drag:before {
    height: 14px;
    width: 30px;
  }

  ::slotted(img) {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
  }

  ::slotted(img[slot=before]) {
    max-width: none;
  }

  :host([orientation="vertical"]) ::slotted(img[slot=before]) {
    max-height: none;
    max-width: 100%;
  }

  ::slotted(img[slot=after]) {
    display: block;
    max-width: 100%;
    width: 100%;
  }

  :host([orientation="vertical"]) ::slotted(img[slot=after]) {
    max-height: 100%;
    height: 100%;
  }
`,b=class extends HTMLElement{constructor(){super();this.animateToValue=0;this.colorValue="#fff";this.orientationValue="horizontal";this.dragElementSizeValue=0;this.elementSizeValue=0;this.isDraggingValue=!1;this.openRatioValue=50;this.isRenderedValue=!1;this.isVisibleValue=!1;this.pointValue=0;this.drag=null,this.shadowDOM=this.attachShadow({mode:"open"}),this.onDragStartHandler=()=>this.onDragStart(),this.onDragEndHandler=()=>this.onDragEnd(),this.onDragHandler=e=>this.onDrag(e),this.onClickHandler=e=>this.onClick(e),this.onContextMenuHandler=()=>this.onContextMenu(),this.onIntersectionHandler=(e,t)=>this.onIntersection(e,t),this.debouncedUpdateDimensions=g(()=>{this.updateDimensions()},250),this.intersectionObserver=new IntersectionObserver(this.onIntersectionHandler,{root:null,rootMargin:"0px",threshold:0})}get point(){return this.pointValue}set point(e){this.pointValue=e,window.requestAnimationFrame(()=>{this.openRatio=p({value:this.pointValue,dragElementSize:this.dragElementSize,hostElementSize:this.elementSize})})}get elementSize(){return this.elementSizeValue}set elementSize(e){this.elementSizeValue=e}get dragElementSize(){return this.dragElementSizeValue}set dragElementSize(e){this.dragElementSizeValue=e}get isDragging(){return this.isDraggingValue}set isDragging(e){this.isDraggingValue=e}get openRatio(){return this.openRatioValue}set openRatio(e){this.openRatioValue=e,window.requestAnimationFrame(()=>{this.updateStyles()})}get color(){return this.colorValue}set color(e){this.colorValue=e,window.requestAnimationFrame(()=>{this.style.setProperty("--color",this.color)})}get isVisible(){return this.isVisibleValue}set isVisible(e){this.isVisibleValue=e}get isRendered(){return this.isRenderedValue}set isRendered(e){this.isRenderedValue=e}get animateTo(){return this.animateToValue}set animateTo(e){this.animateToValue=e}get orientation(){return this.orientationValue}set orientation(e){this.orientationValue=e,window.requestAnimationFrame(()=>{this.updateDimensions(),this.updateStyles()})}static get observedAttributes(){return["start","color","orientation"]}attributeChangedCallback(e,t,n){t!==n&&(e==="start"&&(this.animateTo=Number.parseInt(String(this.getAttribute("start")),10),this.isVisible&&(this.openRatio=this.animateTo)),e==="color"&&(this.color=String(this.getAttribute("color"))),e==="orientation"&&(this.orientation=this.getAttribute("orientation")))}connectedCallback(){this.isRendered||(this.render(),this.isRendered=!0,this.dispatchEvent(new CustomEvent(`${r}:connected`,this.customEventPayload())),this.drag=this.shadowDOM.querySelector("#drag"),this.updateDimensions(),this.addEventListener("mousedown",this.onDragStartHandler,{passive:!0}),this.addEventListener("touchstart",this.onDragStartHandler,{passive:!0}),this.addEventListener("mousemove",this.onDragHandler,{passive:!0}),this.addEventListener("touchmove",this.onDragHandler,{passive:!0}),this.addEventListener("click",this.onClickHandler,{passive:!0}),this.addEventListener("contextmenu",this.onContextMenuHandler,{passive:!0}),window.addEventListener("resize",this.debouncedUpdateDimensions,{passive:!0}),window.addEventListener("mouseup",this.onDragEndHandler,{passive:!0}),window.addEventListener("touchend",this.onDragEndHandler,{passive:!0}),this.intersectionObserver.observe(this))}disconnectedCallback(){this.dispatchEvent(new CustomEvent(`${r}:disconnected`,this.customEventPayload())),this.removeEventListener("mousedown",this.onDragStartHandler),this.removeEventListener("touchstart",this.onDragStartHandler),this.removeEventListener("mousemove",this.onDragHandler),this.removeEventListener("touchmove",this.onDragHandler),this.removeEventListener("click",this.onClickHandler),this.removeEventListener("contextmenu",this.onContextMenuHandler),window.removeEventListener("resize",this.debouncedUpdateDimensions),window.removeEventListener("mouseup",this.onDragEndHandler),window.removeEventListener("touchend",this.onDragEndHandler),this.intersectionObserver.unobserve(this)}render(){this.shadowDOM.innerHTML=`
      <style>${y}</style>
      <div id="before">
        <slot name="before"></slot>
      </div>
      <slot name="after"></slot>
      <div id="drag" part="drag"></div>
    `}updateDimensions(){this.elementSize=this.orientation==="horizontal"?d(this):h(this),this.drag&&(this.dragElementSize=this.orientation==="horizontal"?d(this.drag):h(this.drag)),this.querySelectorAll("img").forEach(e=>{this.orientation==="horizontal"?e.width=this.elementSize:e.height=this.elementSize}),this.dispatchEvent(new CustomEvent(`${r}:resized`,this.customEventPayload()))}updateStyles(){let e=this.shadowDOM.querySelector("#before"),t=this.shadowDOM.querySelector("#drag"),n=v(this.openRatio);this.animateTo?(e.style.transition="width height .75s",t.style.transition="left top .75s"):(e.style.transition="none",t.style.transition="none"),this.orientation==="horizontal"?(e.style.height="100%",e.style.width=n,t.style.left=n,t.style.top="0px"):this.orientation==="vertical"&&(e.style.width="100%",e.style.height=n,t.style.top=n,t.style.left="0px"),this.dispatchEvent(new CustomEvent(`${r}:updated`,this.customEventPayload()))}onDragStart(){this.animateTo=0,this.isDragging=!0}onDrag(e){!this.isDragging||(this.point=u(e,this,this.orientation))}onDragEnd(){this.isDragging=!1}onClick(e){this.animateTo=0,this.point=u(e,this,this.orientation)}onContextMenu(){this.isDragging=!1}onIntersection(e,t){e.forEach(n=>{n.isIntersecting&&(this.dispatchEvent(new CustomEvent(`${r}:visible`,this.customEventPayload())),this.animateTo&&(this.openRatio=this.animateTo),this.isVisible=!0,t.unobserve(this))})}customEventPayload(){return{bubbles:!0,composed:!0,detail:{elementSize:this.elementSize,openRatio:this.openRatio,isRendered:this.isRendered,isVisible:this.isVisible}}}};customElements.define(r,b);var a=(i,e)=>{let t=document.createElement(r),n=i.querySelectorAll("img");if(!n[0]||!n[1])throw new Error("Cocoen needs two images");let o=n[0].cloneNode(!0),s=n[1].cloneNode(!0);return o.setAttribute("slot","before"),s.setAttribute("slot","after"),t.append(o,s),e&&e.start&&t.setAttribute("start",String(e.start)),e&&e.color&&t.setAttribute("color",e.color),e&&e.orientation&&t.setAttribute("orientation",e.orientation),Object.entries(i.dataset).forEach(([c,m])=>{e?.[c]===void 0&&m&&t.setAttribute(c,m)}),i.replaceWith(t),t};var f=i=>{[...i.querySelectorAll(`.${l}`)].map(t=>a(t))};return x;})();
//# sourceMappingURL=cocoen.js.map