{"version":3,"file":"Cvv48-23.js","sources":["../../../../composables/useStoreFinder.ts","../../../../components/StoreFinder/Item/index.vue","../../../../components/StoreFinder/Results/index.vue","../../../../components/FieldItemType/Telephone/index.vue","../../../../components/StoreFinder/Detail/index.vue","../../../../pages/[prefix]/storefinder/index.vue"],"sourcesContent":["import {\n  DistributorType,\n  type DistributorSearchItemFragment,\n  type StorefinderNodeDistributorFragment,\n} from '#graphql-operations'\nimport type { NuxtSvgSpriteSymbol } from '#nuxt-svg-sprite/runtime'\n\n/**\n * Helpers for store finder related things.\n */\nexport default function () {\n  const { $texts } = useNuxtApp()\n\n  /**\n   * Get the icon for a distributor type.\n   */\n  const getDistributorTypeIcon = (\n    type: DistributorType,\n  ): NuxtSvgSpriteSymbol => {\n    switch (type) {\n      case DistributorType.Own_boutique:\n        return 'logo-shield'\n      case DistributorType.Store:\n        return 'shopping-bag'\n      case DistributorType.Service_center:\n        return 'settings'\n      case DistributorType.Legacy:\n        return 'shopping-bag'\n    }\n  }\n\n  /**\n   * Get the label for a distributor type.\n   */\n  const getDistributorTypeLabel = (type: DistributorType): string => {\n    switch (type) {\n      case DistributorType.Own_boutique:\n        return $texts('storefinder.orisBoutique', 'Oris Boutique')\n      case DistributorType.Store:\n        return $texts('storefinder.retailer', 'Retailer')\n      case DistributorType.Service_center:\n        return $texts('storefinder.service', 'Service')\n      case DistributorType.Legacy:\n        return $texts('storefinder.legacy', 'Retailer')\n    }\n  }\n\n  /**\n   * Get the distributor types from a store finder item or a distributor node.\n   */\n  const getDistributorTypes = (\n    item: DistributorSearchItemFragment | StorefinderNodeDistributorFragment,\n  ): DistributorType[] => {\n    const types: DistributorType[] = []\n\n    if (item.isOwnBoutique) {\n      types.push(DistributorType.Own_boutique)\n    }\n\n    if (item.isStore) {\n      types.push(DistributorType.Store)\n    }\n\n    if (item.isServiceCenter) {\n      types.push(DistributorType.Service_center)\n    }\n\n    return types\n  }\n\n  return {\n    getDistributorTypeIcon,\n    getDistributorTypeLabel,\n    getDistributorTypes,\n  }\n}\n","<template>\n  <NuxtLink\n    v-if=\"to\"\n    :to=\"to\"\n    class=\"flex cursor-pointer border-t border-grey-light-01 p-16 text-base hover:bg-grey-light-02 md:px-32 md:py-24\"\n    :class=\"{ 'md:bg-grey-light-01': isActive }\"\n  >\n    <ul class=\"mr-16 flex flex-col gap-8 text-white\">\n      <li\n        v-for=\"type in types\"\n        :key=\"type\"\n        class=\"flex h-32 w-32 items-center justify-center rounded-full bg-grey-dark-01 p-6\"\n      >\n        <SpriteSymbol\n          :name=\"getDistributorTypeIcon(type)\"\n          class=\"h-full w-full\"\n        />\n      </li>\n    </ul>\n    <div>\n      <h2 class=\"font-bold\">\n        {{ title }}\n      </h2>\n      <FieldItemTypeAddress v-if=\"address\" v-bind=\"address\" />\n    </div>\n  </NuxtLink>\n</template>\n\n<script lang=\"ts\" setup>\nimport type {\n  DistributorSearchItemFragment,\n  DistributorType,\n} from '#graphql-operations'\n\nconst props = defineProps<{\n  id?: string\n  title?: string\n  isOwnBoutique?: boolean\n  distributorType?: DistributorType\n  isStore?: boolean\n  isServiceCenter?: boolean\n  address?: DistributorSearchItemFragment['address']\n  url?: DistributorSearchItemFragment['url']\n\n  isActive?: boolean\n  groupId?: number\n}>()\n\nconst { getDistributorTypes, getDistributorTypeIcon } = useStoreFinder()\nconst route = useRoute()\n\nconst to = computed(() => {\n  const path = props.url?.path\n  if (!path) {\n    return\n  }\n\n  const result = {\n    path,\n    query: {\n      ...route.query,\n    },\n  }\n\n  if (props.groupId !== undefined) {\n    result.query.groupId = props.groupId.toString()\n  }\n\n  return result\n})\n\nconst types = computed(() => getDistributorTypes(props))\n</script>\n","<template>\n  <ul class=\"flex flex-col\">\n    <li\n      v-for=\"(group, groupIndex) in groups\"\n      :key=\"group.type\"\n      class=\"text-base\"\n      :class=\"{ 'border-t border-grey-light-01': groupIndex > 0 }\"\n    >\n      <h2 class=\"p-16 text-lg uppercase md:p-32 md:py-24\">\n        {{ group.label }}\n        ({{ group.count }})\n      </h2>\n\n      <ul>\n        <StoreFinderItem\n          v-for=\"(store, storeIndex) in group.items\"\n          :key=\"storeIndex\"\n          :is-active=\"\n            activeStoreId === store.id &&\n            actualGroupId === groupIndex.toString()\n          \"\n          :group-id=\"groupIndex\"\n          v-bind=\"store\"\n        />\n      </ul>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  DistributorType,\n  type DistributorSearchItemFragment,\n} from '#graphql-operations'\n\ntype StoreFinderGroup = {\n  type: DistributorType\n  count: number\n  label: string\n  items: DistributorSearchItemFragment[]\n}\n\nconst props = withDefaults(\n  defineProps<{\n    countBoutique?: number\n    countServiceCenter?: number\n    countStore?: number\n    items?: DistributorSearchItemFragment[]\n    activeStoreId?: string\n    activeGroupId?: string\n  }>(),\n  {\n    countBoutique: 0,\n    countServiceCenter: 0,\n    countStore: 0,\n    items: () => [],\n    activeStoreId: undefined,\n    activeGroupId: undefined,\n  },\n)\n\nconst { $texts } = useNuxtApp()\n\nconst groupLabels = computed<Record<DistributorType, string>>(() => ({\n  [DistributorType.Own_boutique]: $texts(\n    'storefinder.orisBoutique',\n    'Oris Boutique',\n  ),\n  [DistributorType.Store]: $texts('storefinder.retailer', 'Retailer'),\n  [DistributorType.Service_center]: $texts('storefinder.service', 'Service'),\n  [DistributorType.Legacy]: $texts('storefinder.legacy', 'Retailer'),\n}))\n\nconst groups = computed(() => {\n  return Object.values(\n    props.items.reduce<Partial<Record<DistributorType, StoreFinderGroup>>>(\n      (acc, item) => {\n        const type = item.distributorType\n        if (!type) {\n          return acc\n        }\n        if (!acc[type]) {\n          acc[type] = {\n            type,\n            count: getCount(type),\n            label: groupLabels.value[type],\n            items: [],\n          }\n        }\n\n        acc[type]!.items.push(item)\n        return acc\n      },\n      {},\n    ),\n  )\n})\n\nconst getCount = (type: DistributorType): number => {\n  if (type === DistributorType.Service_center) {\n    return props.countServiceCenter\n  } else if (type === DistributorType.Store) {\n    return props.countStore\n  } else if (type === DistributorType.Own_boutique) {\n    return props.countBoutique\n  }\n\n  return 0\n}\n\nconst actualGroupId = computed(() => {\n  return props.activeGroupId\n    ? props.activeGroupId\n    : groups.value\n        .findIndex((group) =>\n          group.items.some((store) => store.id === props.activeStoreId),\n        )\n        .toString()\n})\n</script>\n","<template>\n  <a v-if=\"parsed\" :href=\"parsed.rfc3966\">\n    {{ $texts('storefinder.telephone', 'Tel') }}:\n    {{ parsed.international }}\n  </a>\n  <div v-else-if=\"value\">\n    {{ $texts('storefinder.telephone', 'Tel') }}:\n    {{ value }}\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { type FieldItemTypeTelephoneFragment } from '#graphql-operations'\n\ndefineProps<{\n  parsed?: FieldItemTypeTelephoneFragment['parsed']\n  value?: FieldItemTypeTelephoneFragment['value']\n}>()\n\nconst { $texts } = useNuxtApp()\n</script>\n","<template>\n  <div\n    v-if=\"node\"\n    ref=\"rootEl\"\n    class=\"flex h-full w-full flex-col overflow-hidden bg-black\"\n  >\n    <div\n      ref=\"storeDetails\"\n      class=\"top-0 flex shrink grow flex-col overflow-y-auto\"\n    >\n      <MediaImage\n        v-if=\"node.image\"\n        v-bind=\"node.image\"\n        img-class=\"h-[288px] w-full object-cover xxl:h-[initial] xxl:aspect-16/9\"\n        :image-style=\"imageStyle\"\n      />\n      <div\n        class=\"typo-body-1 flex flex-1 flex-col bg-black p-16 pb-0 text-white md:px-48 md:pt-40\"\n      >\n        <div class=\"mb-8 text-xs/[24px] uppercase tracking-[1px] text-grey-mid\">\n          {{ overline }}\n        </div>\n        <h2 class=\"mb-16 text-2xl/[40px] uppercase\">{{ node.title }}</h2>\n        <div class=\"text-grey-light-01\">\n          <FieldItemTypeAddress\n            v-if=\"node.address\"\n            v-bind=\"node.address\"\n            class=\"mb-16 not-italic\"\n          />\n          <ul class=\"mb-32 flex flex-col gap-12\">\n            <li v-if=\"node.phone?.first\" class=\"flex items-center\">\n              <SpriteSymbol class=\"mr-8 h-24 w-24\" name=\"phone\" />\n              <FieldItemTypeTelephone v-bind=\"node.phone.first\" />\n            </li>\n            <li v-if=\"mailto\" class=\"flex items-center\">\n              <SpriteSymbol class=\"mr-8 h-24 w-24\" name=\"mail\" />\n              <a :href=\"mailto\" target=\"_blank\">\n                {{ node.email }}\n              </a>\n            </li>\n            <li v-if=\"websiteUrl\" class=\"flex items-center\">\n              <SpriteSymbol class=\"mr-8 h-[27px] w-[27px]\" name=\"globe\" />\n              <a :href=\"websiteUrl\" target=\"_blank\">{{ websiteLabel }}</a>\n            </li>\n          </ul>\n          <ul class=\"mb-40 flex flex-wrap gap-16\">\n            <li\n              v-for=\"item in typesList\"\n              :key=\"item.type\"\n              class=\"flex h-40 w-40 items-center justify-center rounded-full bg-grey-dark-01\"\n              :title=\"item.label\"\n            >\n              <SpriteSymbol\n                class=\"h-24 w-24\"\n                :name=\"item.icon\"\n                :alt=\"item.label\"\n              />\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div\n      v-show=\"isMobileOrTablet || ctaUrl\"\n      ref=\"buttonContainer\"\n      class=\"flex gap-24 px-24 py-16 pb-32 pt-[21px] md:px-48 md:pb-40 md:pt-[26px]\"\n    >\n      <NuxtLink :to=\"backUrl\" class=\"button is-dark w-80 px-0 lg:hidden\">\n        <SpriteSymbol name=\"arrow-left\" />\n      </NuxtLink>\n      <DrupalLink v-if=\"ctaUrl\" :to=\"ctaUrl\" class=\"button is-dark w-full\">\n        {{ ctaLabel }}\n      </DrupalLink>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { StorefinderNodeDistributorFragment } from '#build/graphql-operations'\n\nconst props = defineProps<{\n  id: string\n}>()\n\nconst { isMobileOrTablet } = useViewport()\n\nconst id = computed(() => props.id)\n\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst { $texts } = useNuxtApp()\nconst route = useRoute()\nconst { getDistributorTypes, getDistributorTypeIcon, getDistributorTypeLabel } =\n  useStoreFinder()\n\nconst { data: node } = await useAsyncData<\n  StorefinderNodeDistributorFragment | undefined\n>(\n  () => {\n    return useCachedGraphqlQuery('distributorRoute', { id: id.value }).then(\n      (v) => {\n        if (v.data.entityById && 'title' in v.data.entityById) {\n          return v.data.entityById\n        }\n      },\n    )\n  },\n  { watch: [id] },\n)\n\nconst mailto = computed(() => {\n  if (node.value?.email) {\n    return 'mailto:' + node.value.email.trim()\n  }\n})\n\nconst websiteUrl = computed(() => node.value?.website?.uri?.path || '')\nconst websiteLabel = computed(() => websiteUrl.value.replace(/https?:\\/\\//, ''))\n\nconst ctaUrl = computed(() => node.value?.link?.uri?.path)\nconst ctaLabel = computed(\n  () =>\n    node.value?.link?.title ||\n    $texts('storefinder.moreDetails', 'More details'),\n)\n\nconst types = computed(() =>\n  node.value ? getDistributorTypes(node.value) : [],\n)\n\nconst typesList = computed(() =>\n  types.value.map((type) => {\n    return {\n      type,\n      icon: getDistributorTypeIcon(type),\n      label: getDistributorTypeLabel(type),\n    }\n  }),\n)\n\nconst overline = computed(() => typesList.value.map((v) => v.label).join(', '))\n\nconst backUrl = computed(() => {\n  return {\n    name: 'storefinder',\n    query: route.query,\n  }\n})\n\nconst storeDetails = ref<HTMLDivElement | null>()\nconst buttonContainer = ref<HTMLDivElement | null>()\n\nlet resizeObserver: ResizeObserver | undefined\nif (import.meta.client) {\n  // ResizeObserver does not exist in SSR context\n  resizeObserver = new ResizeObserver(() => {\n    if (storeDetails.value && buttonContainer.value) {\n      if (storeDetails.value.scrollHeight > storeDetails.value.clientHeight) {\n        buttonContainer.value.style.borderTop = '1px solid #efefef'\n      } else {\n        buttonContainer.value.style.removeProperty('border-top')\n      }\n    }\n  })\n}\n\nwatch(storeDetails, () => {\n  if (storeDetails.value) {\n    resizeObserver?.observe(storeDetails.value)\n  }\n})\n\nconst imageStyle = defineImageStyle({\n  type: 'sizes',\n  sizes: {\n    sm: 800,\n    md: 470,\n    xl: 530,\n    xxl: 920,\n  },\n})\n</script>\n","<template>\n  <BlokkliProvider\n    v-if=\"node\"\n    v-slot=\"{ isEditing }\"\n    v-bind=\"node?.blokkliProps\"\n    isolate\n    class=\"mb-64 md:mb-112\"\n  >\n    <div\n      ref=\"container\"\n      class=\"m-auto flex min-h-[500px] max-w-[2500px] flex-col overflow-hidden md:flex-row\"\n      :class=\"{ 'h-screen overflow-hidden': isEditing }\"\n    >\n      <div\n        class=\"w-full shrink-0 overflow-y-auto md:w-[55%] md:pl-[73px] md:pr-32 lg:w-[35.5%]\"\n      >\n        <div class=\"my-24 md:my-80 md:pr-24\">\n          <h1 v-if=\"node\" class=\"typo-headline-2 mb-24 pl-[15px] uppercase\">\n            {{ node.headline }}\n          </h1>\n          <div class=\"typo-body-2 mb-56 text-grey-dark-01 mobile-only:hidden\">\n            {{\n              $texts(\n                'storefinder.intro',\n                'We suggest you experience our watches on site or have your watches serviced by visiting us spontaneously in one of our beautiful stores.',\n              )\n            }}\n          </div>\n          <div class=\"flex flex-col\">\n            <div\n              class=\"order-last bg-grey-light-03 p-16 md:order-none md:mx-0 md:mb-40 md:bg-transparent md:p-0\"\n            >\n              <InputText\n                v-model=\"userInput\"\n                :title=\"\n                  $texts('storefinder.searchText', 'Search by city, name')\n                \"\n                icon-end=\"search\"\n              />\n            </div>\n            <div class=\"storefinder-pills-container overflow-auto\">\n              <div class=\"flex pl-16 md:flex-wrap md:pl-0\">\n                <div\n                  v-for=\"(filter, index) in filters\"\n                  :key=\"index\"\n                  class=\"pb-16 pr-6 md:pb-0 md:pr-0\"\n                >\n                  <NuxtLink\n                    :to=\"filter.to\"\n                    class=\"button md:mb-16 md:mr-16\"\n                    :class=\"{\n                      'border-black': filter.active,\n                      'is-disabled pointer-events-none': !filter.enabled,\n                    }\"\n                    >{{ filter.label }}</NuxtLink\n                  >\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div\n        ref=\"resultsListContainer\"\n        class=\"max-h-svh grow overflow-y-auto overflow-x-hidden bg-grey-light-03 lg:block lg:w-[28%] lg:shrink-0 lg:grow-0\"\n        :class=\"{\n          'md:hidden': activeStoreIdFromParam,\n        }\"\n      >\n        <StoreFinderResults\n          v-if=\"data?.items?.length\"\n          v-bind=\"data\"\n          :class=\"{ 'opacity-50': isLoading }\"\n          :active-store-id=\"\n            isMobileOrTablet ? activeStoreIdFromParam : activeStoreId\n          \"\n          :active-group-id=\"activeGroupId\"\n        />\n        <div v-else class=\"p-24\">\n          {{\n            $texts(\n              'storefinder.noResultsMessage',\n              'Unfortunately no stores were found for your search.',\n            )\n          }}\n        </div>\n      </div>\n\n      <div\n        class=\"w-full bg-black lg:block\"\n        :class=\"{\n          hidden: activeStoreIdFromParam === undefined,\n        }\"\n      >\n        <StoreFinderDetail\n          v-if=\"activeStoreId\"\n          :id=\"activeStoreId\"\n          :key=\"activeStoreId\"\n          ref=\"storeFinderDetail\"\n          class=\"shrink grow mobile-only:fixed mobile-only:right-0 mobile-only:top-0 mobile-only:z-storefinder-detail-mobile\"\n        />\n      </div>\n    </div>\n    <BlokkliField v-if=\"node\" name=\"field_paragraphs\" :list=\"node.paragraphs\" />\n  </BlokkliProvider>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { RouteLocationRaw } from 'vue-router'\nimport {\n  disableBodyScroll,\n  enableBodyScroll,\n  clearAllBodyScrollLocks,\n} from 'body-scroll-lock'\nimport type { UseHeadInput, ActiveHeadEntry, MergeHead } from '@unhead/vue'\nimport { DistributorType } from '#graphql-operations'\n\nconst { $texts } = useNuxtApp()\nconst container = ref<HTMLDivElement | null>()\n\nconst { isMobile, isMobileOrTablet } = useViewport()\n\ndefinePageMeta({\n  path: '/:prefix/storefinder/:id?',\n  name: 'storefinder',\n  staticDrupalPage: 'store_finder',\n  key: (route) =>\n    (route.params.prefix || '').toString() +\n    (route.params.name || '').toString(),\n\n  scrollToTop: (to, from) => {\n    // When navigating inside the storefinder don't scroll to the top.\n    if (from.name === 'storefinder' && to.name === 'storefinder') {\n      return false\n    }\n    return true\n  },\n})\n\nlet inputTimeout: number | undefined\n\nconst route = useRoute()\nconst router = useRouter()\nconst text = useQueryString('text')\nconst typeValue = useQueryString('type')\nconst userInput = ref(text.value)\n\nconst type = computed<DistributorType | undefined>(() => {\n  if (typeValue.value === 'own_boutique') {\n    return DistributorType.Own_boutique\n  } else if (typeValue.value === 'service_center') {\n    return DistributorType.Service_center\n  } else if (typeValue.value === 'store') {\n    return DistributorType.Store\n  }\n})\n\nconst { data, status } = await useAsyncData(\n  async () => {\n    const v = await useCachedGraphqlQuery('distributorSearch', {\n      text: text.value,\n      type: type.value,\n    })\n\n    return v.data.distributorSearch\n  },\n  {\n    watch: [type, text],\n  },\n)\n\nconst activeStoreIdFromParam = computed(() => {\n  if (route.params.id && typeof route.params.id === 'string') {\n    return route.params.id.match(/^\\d+/)?.[0]\n  }\n})\n\nconst activeStoreId = computed(\n  () => activeStoreIdFromParam.value || data.value?.items?.[0]?.id,\n)\n\nconst activeGroupId = computed(() => {\n  if (route.query.groupId && typeof route.query.groupId === 'string') {\n    return route.query.groupId\n  }\n\n  return undefined\n})\n\nconst { data: query } = await useAsyncData('store_finder', () =>\n  useCachedGraphqlQuery('storefinderRoute').then((v) => v.data),\n)\n\nconst node = computed(() => query.value?.getStaticNode)\n\nlet headMetatagsEntry: void | ActiveHeadEntry<UseHeadInput<MergeHead>>\nconst updateMetatags = async () => {\n  headMetatagsEntry?.dispose()\n\n  if (activeStoreIdFromParam.value) {\n    const { data: hrefLangQuery } = await useAsyncData(\n      'hreflangsForNonDrupalRoute',\n      () =>\n        useCachedGraphqlQuery('hreflangsForNonDrupalRoute', {\n          pathWithPrefix: route.fullPath,\n        }).then((v) => v.data),\n    )\n\n    const metatags = buildDrupalMetatags(hrefLangQuery.value?.metatags)\n\n    headMetatagsEntry = useHead(metatags)\n  } else {\n    const metatags = buildDrupalMetatags(node.value?.metatags?.metatags)\n    headMetatagsEntry = useHead(metatags)\n  }\n}\n\nawait updateMetatags() // we need await. Otherwise updateMetatags does not have a nuxt context and cannot correctly call useHead. Will result in the error: A composable that requires access to the Nuxt instance was called outside of a plugin\n\nwatch(() => route.fullPath, updateMetatags)\n\nonBeforeUnmount(() => {\n  headMetatagsEntry?.dispose()\n})\n\nconst { getDistributorTypeLabel } = useStoreFinder()\n\nwatch(userInput, (v) => {\n  window.clearTimeout(inputTimeout)\n\n  inputTimeout = window.setTimeout(() => {\n    router.push({\n      name: route.name || undefined,\n      query: {\n        text: v || undefined,\n      },\n    })\n  }, 400)\n})\n\nconst isLoading = computed(\n  () => status.value === 'pending' || text.value !== userInput.value,\n)\n\ntype StoreFinderFilter = {\n  label: string\n  type: DistributorType | undefined\n  active: boolean\n  enabled: boolean\n  to: RouteLocationRaw\n}\n\nconst filters = computed<StoreFinderFilter[]>(() => {\n  return [\n    {\n      label: $texts('storefinder.all', 'All'),\n      type: undefined,\n    },\n    {\n      type: DistributorType.Own_boutique,\n    },\n    {\n      type: DistributorType.Store,\n    },\n    {\n      type: DistributorType.Service_center,\n    },\n  ].map((v) => {\n    const enabled = isFilterEnabled(v.type)\n    const to: RouteLocationRaw = {\n      name: route.name || undefined,\n      query: {\n        ...route.query,\n        type: v.type ? v.type.toString() : undefined,\n      },\n    }\n\n    // If we change this filter the groupId should be reset.\n    delete to.query?.groupId\n\n    return {\n      ...v,\n      label: v.type ? getDistributorTypeLabel(v.type) : v.label,\n      active: type.value === v.type,\n      enabled,\n      to,\n    }\n  })\n})\n\nconst isFilterEnabled = (type?: DistributorType): boolean => {\n  if (type === DistributorType.Own_boutique) {\n    return !!data.value?.countBoutique\n  } else if (type === DistributorType.Store) {\n    return !!data.value?.countStore\n  } else if (type === DistributorType.Service_center) {\n    return !!data.value?.countServiceCenter\n  }\n\n  return true\n}\n\nuseRouteCache((ctx) => ctx.setMaxAge(30 * 60).setCacheable())\n\nconst setContainerHeight = () => {\n  if (!container.value) {\n    return\n  }\n\n  container.value.style.height = `calc(100dvh - ${container.value.getBoundingClientRect().top + (isMobile.value ? 40 : 0)}px)`\n}\n\nwatch(container, setContainerHeight)\nwatch(isMobile, setContainerHeight)\n\nconst resultsListContainer = ref<HTMLUListElement>()\n\nconst updateScrollFade = () => {\n  if (resultsListContainer.value) {\n    const element = resultsListContainer.value\n\n    const topFadeHeight = Math.min(element.scrollTop / 10, 100)\n    const bottomFadeHeight = Math.min(\n      (element.scrollHeight - element.clientHeight - element.scrollTop) / 10,\n      100,\n    )\n\n    element.style.maskImage = `linear-gradient(to bottom, transparent 0%, black ${topFadeHeight}px, black calc(100% - ${bottomFadeHeight}px), transparent 100%)`\n  }\n}\n\nonMounted(() => {\n  // need nextTick here since otherwise the scroll fade is not rendered on page load.\n  nextTick(updateScrollFade)\n})\nwatch(resultsListContainer, () => {\n  resultsListContainer.value?.addEventListener('scroll', updateScrollFade)\n})\n\nconst storeFinderDetail = ref<HTMLElement>()\nwatch([activeStoreIdFromParam, isMobile, storeFinderDetail], () => {\n  if (!storeFinderDetail.value) {\n    return\n  }\n\n  if (activeStoreIdFromParam.value && isMobile.value) {\n    disableBodyScroll(storeFinderDetail.value, {\n      allowTouchMove: () => true,\n    })\n  } else {\n    enableBodyScroll(storeFinderDetail.value)\n  }\n})\n\nrouter.afterEach(() => clearAllBodyScrollLocks())\n\nconst { trackPageView } = useAnalyticsTracking()\ntrackPageView()\n</script>\n\n<style lang=\"postcss\">\n.storefinder-pills-container {\n  scrollbar-width: none;\n}\n\n:deep(.paragraph),\n.paragraph {\n  @include paragraph-spacing;\n}\n</style>\n"],"names":["useStoreFinder","$texts","useNuxtApp","type","DistributorType","item","types","props","__props","getDistributorTypes","getDistributorTypeIcon","route","useRoute","to","computed","path","_a","result","groupLabels","groups","acc","getCount","actualGroupId","group","store","isMobileOrTablet","useViewport","id","rootEl","ref","getDistributorTypeLabel","node","__temp","__restore","_withAsyncContext","useAsyncData","useCachedGraphqlQuery","v","mailto","websiteUrl","_c","_b","websiteLabel","ctaUrl","ctaLabel","typesList","overline","backUrl","storeDetails","buttonContainer","resizeObserver","watch","imageStyle","defineImageStyle","container","isMobile","inputTimeout","router","useRouter","text","useQueryString","typeValue","userInput","data","status","activeStoreIdFromParam","activeStoreId","activeGroupId","query","headMetatagsEntry","updateMetatags","hrefLangQuery","metatags","buildDrupalMetatags","useHead","onBeforeUnmount","isLoading","filters","enabled","isFilterEnabled","setContainerHeight","resultsListContainer","updateScrollFade","element","topFadeHeight","bottomFadeHeight","onMounted","nextTick","storeFinderDetail","disableBodyScroll","enableBodyScroll","clearAllBodyScrollLocks","trackPageView","useAnalyticsTracking"],"mappings":"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"}