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