{"version":3,"file":"imageGallery-BH0giS18.js","sources":["../../../../Coloplast.UI/src/shared/components/product/gallery/galleryImagesModal.vue","../../../../Coloplast.UI/src/shared/components/product/gallery/galleryImage.vue","../../../../Coloplast.UI/src/shared/components/product/gallery/galleryVideo.vue","../../../../Coloplast.UI/src/shared/components/product/imageGallery.vue"],"sourcesContent":["<template>\r\n\t<div class=\"c-modal__mask c-modal__mask--grey c-gallery-images-modal\" @click.self=\"hideModal\">\r\n\t\t<div class=\"c-modal__wrapper c-gallery-images-modal__wrapper\" :tabindex=\"1\">\r\n\t\t\t<a class=\"c-modal__close c-modal__close--grey\" @click=\"hideModal\" @keydown.enter.prevent=\"hideModal\"\r\n\t\t\t   :tabindex=\"1\"></a>\r\n\r\n\t\t\t<div class=\"c-gallery-images-modal__container\">\r\n\t\t\t\t<swiper\r\n\t\t\t\t\t:navigation=\"true\"\r\n\t\t\t\t\t:loop=\"true\"\r\n\t\t\t\t\t:modules=\"swiperModules\"\r\n\t\t\t\t\t:initialSlide=\"getGalleryImagesModalActiveIndex\"\r\n\t\t\t\t\t:speed=\"500\"\r\n\t\t\t\t\t:keyboard=\"{\r\n    \t\t\t\t\tenabled: true,\r\n  \t\t\t\t\t}\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<swiper-slide v-for=\"(slide, index) in this.getGalleryImagesModalContent\" :key=\"index\">\r\n\t\t\t\t\t\t<div class=\"c-gallery-images-modal__slide\">\r\n\t\t\t\t\t\t\t<img :src=\"slide.MediaUrl\" alt=\"\" v-if=\"slide.MediaType !== 'VideoExternal'\" class=\"c-gallery-images-modal__slide__content c-carousel__item\"/>\r\n\t\t\t\t\t\t\t<iframe v-else\r\n\t\t\t\t\t\t\t\t\t:id=\"'galleryVideoPlayer' + index\"\r\n\t\t\t\t\t\t\t\t\t:src=\"slide.MediaUrl\"\r\n\t\t\t\t\t\t\t\t\t:title=\"slide.MediaUrl\"\r\n\t\t\t\t\t\t\t\t\tclass=\"c-gallery-images-modal__slide__content\"\r\n\t\t\t\t\t\t\t\t\tallow=\"autoplay; fullscreen\"\r\n\t\t\t\t\t\t\t\t\tautoplay>\r\n\t\t\t\t\t\t\t</iframe>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</swiper-slide>\r\n\t\t\t\t</swiper>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<script>\r\nimport {mapGetters, mapMutations} from \"vuex\";\r\nimport { Navigation, Keyboard } from \"swiper\";\r\nimport { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue';\r\n\r\nimport 'swiper/scss';\r\nimport \"swiper/scss/navigation\";\r\n\r\nexport default {\r\n\tname: 'gallery-images-modal',\r\n\tcomponents: {\r\n\t\tSwiper,\r\n\t\tSwiperSlide,\r\n\t},\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tswiperModules: [Navigation, Keyboard],\r\n\t\t}\r\n\t},\r\n\tcomputed: {\r\n\t\t...mapGetters([\r\n\t\t\t'getGalleryImagesModalVisible',\r\n\t\t\t'getGalleryImagesModalContent',\r\n\t\t\t'getGalleryImagesModalActiveIndex'\r\n\t\t]),\r\n\r\n\t\tisMobile() {\r\n\t\t\treturn /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\r\n\t\t}\r\n\t},\r\n\tmethods: {\r\n\r\n\t\t...mapMutations([\r\n\t\t\t'setGalleryImagesModalVisible'\r\n\t\t]),\r\n\r\n\t\thideModal() {\r\n\t\t\tconst updateGalleryImageModalVisible = !this.getGalleryImagesModalVisible;\r\n\r\n\t\t\tthis.setGalleryImagesModalVisible(updateGalleryImageModalVisible);\r\n\t\t},\r\n\r\n\t\thandlerZoomClick() {\r\n\t\t\tdocument.querySelectorAll('.c-carousel__item').forEach(item => {\r\n\t\t\t\titem.onclick = function () {\r\n\t\t\t\t\titem.classList.toggle('c-carousel__item--zoom-in');\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t},\r\n\t},\r\n\r\n\tmounted() {\r\n\t\tif (this.isMobile) {\r\n\t\t\tthis.handlerZoomClick();\r\n\t\t}\r\n\r\n\t},\r\n}\r\n</script>\r\n","<template>\r\n    <div class=\"c-image-gallery__item\" :key=\"image.MediaUrl\" :class=\"{ '-full-width' : fullWidth }\">\r\n        <div class=\"c-image-gallery__fig-container\" @click=\"showModal\" @keydown.enter=\"showModal\">\r\n            <figure class=\"c-image-gallery__image-figure\">\r\n                <img class=\"c-image-gallery__image\" :src=\"image.MediaUrl\" loading=\"lazy\" :alt=\"altText\" width=\"300\" height=\"300\" />\r\n            </figure>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapGetters, mapMutations } from \"vuex\";\r\n\r\nexport default {\r\n    name: 'gallery-image',\r\n    props: {\r\n        image: {\r\n            type: Object,\r\n            required: true,\r\n        },\r\n        productName: {\r\n            type: String,\r\n            default: '',\r\n        },\r\n        index: {\r\n            type: Number,\r\n        },\r\n        fullWidth: {\r\n            type: Boolean,\r\n            required: false,\r\n            default: false,\r\n        },\r\n    },\r\n    computed: {\r\n    \t...mapGetters(\r\n    \t\t['getGalleryImagesModalVisible']\r\n\t\t),\r\n        altText() {\r\n            return this.index === 0 ? this.productName : null;\r\n        },\r\n    },\r\n\tmethods: {\r\n    \t...mapMutations(\r\n    \t\t['setGalleryImagesModalVisible', 'setGalleryImagesModalActiveIndex']\r\n\t\t),\r\n\t\tshowModal() {\r\n    \t\tconst updateGalleryImageModalVisible = !this.getGalleryImagesModalVisible;\r\n    \t\tthis.setGalleryImagesModalActiveIndex(this.index);\r\n    \t\tthis.setGalleryImagesModalVisible(updateGalleryImageModalVisible);\r\n\t\t}\r\n\t}\r\n}\r\n</script>\r\n","<template>\r\n\t<div class=\"c-image-gallery__item\" :key=\"video.MediaUrl\" :class=\"{ '-full-width' : fullWidth }\" v-if=\"video.MediaUrl\">\r\n\t\t<div class=\"c-image-gallery__fig-container\" @click=\"showModal\" @keydown.enter=\"showModal\">\r\n\t\t\t<figure class=\"c-image-gallery__image-figure\">\r\n\t\t\t\t<img class=\"c-image-gallery__image\" :src=\"video.PlaceHolderImageUrl\" alt=\"\" height=\"300\" width=\"300\"/>\r\n\t\t\t</figure>\r\n\t\t\t<button class=\"c-image-gallery__play-btn\">\r\n\t\t\t\t<span class=\"c-image-gallery__play-btn-label\">\r\n\t\t\t\t\tPlay\r\n\t\t\t\t</span>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n<script>\r\nimport { mapGetters, mapMutations } from \"vuex\";\r\nimport { trackedgNoTrackedVideoUrl } from \"shared/services/urlTypeService\";\r\n\r\nexport default {\r\n\tname: 'gallery-video',\r\n\tprops: {\r\n\t\tvideo: {\r\n\t\t\ttype: Object,\r\n\t\t\trequired: true,\r\n\t\t},\r\n\t\tfullWidth: {\r\n\t\t\ttype: Boolean,\r\n\t\t\trequired: false,\r\n\t\t\tdefault: false,\r\n\t\t},\r\n\t\tindex: {\r\n\t\t\ttype: Number,\r\n\t\t}\r\n\t},\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tisPlaying: false\r\n\t\t}\r\n\t},\r\n\tcomputed: {\r\n\t\t...mapGetters({\r\n\t\t\tgalleryImageModalVisible: 'getGalleryImagesModalVisible',\r\n\t\t\tcookieBotMarketingPermissions: 'getCookieBotMarketingPermissions',\r\n\t\t}),\r\n\t\tisVimeo() {\r\n\t\t\treturn this.video.MediaUrl.indexOf('vimeo.com') !== -1;\r\n\t\t},\r\n\t},\r\n\twatch: {\r\n\t\tcookieBotMarketingPermissions(newVal) {\r\n\t\t\t//video link depends on cookie bot marketing permissions (if permissions is changed by pressing renew button in footer)\r\n\t\t\tthis.video.MediaUrl = trackedgNoTrackedVideoUrl(this.isVimeo, newVal, this.video.MediaUrl);\r\n\t\t}\r\n\t},\r\n\tmethods: {\r\n\t\t...mapMutations(\r\n\t\t\t['setGalleryImagesModalVisible', 'setGalleryImagesModalActiveIndex']\r\n\t\t),\r\n\t\tshowModal() {\r\n\t\t\tconst updateGalleryImageModalVisible = !this.getGalleryImagesModalVisible;\r\n\r\n\t\t\tthis.setGalleryImagesModalActiveIndex(this.index);\r\n\r\n\t\t\tthis.setGalleryImagesModalVisible(updateGalleryImageModalVisible);\r\n\r\n\t\t\tthis.playVideo();\r\n\t\t},\r\n\t\tplayVideo() {\r\n\t\t\tthis.isPlaying = !this.isPlaying;\r\n\r\n\t\t\tthis.$nextTick(() => {\r\n\t\t\t\tconst videoPlayer = document.getElementById('galleryVideoPlayer' + this.index);\r\n\r\n\t\t\t\tif (!this.isVimeo) {\r\n\t\t\t\t\tlet player = new YT.Player(videoPlayer, {\r\n\t\t\t\t\t\tevents: {\r\n\t\t\t\t\t\t\t'onReady': (event) => {\r\n\t\t\t\t\t\t\t\tevent.target.playVideo();\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tlet playerVimeo = new Vimeo.Player(videoPlayer);\r\n\t\t\t\t\tplayerVimeo.on('loaded', () => {\r\n\t\t\t\t\t\tplayerVimeo.play();\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\t},\r\n\tmounted() {\r\n\t\t//video link depends on cookie bot marketing permissions\r\n\t\tthis.video.MediaUrl = trackedgNoTrackedVideoUrl(this.isVimeo, this.cookieBotMarketingPermissions, this.video.MediaUrl);\r\n\t\t// add youtube api support\r\n\t\tconst tag = document.createElement('script');\r\n\t\ttag.id = this.isVimeo ? 'iframe-demo-vimeo' : 'iframe-demo';\r\n\t\ttag.src = this.isVimeo ? 'https://player.vimeo.com/api/player.js' : 'https://www.youtube.com/iframe_api';\r\n\t\tconst firstScriptTag = document.getElementsByTagName('script')[0];\r\n\t\tfirstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n\t}\r\n}\r\n</script>\r\n","<template>\r\n\t<div class=\"c-image-gallery-container\" :class=\"{ 'c-image-gallery-container--single' : !multipleImages }\">\r\n\t\t<div class=\"c-image-gallery\" ref=\"scrollContainer\">\r\n\t\t\t<template v-if=\"galleryItems.length\">\r\n\t\t\t\t<slot v-for=\"(mediaItem, index) in mediaItemsToShow\">\r\n\t\t\t\t\t<gallery-image\r\n\t\t\t\t\t\tv-if=\"mediaItem.MediaType === 'Image'\"\r\n\t\t\t\t\t\t:image=\"mediaItem\"\r\n\t\t\t\t\t\t:index=\"index\"\r\n\t\t\t\t\t\t:product-name=\"productName\"\r\n\t\t\t\t\t\t:full-width=\"index === 0 && renderFirstImageFullWidth\" />\r\n\t\t\t\t\t<gallery-video\r\n\t\t\t\t\t\tv-else\r\n\t\t\t\t\t\t:video=\"mediaItem\"\r\n\t\t\t\t\t\t:index=\"index\"\r\n\t\t\t\t\t\t:full-width=\"index === 0 && renderFirstImageFullWidth\" />\r\n\t\t\t\t</slot>\r\n\t\t\t</template>\r\n\t\t\t<gallery-manufacturer-image\r\n\t\t\t\tv-if=\"!mediaItemsToShow.length && manufactureInfo?.BaseViewModel.DisplayManufactureIcon\"\r\n\t\t\t\t:manufacturer-data=\"manufactureInfo?.BaseViewModel\"\r\n\t\t\t />\r\n\t\t\t<div v-if=\"brandTileUrl\" class=\"c-image-gallery__item\" :class=\"{ '-full-width' : renderBrandTileFullWidth }\">\r\n\t\t\t\t<a class=\"c-image-gallery__brand-tile\" :href=\"brandTileUrl\" :title=\"brandTileBrandName\" data-gtm-event=\"brand-tile-click\">\r\n\t\t\t\t\t<div class=\"c-image-gallery__brand-tile-pre\">{{ brandTileTextPre }}</div>\r\n\t\t\t\t\t<div class=\"c-image-gallery__brand-tile-name\">{{ brandTileBrandName }}</div>\r\n\t\t\t\t\t<div class=\"c-image-gallery__brand-tile-post\">{{ brandTileTextPost }}</div>\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<transition name=\"fadein\" :duration=\"200\">\r\n\t\t\t<gallery-images-modal v-if=\"this.galleryImageModalVisible\" />\r\n\t\t</transition>\r\n\t</div>\r\n</template>\r\n\r\n<script>\r\nimport { mapGetters, mapMutations } from 'vuex';\r\nimport GalleryImagesModal from \"shared/components/product/gallery/galleryImagesModal.vue\";\r\nimport GalleryImage from 'shared/components/product/gallery/galleryImage.vue';\r\nimport GalleryVideo from 'shared/components/product/gallery/galleryVideo.vue';\r\nimport GalleryManufacturerImage from \"shared/components/product/gallery/galleryManufacturerImage.vue\";\r\n\r\nexport default {\r\n\tcomponents: {\r\n\t\tGalleryImagesModal,\r\n\t\tGalleryImage,\r\n\t\tGalleryVideo,\r\n\t\tGalleryManufacturerImage,\r\n\t},\r\n\tprops: [\r\n\t\t'mediaSources',\r\n\t\t'freeSampleLabel',\r\n\t\t'canSample',\r\n\t\t'labels',\r\n\t\t'brandTileUrl',\r\n\t\t'brandTileBrandName',\r\n\t\t'brandTileTextPre',\r\n\t\t'brandTileTextPost',\r\n\t\t'productName',\r\n\t\t'manufactureInfo'\r\n\t],\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tindex: 0,\r\n\t\t};\r\n\t},\r\n\tmethods: {\r\n\t\t...mapMutations([\r\n\t\t\t'setGalleryItems',\r\n\t\t\t'setDisplayManufacturerLogo'\r\n\t\t]),\r\n\t\tselectImage(i) {\r\n\t\t\tthis.index = i;\r\n\t\t},\r\n\t\t...mapMutations([\r\n\t\t\t'setGalleryImagesModalContent'\r\n\t\t]),\r\n\t\tupdateGalleryItems() {\r\n\t\t\tthis.setGalleryImagesModalContent(this.mediaItemsToShow);\r\n\t\t\tthis.setGalleryItems(this.mediaItemsToShow);\r\n\t\t},\r\n\t},\r\n\tcomputed: {\r\n\t\t...mapGetters({\r\n\t\t\tgalleryImageModalVisible: 'getGalleryImagesModalVisible',\r\n\t\t\tgalleryItems: 'getGalleryItems',\r\n\t\t\tselectedVariant: 'getSelectedVariant'\r\n\t\t}),\r\n\t\tmultipleImages() {\r\n\t\t\treturn this.mediaItemsToShow && this.mediaItemsToShow.length > 1;\r\n\t\t},\r\n\t\tmediaItems() {\r\n\t\t\tif (Array.isArray(this.mediaSources?.BaseViewModel)) {\r\n\t\t\t\treturn this.mediaSources.BaseViewModel || [];\r\n\t\t\t}\r\n\t\t\treturn [];\r\n\t\t},\r\n\t\tselectedImage() {\r\n\t\t\tif (this.mediaItemsToShow && this.mediaItemsToShow.length > this.index) {\r\n\t\t\t\treturn this.mediaItemsToShow[this.index];\r\n\t\t\t}\r\n\t\t\treturn null;\r\n\t\t},\r\n\t\trenderFirstImageFullWidth() {\r\n\t\t\treturn this.mediaItemsToShow && this.mediaItemsToShow.length === 1;\r\n\t\t},\r\n\t\trenderBrandTileFullWidth() {\r\n\t\t\tif (this.mediaItemsToShow) {\r\n\t\t\t\treturn this.mediaItemsToShow.length <= 2 || this.mediaItemsToShow.length % 2 === 0;\r\n\t\t\t}\r\n\t\t\treturn true;\r\n\t\t},\r\n\t\tmediaItemsToShow() {\r\n\t\t\tconst productItems = this.mediaItems?.filter(source => source.EntryContentType === 1);\r\n\t\t\tconst coloredItems = this.mediaItems?.filter(source => source.EntryContentCode === this.selectedVariant?.Item.Code) || [];\r\n\r\n\t\t\treturn coloredItems.length ? coloredItems : productItems;\r\n\t\t},\r\n\t},\r\n\twatch: {\r\n\t\tmediaItemsToShow() {\r\n\t\t\tthis.updateGalleryItems();\r\n\t\t},\r\n\t},\r\n\tmounted() {\r\n\t\tthis.updateGalleryItems();\r\n\t\tthis.setDisplayManufacturerLogo(!this.mediaItemsToShow.length && this.manufactureInfo?.BaseViewModel.DisplayManufactureIcon);\r\n\t}\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@use 'sass:math';\r\n@import \"multisite/styles/settings/settings\";\r\n@import \"multisite/styles/tools/tools\";\r\n\r\n.c-image-gallery-container {\r\n\t&--single {\r\n\t\t.c-image-gallery {\r\n\t\t\tgrid-template-columns: 1fr;\r\n\t\t\tmargin: 0;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.c-image-gallery {\r\n\t$section-gutter: 24px;\r\n\t$s-play: 60px;\r\n\t$s-close: 36px;\r\n\t$s-iframe-width: 960px;\r\n\tdisplay: flex;\r\n\tflex-wrap: nowrap;\r\n\tgap: 12px;\r\n\tmargin-inline-start: -24px;\r\n\tmargin-inline-end: -24px;\r\n\tmax-width: 100vw;\r\n\t-webkit-overflow-scrolling: touch;\r\n\toverflow-x: auto;\r\n\tpadding-inline: 24px;\r\n\tscroll-snap-type: x mandatory;\r\n\tscroll-padding-inline: 24px;\r\n\r\n\t@media (min-width: ds-breakpoint(\"md\")) {\r\n\t\tdisplay: grid;\r\n\t\tgap: 24px;\r\n\t\tgrid-template-columns: 1fr 1fr;\r\n\t\tmargin: 0;\r\n\t\tpadding-inline: 0;\r\n\t\toverflow: hidden;\r\n\t}\r\n\r\n\t&__item {\r\n\t\tflex: 1 0 100%;\r\n\t\tflex-basis: 80%;\r\n\t\tmax-width: 216px;\r\n\t\tscroll-snap-align: start;\r\n\t\twidth: 100%;\r\n\r\n\t\t@media (min-width: ds-breakpoint(\"md\")) {\r\n\t\t\tmax-width: 100%;\r\n\t\t}\r\n\r\n\t\t&-full-width {\r\n\t\t\tgrid-column: span 2;\r\n\t\t}\r\n\t}\r\n\r\n\t&__image-figure {\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\t\tmargin: 0;\r\n\t\tmax-width: 100%;\r\n\t\tflex-direction: column;\r\n\t\tposition: relative;\r\n\t\tborder-radius: 8px;\r\n\t\toverflow: hidden;\r\n\t\tborder: solid 1px ds-color(\"border\", \"muted\");\r\n\r\n\t\t&:hover {\r\n\t\t\tborder-color: ds-color(\"border\", \"default\");\r\n\r\n\t\t\timg {\r\n\t\t\t\ttransform: scale(1.05);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&__can-sample {\r\n\t\tposition: absolute;\r\n\t\ttop: 0;\r\n\t\tright: 0;\r\n\t\tdisplay: block;\r\n\t\tbackground: ds-color(\"bg\", \"brand\");\r\n\t\tcolor: ds-color(\"fg\", \"on-color\");\r\n\t\tfont-size: t-rem(14px);\r\n\t\tfont-family: ds-font-family(\"heading\");\r\n\t\tpadding: ds-space(3) t-rem(7px);\r\n\t}\r\n\r\n\t&__image {\r\n\t\theight: 100%;\r\n\t\twidth: 100%;\r\n\t\tobject-fit: fill;\r\n\t\tz-index: -1;\r\n\t\tbackground: ds-color(\"bg\", \"neutral-subtle\");\r\n\t\ttransition: 0.2s;\r\n\t}\r\n\r\n\t&__thumbnails {\r\n\t\tdisplay: flex;\r\n\t\tflex-wrap: wrap;\r\n\t\tflex: 1 0 auto;\r\n\t\tjustify-content: center;\r\n\r\n\t\t&.-grid {\r\n\t\t\tdisplay: grid;\r\n\t\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr;\r\n\r\n\t\t\t@include targetIE {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tmax-width: t-rem(400px);\r\n\t\t\t\tjustify-content: flex-start;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&__thumbnail {\r\n\t\tmax-height: 100%;\r\n\t\tmax-width: 100%;\r\n\t}\r\n\r\n\t&__thumbnail-figure {\r\n\t\twidth: t-rem(65px);\r\n\t\theight: t-rem(65px);\r\n\t\tdisplay: flex;\r\n\t\tflex: 0 0 auto;\r\n\t\tflex-direction: column;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\t\tpadding: t-rem(5px);\r\n\t\tmargin: t-rem(5px);\r\n\t\toverflow: hidden;\r\n\t\tborder: solid 1px ds-color(\"border\", \"muted\");\r\n\t\tborder-radius: t-rem(4px);\r\n\r\n\t\t&.-selected {\r\n\t\t\tborder-color: ds-color(\"border\", \"interactive\");\r\n\t\t}\r\n\r\n\t\t@include hover {\r\n\t\t\tborder-color: ds-color(\"border\", \"interactive\");\r\n\t\t}\r\n\t}\r\n\r\n\t&__fig-container {\r\n\t\tposition: relative;\r\n\t\tcursor: pointer;\r\n\t}\r\n\r\n\t&__play-btn {\r\n\t\tbackground: ds-color(\"bg\", \"neutral-subtle\");\r\n\t\tbackground-clip: padding-box;\r\n\t\tborder: solid 1px rgba(ds-color-raw(\"fg\", \"default\"), .04);\r\n\t\tborder-radius: math.div($s-play, 2);\r\n\t\tbox-shadow: $shadow-button;\r\n\t\tcursor: pointer;\r\n\t\tdisplay: block;\r\n\t\theight: $s-play;\r\n\t\tleft: 50%;\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\ttransform: translate(-50%, -50%);\r\n\t\twidth: $s-play;\r\n\t}\r\n\r\n\t&__play-btn-label {\r\n\t\tbackground: transparent t-icon(\"play-btn-product-page\", ds-color-action-raw(\"primary\", \"default\", \"text-color\")) 50% 50% no-repeat;\r\n\t\tbottom: 0;\r\n\t\tleft: 0;\r\n\t\toverflow: hidden;\r\n\t\tposition: absolute;\r\n\t\tright: 0;\r\n\t\ttext-indent: -500px;\r\n\t\ttop: 0;\r\n\t}\r\n\r\n\t&__close-btn-label {\r\n\t\tbackground: transparent t-icon(\"close\", ds-color-action-raw(\"primary\", \"default\", \"text-color\")) 50% 50% no-repeat;\r\n\t\tbackground-size: 40%;\r\n\t\tbottom: 0;\r\n\t\tleft: 0;\r\n\t\toverflow: hidden;\r\n\t\tposition: absolute;\r\n\t\tright: 0;\r\n\t\ttext-indent: -500px;\r\n\t\ttop: 0;\r\n\t}\r\n\r\n\t&__video-overlay {\r\n\t\tdisplay: none;\r\n\r\n\t\t&.-show {\r\n\t\t\tdisplay: block;\r\n\t\t\tz-index: 10;\r\n\t\t}\r\n\r\n\t\t&.-iphone {\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 0;\r\n\t\t\tbottom: 0;\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\r\n\t\t\tiframe {\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\theight: 100%;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&.-desktop {\r\n\t\t\talign-items: center;\r\n\t\t\tbackground: rgba(0, 0, 0, 0.85);\r\n\t\t\tflex: 1 0 auto;\r\n\t\t\tjustify-content: center;\r\n\t\t\tposition: fixed;\r\n\t\t\ttop: 0;\r\n\t\t\tright: 0;\r\n\t\t\tbottom: 0;\r\n\t\t\tleft: 0;\r\n\t\t\tz-index: 100;\r\n\r\n\t\t\t&.-show {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t}\r\n\r\n\t\t\tiframe {\r\n\t\t\t\twidth: $s-iframe-width;\r\n\t\t\t\theight: $s-iframe-width * math.div(9, 16);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&__close-btn {\r\n\t\tdisplay: block;\r\n\t\twidth: $s-close;\r\n\t\theight: $s-close;\r\n\t\tborder-radius: math.div($s-close, 2);\r\n\t\tbackground-color: ds-color-action(\"primary\", \"default\", \"bg-color\");\r\n\t\tborder: solid 1px ds-color(\"border\", \"interactive\");\r\n\t\tposition: absolute;\r\n\t\ttop: calc(50vh - (960px/2/16*9) - 18px);\r\n\t\tright: calc(50vw - (960px/2) - 25px);\r\n\t}\r\n\r\n\t&__brand-tile {\r\n\t\tfont-family: ds-font-family(\"heading\");\r\n\t\talign-items: center;\r\n\t\tbackground-color: ds-color(\"bg\", \"interactive-muted\");\r\n\t\tborder: solid 1px ds-color(\"border\", \"muted\");\r\n\t\tcolor: ds-color(\"fg\", \"default\");\r\n\t\tdisplay: flex;\r\n\t\tflex: 1 0 auto;\r\n\t\tflex-direction: column;\r\n\t\theight: 100%;\r\n\t\tjustify-content: center;\r\n\t\tpadding: 1.5*$section-gutter $section-gutter;\r\n\t\ttext-decoration: none;\r\n\r\n\t\t@include hover {\r\n\t\t\tcolor: ds-color(\"fg\", \"default\");\r\n\t\t}\r\n\t}\r\n\r\n\t&__brand-tile-pre,\r\n\t&__brand-tile-post {\r\n\t\tfont-size: t-rem(20px);\r\n\t\tfont-weight: ds-font-weight(\"medium\");\r\n\t\tline-height: 1.2;\r\n\t}\r\n\r\n\t&__brand-tile-name {\r\n\t\tfont-size: t-rem(32px);\r\n\t\tfont-weight: ds-font-weight(\"bold\");\r\n\t\tline-height: 1.2;\r\n\t\ttext-align: center;\r\n\t}\r\n}\r\n</style>\r\n"],"names":["_sfc_main","Swiper","SwiperSlide","Navigation","Keyboard","mapGetters","mapMutations","updateGalleryImageModalVisible","item","_hoisted_2","_hoisted_3","_createElementBlock","$options","args","_createElementVNode","_hoisted_1","_createVNode","_component_swiper","$data","_ctx","_openBlock","_Fragment","_renderList","slide","index","_createBlock","_component_swiper_slide","_normalizeClass","$props","newVal","trackedgNoTrackedVideoUrl","videoPlayer","event","playerVimeo","tag","firstScriptTag","GalleryImagesModal","GalleryImage","GalleryVideo","GalleryManufacturerImage","i","_a","productItems","source","coloredItems","_b","_hoisted_4","_hoisted_5","mediaItem","_renderSlot","_component_gallery_image","_component_gallery_video","_component_gallery_manufacturer_image","_toDisplayString","_Transition","_component_gallery_images_modal"],"mappings":"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"}