{"version":3,"file":"paga-videos.67cbf3fe.js","sources":["../../../app/javascript/components/main/Tutorials.vue?vue&type=template&lang.js","../../../app/javascript/components/main/Tutorials.vue","../../../app/javascript/entrypoints/paga-videos.js"],"sourcesContent":["\n<div class='tutorials-container mb-5 mx-auto'>\n    <VueSlickCarousel v-bind=\"settings\" @afterChange=\"trackClick('Tutoriales_paga', 'Scroll_tutorial_slider', 'scroll')\">\n        <div class=\"tutorial h-100\" v-for=\"(video, index) in videos\" :key=\"index\">\n            <iframe :src=\"video['video']['public_path']\" width=\"100%\"\n                    height=\"100%\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\"\n                    allowfullscreen></iframe>\n            <h4>{{ video['titulo'] }}</h4>\n        </div>\n    </VueSlickCarousel>\n</div>\n","<template>\n    <div class='tutorials-container mb-5 mx-auto'>\n        <VueSlickCarousel v-bind=\"settings\" @afterChange=\"trackClick('Tutoriales_paga', 'Scroll_tutorial_slider', 'scroll')\">\n            <div class=\"tutorial h-100\" v-for=\"(video, index) in videos\" :key=\"index\">\n                <iframe :src=\"video['video']['public_path']\" width=\"100%\"\n                        height=\"100%\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\"\n                        allowfullscreen></iframe>\n                <h4>{{ video['titulo'] }}</h4>\n            </div>\n        </VueSlickCarousel>\n    </div>\n</template>\n\n<script>\nimport { trackClick } from \"@/helpers/clickTracker\";\nexport default {\n\tprops: {videos: Array},\n\tdata() {\n\t\treturn {\n\t\t\tsettings: {\n\t\t\t\tdots: true,\n\t\t\t\tarrows: true,\n\t\t\t\tslidesToShow: 3,\n\t\t\t\tinitialSlide: 3,\n\t\t\t\tinfinite: true,\n\t\t\t\tfocusOnSelect: true,\n                responsive: [\n\t\t\t\t\t{\n\t\t\t\t\t\tbreakpoint: 800,\n                        settings: {\n                            slidesToShow: 1,\n\t\t\t\t\t\t\tinitialSlide: 1,\n                        }\n                    },\n\t\t\t\t\t{\n\t\t\t\t\t\tbreakpoint: 550,\n                        settings: {\n\t\t\t\t\t\t\tslidesToShow: 1,\n\t\t\t\t\t\t\tinitialSlide: 1,\n                            arrows: false,\n\t\t\t\t\t\t\tautoplay: true,\n\t\t\t\t\t\t\tautoplaySpeed: 2000,\n                        }\n                    }\n                ]\n\t\t\t}\n\t\t}\n\t},\n    methods:{\n        trackClick\n    }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.tutorials-container {\n    width: 80% !important;\n}\n\n.tutorials-container iframe {\n    width: 100%;\n    height: 220px;\n}\n\n.tutorials-container .slick-current + .slick-slide iframe {\n    width: 400px !important;\n    height: 400px;\n}\n\n@media (max-width: 1200px) {\n    .tutorials-container {\n        width: 85% !important;\n    }\n\n    .tutorials-container iframe {\n        height: 200px;\n    }\n\n    .tutorials-container .slick-current + .slick-slide iframe {\n        width: 300px !important;\n        height: 300px;\n    }\n}\n\n@media (max-width: 1200px) {\n    .tutorials-container iframe {\n        height: 150px;\n    }\n}\n\n@media (max-width: 800px) {\n    .tutorials-container {\n        margin-top: 2rem;\n        width: 80% !important;\n    }\n\n    .tutorials-container iframe {\n        width: 400px !important;\n        height: 400px;\n    }\n}\n\n@media (max-width: 550px) {\n    .tutorials-container {\n        width: 250px !important;\n    }\n\n    .tutorials-container .slick-current + .slick-slide iframe {\n        width: 250px !important;\n        height: 250px;\n    }\n\n    .tutorials-container iframe {\n        width: 250px !important;\n        height: 250px;\n    }\n}\n</style>\n\n<style lang=\"scss\">\n.tutorials-container iframe {\n    width: 100% !important;\n}\n\n.tutorials-container .slick-current + .slick-slide {\n    filter: brightness(1);\n}\n\n.tutorials-container .slick-current + .slick-slide {\n    pointer-events: auto;\n}\n\n.tutorials-container .slick-slide {\n    display: flex !important;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    filter: brightness(.8);\n}\n\n.tutorials-container .slick-track {\n    height: 400px !important;\n    display: flex !important;\n    margin-bottom: 2rem;\n}\n\n@media (max-width: 800px) {\n    .tutorials-container .slick-slide {\n        pointer-events: auto;\n        filter: brightness(1);\n    }\n}\n</style>","import Vue from 'vue'\n// Packages\nimport VueSlickCarousel from 'vue-slick-carousel'\nimport VueSlider from 'vue-slider-component'\n\n// Register components\nVue.component('VueSlickCarousel', VueSlickCarousel)\nVue.component('vue-slider', VueSlider)\n\nimport Tutorials from \"@/components/main/Tutorials.vue\";\n\ndocument.addEventListener('DOMContentLoaded', () => {\n\tnew Vue({\n\t\trender: h => h(Tutorials, {\n\t\t\tprops: {\n\t\t\t\tvideos: videos\n\t\t\t}\n\t\t})\n\t}).$mount('#videos')\n})"],"names":["render","_vm","_h","_c","$event","video","index","staticRenderFns","__vue2_script","trackClick","Vue","VueSlickCarousel","VueSlider","h","Tutorials"],"mappings":"2TAAA,IAAIA,EAAS,UAAY,CAAC,IAAIC,EAAI,KAASC,EAAGD,EAAI,eAAmBE,EAAGF,EAAI,MAAM,IAAIC,EAAG,OAAOC,EAAG,MAAM,CAAC,YAAY,kCAAkC,EAAE,CAACA,EAAG,mBAAmBF,EAAI,GAAG,CAAC,GAAG,CAAC,YAAc,SAASG,EAAO,CAAC,OAAOH,EAAI,WAAW,kBAAmB,yBAA0B,QAAQ,CAAC,CAAC,CAAC,EAAE,mBAAmBA,EAAI,SAAS,EAAK,EAAEA,EAAI,GAAIA,EAAI,OAAQ,SAASI,EAAMC,EAAM,CAAC,OAAOH,EAAG,MAAM,CAAC,IAAIG,EAAM,YAAY,gBAAgB,EAAE,CAACH,EAAG,SAAS,CAAC,MAAM,CAAC,IAAME,EAAM,MAAS,YAAe,MAAQ,OAAO,OAAS,OAAO,YAAc,IAAI,MAAQ,2CAA2C,gBAAkB,EAAE,CAAC,CAAC,EAAEF,EAAG,KAAK,CAACF,EAAI,GAAGA,EAAI,GAAGI,EAAM,MAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAC5pBE,EAAkB,CAAA,ECctB,MAAAC,EAAA,CACA,MAAA,CAAA,OAAA,KAAA,EACA,MAAA,CACA,MAAA,CACA,SAAA,CACA,KAAA,GACA,OAAA,GACA,aAAA,EACA,aAAA,EACA,SAAA,GACA,cAAA,GACA,WAAA,CACA,CACA,WAAA,IACA,SAAA,CACA,aAAA,EACA,aAAA,CACA,CACA,EACA,CACA,WAAA,IACA,SAAA,CACA,aAAA,EACA,aAAA,EACA,OAAA,GACA,SAAA,GACA,cAAA,GACA,CACA,CACA,CACA,CACA,CACA,EACA,QAAA,CACA,WAAAC,CACA,CACA,iIC7CAC,EAAI,UAAU,mBAAoBC,CAAgB,EAClDD,EAAI,UAAU,aAAcE,CAAS,EAIrC,SAAS,iBAAiB,mBAAoB,IAAM,CACnD,IAAIF,EAAI,CACP,OAAQG,GAAKA,EAAEC,EAAW,CACzB,MAAO,CACN,MACA,CACJ,CAAG,CACH,CAAE,EAAE,OAAO,SAAS,CACpB,CAAC"}