{"version":3,"file":"js/328.712311565eb1b025b68f.chunk.js","mappings":"gHACO,MAAMA,EAAS,KAqHlB,MAAMC,UAAqBC,YACvB,WAAAC,GACIC,QACAC,KAAKC,MAAQC,WAAWF,KAAKG,aAAa,WAAa,EACvDH,KAAKI,IAAMF,WAAWF,KAAKG,aAAa,SAAW,EACnDH,KAAKK,IAAMH,WAAWF,KAAKG,aAAa,SAAW,EACnDH,KAAKM,KAAOJ,WAAWF,KAAKG,aAAa,UAAY,EACrDH,KAAKO,MAAMC,SAAW,OACtBR,KAAKO,MAAME,UAAY,SACvBT,KAAKO,MAAMG,SAAW,WACtBV,KAAKO,MAAMI,MAAQ,OACnBX,KAAKO,MAAMK,SAAW,OAEtBZ,KAAKa,KAAOb,KAAKc,aAAa,CAAEC,KAAM,SAEtCf,KAAKgB,UAAW,EAChBhB,KAAKiB,SACLjB,KAAKkB,aAAa,QAAS,2BAC3BlB,KAAKmB,QACT,CAEA,aAAAC,GACI,MAAMzB,EAASK,KAAKa,KAAKQ,eAAe,UAClCf,EAAON,KAAKM,KACZgB,EAAWC,KAAKC,MAAM7B,EAAOM,MAAQK,GAAQA,EACnDX,EAAOM,MAAQqB,EACftB,KAAKmB,QACT,CACA,MAAAF,GACI,IAAItB,EAAS8B,SAASC,cAAc,SAChCC,EAAkBF,SAASC,cAAc,OACzCE,EAAcH,SAASC,cAAc,OACrCzB,EAAQwB,SAASC,cAAc,OACnCzB,EAAM4B,UAAUC,IAAI,UACpB7B,EAAM4B,UAAUC,IAAI,aAIpB,IAAIvB,EAAQkB,SAASC,cAAc,SACnCnB,EAAMwB,UA3JO,yhFA6JbpC,EAAOqC,KAAO,QACdrC,EAAOsC,GAAK,SACZtC,EAAOS,IAAMJ,KAAKI,IAClBT,EAAOU,IAAML,KAAKK,IAClBV,EAAOW,KAAON,KAAKM,KACnBX,EAAOM,MAAQD,KAAKC,MAEpB0B,EAAgBM,GAAK,mBACrBL,EAAYK,GAAK,eACjBL,EAAYrB,MAAMK,SAAW,OAC7BX,EAAMgC,GAAK,QACXN,EAAgBpB,MAAMG,SAAW,WACjCiB,EAAgBpB,MAAMI,MAAQ,OAC9BgB,EAAgBpB,MAAMK,SAAW,OACjCe,EAAgBpB,MAAM2B,SAAW,SAEjCvC,EAAOwC,iBAAiB,QAASnC,KAAKmB,OAAOiB,KAAKpC,OAClDL,EAAOwC,iBAAiB,QAASnC,KAAKmB,OAAOiB,KAAKpC,OAClDL,EAAOwC,iBAAiB,SAAUnC,KAAKoB,cAAcgB,KAAKpC,OAE1D2B,EAAgBU,YAAY1C,GAC5BgC,EAAgBU,YAAYpC,GAC5B0B,EAAgBU,YAAYT,GAC5B5B,KAAKa,KAAKwB,YAAY9B,GACtBP,KAAKa,KAAKwB,YAAYV,EAC1B,CACA,MAAAR,GACI,IAAImB,EAAQtC,KAAKa,KAAKQ,eAAe,oBACrC,MAAMkB,EAAkBd,SAASe,iBAAiB,oBAClD,IAAI7C,EAASK,KAAKa,KAAKQ,eAAe,UAClCpB,EAAQD,KAAKa,KAAKQ,eAAe,SACjCoB,EAAkB9C,EAAOM,OAASD,KAAKK,IAAML,KAAKI,KACtDH,EAAMyC,UAAY/C,EAAOM,MACzBqC,EAAM/B,MAAMoC,YAAY,UAAWF,GACnCF,EAAgBK,SAAQ,CAACC,EAAgBC,KACjCA,IAAUC,SAASpD,EAAOM,OAC1B4C,EAAehB,UAAUmB,OAAO,cAGhCH,EAAehB,UAAUC,IAAI,aACjC,GAER,EAEJmB,eAAeC,OAAO,gBAAiBtD,EAAa,C","sources":["webpack:///./wwwroot/js/slider.ts"],"sourcesContent":["// @ts-nocheck\nexport const slider = () => {\n    let stylesheetText = `\n#slider-container {\n    --value : 0 ;\n    --slider-track-color : #D9DBE9 ;\n    --slider-thumb-color : #fff ;\n    --slider-fill-color  : #0C3C48 ;\n    --slider-fill2-color : #0C3C48 ;\n\n    width : 100% ;\n    height: 1.5rem ;\n    display: flex ;\n    align-items: center ;\n    justify-content: center ;\n    padding: 0 ;\n    margin: 0 ;\n\n    animation: color-cycle 1s infinite alternate linear;\n}\n\n@keyframes color-cycle {\n    0% {\n        --slider-fill-color  : #0C3C48 ;\n    }\n    100% {\n        --slider-fill-color : #0C3C48 ;\n    }\n}\n\n#slider {\n    -webkit-appearance: none;\n    appearance: none;\n\n    height: 1.5rem ;\n    width: 100% ;\n    margin : 0 ;\n    padding: 0 ;\n\n    background-color: #00000000 ;\n    outline: none ;\n    z-index: 2 ;\n}\n\n#slider-track {\n    position: absolute ;\n    top: calc(50% - 0.25rem);\n    left: 0 ;\n    width: 100% ;\n    height: 0.7rem ;\n    border-radius: 0.5rem ;\n    background-color: var(--slider-track-color) ;\n    overflow: hidden ;\n}\n\n#slider-track::before {\n    position: absolute ;\n    content: \"\" ;\n    left: calc(-100% + 1.5rem) ;\n    top : 0 ;\n    width : calc(100% - 1rem) ;\n    height: 100% ;\n    background-color: var(--slider-fill-color) ;\n    transition: background-color 300ms ease-out ;\n    transform-origin: 100% 0%;\n    transform: translateX(calc( var(--value) * 100% )) scaleX(1.2);\n}\n\n#slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width : 1.5rem ;\n    height: 1.5rem ;\n    border-radius: 50% ;\n    background-color: var(--slider-thumb-color) ;\n    cursor: pointer ;\n    z-index: 99 ;\n    border: 2px solid #D9DBE9 ;\n    transition: border-color 300ms ease-out ;\n}\n\n#value {\n    position: absolute ;\n    bottom: calc(100% + 0.7rem) ;\n    left: calc( var(--value) * calc(100% - 1rem) - 0.8rem) ;\n    min-width: 3ch ;\n    border-radius: 4px ;\n    pointer-events: none ;\n\n    padding: 0.7rem ;\n    display: flex ;\n    align-items: center ;\n    justify-content: center ;\n\n    color: #FFF ;\n    background-color: var(--slider-fill-color);\n    opacity: 0 ;\n\n    transition: left 300ms ease-out , opacity 300ms 300ms ease-out , background-color 300ms ease-out ;\n}\n\n#value::before {\n    position: absolute ;\n    content: \"\" ;\n    top: 100% ;\n    left: 50% ;\n    width: 1rem ;\n    height: 1rem ;\n    border-radius: 2px ;\n    background-color: inherit ;\n    transform: translate(-50%,-80%) rotate(45deg);\n    z-index: -1 ;\n}\n\n#slider-container:hover  #value {\n    opacity: 1 ;\n} \n`;\n    class customSlider extends HTMLElement {\n        constructor() {\n            super();\n            this.value = parseFloat(this.getAttribute('value')) || 0;\n            this.min = parseFloat(this.getAttribute('min')) || 0;\n            this.max = parseFloat(this.getAttribute('max')) || 4;\n            this.step = parseFloat(this.getAttribute('step')) || 1;\n            this.style.minWidth = '3rem';\n            this.style.minHeight = '0.6rem';\n            this.style.position = 'relative';\n            this.style.width = '100%';\n            this.style.maxWidth = 'none';\n            // Slider Element\n            this.root = this.attachShadow({ mode: 'open' });\n            // Functionality\n            this.dragging = false;\n            this.create();\n            this.setAttribute('style', 'width: 100% !important;');\n            this.update();\n        }\n        // Add a new method for snapping\n        snapToNearest() {\n            const slider = this.root.getElementById('slider');\n            const step = this.step;\n            const newValue = Math.round(slider.value / step) * step;\n            slider.value = newValue; // Set the slider to the nearest step value\n            this.update(); // Update the slider and related UI\n        }\n        create() {\n            let slider = document.createElement('input');\n            let sliderContainer = document.createElement('div');\n            let sliderTrack = document.createElement('div');\n            let value = document.createElement('div');\n            value.classList.add('hidden');\n            value.classList.add('opacity-0');\n            // let style = document.createElement(\"link\");\n            // style.rel = \"stylesheet\" ;\n            // style.href = \"/src/custom-slider-style.css\" ;\n            let style = document.createElement('style');\n            style.innerHTML = stylesheetText;\n            // set properties\n            slider.type = 'range';\n            slider.id = 'slider';\n            slider.min = this.min;\n            slider.max = this.max;\n            slider.step = this.step;\n            slider.value = this.value;\n            // add ids\n            sliderContainer.id = 'slider-container';\n            sliderTrack.id = 'slider-track';\n            sliderTrack.style.maxWidth = 'none';\n            value.id = 'value';\n            sliderContainer.style.position = 'relative';\n            sliderContainer.style.width = '100%';\n            sliderContainer.style.maxWidth = 'none';\n            sliderContainer.style.overflow = 'hidden';\n            // add event listeners\n            slider.addEventListener('input', this.update.bind(this));\n            slider.addEventListener('input', this.update.bind(this));\n            slider.addEventListener('change', this.snapToNearest.bind(this));\n            // Appened Elements\n            sliderContainer.appendChild(slider);\n            sliderContainer.appendChild(value);\n            sliderContainer.appendChild(sliderTrack);\n            this.root.appendChild(style);\n            this.root.appendChild(sliderContainer);\n        }\n        update() {\n            let track = this.root.getElementById('slider-container');\n            const pricingPackages = document.querySelectorAll('.pricing-package');\n            let slider = this.root.getElementById('slider');\n            let value = this.root.getElementById('value');\n            let valuePercentage = slider.value / (this.max - this.min);\n            value.innerText = slider.value;\n            track.style.setProperty('--value', valuePercentage);\n            pricingPackages.forEach((packageElement, index) => {\n                if (index === parseInt(slider.value)) {\n                    packageElement.classList.remove('hide--card');\n                }\n                else {\n                    packageElement.classList.add('hide--card');\n                }\n            });\n        }\n    }\n    customElements.define('custom-slider', customSlider);\n};\n"],"names":["slider","customSlider","HTMLElement","constructor","super","this","value","parseFloat","getAttribute","min","max","step","style","minWidth","minHeight","position","width","maxWidth","root","attachShadow","mode","dragging","create","setAttribute","update","snapToNearest","getElementById","newValue","Math","round","document","createElement","sliderContainer","sliderTrack","classList","add","innerHTML","type","id","overflow","addEventListener","bind","appendChild","track","pricingPackages","querySelectorAll","valuePercentage","innerText","setProperty","forEach","packageElement","index","parseInt","remove","customElements","define"],"sourceRoot":""}