{"version":3,"file":"ProductCarousel-DHa7a0Ns.js","sources":["../../../app/future_admin/cms/landing_page/blocks/ProductCarousel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      topPadding,\n      bottomPadding,\n      block.backgroundColour\n        ? `bg-${block.backgroundColour} transparent-images`\n        : null\n    ]\">\n    <h3 class=\"block sm:hidden typeset-3 mb-6 container\">{{ block.title }}</h3>\n    <div class=\"container flex flex-col-reverse sm:block\">\n      <div class=\"flex justify-between mb-4 md:mb-6 mx-auto sm:mx-0\">\n        <div\n          v-if=\"block.title\"\n          class=\"typeset-2 hidden sm:block\">\n          {{ block.title }}\n        </div>\n        <flickity-buttons\n          v-if=\"shouldShowArrows\"\n          display-classes=\"flex flex-no-shrink gap-7 mt-5 sm:mt-4 mr-4\"\n          :previous-disabled=\"previousDisabled\"\n          :next-disabled=\"nextDisabled\"\n          :flickity-id=\"flickityId\" />\n      </div>\n      <div\n        v-if=\"currentProducts.length\"\n        class=\"landing-products-carousel js-impression-list md:mb-0 mb-3 transparent-images\"\n        data-situation=\"landing_page\"\n        data-block-type=\"product_carousel\">\n        <flickity-carousel\n          :flickity-id=\"flickityId\"\n          class=\"h-full gap-8\"\n          hide-arrows\n          requires-flickity\n          @update-selected-elements=\"updateElements($event)\">\n          <flickity-carousel-item\n            v-for=\"(listing, index) in currentProducts\"\n            :key=\"listing.analytics_id\"\n            :last-in-list=\"index === listing.length - 1\"\n            max-width=\"16.66%\"\n            lg-min-width=\"16.66%\"\n            sm-min-width=\"33.33%\"\n            md-min-width=\"25%\"\n            :data-index=\"index\"\n            :style=\"{ height: cellHeight + 'px' }\"\n            :flickity-id=\"flickityId\"\n            mobile-min-width=\"50%\"\n            class=\"px-3\">\n            <listing\n              :listing=\"listing\"\n              :data-id=\"listing.analytics_id\"\n              :allow-favourites-controls=\"!admin\"\n              :disable-favourites=\"admin\"\n              text-align=\"center\"\n              show-pricing />\n          </flickity-carousel-item>\n        </flickity-carousel>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { isEqual } from \"lodash-es\";\nimport api from \"@/app/javascript/api/admin/landingPages\";\nimport landingPageCarousel from \"@/app/javascript/mixins/landingPageCarousel\";\n\nimport FlickityButtons from \"@/app/javascript/components/shared/FlickityButtons.vue\";\nimport FlickityCarousel from \"@/app/javascript/components/shared/FlickityCarousel.vue\";\nimport FlickityCarouselItem from \"@/app/javascript/components/shared/FlickityCarouselItem.vue\";\nimport Listing from \"@/app/javascript/components/shared/Listing.vue\";\nimport BaseBlock from \"./BaseBlock.vue\";\n\nexport default {\n  name: \"ProductCarousel\",\n  components: {\n    Listing,\n    FlickityButtons,\n    FlickityCarousel,\n    FlickityCarouselItem\n  },\n  extends: BaseBlock,\n  mixins: [landingPageCarousel],\n  props: {\n    storeCode: {\n      type: String,\n      default: \"\"\n    },\n    // In the FA Design tool, we won't pass this as a prop\n    // But on the FE, where the products won't change, we pass these in as a prop\n    // to avoid a slower API call\n    decoratedProducts: {\n      type: Array,\n      default: () => []\n    },\n    admin: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data() {\n    return {\n      currentProducts: [],\n      key: 0,\n      elementsInView: []\n    };\n  },\n  computed: {\n    shouldShowArrows() {\n      return this.isDesktop ? this.currentProducts.length > 6 : true;\n    },\n    isDesktop() {\n      return window.innerWidth >= 1280;\n    }\n  },\n  watch: {\n    block: {\n      handler(val, oldVal) {\n        if (!isEqual(val.products, oldVal.products)) {\n          this.key += 1;\n          this.loadCarousel();\n        }\n        this.$nextTick(() => {\n          this.flkty.resize();\n        });\n      },\n      deep: true\n    }\n  },\n  mounted() {\n    this.loadCarousel();\n  },\n  methods: {\n    async loadCarousel() {\n      this.currentProducts = [];\n      const products = this.decoratedProducts.length\n        ? this.decoratedProducts\n        : await this.fetchProducts();\n      const imageCollection = products.map(product => product.imageUrl);\n      await this.loadAllImages(imageCollection);\n      this.currentProducts = products.filter(\n        product => !this.erroredImages.includes(product.imageUrl)\n      );\n      this.$nextTick(() => {\n        this.setupPageForNewProducts();\n      });\n    },\n    async fetchProducts() {\n      const { data } = await api.fetchProducts(this.block.products);\n      return data;\n    }\n  }\n};\n</script>\n"],"names":["_sfc_main","Listing","FlickityButtons","FlickityCarousel","FlickityCarouselItem","BaseBlock","landingPageCarousel","val","oldVal","isEqual","products","imageCollection","product","data","api","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_toDisplayString","_openBlock","_hoisted_4","_createCommentVNode","$options","_createBlock","_component_flickity_buttons","$data","_hoisted_5","_createVNode","_component_flickity_carousel","_cache","$event","_withCtx","_Fragment","_renderList","listing","index","_component_flickity_carousel_item","_normalizeStyle","_component_listing","$props"],"mappings":"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"}