{"version":3,"file":"concept-Dsv54TCd.js","sources":["../../../assets/components/Site/ConceptGallery/ConceptGallery.vue","../../../assets/components/Site/ConceptProductSelector/ConceptProductSelector.vue","../../../assets/entries/concept.ts"],"sourcesContent":["<template>\n  <div>\n  <div class=\"shadow flex items-center justify-center\">\n      <ul class=\"max-w-full overflow-hidden relative w-full\" :style=\"{paddingBottom: `${containerBottomPadding}%`}\">\n        <TransitionGroup>\n          <li class=\"absolute inset-0 w-full h-full bg-gray-100\" v-for=\"(image, index) in images\" :key=\"index\" v-show=\"currentSlide === index\">\n            <div v-if=\"image.video_url === null\">\n              <BlurhashImage\n                  :hash=\"image.blurhash\"\n                  :src=\"image['img_1x']\"\n                  :srcset=\"`${image['img_1x']} 1x, ${image['img_2x']} 2x`\"\n                  :alt=\"image.alt\"\n                  :width=\"width\"\n                  :height=\"height\"\n                  :pause=\"currentSlide !== index\"\n                  @load=\"onImageLoaded(index)\"\n              ></BlurhashImage>\n            </div>\n            <div v-else class=\"h-full bg-black\">\n              <iframe class=\"aspect-video h-full w-full\" :src=\"image.video_url\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>\n            </div>\n          </li>\n        </TransitionGroup>\n      </ul>\n  </div>\n\n  <ul class=\"grid grid-cols-4 gap-4 mt-4\">\n    <li class=\"bg-white border-2 flex-none transition-colors\" v-for=\"(image, index) in images\" :class=\"index  === currentSlide ? `shadow` : 'opacity-80'\" @click=\"onThumbnailClick(index)\" :style=\"{'borderColor' : index === currentSlide ? border_colour : 'transparent'}\">\n        <BlurhashImage\n            :hash=\"image.blurhash\"\n            :src=\"image.thumb_1x\"\n            :srcset=\"`${image.thumb_1x} 1x, ${image.thumb_2x} 2x`\"\n            :alt=\"`${image.alt} thumbnail`\"\n            :width=\"100\"\n            :height=\"100\"\n        ></BlurhashImage>\n    </li>\n  </ul>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {ref, onMounted, computed} from 'vue';\n  import type { Ref} from \"vue\";\n  import BlurhashImage from \"@SpongeFoundation/vue/Common/Blurhash/BlurhashImage.vue\"\n\n  interface Image { 'img_1x': string|null, 'img_2x': string|null, thumb_1x: string|null, thumb_2x: string|null, alt: string, blurhash: string|null, video_url: string|null }\n  type Images = Image[];\n\n  const props = defineProps<{\n    images: Images,\n    width: number,\n    height: number,\n    border_colour: string\n  }>();\n\n  let currentSlide:Ref<Number> = ref(0);\n  let first_image_loaded:Ref<Boolean> = ref(false);\n  const containerBottomPadding:Number = parseFloat(((Math.round(props.height) / Math.round(props.width)) * 100).toFixed(2));\n\n  const onThumbnailClick = (index) => { currentSlide.value = index };\n  const onImageLoaded = (index) => {\n    if(index === 1) {\n      first_image_loaded.value = true;\n    }\n  }\n</script>\n","<template>\n      <div class=\"mb-10\">\n        <SizeGuide></SizeGuide>\n      </div>\n\n      <RadioGroup v-model=\"selected\" name=\"id\">\n        <div class=\"grid grid-cols-3 gap-2 mb-4\">\n          <RadioGroupOption :value=\"product.id\" v-for=\"product in products\" v-slot=\"{ active, checked }\" :disabled=\"product.unavailable\" class=\"outline-none\">\n              <div\n                  class=\"relative rounded py-2 px-1 text-center leading-tight transition-colors h-36 sm:h-32 lg:h-36 flex flex-col\"\n                  :class=\"[\n                      checked ? theme.background : 'bg-gray-100',\n                      checked ? theme.active_text : '',\n                      product.unavailable ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer',\n                  ]\"\n              >\n                <RadioGroupLabel class=\"text-md leading-tight font-bold flex-none\">{{ product.name }}</RadioGroupLabel>\n\n                <RadioGroupDescription as=\"div\" class=\"flex-grow flex flex-col items-center justify-center\">\n                      <p class=\"text-xs mb-2 lg:-mt-1 leading-tight\" v-if=\"product.serves !== null && product.serves != '0'\">{{ product.serves }} servings, {{product.weight}}kg.</p>\n                      <p class=\"text-xl\">&pound;{{ product.price.toFixed(2) }}</p>\n                      <p v-if=\"product.club_price\" class=\"-mt-1 text-sm\" :class=\"[checked ? theme.active_text : 'text-sponge-gold-ongray']\">&pound;{{ parseFloat(product.club_price).toFixed(2) }} club</p>\n                </RadioGroupDescription>\n\n                <RadioGroupDescription as=\"div\" class=\"flex-none h-12 sm:h-8 lg:h-12 xl:h-10 flex items-center justify-center leading-tight md:px-2\">\n                    <p class=\"text-xs leading-tight\" v-if=\"product.club_exclusive\">\n                      <span :class=\"[checked ? theme.active_text : 'text-sponge-gold-ongray']\">Sponge Club exclusive product</span>\n                    </p>\n\n                    <p class=\"text-xs leading-tight\" v-if=\"!product.club_exclusive\">\n                      {{ next_available(product) }}\n                    </p>\n                </RadioGroupDescription>\n              </div>\n          </RadioGroupOption>\n        </div>\n      </RadioGroup>\n\n      <div class=\"text-xs mt-2 mb-4\">Availability may change at checkout according to postcode and time of day.</div>\n\n      <div class=\"pb-4 lg:border-0\">\n          <Button :color=\"props.color_theme\" :disabled=\"selected === null\" type=\"submit\" class=\"w-3/4 sm:w-3/4\" :full_width=\"true\">Add to Basket</Button>\n      </div>\n</template>\n\n<script setup lang=\"ts\">\n  import {ref, computed, onMounted} from \"vue\";\n  import ConceptProduct from \"@/types/ConceptProduct\";\n  import SizeGuide from \"@/components/Site/SizeGuide/SizeGuide.vue\";\n\n  import {\n    RadioGroup,\n    RadioGroupLabel,\n    RadioGroupOption,\n    RadioGroupDescription\n  } from '@headlessui/vue'\n\n  import Button from \"@SpongeFoundation/vue/Shop/Button/Button.vue\";\n  import next_available from \"@/vendor/next_available\";\n\n  const props = defineProps<{\n    products: ConceptProduct[],\n    color_theme: string\n  }>();\n\n\n  let selected = ref(null);\n\n  const theme = computed<{ background: string, active_text: string}>(() => {\n    switch(props.color_theme) {\n      case 'red':\n        return {background: 'bg-sponge-red', active_text: 'text-sponge-red-contrast'};\n      case 'yellow':\n        return {background: 'bg-sponge-yellow', active_text: 'text-sponge-yellow-contrast'};\n      case 'pink':\n        return {background: 'bg-sponge-pink', active_text: 'text-sponge-pink-contrat'};\n      case 'navy':\n        return {background: 'bg-sponge-navy', active_text: 'text-sponge-navy-contrast'};\n      case 'blue':\n        return {background: 'bg-sponge-blue', active_text: 'text-sponge-blue-contrast'};\n      case 'gold':\n        return {background: 'bg-sponge-gold', active_text: 'text-sponge-gold-contrast'};\n      case 'gf':\n        return {background: 'bg-sponge-gf', active_text: 'text-sponge-gf-contrast'};\n      case 'vegan':\n        return {background: 'bg-sponge-vegan', active_text: 'text-sponge-vegan-contrast'};\n      case 'dfgf':\n        return {background: 'bg-sponge-dfgf', active_text: 'text-sponge-dfgf-contrast'};\n      case 'green':\n      default:\n        return {background: 'bg-sponge-green', active_text: 'text-sponge-green-contrast'};\n    }\n  });\n\n  onMounted(() => {\n    // find the first available one and select it (they should be in price order already)\n    for(let product of props.products) {\n      if(product.unavailable === false) {\n        selected.value = product.id;\n        break;\n      }\n    }\n  })\n\n</script>\n","import { createApp } from 'vue'\n\nimport Button from \"@SpongeFoundation/vue/Shop/Button/Button.vue\";\nimport Stars from \"@SpongeFoundation/vue/Common/Stars/Stars.vue\";\nimport ConceptGallery from \"@/components/Site/ConceptGallery/ConceptGallery.vue\";\nimport ConceptProductSelector from \"@/components/Site/ConceptProductSelector/ConceptProductSelector.vue\";\nimport BlurhashImage from \"@SpongeFoundation/vue/Common/Blurhash/BlurhashImage.vue\";\nimport SizeGuide from \"../components/Site/SizeGuide/SizeGuide.vue\";\n\ncreateApp({ components: {\n    'scl-button': Button,\n    'scl-blurhash': BlurhashImage,\n    'scl-conceptgallery': ConceptGallery,\n    'scl-productselector': ConceptProductSelector,\n    'scl-stars': Stars,\n    'scl-sizeguide': SizeGuide\n}}).mount('main');"],"names":["props","__props","currentSlide","ref","first_image_loaded","containerBottomPadding","onThumbnailClick","index","onImageLoaded","selected","theme","computed","onMounted","product","createApp","Button","BlurhashImage","ConceptGallery","ConceptProductSelector","Stars","SizeGuide"],"mappings":"uiCAiDE,MAAMA,EAAQC,EAOV,IAAAC,EAA2BC,EAAI,CAAC,EAChCC,EAAkCD,EAAI,EAAK,EAC/C,MAAME,EAAgC,YAAa,KAAK,MAAML,EAAM,MAAM,EAAI,KAAK,MAAMA,EAAM,KAAK,EAAK,KAAK,QAAQ,CAAC,CAAC,EAElHM,EAAoBC,GAAU,CAAEL,EAAa,MAAQK,CAAA,EACrDC,EAAiBD,GAAU,CAC5BA,IAAU,IACXH,EAAmB,MAAQ,GAC7B,yiDCJF,MAAMJ,EAAQC,EAMV,IAAAQ,EAAWN,EAAI,IAAI,EAEjB,MAAAO,EAAQC,EAAqD,IAAM,CACvE,OAAOX,EAAM,YAAa,CACxB,IAAK,MACH,MAAO,CAAC,WAAY,gBAAiB,YAAa,0BAA0B,EAC9E,IAAK,SACH,MAAO,CAAC,WAAY,mBAAoB,YAAa,6BAA6B,EACpF,IAAK,OACH,MAAO,CAAC,WAAY,iBAAkB,YAAa,0BAA0B,EAC/E,IAAK,OACH,MAAO,CAAC,WAAY,iBAAkB,YAAa,2BAA2B,EAChF,IAAK,OACH,MAAO,CAAC,WAAY,iBAAkB,YAAa,2BAA2B,EAChF,IAAK,OACH,MAAO,CAAC,WAAY,iBAAkB,YAAa,2BAA2B,EAChF,IAAK,KACH,MAAO,CAAC,WAAY,eAAgB,YAAa,yBAAyB,EAC5E,IAAK,QACH,MAAO,CAAC,WAAY,kBAAmB,YAAa,4BAA4B,EAClF,IAAK,OACH,MAAO,CAAC,WAAY,iBAAkB,YAAa,2BAA2B,EAChF,IAAK,QACL,QACE,MAAO,CAAC,WAAY,kBAAmB,YAAa,4BAA4B,CACpF,CAAA,CACD,EAED,OAAAY,EAAU,IAAM,CAEN,QAAAC,KAAWb,EAAM,SACpB,GAAAa,EAAQ,cAAgB,GAAO,CAChCJ,EAAS,MAAQI,EAAQ,GACzB,KACF,CACF,CACD,syDC7FHC,EAAU,CAAE,WAAY,CACpB,aAAcC,EACd,eAAgBC,EAChB,qBAAsBC,EACtB,sBAAuBC,GACvB,YAAaC,EACb,gBAAiBC,CACrB,EAAE,EAAE,MAAM,MAAM"}