{"version":3,"mappings":"y8BAsBMA,GAAiB,2EAlBvB,MAAMC,GAAeC,EAAqB,IAAMC,EAAA,WAAO,4BAAuC,2FAAC,EACzFC,GAASF,EAAqB,IAAMC,EAAA,WAAO,6BAAgC,4FAAC,EAC5EE,GAAeH,EAAqB,IAAMC,EAAA,WAAO,4BAA+B,2FAAC,EAQjFG,EADQC,GACqB,QAEnC,IAAIC,EAA0BC,IAE9BD,EAAwB,MAAQ,CAC/B,2BAA4BE,EAAe,+BAA+B,GAIrE,MAAAC,EAAiBF,EAAI,EAAE,EACvBG,EAAkBH,EAAI,EAAK,EAE3BI,GAAwB,IACtB,MAAM,KAAKF,EAAe,MAAM,OAAOG,GAAUA,EAAO,QAAQ,CAAC,EAAE,MAAM,EAAGd,EAAc,EAGlGe,GAAU,IAAK,OACdJ,EAAe,QAAQK,EAAAV,GAAA,YAAAA,EAAS,uBAAT,YAAAU,EAA+B,wBAAyB,GAC3EL,EAAe,MAAM,OAASX,IAAkBW,EAAe,MAAM,OAAOG,GAAUA,EAAO,QAAQ,EAAE,OAAS,IACnHF,EAAgB,MAAQ,GACzB,CACA,EAED,MAAMK,GAASR,EAAI,CAClB,WAAY,qBACZ,QAAS,UACT,KAAQH,GAAA,YAAAA,EAAS,KACjB,OAASU,EAAAV,GAAA,YAAAA,EAAS,UAAT,MAAAU,EAAkB,sBAC1BE,EAAAZ,GAAA,YAAAA,EAAS,QAAT,YAAAY,EAAgB,aAChB,wDAAwDC,GAAAC,EAAAd,GAAA,YAAAA,EAAS,QAAT,YAAAc,EAAgB,OAAO,KAAvB,YAAAD,EAA2B,KAAM,oEAC1F,YAAeb,GAAA,YAAAA,EAAS,iBACxB,MAAS,CACR,QAAS,QACT,KAAQA,GAAA,YAAAA,EAAS,KAClB,EACA,OAAU,CACT,QAAS,QACT,IAAOA,GAAA,YAAAA,EAAS,KAChB,cAAiB,MACjB,OAASe,GAAAC,EAAAhB,GAAA,YAAAA,EAAS,mBAAT,YAAAgB,EAA2B,QAA3B,YAAAD,EAAkC,IAC3C,UAAa,iCACd,EACA,EAEKE,EAAS,SAAS,cAAc,QAAQ,EAC9C,OAAAA,EAAO,KAAO,sBACdA,EAAO,KAAO,KAAK,UAAUN,GAAO,KAAK,EAChC,cAAK,YAAYM,CAAM","names":["variantsToShow","RenderAction","defineAsyncComponent","__vitePreload","Splash","PriceElement","product","__props","productCardTranslations","ref","getTranslation","variantOptions","hasMoreVariants","displayVariantOptions","option","onMounted","_a","schema","_b","_d","_c","_f","_e","script"],"sources":["../../src/components/Files/Templates/Designs/Mobler/src/components/ProductCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {defineAsyncComponent, onMounted, ref} from 'vue'\r\nimport { getTranslation } from '@/ts/utilities.ts'\r\nimport {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'\r\nconst RenderAction = defineAsyncComponent(() => import('@/components/helpers/RenderAction.vue'))\r\nconst Splash = defineAsyncComponent(() => import('@/components/SplashElement.vue'))\r\nconst PriceElement = defineAsyncComponent(() => import('@/components/PriceElement.vue'))\r\n\r\nimport { ProductData } from '@/interfaces/ProductInterface.ts'\r\n\r\ninterface Props {\r\n\tproduct: ProductData,\r\n}\r\nconst props = defineProps<Props>()\r\nconst product: ProductData = props.product\r\n\r\nlet productCardTranslations = ref()\r\n\r\nproductCardTranslations.value = {\r\n\ttranslationProductDesigner: getTranslation('Ecom:Product.Pricing.Designer')\r\n}\r\n\r\nconst variantsToShow = 3\r\nconst variantOptions = ref([])\r\nconst hasMoreVariants = ref(false)\r\n\r\nconst displayVariantOptions = () => {\r\n\treturn Array.from(variantOptions.value.filter(option => option.colorHex)).slice(0, variantsToShow)\r\n}\r\n\r\nonMounted(() =>{\r\n\tvariantOptions.value = product?.variantOptionsSimple?.variantOptionsDetails ?? []\r\n\tif (variantOptions.value.length > variantsToShow && variantOptions.value.filter(option => option.colorHex).length > 0) {\r\n\t\thasMoreVariants.value = true\r\n\t}\r\n})\r\n\r\nconst schema = ref({\r\n\t'@context': 'https://schema.org',\r\n\t'@type': 'Product',\r\n\t'name': product?.name,\r\n\t'image': product?.cylindo?.isUsingCylindoAssets ?\r\n\t\tproduct?.media?.productImage :\r\n\t\t'https://mobler.dk/Admin/Public/GetImage.ashx?Image=' + product?.media?.images[0]?.url + '&Width=280&height=220&Format=webP&Quality=90&Crop=5&resolution=50',\r\n\t'description': product?.shortDescription,\r\n\t'brand': {\r\n\t\t'@type': 'Brand',\r\n\t\t'name': product?.brand,\r\n\t},\r\n\t'offers': {\r\n\t\t'@type': 'Offer',\r\n\t\t'url': product?.link,\r\n\t\t'priceCurrency': 'DKK',\r\n\t\t'price': product?.priceAndCampaign?.price?.raw,\r\n\t\t'condition': 'https://schema.org/NewCondition',\r\n\t}\r\n})\r\n\r\nconst script = document.createElement('script')\r\nscript.type = 'application/ld+json'\r\nscript.text = JSON.stringify(schema.value)\r\ndocument.head.appendChild(script)\r\n</script>\r\n\r\n<template>\r\n\t<div class=\"flex flex-col relative gap-y-6 justify-center bg-white p-4 rounded\r\n\t border border-grey-light hover:shadow hover:no-underline\">\r\n\t\t<a class=\"flex justify-start align-center h-auto relative\"\r\n\t\t\t:href=\"product?.link\"\r\n\t\t\t:title=\"product?.name\">\r\n\t\t\t<img class=\"object-contain w-full aspect-[4/3]\"\r\n\t\t\t\t v-if=\"product?.media?.images[0] || product?.media?.productImage\"\r\n\t\t\t\t :src=\"product?.cylindo?.isUsingCylindoAssets ?\r\n\t\t\t\t\tproduct?.media?.productImage :\r\n\t\t\t\t\t'/Admin/Public/GetImage.ashx?Image=' + product?.media?.images[0].url + '&Width=380&height=238&Format=webP&Quality=90&Crop=5&resolution=50'\"\r\n\t\t\t\t :alt=\"product?.name\"\r\n\t\t\t\t loading=\"lazy\"\r\n\t\t\t/>\r\n\t\t</a>\r\n\t\t<Splash\r\n\t\t\tv-if=\"product?.priceAndCampaign?.productSplash?.visible\"\r\n\t\t\t:type=\"product?.priceAndCampaign?.productSplash?.typeId\"\r\n\t\t/>\r\n\t\t<div class=\"flex flex-col gap-y-2\">\r\n\t\t\t<div class=\"flex items-center justify-between pb-2 border-grey border-b\"\r\n\t\t\t\tv-if=\"variantOptions.length\">\r\n\t\t\t\t<div class=\"flex items-center gap-x-2\">\r\n\t\t\t\t\t<template v-for=\"variantOption in displayVariantOptions()\">\r\n\t\t\t\t\t\t<a :href=\"variantOption.link\"\r\n\t\t\t\t\t\t   v-if=\"variantOption.colorHex\"\r\n\t\t\t\t\t\t   class=\"w-4 h-4 rounded-full inline-block hover:opacity-75\"\r\n\t\t\t\t\t\t   :style=\"{ backgroundColor: variantOption.colorHex }\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<span class=\"sr-only\" v-if=\"variantOption.color\">{{ getTranslation('Product.ColorVariant.ScreenReaderText') }}: {{ variantOption.color }}</span>\r\n\t\t\t\t\t\t</a>\r\n\t\t\t\t\t</template>\r\n\t\t\t\t\t<a\r\n\t\t\t\t\t\tv-if=\"hasMoreVariants\"\r\n\t\t\t\t\t\tclass=\"text-sm text-grey-dark hover:text-grey-dark/75\"\r\n\t\t\t\t\t\t:href=\"product?.link\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t<font-awesome-icon :icon=\"['fal', 'plus']\" />\r\n\t\t\t\t\t\t<span class=\"sr-only\">{{ getTranslation('GoToProduct') }}</span>\r\n\t\t\t\t\t</a>\r\n\t\t\t\t</div>\r\n\t\t\t\t<RenderAction\r\n\t\t\t\t\tv-if=\"product?.link\"\r\n\t\t\t\t\t:data=\"product?.link\"\r\n\t\t\t\t\taction=\"link\"\r\n\t\t\t\t\ttheme=\"link\"\r\n\t\t\t\t\tsize=\"none\"\r\n\t\t\t\t\tclass=\"text-sm\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t<font-awesome-icon :icon=\"['fal', 'pen']\" />\r\n\t\t\t\t\t{{ productCardTranslations.translationProductDesigner }}\r\n\t\t\t\t</RenderAction>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"flex flex-col gap-y-2\">\r\n\t\t\t\t<a class=\"text-black hover:text-black hover:underline\"\r\n\t\t\t\t   :href=\"product?.link\">\r\n\t\t\t\t\t<p class=\"text-base font-bold\">{{ product?.name }}</p>\r\n\t\t\t\t</a>\r\n\t\t\t\t<div class=\"text-sm text-grey-dark *:text-sm\" v-if=\"product?.shortDescription\" v-html=\"product?.shortDescription\"></div>\r\n\t\t\t\t<div class=\"text-sm text-grey-dark\" v-if=\"product?.productDetailsSimple?.material\"><strong>{{ getTranslation('Material') }}:</strong> <span>{{ product?.productDetailsSimple?.material }}</span></div>\r\n\t\t\t\t<ul class=\"list-none text-sm text-grey-dark flex gap-1\" v-if=\"product?.dimensions?.depth != 0 || product?.dimensions?.height != 0 || product?.dimensions?.width != 0\">\r\n\t\t\t\t\t<li v-if=\"product?.dimensions?.depth != 0\"><strong>D/L:</strong> <span>{{ product?.dimensions?.depth }}</span></li>\r\n\t\t\t\t\t<li v-if=\"product?.dimensions?.height != 0\"><strong>H:</strong> <span>{{ product?.dimensions?.height }}</span></li>\r\n\t\t\t\t\t<li v-if=\"product?.dimensions?.width != 0\"><strong>B:</strong> <span>{{ product?.dimensions?.width }}</span></li>\r\n\t\t\t\t</ul>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"mt-auto\">\r\n\t\t\t<PriceElement\r\n\t\t\t\tv-if=\"product?.priceAndCampaign\"\r\n\t\t\t\t:link=\"product?.link\"\r\n\t\t\t\t:has-variants=\"product?.hasVariant\"\r\n\t\t\t\ttheme=\"card\"\r\n\t\t\t\t:price-data=\"product?.priceAndCampaign\"\r\n\t\t\t/>\r\n\t\t\t<ul class=\"mt-2 list-none\"\r\n\t\t\t\tv-if=\"product?.priceAndCampaign?.moreOptionsText || product?.priceAndCampaign?.variantPriceNote\">\r\n\t\t\t\t<li class=\"text-xs text-grey-dark leading-2\" v-if=\"product?.priceAndCampaign?.moreOptionsText\">{{ product?.priceAndCampaign?.moreOptionsText }}</li>\r\n\t\t\t\t<li class=\"text-xs text-grey-dark\" v-if=\"product?.priceAndCampaign?.variantPriceNote\">{{ product?.priceAndCampaign?.variantPriceNote }}</li>\r\n\t\t\t</ul>\r\n\t\t</div>\r\n\r\n\t</div>\r\n</template>\r\n"],"file":"assets/ProductCard-807869b5.js"}