{"version":3,"file":"Bo12mfVk.js","sources":["../../../../../brands/timberland/regions/nora/components/product/card/RecommendedElevate.vue","../../../../../brands/timberland/regions/nora/components/cms/product-recommendations/ProductRecommendationsElevate.vue"],"sourcesContent":["<template>\n  <div class=\"group relative h-full f-col overflow-hidden rounded-lg bg-white shadow-xs duration dark:bg-grey-10 dark:c-white @hover:shadow-md\">\n    <base-picture\n      v-bind=\"size\"\n      :alt=\"image.alt\"\n      class=\"w-full overflow-hidden\"\n      :props-img=\"{ class: 'duration-800 group-hover:scale-105' }\"\n      :src=\"getResponsiveImageTransformations(image.src, size)\"\n    />\n    <div class=\"px-2 pb-4 pt-3 lg:p-4\">\n      <base-link class=\"elevate-body-3 line-clamp-4 w-fit\" :to=\"url\">\n        {{ title }}\n        <span class=\"absolute-0\" />\n      </base-link>\n      <product-pricing class=\"elevate-body-4\" :currency :price style=\"margin-top: 0.375rem\" />\n    </div>\n    <div class=\"mt-a flex justify-end p-2 lg:p-4\">\n      <base-button\n        v-if=\"quickshop\"\n        :aria-label=\"$t.add\"\n        data-test-id=\"product-card-add\"\n        @click=\"ModalOrPanelQuickshop.open({ product, closeOnAdd: closeQuickshopOnAdd, mode: 'modal', gtmConfig })\"\n      >\n        <vf-icon name=\"quickshop\" size=\"lg\" />\n      </base-button>\n      <modal-or-panel-quickshop class-content=\"<lg:pb-0\" position=\"bottom\" :size=\"$viewport.lg ? 'lg' : undefined\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { ProductContext } from '#types/gtm'\nimport type { ProductVariants } from '#root/api/clients/product/data-contracts'\nimport type { ImageItem } from '#types/media'\nimport type { MonetateRating } from '#types/p13n'\nimport type { PriceFull } from '#types/product'\n\nconst { currency, id, image, price, title, url, quickshop } = withDefaults(defineProps<{\n  /**\n   * Product name or title\n   */\n  title: string\n  /**\n   * Path to product detail page\n   */\n  url: string\n  /**\n   * Default product image\n   */\n  image: ImageItem\n  /**\n   * Product rating data\n   */\n  rating?: MonetateRating\n  /**\n   * Product id\n   */\n  id: string\n  /**\n   * Product price currency\n   */\n  currency: string\n  /**\n   * Product price data\n   */\n  price: PriceFull\n  /**\n   * Quickshop Toggle\n   */\n  quickshop: boolean\n  gtmConfig: ProductContext\n}>(), { quickshop: true })\n\nconst { $viewport } = useNuxtApp()\nconst route = useRoute()\n\nconst product = computed(() => ({\n  id,\n  name: title,\n  url,\n  price,\n  currency,\n  attributes: [],\n  variants: {} as ProductVariants\n}))\n\nconst closeQuickshopOnAdd = route.name?.toString().includes('cart')\n\nconst size = { width: { sm: 1350 }, height: { sm: 1350 } }\n\nconst ModalOrPanelQuickshop = createDialog('quickshop', {\n  type: () => $viewport.lg ? 'modal' : 'panel',\n})\n</script>\n","<template>\n  <div class=\"bg-grey-90 pb-4 pt-10 dark:bg-black lg:pb-8 lg:pt-14\">\n    <h2 v-if=\"content.title\" class=\"elevate-title-4 mx-4 c-grey-20 lg:mx-10 dark:c-white\">\n      {{ content.title }}\n    </h2>\n    <client-only>\n      <vf-carousel\n        v-if=\"recommendedProducts?.length\"\n        class=\"lg:mt-2\"\n        class-container=\"scroll-px-4 lg:scroll-px-10\"\n        class-controls=\"mx-10 rounded-full bg-white c-grey-10 p-2 op-0 shadow-sm duration lg:parent-hover:op-100\"\n        class-wrapper=\"parent\"\n      >\n        <div\n          v-for=\"({ recToken, ...card }, i) in recommendedProducts\"\n          :key=\"`${card.id}-${i}`\"\n          v-style=\"{\n            ml: i === 0 && { sm: '0.75rem', lg: '2.25rem' },\n            mr: i === recommendedProducts.length - 1 && { sm: '0.75rem', lg: '2.25rem' },\n            w: slideWidth[content.variant || '3-cards'],\n          }\"\n          class=\"px-1 py-6\"\n          @click=\"sendProductClickImpression(recToken)\"\n        >\n          <product-card-recommended-elevate v-bind=\"card\" :currency=\"currency[locale]\" :gtm-config=\"{ list: _list, category: _list }\" :quickshop />\n        </div>\n      </vf-carousel>\n      <template #fallback>\n        <div class=\"grid mt-4 gap-2 px-4 lg:cols-3 lg:mt-6 lg:px-10 md:cols-2\">\n          <div class=\"aspect-square skeleton\" />\n          <div class=\"aspect-square skeleton <md:hidden\" />\n          <div class=\"aspect-square skeleton <lg:hidden\" />\n        </div>\n      </template>\n    </client-only>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { ProductRecommendations } from '#types/components/cms/product-recommendations'\nimport type { MonetateExtractedProduct } from '#types/p13n'\n\nconst props = defineProps<{\n  content: ProductRecommendations\n}>()\n\nconst locale = useLocale()\nconst { extractProduct, sendMonetateEvents, sendRecImpressionsEvent } = useMonetate()\nconst { $gtm } = useNuxtApp()\nconst { currency } = useRuntimeConfig().public\nconst { enableQuickShop } = useAppConfig().components.cms.productRecommendations\n\nconst quickshop = props.content.quickShopVisibility ? props.content.quickShopVisibility === 'visible' : enableQuickShop\n\nconst slideWidth = {\n  '3-cards': {\n    sm: '86.96%',\n    md: '44.44%',\n    lg: '30.77%'\n  },\n  '6-cards': {\n    sm: '43.48%',\n    md: '22.22%',\n    lg: '15.385%'\n  }\n}\n\nconst recommendedProducts = computed<MonetateExtractedProduct[]>(\n  () => props.content.recommendedProducts?.map((product) => extractProduct(product, props.content.showRatings))\n)\n\nconst list = 'Product Recommendation Carousel'\nconst _list = getRecommendationListDescription({ list, title: props.content.title })\n\nconst sendProductClickImpression = (recToken: string) => {\n  const clickedRecommendation = props.content.recommendedProducts.find((product) => product.recToken === recToken)\n\n  sendMonetateEvents([{\n    eventType: 'monetate:record:RecClicks',\n    recClicks: [recToken]\n  }])\n\n  if (clickedRecommendation) {\n    $gtm.push('product.onProductRecClick', clickedRecommendation, {\n      action: 'Click Recommendation',\n      currency: currency[locale],\n      experience: props.content.monetateDecision,\n      list,\n      title: props.content.title,\n      vendor: 'monetate'\n    })\n  }\n}\n\nonMounted(() => {\n  if (props.content.monetateDecision?.name !== 'Control' && props.content.recommendedProducts?.length) {\n    sendRecImpressionsEvent(props.content.recommendedProducts, 24)\n    $gtm.push('product.onProductRecImpressions', props.content.recommendedProducts, {\n      currency: currency[locale],\n      experience: props.content.monetateDecision,\n      list,\n      title: props.content.title\n    })\n  }\n})\n</script>\n"],"names":["currency","id","image","price","title","url","quickshop","__props","$viewport","useNuxtApp","route","useRoute","product","computed","closeQuickshopOnAdd","_a","size","ModalOrPanelQuickshop","createDialog","list","props","locale","useLocale","extractProduct","sendMonetateEvents","sendRecImpressionsEvent","useMonetate","$gtm","useRuntimeConfig","enableQuickShop","useAppConfig","slideWidth","recommendedProducts","_list","getRecommendationListDescription","sendProductClickImpression","recToken","clickedRecommendation","onMounted","_b"],"mappings":"oxBAqCM,KAAA,CAAE,SAAAA,EAAU,GAAAC,EAAI,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,IAAAC,EAAK,UAAAC,CAAc,EAAAC,EAoCxD,CAAE,UAAAC,GAAcC,IAChBC,EAAQC,IAERC,EAAUC,EAAS,KAAO,CAC9B,GAAAZ,EACA,KAAMG,EACN,IAAAC,EACA,MAAAF,EACA,SAAAH,EACA,WAAY,CAAC,EACb,SAAU,CAAC,CACX,EAAA,EAEIc,GAAsBC,EAAAL,EAAM,OAAN,YAAAK,EAAY,WAAW,SAAS,QAEtDC,EAAO,CAAE,MAAO,CAAE,GAAI,MAAQ,OAAQ,CAAE,GAAI,IAAA,GAE5CC,EAAwBC,EAAa,YAAa,CACtD,KAAM,IAAMV,EAAU,GAAK,QAAU,OAAA,CACtC,6tCCrBKW,EAAO,2GA7Bb,MAAMC,EAAQb,EAIRc,EAASC,IACT,CAAE,eAAAC,EAAgB,mBAAAC,EAAoB,wBAAAC,GAA4BC,GAAY,EAC9E,CAAE,KAAAC,GAASlB,IACX,CAAE,SAAAT,CAAA,EAAa4B,EAAA,EAAmB,OAClC,CAAE,gBAAAC,CAAgB,EAAIC,EAAa,EAAE,WAAW,IAAI,uBAEpDxB,EAAYc,EAAM,QAAQ,oBAAsBA,EAAM,QAAQ,sBAAwB,UAAYS,EAElGE,EAAa,CACjB,UAAW,CACT,GAAI,SACJ,GAAI,SACJ,GAAI,QACN,EACA,UAAW,CACT,GAAI,SACJ,GAAI,SACJ,GAAI,SACN,CAAA,EAGIC,EAAsBnB,EAC1B,IAAA,OAAM,OAAAE,EAAAK,EAAM,QAAQ,sBAAd,YAAAL,EAAmC,IAAKH,GAAYW,EAAeX,EAASQ,EAAM,QAAQ,WAAW,GAAC,EAIxGa,EAAQC,GAAiC,CAAE,KAAAf,EAAM,MAAOC,EAAM,QAAQ,MAAO,EAE7Ee,EAA8BC,GAAqB,CACjD,MAAAC,EAAwBjB,EAAM,QAAQ,oBAAoB,KAAMR,GAAYA,EAAQ,WAAawB,CAAQ,EAE/GZ,EAAmB,CAAC,CAClB,UAAW,4BACX,UAAW,CAACY,CAAQ,CACrB,CAAA,CAAC,EAEEC,GACGV,EAAA,KAAK,4BAA6BU,EAAuB,CAC5D,OAAQ,uBACR,SAAUrC,EAASqB,CAAM,EACzB,WAAYD,EAAM,QAAQ,iBAC1B,KAAAD,EACA,MAAOC,EAAM,QAAQ,MACrB,OAAQ,UAAA,CACT,CACH,EAGF,OAAAkB,EAAU,IAAM,WACVvB,EAAAK,EAAM,QAAQ,mBAAd,YAAAL,EAAgC,QAAS,aAAawB,EAAAnB,EAAM,QAAQ,sBAAd,MAAAmB,EAAmC,UACnEd,EAAAL,EAAM,QAAQ,oBAAqB,EAAE,EAC7DO,EAAK,KAAK,kCAAmCP,EAAM,QAAQ,oBAAqB,CAC9E,SAAUpB,EAASqB,CAAM,EACzB,WAAYD,EAAM,QAAQ,iBAC1B,KAAAD,EACA,MAAOC,EAAM,QAAQ,KAAA,CACtB,EACH,CACD"}