{"version":3,"sources":["webpack:///./modules/StageSlider.ts"],"names":["__webpack_require__","r","__webpack_exports__","_js_libs_tiny_slider_js__WEBPACK_IMPORTED_MODULE_0__","_helpers_helperFunctions__WEBPACK_IMPORTED_MODULE_1__","StageSlider","element","this","initSlider","Eucerin","isMobile","sliderEvents","calculateScrollbar","setup","selector","Array","from","document","querySelectorAll","filter","node","dataset","moduleInitialized","forEach","prototype","_this","mobileOptions","container","querySelector","preventScrollOnTouch","speed","autoplay","autoplayTimeout","options","Object","assign","getDefaultOptions","slider","hasAttribute","tnsNav","tnsContr","pagItem","index","svg","hasOneDigit","newIndex","innerHTML","pageItem","classList","contains","val","String","Math","abs","charAt","stageSlider","addEventListener","add","remove","pause","play","items","autoplayHoverPause","swipeAngle","loop","nav","console","log","window","innerWidth","body","clientWidth","scrollbarWidth","style","setProperty"],"mappings":"2FAAAA,EAAAC,EAAAC,GAAA,IAAAC,EAAAH,EAAA,KAAAI,EAAAJ,EAAA,GAKAK,EAAA,WAYI,SAAAA,EAAmBC,GAAAC,KAAAD,UACfC,KAAKC,aACAC,QAAQC,UACTH,KAAKI,eAETJ,KAAKK,qBAiGb,OA7GWP,EAAAQ,MAAP,SAAaC,QAAA,IAAAA,MAVM,+BAWfC,MAAMC,KAAKC,SAASC,iBAAiBJ,IAAWK,OAAO,SAACC,GAAsB,OAACA,EAAKC,QAAQC,oBAAmBC,QAAQ,SAACjB,GACpH,IAAID,EAAYC,GAChBA,EAAQe,QAAQC,kBAAoB,UAYpCjB,EAAAmB,UAAAhB,WAAR,eAAAiB,EAAAlB,KACQmB,GACAC,UAAWpB,KAAKD,QAAQsB,cAAc,gBACtCC,qBAAsB,OACtBC,MAAO,IACPC,UAAU,EACVC,gBAAiB,KAGrBzB,KAAK0B,QAAUC,OAAA9B,EAAA,EAAA8B,CAAW3B,KAAKD,QAAS4B,OAAOC,OAAO5B,KAAK6B,oBAAqB7B,KAAK0B,UACrF1B,KAAK0B,QAAQN,UAAYpB,KAAKD,QAAQsB,cAAc,gBAEpDrB,KAAK8B,OAASH,OAAA/B,EAAA,EAAA+B,CAAKzB,QAAQC,UAAYH,KAAKD,QAAQgC,aAAa,kBAAqB7B,QAAgB,SAAKF,KAAK0B,QAAUP,GAE1H,IAAMa,EAAShC,KAAKD,QAAQY,iBAAiB,mBACvCsB,EAAWjC,KAAKD,QAAQY,iBAAiB,wBAE/CqB,EAAOhB,QAAQ,SAACkB,EAASC,GACrB,IAAMC,EAAMlB,EAAKmB,YAAYF,GAAS,o2BAI5B,GACNG,EAAWH,EAAQ,EAEvBD,EAAQK,UAAY,IAAGH,EAAME,KAGjCL,EAASjB,QAAQ,SAACwB,GACdA,EAASD,WAAarB,EAAKnB,QAAQ0C,UAAUC,SAAS,kBAAoB,uMAE5E,6LASN5C,EAAAmB,UAAAoB,YAAA,SAAYM,GACR,OAAOC,OAAOC,KAAKC,IAAIH,IAAMI,OAAO,IAAMJ,GAGtC7C,EAAAmB,UAAAb,aAAR,eAAAc,EAAAlB,KACUgD,EAAchD,KAAKD,QAEzBiD,EAAY3B,cAAc,gBAAgB4B,iBAAiB,YAAa,WACpED,EAAYP,UAAUS,IAAI,iBAI9BF,EAAY3B,cAAc,gBAAgB4B,iBAAiB,aAAc,WACrED,EAAYP,UAAUU,OAAO,iBAGjCH,EAAYrC,iBAAiB,wBAAwBK,QAAQ,SAACjB,GAC1DA,EAAQkD,iBAAiB,YAAa,WAClCD,EAAY3B,cAAc,iBAAiBoB,UAAUS,IAAI,WACzDF,EAAYP,UAAUS,IAAI,eAE1BhC,EAAKY,OAAOsB,UAIhBrD,EAAQkD,iBAAiB,aAAc,WACnCD,EAAY3B,cAAc,iBAAiBoB,UAAUU,OAAO,WAC5DH,EAAYP,UAAUU,OAAO,eAE7BjC,EAAKY,OAAOuB,YAKxBvD,EAAAmB,UAAAY,kBAAA,WACI,OACIT,UAAWpB,KAAKD,QAAQsB,cAAc,gBACtCiC,MAAO,EACP/B,MAAO,IACPC,UAAU,EACV+B,oBAAoB,EACpB9B,gBAAiB,IACjB+B,YAAY,EACZC,MAAM,EACNC,KAAK,IAIL5D,EAAAmB,UAAAZ,mBAAR,WACIsD,QAAQC,IAAIC,OAAOC,WAAYpD,SAASqD,KAAKC,aAC7C,IAAMC,EAAiBJ,OAAOC,WAAapD,SAASqD,KAAKC,YACzDL,QAAQC,IAAIK,GACZvD,SAASqD,KAAKG,MAAMC,YAAY,mBAAuBF,EAAc,OAE7EnE,EAlHA,eAoHA,IAAIA,EAAYQ","file":"./modules/StageSlider.4ff66683.js","sourcesContent":["const moduleSelector = '[data-module=\"StageSlider\"]';\r\n\r\nimport { tns } from '../../js/libs/tiny-slider.js'\r\nimport { getOptions } from '../helpers/helperFunctions';\r\n\r\nexport default class StageSlider {\r\n    slider;\r\n    options;\r\n    productItemsLength;\r\n\r\n    static setup(selector: string = moduleSelector): void {\r\n        Array.from(document.querySelectorAll(selector)).filter((node: HTMLElement) => !node.dataset.moduleInitialized).forEach((element: HTMLElement) => {\r\n            new StageSlider(element);\r\n            element.dataset.moduleInitialized = 'true';\r\n        });\r\n    }\r\n\r\n    constructor(public element: HTMLElement) {\r\n        this.initSlider();\r\n        if (!Eucerin.isMobile) {\r\n            this.sliderEvents();\r\n        }\r\n        this.calculateScrollbar();\r\n    }\r\n\r\n    private initSlider() {\r\n        let mobileOptions: TinySliderSettings = {\r\n            container: this.element.querySelector('.stage-items') as HTMLElement,\r\n            preventScrollOnTouch: 'auto',\r\n            speed: 400,\r\n            autoplay: true,\r\n            autoplayTimeout: 6000\r\n        }\r\n\r\n        this.options = getOptions(this.element, Object.assign(this.getDefaultOptions(), this.options));\r\n        this.options.container = this.element.querySelector('.stage-items') as HTMLElement;\r\n\r\n        this.slider = tns((Eucerin.isMobile && this.element.hasAttribute('data-options') || !(Eucerin.isMobile)) ? this.options : mobileOptions);\r\n\r\n        const tnsNav = this.element.querySelectorAll('.tns-nav button');\r\n        const tnsContr = this.element.querySelectorAll('.tns-controls button');\r\n\r\n        tnsNav.forEach((pagItem, index) => {\r\n            const svg = this.hasOneDigit(index) ? `<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16 29.0909C23.2299 29.0909 29.0909 23.2299 29.0909 16C29.0909 8.77009 23.2299 2.90909 16 2.90909C8.77007 2.90909 2.90907 8.77009 2.90907 16C2.90907 23.2299 8.77007 29.0909 16 29.0909ZM16 30.5455C24.0332 30.5455 30.5454 24.0332 30.5454 16C30.5454 7.96677 24.0332 1.45454 16 1.45454C7.96675 1.45454 1.45453 7.96677 1.45453 16C1.45453 24.0332 7.96675 30.5455 16 30.5455Z\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.8182 10.9091H12.3637V21.0909H13.8182V10.9091ZM10.9091 9.45454V22.5455H15.2728V9.45454H10.9091Z\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.6364 10.9091H18.1818V21.0909H19.6364V10.9091ZM16.7273 9.45454V22.5455H21.0909V9.45454H16.7273Z\"/>\r\n            </svg>` : \"\",\r\n                newIndex = index + 1;\r\n\r\n            pagItem.innerHTML = `${svg + newIndex}`\r\n        })\r\n\r\n        tnsContr.forEach((pageItem) => {\r\n            pageItem.innerHTML += this.element.classList.contains(\"splitted-stage\") ? `<svg width=\"8.73\" height=\"17.45\" viewBox=\"0 0 11 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M0.636353 1.27274L9.36362 10L0.636353 18.7273\" stroke=\"\" stroke-width=\"1.6\"/>\r\n</svg>` : `<svg width=\"8.73\" height=\"17.45\" viewBox=\"0 0 11 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M0.636353 1.27274L9.36362 10L0.636353 18.7273\" stroke=\"\"/>\r\n</svg>\r\n\r\n\r\n`;\r\n        })\r\n    }\r\n\r\n    hasOneDigit(val): boolean {\r\n        return String(Math.abs(val)).charAt(0) == val;\r\n    }\r\n\r\n    private sliderEvents() {\r\n        const stageSlider = this.element;\r\n\r\n        stageSlider.querySelector(\".stage-items\").addEventListener('mouseover', () => {\r\n            stageSlider.classList.add('is-on-hover');\r\n\r\n        })\r\n\r\n        stageSlider.querySelector(\".stage-items\").addEventListener('mouseleave', () => {\r\n            stageSlider.classList.remove('is-on-hover');\r\n        })\r\n\r\n        stageSlider.querySelectorAll(\".tns-controls button\").forEach((element: HTMLElement) => {\r\n            element.addEventListener('mouseover', () => {\r\n                stageSlider.querySelector(\".tns-controls\").classList.add('hovered');\r\n                stageSlider.classList.add('is-on-hover');\r\n\r\n                this.slider.pause();\r\n\r\n            })\r\n\r\n            element.addEventListener('mouseleave', () => {\r\n                stageSlider.querySelector(\".tns-controls\").classList.remove('hovered');\r\n                stageSlider.classList.remove('is-on-hover');\r\n\r\n                this.slider.play();\r\n            })\r\n        });\r\n    }\r\n\r\n    getDefaultOptions() {\r\n        return {\r\n            container: this.element.querySelector('.stage-items') as HTMLElement,\r\n            items: 1,\r\n            speed: 400,\r\n            autoplay: true,\r\n            autoplayHoverPause: true,\r\n            autoplayTimeout: 6000,\r\n            swipeAngle: false,\r\n            loop: true,\r\n            nav: true\r\n        }\r\n    }\r\n\r\n    private calculateScrollbar() {\r\n        console.log(window.innerWidth, document.body.clientWidth)\r\n        const scrollbarWidth = window.innerWidth - document.body.clientWidth\r\n        console.log(scrollbarWidth)\r\n        document.body.style.setProperty(\"--scrollbarWidth\", `${scrollbarWidth}px`)\r\n    }\r\n}\r\n\r\nnew StageSlider.setup();"],"sourceRoot":""}