{"version":3,"file":"D9YbSVEH.js","sources":["../../../../components/common/ProductCard/ProductCardImages.vue","../../../../components/common/ProductCard/ProductCardPlp.vue"],"sourcesContent":["<template>\n  <nuxt-link\n    ref=\"el\"\n    :to=\"to\"\n    :class=\"['product-image-container']\"\n    :aria-label=\"product.currentTranslation?.title\"\n  >\n    <button\n      v-if=\"isHover && images.length > 1\"\n      class=\"absolute left-1 top-1/2 z-10 -translate-y-1/2\"\n      :aria-label=\"$t('previousSlide')\"\n      @click.stop.prevent=\"prevImage\"\n    >\n      <UiIcon name=\"chevron_left\" class=\"h-6 w-6 text-gray-elements\" />\n    </button>\n\n    <UiLazyImg\n      v-if=\"isEmpty(images)\"\n      :alt=\"product.currentTranslation?.title\"\n      class=\"transition-300 absolute inset-0 h-full w-full\"\n      src=\"/images/no-image.webp\"\n      data-e2e-image=\"product\"\n    />\n    <template v-for=\"(image, idx) in images\" v-else :key=\"idx\">\n      <UiLazyImg\n        :alt=\"product.currentTranslation?.title\"\n        class=\"transition-300 absolute inset-0 h-full w-full\"\n        :src=\"image.url\"\n        :class=\"activeIdx === idx ? 'opacity-100' : 'opacity-0'\"\n        data-e2e-image=\"product\"\n      />\n    </template>\n    <button\n      v-if=\"isHover && images.length > 1\"\n      class=\"absolute right-1 top-1/2 z-10 -translate-y-1/2\"\n      :aria-label=\"$t('nextSlide')\"\n      @click.stop.prevent=\"nextImage\"\n    >\n      <UiIcon name=\"chevron_right\" class=\"h-6 w-6 text-gray-elements\" />\n    </button>\n  </nuxt-link>\n</template>\n\n<script setup lang=\"ts\">\nimport type { RouteLocationRaw } from \"vue-router\";\nimport { CatalogData, MediaFile } from \"ecom-types\";\n\nconst props = defineProps<{\n  to: RouteLocationRaw;\n  images: MediaFile[];\n  isHover?: boolean;\n  product: CatalogData;\n}>();\nconst el = ref<HTMLElement | null>(null);\n\nconst activeIdx = ref(0);\n\nwatchEffect(() => {\n  if (props.isHover) {\n    setActiveIndex(1);\n  } else {\n    setActiveIndex(0);\n  }\n});\n\n// function onMouseEnter() {\n//   setActiveIndex(1);\n// }\n// function onMouseLeave() {\n//   setActiveIndex(0);\n// }\nfunction setActiveIndex(idx: number) {\n  if (idx > props.images.length - 1) return;\n  activeIdx.value = idx;\n}\n\nfunction nextImage() {\n  setActiveIndex(\n    activeIdx.value >= props.images.length - 1 ? 0 : activeIdx.value + 1,\n  );\n}\nfunction prevImage() {\n  setActiveIndex(\n    activeIdx.value <= 0 ? props.images.length - 1 : activeIdx.value - 1,\n  );\n}\n</script>\n","<template>\n  <div\n    class=\"group/product-card relative transform-gpu overflow-hidden bg-white transition hover:z-10\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <div class=\"relative mb-2.5\">\n      <div\n        class=\"aspect-h-1 aspect-w-1 w-full overflow-hidden bg-white\"\n        :style=\"{\n          filter: `brightness(${imageBrightnessFilter}%)`,\n          backgroundColor: imageBackgroundColor?.hexa || 'transparent',\n        }\"\n      >\n        <CommonProductCardImages\n          class=\"block h-full w-full\"\n          :to=\"productLink\"\n          :is-hover=\"isHover\"\n          :images=\"productImages\"\n          :product=\"product\"\n          @click=\"setGaSelectItemEvent\"\n        />\n      </div>\n      <div\n        class=\"pointer-events-none absolute left-4 top-3.5 flex max-h-full flex-col flex-wrap gap-2\"\n      >\n        <UiChip\n          v-if=\"product.sale\"\n          color=\"secondary\"\n          :text=\"$t('sale')\"\n          class=\"h-6 py-0 font-light\"\n        />\n        <UiChip\n          v-if=\"product.bestseller\"\n          color=\"secondary\"\n          class=\"h-6 py-0 font-light\"\n          :text=\"$t('bestSeller')\"\n        />\n        <template v-if=\"product.badges\">\n          <UiChip\n            v-for=\"(badge, idx) in product.badges\"\n            :key=\"idx\"\n            color=\"secondary\"\n            class=\"h-6 py-0 font-light\"\n            :text=\"badge.title\"\n          />\n        </template>\n      </div>\n      <ClientOnly>\n        <UiButton\n          v-if=\"product.default_sku\"\n          class=\"absolute right-2 top-2 rounded-full bg-white text-gray-90\"\n          variant=\"clear\"\n          variant-type=\"icon\"\n          size=\"xs\"\n          text=\"xs\"\n          :aria-label=\"$t('addToWishlist')\"\n          data-e2e-btn=\"add-to-wishlist\"\n          @click=\"\n            updateWishlist({\n              sku: product.default_sku,\n              images: [\n                product.variant_plp_image?.image?.url ||\n                  getImageByPosition(\n                    product.default_config?.medias || [],\n                    'PLP',\n                  )?.file?.url ||\n                  product.images?.[0]?.url ||\n                  '',\n              ],\n              cost:\n                product.sale && discountValue ? discountValue : productPrice,\n              slug: product.slug,\n              configuration_id: product.default_sku,\n              engraving: {},\n              materials: product.materials,\n              material_categories: product.material_categories,\n              material_categories_plp_hover_ids:\n                product.material_categories_plp_hover_ids,\n              translations: product.translations as ProductData['translations'],\n              active_configurations_count: product.active_configurations_count,\n              min_cost: product.min_cost,\n              product_id: (product as CartItem).product_id || product.id,\n              collection_ids: product.collections_ids || [],\n              vendor_model: product.vendor_model || '',\n              start_at_cost: productStartAtPrice,\n            } as WishListData);\n            setGaSelectItemEvent();\n          \"\n        >\n          <UiIcon\n            name=\"heart\"\n            class=\"size-3.5\"\n            :class=\"[\n              inWishlist({\n                sku: product.default_sku,\n                engraving: {},\n              } as WishListData)\n                ? 'fill-gray-90'\n                : '',\n            ]\"\n            aria-hidden=\"true\"\n          />\n        </UiButton>\n      </ClientOnly>\n    </div>\n\n    <div\n      class=\"relative flex flex-col space-y-1\"\n      :style=\"{\n        alignItems: cardContentPosition === 'left' ? 'start' : 'center',\n      }\"\n    >\n      <div class=\"flex\">\n        <NuxtLink\n          :to=\"productLink\"\n          class=\"block flex-auto text-xs font-light md:text-sm\"\n          @click=\"setGaSelectItemEvent\"\n        >\n          <span data-e2e-item=\"product-title\">{{ productTitlePlp }}</span>\n        </NuxtLink>\n      </div>\n\n      <p\n        class=\"flex items-center gap-1 font-gt-ultra-median text-xxs font-250 italic text-gray-60\"\n      >\n        <!--        <span v-if=\"product.sale\" class=\"text-error\">-->\n        <!--          <b class=\"font-medium\">{{ $n(discountValue, \"currency\") }}</b>-->\n        <!--          ({{ product.sale_value }}% OFF)-->\n        <!--        </span>-->\n        <!--        <span :class=\"[product.sale ? 'line-through' : '']\">-->\n        <!--          {{ $n(productPrice, \"currency\") }}-->\n        <!--        </span>-->\n        <template\n          v-if=\"product?.active_configurations_count && !productStartAtPrice\"\n        >\n          <template\n            v-if=\"product.min_cost && !isConfigurationInventoryOutOfStockPlp\"\n          >\n            <span class=\"lowercase\">{{ $t(\"startingAt\") }}:</span>\n            <span\n              class=\"text-base font-normal not-italic text-orange-60\"\n              data-e2e-item=\"product-price\"\n            >\n              {{ $n(product.min_cost, \"currency\") }}\n            </span>\n          </template>\n          <span\n            v-else\n            class=\"text-base font-normal not-italic text-orange-60\"\n            data-e2e-item=\"out-of-stock\"\n          >\n            {{ $t(\"outOfStock\") }}\n          </span>\n        </template>\n        <span\n          v-else-if=\"isConfigurationOutOfStockPlp\"\n          class=\"text-base font-normal not-italic text-orange-60\"\n          data-e2e-item=\"out-of-stock\"\n        >\n          {{ $t(\"outOfStock\") }}\n        </span>\n        <span\n          v-else\n          class=\"flex gap-1 text-base font-normal not-italic text-orange-60\"\n          data-e2e-item=\"product-price\"\n        >\n          <span v-if=\"productStartAtPrice\" class=\"text-gray-70 line-through\">\n            {{ $n(productStartAtPrice, \"currency\") }}\n          </span>\n          {{ $n(productPrice, \"currency\") }}\n        </span>\n      </p>\n\n      <template v-for=\"block in productMaterials\" :key=\"block?.id\">\n        <SharedProductMaterials\n          v-if=\"block?.materials?.length >= 1\"\n          :product=\"product\"\n          :data=\"block\"\n          :show-images=\"props.plpType === plpTypes.default\"\n          :show-current-material=\"false\"\n        />\n      </template>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  CatalogData,\n  ProductData,\n  CartItem,\n  ColorPickerData,\n} from \"ecom-types\";\n\nimport { plpTypes, sizesSlugs } from \"@/configs\";\nimport type { WishListData } from \"~/composables/_useWishlist\";\n\nconst props = withDefaults(\n  defineProps<{\n    hover?: boolean;\n    imageBrightnessFilter?: string;\n    cardContentPosition?: string;\n    product: CatalogData;\n    plpType?: string;\n    extractSetting?: boolean;\n    productIndex: number;\n    statisticItemListName?: string;\n    imageBackgroundColor?: ColorPickerData;\n  }>(),\n  {\n    imageBrightnessFilter: \"100\",\n    cardContentPosition: \"left\",\n    productIndex: 0,\n    statisticItemListName: \"\",\n  },\n);\n\nconst { inWishlist, updateWishlist } = useWishlist();\nconst {\n  productMaterials,\n  productLink,\n  productPrice,\n  productTitlePlp,\n  discountValue,\n  productStartAtPrice,\n  isConfigurationInventoryOutOfStockPlp,\n  isConfigurationOutOfStockPlp,\n} = useProduct(props.product, sizesSlugs);\n\nconst { mdAndDown } = useAppBreakpoints();\n// const { openSystemDialog } = useSystemDialogs();\n// const { t } = useI18n();\n//\n// const { addToCart } = useCart();\n//\nconst { selectItemEvent } = useEvents();\n//\n// const { fbAddToCartEvent } = useFacebookPixelEvents();\n//\n// const pending = ref(false);\nconst isHover = ref<boolean>(false);\n\nconst productImages = computed(() => {\n  return getProductImages(props.product);\n});\n\n// async function onAddToCart(product: CatalogData) {\n//   pending.value = true;\n//   try {\n//     let imageIdListIds = [] as number[];\n//     let image = null;\n//     if (!productImages.value[0].id && !isEmpty(productImages.value)) {\n//       image = await mergeImages([{ src: productImages.value[0]?.url }]);\n//     } else {\n//       imageIdListIds = [productImages.value[0].id];\n//     }\n//\n//     await addToCart({\n//       configuration_id: productSKU.value,\n//       vendor_model: product.vendor_model,\n//       images: image ? [image] : [],\n//       images_ids: imageIdListIds,\n//     });\n//     gaAddToCartEvent(product, product?.default_config);\n//     fbAddToCartEvent(product, product?.default_config);\n//     setGaSelectItemEvent();\n//   } catch (error) {\n//     if (error instanceof ImageMergeError) {\n//       openSystemDialog({\n//         type: \"alert\",\n//         title: `${t(\"error\")}!`,\n//         text: `${t(\"failedLoadImage\")}!`,\n//       });\n//     }\n//   } finally {\n//     pending.value = false;\n//   }\n// }\n\nfunction onMouseEnter() {\n  if (mdAndDown) return;\n  isHover.value = true;\n}\n\nfunction onMouseLeave() {\n  isHover.value = false;\n}\n\nfunction setGaSelectItemEvent() {\n  selectItemEvent(props.product, {\n    index: props.productIndex,\n    item_list_name: props.statisticItemListName,\n  });\n}\n</script>\n"],"names":["props","__props","el","ref","activeIdx","watchEffect","setActiveIndex","idx","nextImage","prevImage","inWishlist","updateWishlist","useWishlist","productMaterials","productLink","productPrice","productTitlePlp","discountValue","productStartAtPrice","isConfigurationInventoryOutOfStockPlp","isConfigurationOutOfStockPlp","useProduct","sizesSlugs","mdAndDown","useAppBreakpoints","selectItemEvent","useEvents","isHover","productImages","computed","getProductImages","onMouseEnter","onMouseLeave","setGaSelectItemEvent"],"mappings":"8mBA+CA,MAAMA,EAAQC,EAMRC,EAAKC,EAAwB,IAAI,EAEjCC,EAAYD,EAAI,CAAC,EAEvBE,GAAY,IAAM,CACZL,EAAM,QACRM,EAAe,CAAC,EAEhBA,EAAe,CAAC,CAClB,CACD,EAQD,SAASA,EAAeC,EAAa,CAC/BA,EAAMP,EAAM,OAAO,OAAS,IAChCI,EAAU,MAAQG,EACpB,CAEA,SAASC,GAAY,CACnBF,EACEF,EAAU,OAASJ,EAAM,OAAO,OAAS,EAAI,EAAII,EAAU,MAAQ,CAAA,CAEvE,CACA,SAASK,GAAY,CACnBH,EACEF,EAAU,OAAS,EAAIJ,EAAM,OAAO,OAAS,EAAII,EAAU,MAAQ,CAAA,CAEvE,+wECiHA,MAAMJ,EAAQC,EAoBR,CAAE,WAAAS,EAAY,eAAAC,CAAe,EAAIC,GAAY,EAC7C,CACJ,iBAAAC,EACA,YAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,oBAAAC,EACA,sCAAAC,EACA,6BAAAC,CACE,EAAAC,GAAWrB,EAAM,QAASsB,EAAU,EAElC,CAAE,UAAAC,GAAcC,KAMhB,CAAE,gBAAAC,GAAoBC,KAKtBC,EAAUxB,EAAa,EAAK,EAE5ByB,EAAgBC,GAAS,IACtBC,GAAiB9B,EAAM,OAAO,CACtC,EAmCD,SAAS+B,GAAe,CAClBR,IACJI,EAAQ,MAAQ,GAClB,CAEA,SAASK,GAAe,CACtBL,EAAQ,MAAQ,EAClB,CAEA,SAASM,GAAuB,CAC9BR,EAAgBzB,EAAM,QAAS,CAC7B,MAAOA,EAAM,aACb,eAAgBA,EAAM,qBAAA,CACvB,CACH"}