{"version":3,"sources":["webpack:///./src/components/CarouselV1/CarouselV1.vue?decd","webpack:///src/components/CarouselV1/CarouselV1.vue","webpack:///./src/components/CarouselV1/CarouselV1.vue?e73c","webpack:///./src/components/CarouselV1/CarouselV1.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","model","items","length","class","wrapperClasses","attrs","staticClass","listingTitle","_v","_s","_e","_f","carousel","viewAllLink","windowWidth","ref","hooperClasses","hooperSettings","_l","item","key","uuid","disableLinks","common","productCardConf","priceFormatting","staticRenderFns","component"],"mappings":"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","file":"js/chunk-2d0bded9-a6783a68d4c2aaab2ca8.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (this.model.items && this.model.items.length)?_c('section',{class:_vm.wrapperClasses,attrs:{\"id\":(\"uuid-\" + (_vm.model.uuid))}},[_c('div',{staticClass:\"section__container section__container--full-small\"},[_c('div',{staticClass:\"carousel-product\"},[_c('div',{staticClass:\"listing-header\",class:{'listing-no-title' : !_vm.model.listingTitle}},[(_vm.model.listingTitle)?_c('div',[(_vm.model.listingTitle)?_c('h2',{staticClass:\"listing-header__heading text--heading-l text--heading-l--section\"},[_vm._v(_vm._s(_vm.model.listingTitle)+\" \")]):_vm._e(),(_vm.showNote)?_c('p',{staticClass:\"listing-header__note\"},[_c('msg',{attrs:{\"id\":\"common.price.tooltip.text\"}})],1):_vm._e()]):_vm._e(),(_vm.showViewAll)?_c('div',{staticClass:\"carousel-product__navigation\"},[(_vm.showViewAll)?_c('pg-button',{staticClass:\"carousel-product__viewall\",attrs:{\"href\":_vm._f(\"mgnlLink\")(_vm.model.carousel.viewAllLink,'url'),\"styleType\":\"text\",\"size\":\"medium\"}},[_c('msg',{attrs:{\"id\":\"common.carousel.viewall.text\"}})],1):_vm._e()],1):_vm._e()]),_c('div',{staticClass:\"carousel\"},[(_vm.showArrows)?_c('div',{staticClass:\"carousel__arrows\",class:_vm.windowWidth ? 'carousel__arrows-zoom' : ''},[_c('pg-button',{staticClass:\"carousel__arrows__prev\",attrs:{\"styleType\":'icon',\"icon\":'icon-arrow-sx',\"eventParams\":{},\"eventName\":(\"carousel-\" + (_vm.model.uuid) + \":Prev\")}},[_c('msg',{attrs:{\"id\":\"common.carousel.previous.aria\"}})],1),_c('pg-button',{staticClass:\"carousel__arrows__next\",attrs:{\"styleType\":'icon',\"icon\":'icon-arrow-dx',\"eventParams\":{},\"eventName\":(\"carousel-\" + (_vm.model.uuid) + \":Next\")}},[_c('msg',{attrs:{\"id\":\"common.carousel.next.aria\"}})],1)],1):_vm._e(),_c('hooper',{ref:(\"carousel-\" + (_vm.model.uuid)),class:_vm.hooperClasses,attrs:{\"settings\":_vm.hooperSettings}},_vm._l((_vm.model.items),function(item){return _c('hooper-slide',{key:item.uuid,attrs:{\"index\":item.uuid}},[_c('card-product',{class:{'cursor-default': _vm.model.disableLinks === 'linksDisabled'},attrs:{\"select\":_vm.model.disableLinks === 'linksDisabled' ? 'linksDisabled' : '',\"item\":item,\"productCardConf\":_vm.common.productCardConf,\"priceFormatting\":_vm.common.priceFormatting}})],1)}),1)],1)])])]):_vm._e()}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <section :class=\"wrapperClasses\" v-if=\"this.model.items && this.model.items.length\" :id=\"`uuid-${model.uuid}`\">\n    <div class=\"section__container section__container--full-small\">\n      <div class=\"carousel-product\">\n        <div class=\"listing-header\" :class=\"{'listing-no-title' : !model.listingTitle}\">\n          <div v-if=\"model.listingTitle\">\n            <h2\n                class=\"listing-header__heading text--heading-l text--heading-l--section\"\n                v-if=\"model.listingTitle\"\n            >{{model.listingTitle}}\n            </h2>\n            <p class=\"listing-header__note\" v-if=\"showNote\">\n              <msg id=\"common.price.tooltip.text\"/>\n            </p>\n          </div>\n          <div v-if=\"showViewAll\" class=\"carousel-product__navigation\">\n            <pg-button\n                :href=\"model.carousel.viewAllLink | mgnlLink('url') \"\n                styleType=\"text\"\n                size=\"medium\"\n                v-if=\"showViewAll\"\n                class=\"carousel-product__viewall\"\n            >\n              <msg id=\"common.carousel.viewall.text\"/>\n            </pg-button>\n          </div>\n        </div>\n        <div class=\"carousel\">\n          <div v-if=\"showArrows\" class=\"carousel__arrows\" :class=\"windowWidth ? 'carousel__arrows-zoom' : ''\">\n            <pg-button\n                class=\"carousel__arrows__prev\"\n                :styleType=\"'icon'\"\n                :icon=\"'icon-arrow-sx'\"\n                :eventParams=\"{}\"\n                :eventName=\"`carousel-${model.uuid}:Prev`\"\n            >\n              <msg id=\"common.carousel.previous.aria\"/>\n            </pg-button>\n            <pg-button\n                class=\"carousel__arrows__next\"\n                :styleType=\"'icon'\"\n                :icon=\"'icon-arrow-dx'\"\n                :eventParams=\"{}\"\n                :eventName=\"`carousel-${model.uuid}:Next`\"\n            >\n              <msg id=\"common.carousel.next.aria\"/>\n            </pg-button>\n          </div>\n          <hooper :settings=\"hooperSettings\" :class=\"hooperClasses\" :ref=\"`carousel-${model.uuid}`\">\n            <hooper-slide v-for=\"item in model.items\" :key=\"item.uuid\" :index=\"item.uuid\">\n              <card-product\n                :class=\"{'cursor-default': model.disableLinks === 'linksDisabled'}\"\n                :select=\"model.disableLinks === 'linksDisabled' ? 'linksDisabled' : ''\"\n                :item=\"item\" :productCardConf=\"common.productCardConf\" :priceFormatting=\"common.priceFormatting\"/>\n            </hooper-slide>\n          </hooper>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\n  /**\n   - Carousel Accessories / Vehicles\n   **/\n\n  import {mgnlComponentMixin} from \"@wl-vue-mixins/mixins.js\";\n  import {Hooper, Slide as HooperSlide} from \"hooper\";\n  import CardProduct from \"../Card-Product/Card-Product\";\n  import PgButton from \"../Button/Button\";\n\n  export default {\n    mixins: [mgnlComponentMixin], // !!! all the mgnl components must be configured with mgnlComponentMixin !!!\n    name: \"CarouselV1\",\n    components: {\n      CardProduct,\n      Hooper,\n      HooperSlide,\n      PgButton\n    },\n    data() {\n      return {\n        hooperSettings: {\n          initialSlide: 0,\n          itemsToShow: 1.5,\n          itemsToSlide: 1,\n          centerMode: true,\n          wheelControl: false,\n          infiniteScroll: false,\n          touchDrag: true,\n          mouseDrag: false,\n          breakpoints: {\n            640: {\n              initialSlide: 0,\n              itemsToShow: 4,\n              itemsToSlide: 1,\n              centerMode: false,\n              touchDrag: false,\n              mouseDrag: false,\n              infiniteScroll: true\n            },\n            1024: {\n              initialSlide: 0,\n              itemsToShow: 4,\n              itemsToSlide: 1,\n              centerMode: false,\n              touchDrag: false,\n              mouseDrag: false,\n              infiniteScroll: true\n            }\n          }\n        },\n        isPrevDisabled: false,\n        isNextDisabled: false,\n        itemsLessThanItemsToShow: {\n          small: false,\n          medium: false,\n          large: false\n        },\n        windowWidth: false,\n        isTabMobile: false\n      };\n    },\n    mounted() {\n      this.visualizationSettings();\n    },\n    updated() {\n      this.visualizationSettings();\n    },\n    computed: {\n      showArrows() {\n        let itemsToShow;\n        if (this.$mq === \"small\") {\n          itemsToShow = this.hooperSettings.itemsToShow;\n        } else {\n          // ignoring medium not to show arrows for accessory on medium\n          itemsToShow = this.hooperSettings.breakpoints[1024].itemsToShow;\n        }\n        let condition =\n            this.model.carousel.arrows &&\n            this.model.items &&\n            this.model.items.length > itemsToShow;\n\n        // PIAGGIO-8774: content visibility with zoom 400%\n        // always displays arrows if desktop screen zoom is active\n        if (!this.isTabMobile && this.windowWidth) {\n          condition = true;\n        } else if (this.$mq === \"small\" && this.model.listingType === \"accessory\") {\n          condition = this.model.items && this.model.items.length >= 2;\n        }\n\n        return condition;\n      },\n      showViewAll() {\n        if (this.model.disableLinks === 'linksDisabled') return false;\n        return this.model.carousel.viewAllLink;\n      },\n      wrapperClasses() {\n        let wrapperClass = \"\";\n\n        if (this.model.listingType === \"accessory\" || this.model.listingType === \"service\") {\n          wrapperClass = \"tertiary-1-accessories\";\n        } else if (this.model.listingType === \"vehicle\") {\n          wrapperClass = \"tertiary-1\";\n        }\n\n        return [\"section\", \"section--\" + wrapperClass];\n      },\n\n      hooperClasses() {\n        return [\n          this.itemsLessThanItemsToShow[this.$mq] ? \"centered\" : \"\",\n          \"hooper--partial-slide\"\n        ];\n      },\n      showNote() {\n        return this.model.listingType === \"vehicle\" && this.common.priceNote;\n      }\n    },\n\n    methods: {\n      slidePrev() {\n        setTimeout(() => {\n          this.$refs[`carousel-${this.model.uuid}`].slidePrev();\n        }, 10);\n      },\n      slideNext() {\n        setTimeout(() => {\n          this.$refs[`carousel-${this.model.uuid}`].slideNext();\n        }, 10);\n      },\n      visualizationSettings() {\n        this.$eventHub.on(`carousel-${this.model.uuid}:Prev`, () => {\n          this.slidePrev();\n        });\n        this.$eventHub.on(`carousel-${this.model.uuid}:Next`, () => {\n          this.slideNext();\n        });\n\n        if (this.model.listingType === \"accessory\" || this.model.listingType === \"service\") {\n          this.hooperSettings.breakpoints[640].itemsToShow = 5;\n          this.hooperSettings.breakpoints[1024].itemsToShow = 6;\n        }\n\n        // check if items are less than items to show,\n        // in this case a set the carousel infinite to false\n        // and apply a class to center the content\n        // for each breakpoint\n\n        if (\n            this.model.items &&\n            this.model.items.length > this.hooperSettings.itemsToShow\n        ) {\n          //small\n          this.hooperSettings.infiniteScroll = true;\n          //this.itemsLessThanItemsToShow[\"small\"] = true;\n        }\n        if (\n            this.model.items &&\n            this.model.items.length < this.hooperSettings.breakpoints[640].itemsToShow\n        ) {\n          // medium\n          this.hooperSettings.breakpoints[640].infiniteScroll = false;\n          this.itemsLessThanItemsToShow[\"medium\"] = true;\n        }\n        if (\n            this.model.items &&\n            this.model.items.length <\n            this.hooperSettings.breakpoints[1024].itemsToShow\n        ) {\n          //large\n          this.hooperSettings.breakpoints[1024].infiniteScroll = false;\n          this.itemsLessThanItemsToShow[\"large\"] = true;\n        }\n\n        this.isPrevDisabled = !this.hooperSettings.breakpoints[1024].infiniteScroll;\n\n        // PIAGGIO-8774: content visibility with zoom 400%\n        this.isTabMobile = window.screen.width <= 1023;\n        this.windowWidth = window.visualViewport.width < 1010;\n      }\n    }\n  };\n</script>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CarouselV1.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CarouselV1.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CarouselV1.vue?vue&type=template&id=0d9a7506&\"\nimport script from \"./CarouselV1.vue?vue&type=script&lang=js&\"\nexport * from \"./CarouselV1.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}