{"version":3,"file":"uqKE_Uug.js","sources":["../../../../components/Watch/Case/index.vue","../../../../components/Watch/Movement/index.vue","../../../../components/Watch/Info/index.vue","../../../../components/Watch/TechnicalDetails/index.vue","../../../../pages/[prefix]/product/watch/[collection]/[watchName]/[sku].vue"],"sourcesContent":["<template>\n  <div\n    class=\"col-span-12 col-start-2 mb-16 grid grid-cols-1 gap-16 border-grey-light-01 mobile-only:border-t mobile-only:pr-40 mobile-only:pt-32 md:col-span-8 md:col-start-5 md:mb-56 md:grid-cols-8 md:gap-24\"\n  >\n    <div class=\"col-span-12 text-xl uppercase md:col-span-3 md:text-2xl/[40px]\">\n      {{ $texts('case', 'Case') }}\n    </div>\n    <div class=\"col-span-12 text-base md:col-span-4 md:col-start-4\">\n      <template v-if=\"watch.fieldCaseMaterialFeature?.feature\">\n        {{ watch.fieldCaseMaterialFeature?.feature.trim() + '. ' }}\n      </template>\n      <template v-if=\"watch.fieldTopGlass\">\n        {{ watch.fieldTopGlass.trim() + '. ' }}\n      </template>\n      <template v-if=\"watch.fieldCaseBack\">\n        {{ watch.fieldCaseBack.trim() + '. ' }}\n      </template>\n    </div>\n  </div>\n\n  <div class=\"col-span-12 col-start-2 md:col-span-6 md:col-start-5\">\n    <WatchCaseDetail\n      :title=\"$texts('size', 'Size')\"\n      :value=\"watch.fieldCaseSize\"\n    />\n  </div>\n\n  <div\n    class=\"col-span-12 col-start-2 grid grid-cols-2 gap-16 mobile-only:mb-16 md:col-span-6 md:col-start-5 md:gap-24\"\n  >\n    <WatchCaseDetail\n      :title=\"$texts('waterResistance', 'Water Resistance')\"\n      :value=\"watch.fieldWaterResistance\"\n    />\n    <WatchCaseDetail\n      :title=\"$texts('interhornWidth', 'Interhorn Width')\"\n      :value=\"watch.fieldInterhornSize\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { ProductVariationWatchTechnicalDetailsFragment } from '#graphql-operations'\n\ndefineProps<{\n  watch: ProductVariationWatchTechnicalDetailsFragment\n}>()\n\nconst { $texts } = useEasyTexts()\n</script>\n","<template>\n  <div\n    class=\"col-span-12 col-start-2 grid gap-16 border-t border-grey-light-01 pt-32 md:col-span-8 md:col-start-5 md:grid-cols-8 md:gap-24 md:pt-72\"\n  >\n    <div\n      class=\"col-span-full text-xl uppercase md:col-span-3 md:text-2xl/[40px]\"\n    >\n      {{ $texts('movement', 'Movement') }}\n    </div>\n    <div class=\"col-span-full md:col-span-4 md:col-start-4\">\n      <div class=\"mb-56 md:mb-64\">\n        {{ caliber?.fieldMovementFunctions }}\n      </div>\n\n      <div v-if=\"caliber?.fieldPowerReserve\" class=\"mb-36 md:mb-64\">\n        <div class=\"text-3xl/[48px] md:mb-[13px] md:text-[64px]/[48px]\">\n          {{ caliber?.fieldPowerReserve }}\n        </div>\n        <div class=\"text-base md:text-md\">\n          {{ $texts('power_reserve', 'Power reserve') }}\n        </div>\n      </div>\n\n      <div class=\"mb-36 grid grid-cols-1 gap-32 md:mb-72\">\n        <WatchMovementDetail\n          v-for=\"(detail, index) in movementDetails\"\n          :key=\"index\"\n          :title=\"detail.label\"\n          :value=\"detail.value\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type {\n  ProductVariationWatchTechnicalDetailsFragment,\n  TermWatchCaliberFragment,\n} from '#graphql-operations'\nimport { falsy } from '~/helpers/type'\n\ntype WatchDetails = {\n  label: string\n  value: string\n}\n\nconst { $texts } = useNuxtApp()\n\nconst props = defineProps<{\n  watch: ProductVariationWatchTechnicalDetailsFragment\n}>()\n\nconst caliber = computed<TermWatchCaliberFragment | undefined>(\n  () => props.watch.fieldWatchCaliber,\n)\n\nconst movementDetails = computed<WatchDetails[]>(() => {\n  const details: (WatchDetails | undefined | null)[] = []\n\n  if (caliber.value?.label) {\n    details.push({\n      label: $texts('caliber', 'Caliber'),\n      value: caliber.value.label,\n    })\n  }\n\n  if (caliber.value?.fieldDimensions) {\n    details.push({\n      label: $texts('dimensions', 'Dimensions'),\n      value: caliber.value.fieldDimensions,\n    })\n  }\n\n  if (caliber.value?.fieldWinding) {\n    details.push({\n      label: $texts('winding', 'Winding'),\n      value: caliber.value.fieldWinding,\n    })\n  }\n\n  if (caliber.value?.fieldVibrations) {\n    details.push({\n      label: $texts('vibrations', 'Vibrations'),\n      value: caliber.value.fieldVibrations,\n    })\n  }\n\n  return details.filter(falsy)\n})\n</script>\n","<template>\n  <WatchInfoDetail\n    v-for=\"(detail, index) in watchDetails\"\n    :key=\"index\"\n    :title=\"detail.label\"\n    :value=\"detail.value\"\n  />\n  <WatchInfoDetail\n    :title=\"$texts('warranty', 'Warranty')\"\n    :value=\"'2 ' + $texts('years', 'years')\"\n    class=\"!pb-0\"\n  >\n    <div v-if=\"caliber?.fieldWarrantyExtension\">\n      <div class=\"-mt-5 mb-16 text-grey-dark-01 md:mb-24 md:mt-[-7px]\">\n        {{\n          $texts(\n            'free_warranty_extension',\n            'Join MyOris and get your warranty extended for free to',\n          ) +\n          ' ' +\n          caliber?.fieldWarrantyExtension +\n          ' ' +\n          $texts('years', 'years')\n        }}\n      </div>\n      <div>\n        <a\n          :href=\"`/${currentLanguage}-${currentCountry}/myoris`\"\n          class=\"button max-w-full\"\n        >\n          MyOris\n          <SpriteSymbol name=\"figma-arrow-top-right\" class=\"shrink-0\" />\n        </a>\n      </div>\n    </div>\n  </WatchInfoDetail>\n</template>\n\n<script lang=\"ts\" setup>\nimport type {\n  ProductVariationWatchTechnicalDetailsFragment,\n  TermWatchCaliberFragment,\n} from '#graphql-operations'\nimport { falsy } from '~/helpers/type'\n\nconst currentLanguage = useCurrentLanguage()\nconst currentCountry = useCurrentCountry()\n\ntype WatchDetails = {\n  label: string\n  value: string\n}\n\nconst { $texts } = useNuxtApp()\n\nconst props = defineProps<{\n  watch: ProductVariationWatchTechnicalDetailsFragment\n}>()\n\nconst caliber = computed<TermWatchCaliberFragment | undefined>(\n  () => props.watch.fieldWatchCaliber,\n)\n\nconst watchDetails = computed<WatchDetails[]>(() => {\n  const details: (WatchDetails | undefined | null)[] = []\n\n  if (props.watch.fieldDialMaterialFeature?.featureGroup) {\n    details.push({\n      label: $texts('dial', 'Dial'),\n      value: props.watch.fieldDialMaterialFeature.featureGroup,\n    })\n  }\n\n  if (props.watch.fieldStrapMaterialFeature?.featureGroup) {\n    details.push({\n      label: $texts('strap', 'Strap'),\n      value: props.watch.fieldStrapMaterialFeature.featureGroup,\n    })\n  }\n\n  if (props.watch.fieldExtras) {\n    details.push({\n      label: $texts('extras', 'Extras'),\n      value: props.watch.fieldExtras,\n    })\n  }\n\n  return details.filter(falsy)\n})\n</script>\n","<template>\n  <div class=\"layout-grid paragraph m-auto max-w-[1600px]\">\n    <Text\n      html-element-type=\"h2\"\n      class=\"col-span-full col-start-2 mb-40 text-5xl/[56px] font-light uppercase mobile-only:order-first md:col-span-8 md:col-start-2 md:mb-72 md:text-[80px]/[88px]\"\n    >\n      {{ $texts('technicalDetails', 'Technical Details') }}\n    </Text>\n\n    <div\n      class=\"col-span-11 col-start-3 mobile-only:mb-40 md:col-span-3 md:col-start-2\"\n    >\n      <div class=\"mb-8 text-base text-grey-dark-02 mobile-only:uppercase\">\n        {{ $texts('referenceNumber', 'Reference Number') }}\n      </div>\n      <div class=\"text-base md:text-md\">{{ watch.sku }}</div>\n    </div>\n\n    <div\n      class=\"col-span-12 col-start-3 mobile-only:order-first md:col-span-12 md:col-start-5 md:col-end-[-1]\"\n    >\n      <MediaImage\n        v-if=\"technicalDetailsImage\"\n        v-bind=\"technicalDetailsImage\"\n        :image-style=\"imageStyle\"\n        class=\"mb-24 w-full md:mb-80\"\n        img-class=\"h-full w-full object-cover\"\n      />\n    </div>\n\n    <WatchCase :watch=\"watch\" />\n    <WatchMovement :watch=\"watch\" />\n    <WatchInfo :watch=\"watch\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { ProductVariationWatchTechnicalDetailsFragment } from '#graphql-operations'\n\nconst { $texts } = useEasyTexts()\n\nconst props = defineProps<{\n  watch: ProductVariationWatchTechnicalDetailsFragment\n}>()\n\nconst technicalDetailsImage = computed(\n  () => props.watch.fieldTechnicalDetailsImage,\n)\nconst imageStyle = defineImageStyle({\n  type: 'sizes',\n  aspectRatio: 1038 / 427,\n  sizes: {\n    sm: 600,\n    md: 725,\n    lg: 850,\n    xl: 995,\n    xxl: 1500,\n  },\n})\n</script>\n","<template>\n  <BlokkliProvider\n    v-if=\"variation\"\n    v-bind=\"variation.blokkliProps\"\n    class=\"container grid-cols-1\"\n  >\n    <PDPStage\n      :tagline=\"product?.fieldCollectionReference?.label\"\n      :cta-button=\"variation.ctaType\"\n      :variation=\"variation\"\n    />\n\n    <BlokkliField name=\"field_paragraphs\" :list=\"paragraphs\" />\n    <WatchTechnicalDetails :watch=\"variation\" />\n    <PDPVariations\n      :variations=\"variationsFiltered\"\n      :intial-value=\"variation.fieldCaseSize\"\n      group-by=\"size\"\n    />\n    <RenderCacheable\n      v-if=\"infoParagraphs\"\n      :cache-key=\"cacheKey\"\n      :max-age=\"60 * 60\"\n    >\n      <PDPInfoGrid :paragraphs=\"infoParagraphs\" />\n    </RenderCacheable>\n    <PDPTeaserSlider\n      :variations=\"activeStraps\"\n      :title=\"$texts('fittingStraps', 'Fitting straps')\"\n    />\n    <PDPCommerceInfo class=\"mt-[--paragraph-gap-desktop]\" />\n  </BlokkliProvider>\n</template>\n\n<script lang=\"ts\" setup>\nimport { filterByTypenames } from '~/helpers/type'\n\ndefinePageMeta({\n  name: 'product-detail-watch',\n})\n\nconst { $texts } = useEasyTexts()\n\nconst route = useRoute()\nconst { product, variations, variation, paragraphs } = await useProductRoute(\n  'watch',\n  route,\n)\n\nconst straps = computed(() =>\n  filterByTypenames(\n    variation.value?.referencedProducts,\n    'CommerceProductVariationStrapDefault',\n  ),\n)\n\nconst activeStraps = computed(() => straps.value.filter((v) => v.status))\n\nconst variationsFiltered = variations.value.filter(\n  (v) => v.id !== variation.value?.id,\n)\n\nconst { data: infoParagraphs } = await useAsyncData(() =>\n  useCachedGraphqlQuery('infoParagraphsWatch').then(\n    (v) => v.data.config?.paragraphs || [],\n  ),\n)\nconst cacheKey = useCacheKey('watch-info-grid')\n\nconst { trackProductView, trackPageView } = useAnalyticsTracking()\nif (variation.value) {\n  trackProductView(variation.value)\n}\n\ntrackPageView()\n</script>\n\n<style lang=\"scss\" scoped>\n:deep(.paragraph),\n.paragraph {\n  &:first-of-type {\n    @include pdp-first-paragraph-spacing;\n  }\n\n  @include paragraph-spacing;\n}\n</style>\n"],"names":["$texts","useEasyTexts","useNuxtApp","props","__props","caliber","computed","movementDetails","details","_a","_b","_c","_d","falsy","currentLanguage","useCurrentLanguage","currentCountry","useCurrentCountry","watchDetails","technicalDetailsImage","imageStyle","defineImageStyle","route","useRoute","product","variations","variation","paragraphs","__temp","__restore","_withAsyncContext","useProductRoute","straps","filterByTypenames","activeStraps","v","variationsFiltered","infoParagraphs","useAsyncData","useCachedGraphqlQuery","cacheKey","useCacheKey","trackProductView","trackPageView","useAnalyticsTracking"],"mappings":"o0DAgDM,KAAA,CAAE,OAAAA,GAAWC,w3DCDb,KAAA,CAAE,OAAAD,GAAWE,IAEbC,EAAQC,EAIRC,EAAUC,EACd,IAAMH,EAAM,MAAM,iBAAA,EAGdI,EAAkBD,EAAyB,IAAM,aACrD,MAAME,EAA+C,CAAA,EAEjD,OAAAC,EAAAJ,EAAQ,QAAR,MAAAI,EAAe,OACjBD,EAAQ,KAAK,CACX,MAAOR,EAAO,UAAW,SAAS,EAClC,MAAOK,EAAQ,MAAM,KAAA,CACtB,GAGCK,EAAAL,EAAQ,QAAR,MAAAK,EAAe,iBACjBF,EAAQ,KAAK,CACX,MAAOR,EAAO,aAAc,YAAY,EACxC,MAAOK,EAAQ,MAAM,eAAA,CACtB,GAGCM,EAAAN,EAAQ,QAAR,MAAAM,EAAe,cACjBH,EAAQ,KAAK,CACX,MAAOR,EAAO,UAAW,SAAS,EAClC,MAAOK,EAAQ,MAAM,YAAA,CACtB,GAGCO,EAAAP,EAAQ,QAAR,MAAAO,EAAe,iBACjBJ,EAAQ,KAAK,CACX,MAAOR,EAAO,aAAc,YAAY,EACxC,MAAOK,EAAQ,MAAM,eAAA,CACtB,EAGIG,EAAQ,OAAOK,CAAK,CAAA,CAC5B,2uCC5CD,MAAMC,EAAkBC,KAClBC,EAAiBC,KAOjB,CAAE,OAAAjB,GAAWE,IAEbC,EAAQC,EAIRC,EAAUC,EACd,IAAMH,EAAM,MAAM,iBAAA,EAGde,EAAeZ,EAAyB,IAAM,SAClD,MAAME,EAA+C,CAAA,EAEjD,OAAAC,EAAAN,EAAM,MAAM,2BAAZ,MAAAM,EAAsC,cACxCD,EAAQ,KAAK,CACX,MAAOR,EAAO,OAAQ,MAAM,EAC5B,MAAOG,EAAM,MAAM,yBAAyB,YAAA,CAC7C,GAGCO,EAAAP,EAAM,MAAM,4BAAZ,MAAAO,EAAuC,cACzCF,EAAQ,KAAK,CACX,MAAOR,EAAO,QAAS,OAAO,EAC9B,MAAOG,EAAM,MAAM,0BAA0B,YAAA,CAC9C,EAGCA,EAAM,MAAM,aACdK,EAAQ,KAAK,CACX,MAAOR,EAAO,SAAU,QAAQ,EAChC,MAAOG,EAAM,MAAM,WAAA,CACpB,EAGIK,EAAQ,OAAOK,CAAK,CAAA,CAC5B,mnCCjDK,KAAA,CAAE,OAAAb,GAAWC,IAEbE,EAAQC,EAIRe,EAAwBb,EAC5B,IAAMH,EAAM,MAAM,0BAAA,EAEdiB,EAAaC,GAAiB,CAClC,KAAM,QACN,YAAa,KAAO,IACpB,MAAO,CACL,GAAI,IACJ,GAAI,IACJ,GAAI,IACJ,GAAI,IACJ,IAAK,IACP,CAAA,CACD,80BCjBK,KAAA,CAAE,OAAArB,GAAWC,IAEbqB,EAAQC,KACR,CAAE,QAAAC,EAAS,WAAAC,EAAY,UAAAC,EAAW,WAAAC,CAAA,GAAe,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAMC,EAC3D,QACAT,CAAA,CACF,mBAEMU,EAAS1B,EAAS,WACtB,OAAA2B,IACExB,EAAAiB,EAAU,QAAV,YAAAjB,EAAiB,mBACjB,sCACF,EAAA,EAGIyB,EAAe5B,EAAS,IAAM0B,EAAO,MAAM,OAAQG,GAAMA,EAAE,MAAM,CAAC,EAElEC,EAAqBX,EAAW,MAAM,OACzCU,GAAA,OAAM,OAAAA,EAAE,OAAO1B,EAAAiB,EAAU,QAAV,YAAAjB,EAAiB,IAAA,EAG7B,CAAE,KAAM4B,IAAmB,CAAAT,EAAAC,CAAA,EAAAC,EAAA,IAAMQ,GAAa,IAClDC,GAAsB,qBAAqB,EAAE,KAC1CJ,GAAM,OAAA,QAAA1B,EAAA0B,EAAE,KAAK,SAAP,YAAA1B,EAAe,aAAc,CAAC,EACvC,EACF,aAAA,CAAA,mBACM+B,EAAWC,EAAY,iBAAiB,EAExC,CAAE,iBAAAC,EAAkB,cAAAC,CAAc,EAAIC,GAAqB,EACjE,OAAIlB,EAAU,OACZgB,EAAiBhB,EAAU,KAAK,EAGpBiB"}