(function(){"use strict";class E{constructor(){this.data={}}set(r,s){this.data[r]=s}get(r){return this.data[r]}}const m={Booster:class{constructor(r){this.options=r}log(r,s){const e=`
	  display: inline-block;
	  padding: 4px 6px;
	  border-radius: 4px;
	  line-height: 1.5em;
	  color: #282735;
	  background: linear-gradient(45deg,
		rgba(185, 205, 255, 0.4) 0%,
		rgba(201, 182, 255, 0.4) 33%,
		rgba(239, 184, 255, 0.4) 66%,
		rgba(255, 210, 177, 0.4) 100%);
		`,i=[`%c[${this.options.title}] ${r}. Link to documentation ${this.options.documentationLink}`,e];s?(console.group(...i),Array.isArray(s)?console.log(...s):console.log(s),console.groupEnd()):console.log(...i)}validate(r,s,e){if(!r.validate)return!0;if(typeof r.validate=="function"){if(!r.validate(e))return this.log(`Invalid value "${e}" for attribute "${s}"`),!1}else if(!r.validate.includes(e))return this.log(`Invalid value "${e}" for attribute "${s}"`,[`%cPossible values:%c
`+r.validate.map(i=>`• ${i}`).join(`
`),"font-weight: 700;","font-weight: initial;"]),!1;return!0}parse(r){const s=new E;for(const e in this.options.attributes){const i=this.options.attributes[e],l=r.getAttribute(e);if(!l||!this.validate(i,e,l)){s.set(e,i.defaultValue);continue}let d=l;i.parse&&(d=i.parse(l)??i.defaultValue),s.set(e,d)}this.options.apply.call(this,r,s)}getElements(){return document.querySelectorAll(`[${this.options.name}]`)}init(){this.getElements().forEach(s=>this.parse(s))}},parse:{stringToBoolean:t=>t!=="false"},validation:{isBoolean:t=>/^(true|false)$/.test(t),isNumber:t=>!isNaN(Number(t))}};var v=(t=>(t.Horizontal="horizontal",t.Vertical="vertical",t))(v||{}),h=(t=>(t.Before="before",t.After="after",t))(h||{});const x=new m.Booster({name:"fb-before-after",attributes:{"fb-before-after-direction":{defaultValue:"horizontal",validate:Object.values(v)},"fb-before-after-start":{defaultValue:50,validate:t=>{if(!m.validation.isNumber(t))return!1;const r=Number(t);return r>=0&&r<=100},parse:Number}},apply(t,r){const s=t.querySelector("[fb-before-after-side=after]");if(!s)return this.log('Required attribute "fb-before-after-side" is missing');let e=t.querySelector("[fb-before-after-handle]");e||(e=document.createElement("div"),e.setAttribute("fb-before-after-handle",""),t.appendChild(e));const i=t.querySelector("[fb-before-after-line]"),l=r.get("fb-before-after-direction"),d=r.get("fb-before-after-start"),w=()=>{switch(t.style.position="relative",t.style.overflow="hidden",s.style.position="absolute",s.style.inset="0",s.style.zIndex="1",s.style.width="100%",s.style.height="100%",s.style.opacity="1",e.style.position="absolute",e.style.zIndex="2",e.style.transform="translate(-50%, -50%)",e.style.pointerEvents="none",e.style.opacity="1",i&&(i.style.opacity="1"),l){case"horizontal":e.style.top="50%",i&&(i.style.left="var(--fb-thumb-position, 50%)",i.style.transform="translateX(-50%)");break;case"vertical":e.style.left="50%",i&&(i.style.top="var(--fb-thumb-position, 50%)",i.style.transform="translateY(-50%)");break}};w();const f=(()=>{const o=document.createElement("input");
	o.setAttribute("fb-before-after-input","");
	o.type="range";
	o.max="100";
	o.min="0";
	o.setAttribute("aria-label", "Before After Slider"); // Hinzugefügtes aria-label
	t.insertBefore(o,e);
	o.style.position="absolute";
	o.style.inset="0";
	o.style.zIndex="2";
	o.style.margin="0";
	o.style.opacity="0";
	o.style.cursor="pointer";
	return o;
})(),k=()=>{t.style.setProperty("--fb-thumb-width",`${e.clientWidth}px`),t.style.setProperty("--fb-thumb-height",`${e.clientHeight}px`)},p=o=>{switch(t.style.setProperty("--fb-thumb-position",`${o}%`),l){case"horizontal":s.style.clipPath=`inset(0 0 0 ${o}%)`,e.style.left=`${o}%`;break;case"vertical":s.style.clipPath=`inset(${o}% 0 0)`,e.style.top=`${o}%`;break}},y=o=>{f.value=o.toString()},B=o=>{p(+o.target.value)};w(),k(),p(d),y(d),f.addEventListener("input",B);const g=(()=>{const o=Array.from(t.querySelectorAll("[fb-before-after-label]"));if(!o.length)return;const c=[],a=[];for(const n of o){const b=n.getAttribute("fb-before-after-label"),u=b;Object.values(h).includes(u)?(u==="before"&&c.push(n),u==="after"&&a.push(n)):this.log(`Invalid value "${b}" for attribute "fb-before-after-label"`,[`%cPossible values:%c
`+Object.values(h).map(z=>`• ${z}`).join(`
`),"font-weight: 700;","font-weight: initial;"])}if(!(!c.length&&!a.length)){for(const n of[...c,...a])n.style.position="absolute",n.style.zIndex="3";return{before:c,after:a}}})();if(g){const o=()=>{s.style.transition="clip-path 0.3s",e.style.transition="top 0.3s, left 0.3s"},c=()=>{s.style.transition="",e.style.transition=""},a=n=>{switch(o(),n){case"before":p(100),y(100);break;case"after":p(0),y(0);break}setTimeout(c,300)};for(const n of g.before)n.addEventListener("click",()=>a("before"));for(const n of g.after)n.addEventListener("click",()=>a("after"))}if(l==="vertical"){f.style.transform="rotate(90deg)";const o=a=>{let{width:n,height:b}=a.contentRect;n=Number(n.toFixed(2)),b=Number(b.toFixed(2)),f.style.width=`${b}px`,f.style.height=`${n}px`;const u=Number(((b-n)/2).toFixed(2));f.style.top=`${u}px`,f.style.left=`${u*-1}px`};new ResizeObserver(a=>{for(const n of a)o(n)}).observe(t)}},title:"Before After Slider Booster",documentationLink:"https://www.flowbase.co/booster/before-after-slider"}),$=()=>{const t=document.createElement("style");t.textContent=`
	[fb-before-after-input]::-webkit-slider-thumb {
		-webkit-appearance: none;
		width: var(--fb-thumb-width, 40px);
		height: var(--fb-thumb-height, 40px);
	}
	[fb-before-after-input]::-moz-range-thumb {
		-webkit-appearance: none;
		width: var(--fb-thumb-width, 40px);
		height: var(--fb-thumb-height, 40px);
	}
  `,document.head.appendChild(t),x.init()};document.readyState==="complete"?$():window.addEventListener("load",$)})();