{"version":3,"sources":["webpack:///./assets/javascripts/modules/components/CarouselModuleComponent.js"],"names":["CarouselModuleComponent","Component","_this2","this","Promise","resolve","reject","moduleLoader","loadCarouselAndExecute","module","error","main","$component","querySelector","SELECTORS","navWrapper","prevArrow","nextArrow","navDots","content","carousel","disabledCarousel","_this3","_get","prototype","__proto__","Object","getPrototypeOf","call","slickInstance","dom","readDOM","cards","Array","from","querySelectorAll","card","importLibrary","then","mq","window","matchMedia","initCarousel","matches","length","addEventListener","e","_this4","isMobile","arguments","undefined","cardsNumber","isSideContent","dataset","isMobileCarousel","mobileCarousel","opts","dots","arrows","autoplay","swipeToSlide","centerMode","variableWidth","slidesToScroll","infinite","slidesToShow","centerPadding","appendDots","responsive","breakpoint","settings","classList","contains","$","slick","style","display","on","evt","curSlide","nextSlide","options","toggleArrow","which","enable","_this5","elem","toggle","CSS","hidden","toggleElem","prev","next"],"mappings":"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","file":"component-CarouselModuleComponent.chunks.js","sourcesContent":["import Component from \"../abstracts/Component\";\n\n\nexport default class CarouselModuleComponent extends Component {\n  get COMPONENTNAME() {\n    return 'CarouselModuleComponent';\n  }\n\n  get SELECTORS() {\n    return {\n      main: '[data-carousel=\"true\"]:not(.slick-initialized)',\n      navWrapper: '[data-nav-wrapper]',\n      prevArrow: '[data-nav-wrapper] [data-prev-arrow]',\n      nextArrow: '[data-nav-wrapper] [data-next-arrow]',\n      navDots: '[data-nav-wrapper] [data-nav-dots]',\n      card: '[data-card]',\n      content: '[data-content]',\n      carousel: '[data-is-carousel=\"true\"]',\n      disabledCarousel: '[data-is-carousel=\"false\"]',\n    };\n  }\n\n  get CSS() {\n    return {\n      hidden: '--hidden',\n    };\n  }\n\n  importLibrary() {\n    return new Promise((resolve, reject) => {\n      this.moduleLoader.loadCarouselAndExecute(\n        module => { resolve(module) },\n        error => { reject(error) }\n      );\n    });\n  }\n\n  readDOM() {\n    return {\n      main: this.$component.querySelector(this.SELECTORS.main),\n      navWrapper: this.$component.querySelector(this.SELECTORS.navWrapper),\n      prevArrow: this.$component.querySelector(this.SELECTORS.prevArrow),\n      nextArrow: this.$component.querySelector(this.SELECTORS.nextArrow),\n      navDots: this.$component.querySelector(this.SELECTORS.navDots),\n      // cards: Array.from(this.$component.querySelectorAll(this.SELECTORS.card)),\n      content: this.$component.querySelector(this.SELECTORS.content),\n      carousel: this.$component.querySelector(this.SELECTORS.carousel),\n      disabledCarousel: this.$component.querySelector(this.SELECTORS.disabledCarousel),\n    }\n  }\n\n  render() {\n    super.render();\n\n    this.slickInstance = null;\n    this.dom = this.readDOM();\n\n    if (!this.dom.main) return;\n\n    // must be before slick is initialized and clones cards\n    const cards = Array.from(this.dom.carousel.querySelectorAll(this.SELECTORS.card))\n\n    this.importLibrary().then(() => {\n      const mq = window.matchMedia('screen and (max-width: 767px)');\n      this.initCarousel(mq.matches, cards.length);\n      mq.addEventListener('change', (e) => {\n        this.initCarousel(e.matches, cards.length);\n      });\n    });\n  }\n\n  initCarousel(isMobile = false, cardsNumber = 0) {\n\n    const isSideContent = this.dom.content && this.dom.content.dataset.content === 'side';\n    const isMobileCarousel = this.$component.dataset.mobileCarousel === 'true';\n\n    const opts = {\n      dots: true,\n      arrows: true,\n      autoplay: false,\n      swipeToSlide: true,\n      centerMode: true,\n      variableWidth: false,\n      slidesToScroll: 1,\n      infinite: !isSideContent,\n      slidesToShow: isSideContent ? 2 : 3,\n      centerPadding: '12.50%',\n\n      prevArrow: this.dom.prevArrow,\n      nextArrow: this.dom.nextArrow,\n      appendDots: this.dom.navDots,\n\n      responsive: [\n        {\n          breakpoint: 768,\n          settings: {\n            slidesToShow: 2,\n            infinite: true,\n            dots: true,\n            arrows: true,\n            autoplay: false,\n            swipeToSlide: true,\n            centerMode: true,\n            variableWidth: false,\n            centerPadding: '12.50%',\n          }\n        },\n      ],\n    }\n\n    const isInitialized = this.dom.main.classList.contains('slick-initialized')\n    if (!isInitialized) {\n      this.slickInstance = $(this.dom.main).slick(opts)\n    }\n\n\n    // fix slick \"responsivness\"\n    // don't initialize carousel if (ORs):\n    // - desktop: text is top and viewport is >= md and there are <= 4 card\n    // - mobile: flag is unchecked\n    // in both cases, skip init only if already is not initialized in order to\n    // not break responsivness\n\n    // WARN: `unslick` removes slides from the dom, it doesn't just disable the carousel\n    // const isInitialized = this.dom.main.classList.contains('slick-initialized')\n    const mobileCarouselEnabled = isMobile && isMobileCarousel;\n    const hasEnoughDesktopCards = !isMobile && !isSideContent && cardsNumber > 4;\n    const isDesktopSideContent = !isMobile && isSideContent;\n    if (isDesktopSideContent || hasEnoughDesktopCards || mobileCarouselEnabled) {\n      this.dom.carousel.style.display = \"block\"\n      this.dom.disabledCarousel.style.display = \"none\"\n    } else {\n      this.dom.carousel.style.display = \"none\"\n      this.dom.disabledCarousel.style.display = \"block\"\n    }\n\n    if (isSideContent && this.slickInstance) {\n      this.slickInstance.on('beforeChange', (evt, slick, curSlide, nextSlide) => {\n        if (slick.options.infinite) return;\n\n        // phantom slide, so we start from one\n        if (nextSlide === 1) {\n          this.toggleArrow('prev', false);\n        } else if (nextSlide === cardsNumber - 1) {\n          this.toggleArrow('next', false);\n        } else {\n          this.toggleArrow('prev', true);\n          this.toggleArrow('next', true);\n        }\n      });\n\n      this.slickInstance.slick('slickGoTo', 1);\n    }\n\n  }\n\n  toggleArrow(which, enable) {\n    const toggleElem = elem => {\n      elem.classList.toggle(this.CSS.hidden, !enable);\n    }\n\n    const arrows = {\n      prev: this.dom.prevArrow,\n      next: this.dom.nextArrow,\n    };\n\n    toggleElem(arrows[which]);\n  }\n}"],"sourceRoot":""}