{"version":3,"mappings":"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","names":["Splash","defineAsyncComponent","__vitePreload","VideoBlock","carousel","ref","__props","mainOptions","thumbsOptions","thumbssplideref","mainsplideref","productcarouselref","productcarouselchildelementref","carouselIsExpanded","carouselHasPages","isMobileSize","hasVerticalNavigation","renderedThumbsOnce","_a","cylindoImages","_b","handleCarouselPadding","isMobile","SetMobileRestrictions","CloseCarousel","element","index","RenderThumbs","RemoveMobileRestrictions","ExpandCarousel","e","closeButton","splash","RenderVerticalThumbs","container","RenderHorisontalThumbs","StopPropagation","keydownHandler","checkSplideLength","handleMobileDesktopChange","onBeforeUnmount","onMounted","Cylindo"],"sources":["../../src/components/Files/Templates/Designs/Mobler/src/components/ProductCarousel.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {defineAsyncComponent, ref, onMounted, onBeforeUnmount} from 'vue'\r\nimport {getTranslation} from '@/ts/utilities.ts'\r\nimport {Splide, SplideSlide, SplideTrack} from '@splidejs/vue-splide'\r\nimport { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'\r\nimport '@splidejs/vue-splide/css'\r\nimport { CarouselData } from '@/interfaces/ProductViewInterface.ts'\r\nimport Cylindo from '@/ts/CustomBindings/Cylindo.ts'\r\nconst Splash = defineAsyncComponent(() => import('@/components/SplashElement.vue'))\r\nconst VideoBlock = defineAsyncComponent(() => import(\"@/components/blocks/VideoBlock.vue\"))\r\n\r\ninterface Props {\r\n\tcarouselData: Object\r\n}\r\n\r\nconst props = defineProps<Props>()\r\nconst carousel = ref<CarouselData>(props.carouselData)\r\n\r\n\r\nconst mainOptions = {\r\n\trewind: true,\r\n\ttype      : 'loop',\r\n\tperPage   : 1,\r\n\tperMove   : 1,\r\n\tgap       : '1rem',\r\n\tpagination: false,\r\n\tarrows: true,\r\n\tdrag: false,\r\n\tdragAngleThreshold: 0,\r\n\tclasses: {\r\n\t\tprev  : 'splide__arrow--prev bg-white',\r\n\t\tnext  : 'splide__arrow--next bg-white',\r\n\t}\r\n}\r\n\r\nconst thumbsOptions = {\r\n\ttype        : 'slide',\r\n\trewind      : true,\r\n\tgap         : '',\r\n\tpagination  : false,\r\n\tfixedWidth  : '100%',\r\n\tfixedHeight : '100px',\r\n\tfocus       : 'center',\r\n\tisNavigation: true,\r\n\tupdateOnMove: true,\r\n\tdirection: 'ttb',\r\n\theight   : '100%',\r\n\tclasses: {\r\n\t\tprev  : 'splide__arrow--prev bg-white',\r\n\t\tnext  : 'splide__arrow--next bg-white',\r\n\t}\r\n}\r\n\r\n\r\n//ELEMENTS\r\nlet thumbssplideref = ref(null)\r\nlet mainsplideref = ref(null)\r\nlet productcarouselref = ref(null)\r\nlet productcarouselchildelementref = ref(null)\r\n\r\nif(!window['co3VueProductCarousel']) {\r\n\twindow['co3VueProductCarousel'] = [ carousel ]\r\n} else {\r\n\twindow['co3VueProductCarousel'].push(carousel)\r\n}\r\n\r\nlet carouselIsExpanded = ref(false)\r\nlet carouselHasPages = false\r\nlet isMobileSize = false\r\nlet hasVerticalNavigation = true\r\nlet renderedThumbsOnce = false\r\nlet cylindoFeatures = ref(carousel?.value.cylindo?.defaultFeatures)\r\nlet cylindoImages = ref(carousel?.value.media?.cylindoImages)\r\n\r\nconst isCylindoLoaded = (() => {\r\n\treturn customElements.whenDefined( 'cylindo-viewer' )\r\n})()\r\n\r\nconst handleCarouselPadding = () => {\r\n\tif(isMobile.matches) {\r\n\t\tproductcarouselref.value.style.padding = '1rem 1rem'\r\n\t} else {\r\n\t\tproductcarouselref.value.style.padding = '4% 8%'\r\n\t}\r\n}\r\n\r\nconst SetMobileRestrictions = () => {\r\n\tisMobileSize = true\r\n\tCloseCarousel()\r\n\tArray.from(productcarouselref.value.querySelectorAll('.js-pointer-events-toggle')).forEach((element, index) => {\r\n\t\telement.classList.remove('pointer-events-none')\r\n\t})\r\n\tRenderThumbs()\r\n}\r\n\r\nconst RemoveMobileRestrictions = () => {\r\n\tisMobileSize = false\r\n\tArray.from(productcarouselref.value.querySelectorAll('.js-pointer-events-toggle')).forEach((element, index) => {\r\n\t\telement.classList.add('pointer-events-none')\r\n\t})\r\n\tRenderThumbs()\r\n}\r\n\r\nconst ExpandCarousel = (e) => {\r\n\tif(e) {\r\n\t\te.stopPropagation()\r\n\t}\r\n\tif(!isMobileSize) {\r\n\t\tproductcarouselref.value.style.backgroundColor = 'rgba(0,0,0,0.5)'\r\n\t\tcarouselIsExpanded.value = true\r\n\t\tlet closeButton = productcarouselref.value.querySelector('.js-modal-closer')\r\n\t\tif(closeButton) {\r\n\t\t\tcloseButton.classList.remove('hidden')\r\n\t\t}\r\n\r\n\t\tArray.from(productcarouselref.value.querySelectorAll('.js-pointer-events-toggle')).forEach((element, index) => {\r\n\t\t\telement.classList.remove('pointer-events-none')\r\n\t\t})\r\n\t\tproductcarouselref.value.classList.add('is-expanded')\r\n\t\tproductcarouselref.value.style.zIndex = '40'\r\n\t\tproductcarouselref.value.style.position = 'fixed'\r\n\t\thandleCarouselPadding()\r\n\t\tproductcarouselchildelementref.value.style.padding = '3em 1.5em'\r\n\t\t//mainsplideref.value.go(mainsplideref.value.index);\r\n\r\n\t\tlet splash = productcarouselref.value.querySelector('.product-card-splash')\r\n\t\tif(splash) {\r\n\t\t\tsplash.style.display = 'none'\r\n\t\t}\r\n\t}\r\n\r\n\r\n\tmainsplideref.value.splide.event.emit('resize')\r\n\tthumbssplideref.value.splide.event.emit('resize')\r\n}\r\n\r\nconst CloseCarousel = (e) => {\r\n\tif(e) {\r\n\t\te.stopPropagation()\r\n\t}\r\n\tcarouselIsExpanded.value = false\r\n\tlet closeButton = productcarouselref.value.querySelector('.js-modal-closer')\r\n\tif(closeButton) {\r\n\t\tcloseButton.classList.add('hidden')\r\n\t}\r\n\tArray.from(productcarouselref.value.querySelectorAll('.js-pointer-events-toggle')).forEach((element, index) => {\r\n\t\telement.classList.add('pointer-events-none')\r\n\t})\r\n\tproductcarouselref.value.classList.remove('is-expanded')\r\n\tproductcarouselref.value.style.zIndex = 'inherit'\r\n\tproductcarouselref.value.style.position = 'inherit'\r\n\tproductcarouselref.value.style.padding = '0'\r\n\tproductcarouselchildelementref.value.style.border = '0'\r\n\tproductcarouselchildelementref.value.style.padding = '0'\r\n\r\n\tlet splash = productcarouselref.value.querySelector('.product-card-splash')\r\n\tif(splash) {\r\n\t\tsplash.style.display = ''\r\n\t}\r\n\r\n\tmainsplideref.value.splide.event.emit('resize')\r\n\tthumbssplideref.value.splide.event.emit('resize')\r\n}\r\n\r\nconst RenderVerticalThumbs = () => {\r\n\thasVerticalNavigation = true\r\n\tthumbssplideref.value.splide.options = {\r\n\t\tdirection: 'ttb',\r\n\t\tfixedWidth  : '100%',\r\n\t\tfixedHeight : '20%',\r\n\t}\r\n\tmainsplideref.value.splide.options = {\r\n\t\tarrows: true,\r\n\t}\r\n\tthumbssplideref.value.root.classList.remove('w-full')\r\n\tthumbssplideref.value.root.classList.remove('h-1/6')\r\n\r\n\tthumbssplideref.value.root.classList.add('h-full')\r\n\tthumbssplideref.value.root.classList.add('w-2/12')\r\n\tthumbssplideref.value.root.classList.add('absolute')\r\n\r\n\tmainsplideref.value.root.classList.add('w-9/12')\r\n\tmainsplideref.value.root.classList.add('h-full')\r\n\tmainsplideref.value.root.classList.remove('w-full')\r\n\tmainsplideref.value.root.classList.remove('h-5/6')\r\n\r\n\tlet container = productcarouselchildelementref.value.querySelector('.js-splide-direction-container')\r\n\tcontainer.classList.remove('flex')\r\n\tcontainer.classList.remove('flex-col-reverse')\r\n\r\n\tmainsplideref.value.splide.event.emit('resize')\r\n\tthumbssplideref.value.splide.event.emit('resize')\r\n\trenderedThumbsOnce = true\r\n}\r\n\r\nconst RenderHorisontalThumbs = () => {\r\n\thasVerticalNavigation = false\r\n\tthumbssplideref.value.splide.options = {\r\n\t\tdirection: 'ltr',\r\n\t\tfixedWidth: '25%',\r\n\t\tfixedHeight: '100%',\r\n\t}\r\n\tmainsplideref.value.splide.options = {\r\n\t\tarrows: false,\r\n\t}\r\n\r\n\tthumbssplideref.value.root.classList.add('w-full')\r\n\tthumbssplideref.value.root.classList.add('h-1/6')\r\n\r\n\tthumbssplideref.value.root.classList.remove('h-full')\r\n\tthumbssplideref.value.root.classList.remove('w-2/12')\r\n\tthumbssplideref.value.root.classList.remove('absolute')\r\n\r\n\tmainsplideref.value.root.classList.remove('w-9/12')\r\n\tmainsplideref.value.root.classList.remove('h-full')\r\n\tmainsplideref.value.root.classList.add('w-full')\r\n\tmainsplideref.value.root.classList.add('h-5/6')\r\n\r\n\tlet container = productcarouselchildelementref.value.querySelector('.js-splide-direction-container')\r\n\tcontainer.classList.add('flex')\r\n\tcontainer.classList.add('flex-col-reverse')\r\n\r\n\tmainsplideref.value.splide.event.emit('resize')\r\n\tthumbssplideref.value.splide.event.emit('resize')\r\n\trenderedThumbsOnce = true\r\n}\r\n\r\nconst RenderThumbs = () => {\r\n\tif(carouselHasPages) {\r\n\t\tif (productcarouselref.value.clientWidth > productcarouselref.value.clientHeight) {\r\n\t\t\tif (hasVerticalNavigation === false || renderedThumbsOnce === false) {\r\n\t\t\t\tRenderVerticalThumbs()\r\n\t\t\t}\r\n\t\t} else if (hasVerticalNavigation === true || renderedThumbsOnce === false) {\r\n\t\t\tRenderHorisontalThumbs()\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst StopPropagation = (e) => {\r\n\te.stopPropagation()\r\n}\r\nconst keydownHandler = (e) => {\r\n\tif (e.key === 'Escape') {\r\n\t\tCloseCarousel(e)\r\n\t}\r\n}\r\n\r\nconst checkSplideLength = () => {\r\n\tif ( mainsplideref.value.splide.length <= mainsplideref.value.splide.options.perPage ) {\r\n\t\tcarouselHasPages = false\r\n\t\trenderedThumbsOnce = false\r\n\t\t//HIDE THUMBS IF ONLY 1 PAGE\r\n\t\tthumbssplideref.value.root.classList.remove('block')\r\n\t\tthumbssplideref.value.root.classList.add('hidden')\r\n\r\n\t\t//SET MAIN SPLIDE TO OCCUPY FULL AREA\r\n\t\tmainsplideref.value.root.classList.remove('w-9/12')\r\n\t\tmainsplideref.value.root.classList.remove('h-5/6')\r\n\t\tmainsplideref.value.root.classList.add('h-full')\r\n\t\tmainsplideref.value.root.classList.add('w-full')\r\n\r\n\t\tmainsplideref.value.splide.options = {\r\n\t\t\tarrows: false,\r\n\t\t}\r\n\t\tcarouselHasPages = false\r\n\t} else {\r\n\t\tcarouselHasPages = true\r\n\t\t//SHOW THUMBS\r\n\t\tthumbssplideref.value.root.classList.add('block', 'mt-[48px]', 'md:mt-0')\r\n\t\tthumbssplideref.value.root.classList.remove('hidden')\r\n\r\n\t\tRenderThumbs()\r\n\r\n\t\tmainsplideref.value.splide.options = {\r\n\t\t\tarrows: true,\r\n\t\t}\r\n\t\tcarouselHasPages = true\r\n\t}\r\n}\r\n\r\n// Create a condition that targets viewports at least 768px wide\r\nconst isMobile = window.matchMedia('(max-width: 1023px)')\r\n\r\nconst handleMobileDesktopChange = (e) => {\r\n\t// Check if the media query is true\r\n\tif(carouselIsExpanded.value) {\r\n\t\thandleCarouselPadding()\r\n\t}\r\n\tif (e.matches) {\r\n\t\tSetMobileRestrictions()\r\n\t} else {\r\n\t\tRemoveMobileRestrictions()\r\n\t}\r\n}\r\n\r\n// Register event listener\r\nisMobile.addEventListener('change', handleMobileDesktopChange)\r\nwindow.addEventListener('resize', (e) => {\r\n\tRenderThumbs()\r\n})\r\n\r\nonBeforeUnmount(() => {\r\n\twindow.removeEventListener('keydown', keydownHandler)\r\n})\r\n\r\n\r\nonMounted(async () => {\r\n\twindow.addEventListener('keydown', keydownHandler)\r\n\r\n\tproductcarouselref.value.style.backgroundColor = 'rgba(0,0,0,0.5)'\r\n\r\n\tArray.from(productcarouselref.value.querySelectorAll('.splide__track')).forEach((element, index) => {\r\n\t\telement.classList.add('h-full')\r\n\t})\r\n\r\n\tif(mainsplideref.value) {\r\n\t\tif ( thumbssplideref.value.splide ) {\r\n\t\t\tmainsplideref.value.sync(thumbssplideref.value.splide)\r\n\t\t}\r\n\r\n\t\tmainsplideref.value.splide.on('refresh', () => {\r\n\t\t\tcheckSplideLength()\r\n\t\t\thandleMobileDesktopChange(isMobile)\r\n\t\t\tmainsplideref.value.splide.event.emit('resize')\r\n\t\t\tthumbssplideref.value.splide.event.emit('resize')\r\n\t\t})\r\n\r\n\t\t// Initial check\r\n\t\tcheckSplideLength()\r\n\t\thandleMobileDesktopChange(isMobile)\r\n\t}\r\n\r\n\tObject.assign(Cylindo.selectedCylindoFeatures, Cylindo.convertCylindoFeatureArrayToObject(carousel.value?.cylindo?.defaultFeatures.split('|')))\r\n\tCylindo.setFeatures()\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n\t<div class=\"product-splide-carousel-carousel\">\r\n\t\t<div class=\"flex relative w-full h-full top-0 bottom-0 left-0 right-0\"\r\n\t\t\t ref=\"productcarouselref\"\r\n\t\t\t @click=\"CloseCarousel\">\r\n\t\t\t<div class=\"w-full h-full relative bg-white\"\r\n\t\t\t\t @click=\"StopPropagation\"\r\n\t\t\t\t ref=\"productcarouselchildelementref\">\r\n\r\n\t\t\t\t<div\r\n\t\t\t\t\t@click=\"CloseCarousel\" style=\"z-index:50;margin:0.5em 1em;\" class=\"absolute right-0 top-0 hidden p-1.5 cursor-pointer js-modal-closer\">\r\n\t\t\t\t\t<span class=\"mr-2\">{{ getTranslation('Close') }}</span>\r\n\t\t\t\t\t<font-awesome-icon :icon=\"['fal', 'close']\" />\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"js-splide-direction-container w-full h-full relative\">\r\n\t\t\t\t\t<Splide class=\"splide block absolute top-0 bottom-0 mobile-thumb-height\"\r\n\t\t\t\t\t\t\t:options=\"thumbsOptions\"\r\n\t\t\t\t\t\t\t:has-track=\"false\"\r\n\t\t\t\t\t\t\tref=\"thumbssplideref\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<SplideTrack>\r\n\t\t\t\t\t\t\t<SplideSlide v-if=\"carousel?.cylindo?.isUsingCylindoAssets\">\r\n\t\t\t\t\t\t\t\t<div class=\"w-full h-full flex items-center\">\r\n\t\t\t\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t\t\t\tclass=\"w-full h-full object-cover js-cylindo-carousel-image\"\r\n\t\t\t\t\t\t\t\t\t\twidth=\"320\" height=\"180\"\r\n\t\t\t\t\t\t\t\t\t\talt=\"\"\r\n\t\t\t\t\t\t\t\t\t\t:src=\"`${carousel?.media.productImage}&size=(320,180)`\"\r\n\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t\t\t<SplideSlide v-for=\"image in carousel?.media?.images\">\r\n\t\t\t\t\t\t\t\t<div class=\"w-full h-full flex items-center\">\r\n\t\t\t\t\t\t\t\t\t<img class=\"w-full h-full object-cover\" width=\"320\" height=\"180\" :src=\"'/Admin/Public/GetImage.ashx?Image=' + image.url + '&Width=320&height=180&Format=webP&Quality=90&Crop=5&resolution=50'\"\r\n\t\t\t\t\t\t\t\t\t\t alt=\"\">\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t\t\t<SplideSlide v-for=\"image in carousel?.media?.moodImages\">\r\n\t\t\t\t\t\t\t\t<div class=\"w-full h-full flex items-center\">\r\n\t\t\t\t\t\t\t\t\t<img class=\"w-full h-full object-cover\" width=\"320\" height=\"180\" :src=\"'/Admin/Public/GetImage.ashx?Image=' + image.url + '&Width=320&height=180&Format=webP&Quality=90&Crop=5&resolution=50'\"\r\n\t\t\t\t\t\t\t\t\t\t alt=\"\" loading=\"lazy\">\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t\t\t<SplideSlide v-for=\"video in carousel?.media?.videos\">\r\n\t\t\t\t\t\t\t\t<div class=\"flex items-center justify-center h-full\">\r\n\t\t\t\t\t\t\t\t\t<font-awesome-icon\r\n\t\t\t\t\t\t\t\t\t\t:icon=\"['fal', 'play-circle']\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"text-4xl text-white relative z-30\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t<span class=\"bg-black/25 absolute w-full h-full z-20\"></span>\r\n\t\t\t\t\t\t\t\t\t<img class=\"object-cover\" width=\"320\" height=\"180\"\r\n\t\t\t\t\t\t\t\t\t\t :src=\"`https://i3.ytimg.com/vi/${video.videoId}/hqdefault.jpg`\"\r\n\t\t\t\t\t\t\t\t\t\t alt=\"\"\r\n\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"/>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t\t\t<SplideSlide v-if=\"carousel?.cylindo?.isUsingCylindoAssets\" v-for=\"image in cylindoImages\">\r\n\t\t\t\t\t\t\t\t<div class=\"w-full h-full flex items-center\">\r\n\t\t\t\t\t\t\t\t\t<img class=\"w-full h-full object-cover js-cylindo-carousel-image\" width=\"320\" height=\"180\" :src=\"image.url\"\r\n\t\t\t\t\t\t\t\t\t\t alt=\"\"\r\n\t\t\t\t\t\t\t\t\tloading=\"lazy\">\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t\t\t<SplideSlide v-if=\"carousel?.cylindo?.isUsingCylindoAssets && carousel?.cylindo?.dimensionShotCode\">\r\n\t\t\t\t\t\t\t\t<div class=\"w-full h-full flex items-center\">\r\n\t\t\t\t\t\t\t\t\t<img class=\"w-full h-full object-cover js-cylindo-carousel-image\" width=\"320\" height=\"180\"\r\n\t\t\t\t\t\t\t\t\t\t :src=\"Cylindo.getDimensionShot(carousel.cylindo.feature, carousel.cylindo.id, carousel.cylindo.dimensionShotCode, 320)\"\r\n\t\t\t\t\t\t\t\t\t\t alt=\"\"\r\n\t\t\t\t\t\t\t\t\tloading=\"lazy\">\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t\t</SplideTrack>\r\n\t\t\t\t\t\t<div class=\"splide__arrows\">\r\n\t\t\t\t\t\t\t<button class=\"splide__arrow splide__arrow--prev bg-white\"><font-awesome-icon :icon=\"['fal', 'chevron-right']\" /></button>\r\n\t\t\t\t\t\t\t<button class=\"splide__arrow splide__arrow--next bg-white\"><font-awesome-icon :icon=\"['fal', 'chevron-right']\" /></button>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</Splide>\r\n\r\n\t\t\t\t\t<Splide class=\"splide ml-auto\"\r\n\t\t\t\t\t\t\t:options=\"mainOptions\"\r\n\t\t\t\t\t\t\tref=\"mainsplideref\"\r\n\t\t\t\t\t\t\t:has-track=\"false\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<SplideTrack>\r\n\t\t\t\t\t\t\t<SplideSlide v-if=\"carousel?.cylindo?.isUsingCylindoAssets\"\r\n\t\t\t\t\t\t\t\t\t\t class=\"js-cylindo-main-container-target-container\" v-on:click=\"ExpandCarousel\">\r\n\t\t\t\t\t\t\t\t<div class=\"w-full h-full flex pointer-events-none js-pointer-events-toggle relative\">\r\n\t\t\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\t\t\tclass=\"relative w-full h-full\"\r\n\t\t\t\t\t\t\t\t\t\tv-html=\"Cylindo.renderCylindoElement(carousel.cylindo, 'cylindo-360', {id: 'cylindo-main-container',controls: 'zoom'})\"></span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t\t\t<SplideSlide v-for=\"image in carousel?.media?.images\"\r\n\t\t\t\t\t\t\t\t\t\t v-on:click=\"ExpandCarousel\">\r\n\t\t\t\t\t\t\t\t<div class=\"w-full h-full flex items-center pointer-events-none js-pointer-events-toggle\">\r\n\t\t\t\t\t\t\t\t\t<img class=\"w-full h-full object-contain\" width=\"800\" height=\"600\" :src=\"'/Admin/Public/GetImage.ashx?Image=' + image.url + '&Width=800&height=600&Format=webP&Quality=90&Crop=5&resolution=50'\"\r\n\t\t\t\t\t\t\t\t\t\t alt=\"\"\r\n\t\t\t\t\t\t\t\t\tloading=\"lazy\">\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t\t\t<SplideSlide v-for=\"image in carousel?.media?.moodImages\"\r\n\t\t\t\t\t\t\t\t\t\t v-on:click=\"ExpandCarousel\">\r\n\t\t\t\t\t\t\t\t<div class=\"w-full h-full flex items-center pointer-events-none js-pointer-events-toggle\">\r\n\t\t\t\t\t\t\t\t\t<img class=\"w-full h-full object-contain\" width=\"800\" height=\"600\" :src=\"'/Admin/Public/GetImage.ashx?Image=' + image.url.image + '&Width=800&height=600&Format=webP&Quality=90&Crop=5&resolution=50'\"\r\n\t\t\t\t\t\t\t\t\t\t alt=\"\"\r\n\t\t\t\t\t\t\t\t\tloading=\"lazy\">\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t\t\t<SplideSlide\r\n\t\t\t\t\t\t\t\t\tv-for=\"(video, index) in carousel?.media?.videos\"\r\n\t\t\t\t\t\t\t\t\t:key=\"index\"\r\n\t\t\t\t\t\t\t\t\t @click=\"ExpandCarousel\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<VideoBlock\r\n\t\t\t\t\t\t\t\t\t:ref=\"'videoElement' + index\"\r\n\t\t\t\t\t\t\t\t\t:video=\"video.videoId\"\r\n\t\t\t\t\t\t\t\t\tcontext=\"carousel\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t\t\t<SplideSlide v-if=\"carousel?.cylindo?.isUsingCylindoAssets\" v-for=\"image in cylindoImages\"\r\n\t\t\t\t\t\t\t\t\t\t v-on:click=\"ExpandCarousel\" data-type=\"cylindo\">\r\n\t\t\t\t\t\t\t\t<div class=\"w-full h-full flex items-center pointer-events-none js-pointer-events-toggle\">\r\n\t\t\t\t\t\t\t\t\t<img class=\"w-full h-full object-contain js-cylindo-carousel-image\" width=\"800\" height=\"600\" :src=\"image.url\"\r\n\t\t\t\t\t\t\t\t\t\t alt=\"\">\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t\t\t<SplideSlide v-if=\"carousel?.cylindo?.isUsingCylindoAssets && carousel?.cylindo?.dimensionShotCode\"\r\n\t\t\t\t\t\t\t\t\t\t v-on:click=\"ExpandCarousel\">\r\n\t\t\t\t\t\t\t\t<div class=\"w-full h-full flex pointer-events-none js-pointer-events-toggle\">\r\n\t\t\t\t\t\t\t\t\t<img class=\"w-full h-full object-contain js-cylindo-carousel-image\" width=\"800\" height=\"600\"\r\n\t\t\t\t\t\t\t\t\t\t :src=\"Cylindo.getDimensionShot(carousel.cylindo.feature, carousel.cylindo.id, carousel.cylindo.dimensionShotCode, 1100)\"\r\n\t\t\t\t\t\t\t\t\t\t alt=\"\">\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</SplideSlide>\r\n\t\t\t\t\t\t</SplideTrack>\r\n\t\t\t\t\t\t<div class=\"splide__arrows\">\r\n\t\t\t\t\t\t\t<button class=\"splide__arrow splide__arrow--prev bg-white\"><font-awesome-icon :icon=\"['fal', 'chevron-right']\" /></button>\r\n\t\t\t\t\t\t\t<button class=\"splide__arrow splide__arrow--next bg-white\"><font-awesome-icon :icon=\"['fal', 'chevron-right']\" /></button>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</Splide>\r\n\r\n\t\t\t\t\t<Splash\r\n\t\t\t\t\t\tv-if=\"carousel?.productSplash?.visible\"\r\n\t\t\t\t\t\t:type=\"carousel?.productSplash?.typeId\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"hidden xl:flex justify-end gap-4 pt-5\">\r\n\t\t\t<!--\t\t\t\t\t\t\t<button class=\"hover:tw-underline\" v-if=\"carouselProduct.videos.length > 0\" @click=\"OpenVideo\">-->\r\n\t\t\t<!--\t\t\t\t\t\t\t\t<font-awesome-icon icon=\"play\"/>-->\r\n\t\t\t<!--\t\t\t\t\t\t\t\t<span class=\"tw-ml-2\">Video</span>-->\r\n\t\t\t<!--\t\t\t\t\t\t\t</button>-->\r\n\t\t\t<button v-if=\"!carouselIsExpanded\" class=\"hover:underline z-20\" @click=\"ExpandCarousel\">\r\n\t\t\t\t<font-awesome-icon :icon=\"['fal', 'magnifying-glass']\" />\r\n\t\t\t\t<span class=\"ml-2\">Zoom</span>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style>\r\n.product-splide-carousel-carousel {\r\n\t@apply h-[30rem] md:max-h-dvh lg:max-h-dvh;\r\n}\r\n.product-splide-carousel-carousel cylindo-viewer,\r\n.product-splide-carousel-carousel img {\r\n\t@apply absolute h-full top-0;\r\n}\r\n\r\n.splide__track--nav > .splide__list {\r\n\t@apply flex md:flex-col gap-4;\r\n}\r\n.splide__track--nav > .splide__list > .splide__slide {\r\n\t@apply border border-grey rounded-sm overflow-hidden;\r\n}\r\n\r\n.splide__track--nav > .splide__list > .splide__slide.is-active {\r\n\t@apply border border-black;\r\n}\r\n\r\n</style>\r\n"],"file":"assets/ProductCarousel-0797928a.js"}