{"version":3,"file":"C4sGIuCq.js","sources":["../../../../components/organisms/blocks/badges.vue","../../../../components/molecules/blocks/wareListItem.vue","../../../../components/molecules/blocks/wareListPromotionItem.vue","../../../../components/organisms/lists/wareList.vue"],"sourcesContent":["<template>\r\n  <div class=\"badges\">\r\n    <template v-for=\"item in badges.sort((a, b) => a.position - b.position)\">\r\n      <div v-if=\"item.isTextBadge\" class=\"badges__text\" :style=\"getStyleForBadge(item)\">{{ item.text }}</div>\r\n      <AtomsTextLink v-if=\"item.isLinkBadge\" class=\"badges__text\" :to=\"item.href\">{{ item.text }}</AtomsTextLink>\r\n      <AtomsImagesImage v-if=\"item.isImageBadge\" class=\"badges__image\" :src=\"item.imageUrl\" :alt=\"item.text\" :title=\"item.text\" />\r\n    </template>\r\n  </div>\r\n</template>\r\n<script setup>\r\n\r\n// DOCS: https://www.notion.so/ba128fd0e66f4d5caf2b6adaea6bcd0b?v=f646cd52e4cd4e08914e5c816300fb48&p=b1652cfaa2e54cb0ba4c962dc50141cc&pm=s\r\n\r\nconst props = defineProps({\r\n  wareItem: Object,\r\n  enableLinksOnTextBadges: Boolean,\r\n  freeShippingVisible: Boolean,\r\n  forWareDetail: Boolean,\r\n});\r\n\r\nconst i18n = useI18n();\r\nconst appConfig = useAppConfig();\r\n\r\nlet badges = useWareBadges().getBadgesForWare(props.wareItem, i18n, props.forWareDetail);\r\n\r\nconst emit = defineEmits(['badgesLoaded']);\r\n\r\nbadges = badges.filter((badge) => {\r\n  if (badge.type === 'FREE_SHIPPING' && !props.freeShippingVisible) {\r\n    return false;\r\n  }\r\n\r\n  return true;\r\n}).map((badge) => {\r\n  if (badge.isLinkBadge && !props.enableLinksOnTextBadges) {\r\n    badge.isTextBadge = true;\r\n    badge.isLinkBadge = false;\r\n  }\r\n\r\n  return badge;\r\n});\r\n\r\n\r\nconst customLabelStyles = {\r\n  [appConfig.parameterlValues.internal_engraving]: 'border-color: #a99146; color: #a99146;',\r\n  [appConfig.parameterlValues.label_sale]: 'border-color: #de1d20; color: #de1d20;',\r\n  [appConfig.parameterlValues.clearance]: 'border-color: #ff250d; color: #ff250d;',\r\n  [appConfig.parameterlValues.tip]: 'border-color: #e5e5e5; color: #2db34e',\r\n  [appConfig.parameterlValues.label_news]: 'border-color: #81613c; color: #81613c;',\r\n  [appConfig.parameterlValues.label_blackFriday]: 'border-color: #de1d20; color: #de1d20;',\r\n  999999: 'border-color: #e7c407; color: #e7c407;',\r\n};\r\n\r\nconst getStyleForBadge = (badge) => {\r\n  return badge.style ?? customLabelStyles[badge.lValue];\r\n}\r\n\r\nemit('badgesLoaded', badges);\r\n\r\n</script>\r\n<style lang=\"postcss\">\r\n.badges {\r\n  &__text {\r\n    @apply inline-block mr-[0.5em] mb-[0.5em] px-[1em] py-[0.25em] border-2 border-neutral-400 align-middle font-bold tracking-normal uppercase text-neutral-400;\r\n  }\r\n\r\n  &__image {\r\n    @apply inline-block mr-[0.5em] mb-[0.5em] h-[2.7em] align-middle;\r\n  }\r\n}\r\n</style>","<template>\r\n\r\n  <AtomsTextLink v-if=\"props.item.page\" class=\"warelist__item\" :to=\"props.item.page.url\" :target=\"props.linkTarget\" @click=\"selectItem\">\r\n\r\n    <!-- standard -->\r\n\r\n    <div v-if=\"props.type !== 'recent' && props.type !== 'light' && props.type !== 'light-single'\" class=\"warelist__item__standard\">\r\n\r\n      <!-- image -->\r\n\r\n      <div class=\"warelist__item__image\">\r\n        <MoleculesGlobalWareImage :ware-name=\"props.item.name\" :image-id=\"props.item.image?.id\" suffix=\"pd\" class=\"mx-auto\" :is-360=\"props.item.image?.type === 1 && !!props.item.image?.parameters\" />\r\n      </div>\r\n\r\n      <!-- variant groups images -->\r\n\r\n      <div class=\"absolute right-4 top-4 space-y-1\">\r\n        <template v-if=\"props.item.variantGroups?.length > 1\" v-for=\"(item, index) in props.item.variantGroups\">\r\n          <div v-if=\"index < 2 && item.wareImage\" class=\"warelist__item__additional-image\">\r\n            <MoleculesGlobalWareImage :ware-name=\"props.item.name\" :image-id=\"item.wareImage.id\" suffix=\"\" />\r\n          </div>\r\n          <AtomsImagesIcon class=\"block rotate-90\" v-if=\"index === 2\" icon=\"arrow-right-carousel\" />\r\n        </template>\r\n      </div>\r\n\r\n      <!-- badges -->\r\n\r\n      <div class=\"warelist__item__badges\">\r\n        <OrganismsBlocksBadges :ware-item=\"props.item\" style=\"font-size: 0.85em;\" :free-shipping-visible=\"true\" />\r\n      </div>\r\n\r\n      <!-- name -->\r\n\r\n      <component :is=\"props.elementNameOverride ?? (props.type === 'article' ? 'div' : 'h2')\" class=\"warelist__item__name\">{{ transformName(props.item.name) }}</component>\r\n\r\n      <div class=\"warelist__item__info\">\r\n\r\n        <!-- price -->\r\n\r\n        <strong class=\"warelist__item__price\">\r\n          {{ getPriceLabel(props.item) }}\r\n        </strong>\r\n\r\n        <!-- price recommended -->\r\n\r\n        <strong v-if=\"getPriceRecLabel(props.item)\" class=\"warelist__item__price-rec\">\r\n          {{ getPriceRecLabel(props.item) }}\r\n        </strong>\r\n\r\n        <!-- availability -->\r\n\r\n        <strong class=\"warelist__item__availability\">\r\n          {{ getAvailabilityLabel(props.item) }}\r\n        </strong>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- light -->\r\n\r\n    <template v-else-if=\"props.type === 'light' || props.type === 'light-single'\">\r\n      <div class=\"flex gap-x-8 items-center p-4 text-left border border-neutral-500\" :class=\"{ 'flex-1 bg-white': props.type === 'light', 'flex-wrap max-w-[500px] py-3 -mt-5 tablet:flex-nowrap': props.type === 'light-single' }\">\r\n        <MoleculesGlobalWareImage :ware-name=\"props.item.name\" :image-id=\"props.item.image?.id\" suffix=\"pd\" class=\"w-[100px]\" :class=\"{ 'w-auto mx-auto tablet:w-[150px]': props.type === 'light-single' }\" :wrapper-class=\"{ 'flex-1 tablet:flex-none': props.type === 'light-single' }\" :is-360=\"props.item.image?.type === 1 && !!props.item.image?.parameters\" />\r\n        <div class=\"flex flex-col\">\r\n\r\n          <!-- name -->\r\n\r\n          <component :is=\"props.elementNameOverride ?? (props.type === 'light' ? 'h2' : 'strong')\" class=\"warelist__item__name\">{{ transformName(props.item.name) }}</component>\r\n\r\n          <div class=\"warelist__item__info\">\r\n\r\n            <!-- price -->\r\n\r\n            <span class=\"warelist__item__price\">\r\n              {{ getPriceLabel(props.item) }}\r\n            </span>\r\n\r\n            <!-- price recommended -->\r\n\r\n            <strong v-if=\"getPriceRecLabel(props.item)\" class=\"warelist__item__price-rec\">\r\n              {{ getPriceRecLabel(props.item) }}\r\n            </strong>\r\n\r\n            <!-- availability -->\r\n\r\n            <strong class=\"warelist__item__availability\">\r\n              {{ getAvailabilityLabel(props.item) }}\r\n            </strong>\r\n          </div>\r\n\r\n          <MoleculesButtonsButton v-if=\"props.type === 'light-single'\" class=\"mt-6\" :dummy=\"true\" :arrow-right=\"true\">{{ $t('Zobrazit detail') }}</MoleculesButtonsButton>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- image only -->\r\n\r\n    <template v-else>\r\n      <MoleculesGlobalWareImage :ware-name=\"props.item.name\" :image-id=\"props.item.image?.id\" suffix=\"pd\" class=\"w-[160px] mx-auto\" :is-360=\"props.item.image?.type === 1 && !!props.item.image?.parameters\" />\r\n    </template>\r\n  </AtomsTextLink>\r\n</template>\r\n<script setup>\r\n\r\nconst props = defineProps({\r\n  type: String,\r\n  item: Object,\r\n  index: Number,\r\n  linkTarget: String,\r\n  listId: Number,\r\n  listName: String,\r\n  elementNameOverride: String\r\n});\r\n\r\nconst locale = useLocale();\r\nconst appConfig = useAppConfig();\r\nconst availability = useAvailability();\r\nconst business = useBusiness();\r\nconst i18n = useI18n();\r\nconst analytics = useBaseAnalytics();\r\nconst wareAnalytics = useWareAnalytics();\r\n\r\nconst getAvailabilityLabel = (ware) => {\r\n  const result = availability.getWareLabelForWareListItem(business.isWareElectronicDistribution(ware), ware.stored, business.isWareOverride30days(ware), i18n);\r\n\r\n  return result;\r\n};\r\n\r\nconst getPriceLabel = (ware) => {\r\n\r\n  let result = '';\r\n\r\n  if (business.isWarePriceOnRequest(ware)) {\r\n    result = i18n.t('Na dotaz');\r\n  }\r\n  else if (ware.price.minPrice?.price > 0) {\r\n    if (ware.price.minPrice.price != ware.price.maxPrice.price) {\r\n      result = i18n.t('od');\r\n    }\r\n\r\n    result += ' ' + ware.price.minPrice.priceFormatted;\r\n  }\r\n\r\n  return result;\r\n};\r\n\r\nconst getPriceRecLabel = (ware) => {\r\n\r\n  let result = '';\r\n\r\n  if (!business.isWarePriceOnRequest(ware) && ware.price.minPrice?.price > 0 && ware.price.minPrice.price < ware.price.minPrice.recommended) {\r\n    result = ware.price.minPrice.recommendedFormatted;\r\n  }\r\n\r\n  return result;\r\n};\r\n\r\nconst selectItem = () => {\r\n  wareAnalytics.getItems([props.item.id]).then(data => {\r\n\r\n    // call view_item_list separately in blocks of approx. 10 items, otherwise the payload will be too large in some cases\r\n\r\n    analytics.pushEvent('select_item', {\r\n      ecommerce: {\r\n        item_list_id: props.listId,\r\n        item_list_name: props.listName,\r\n        index: props.item.index,\r\n        items: data\r\n      }\r\n    });\r\n  });\r\n};\r\n\r\nconst transformName = (name) => {\r\n  let transformedName = name.replace(/-/g, '\\u2011');\r\n  let lastSpaceIndex = transformedName.lastIndexOf(' ');\r\n\r\n  while (lastSpaceIndex > -1 && lastSpaceIndex > transformedName.length - 7) {\r\n    transformedName = `${transformedName.substring(0, lastSpaceIndex)}\\u00A0${transformedName.substring(lastSpaceIndex + 1)}`;\r\n    lastSpaceIndex = transformedName.lastIndexOf(' ');\r\n  }\r\n\r\n  return transformedName;\r\n};\r\n\r\n</script>\r\n<style lang=\"postcss\">\r\n.warelist__item {\r\n  @apply flex-1 flex m-2;\r\n\r\n  &:hover {\r\n    @apply relative z-[1] no-underline;\r\n  }\r\n\r\n  &__standard {\r\n    @apply relative flex-1 flex flex-col p-6 text-center bg-white shadow-sm transition-all ease-in-out;\r\n\r\n    &:hover {\r\n      @apply shadow-xl;\r\n    }\r\n  }\r\n\r\n  &__image {\r\n    @apply flex-1 flex items-center justify-center mb-4 desktop:mb-8;\r\n\r\n    .ware-image--360::after {\r\n      background-image: url('/img/360small.png');\r\n    }\r\n  }\r\n\r\n  &__additional-image {\r\n    @apply flex items-center justify-center max-w-[40px] aspect-square border border-neutral-300 bg-white;\r\n  }\r\n\r\n  &__name {\r\n    @apply block my-3 text-lg tracking-normal;\r\n  }\r\n\r\n  &__info {\r\n    @apply flex flex-wrap gap-y-4 items-end justify-center my-2;\r\n  }\r\n\r\n  &__price {\r\n    @apply text-xl leading-[1rem] tracking-normal;\r\n  }\r\n\r\n  &__price-rec {\r\n    @apply ml-3 pl-3 leading-[0.9rem] text-sm tracking-normal line-through border-l border-neutral-300;\r\n  }\r\n\r\n  &__availability {\r\n    @apply ml-3 pl-3 leading-[0.9rem] uppercase tracking-normal text-success-600 border-l border-neutral-300;\r\n  }\r\n\r\n  .flip-box {\r\n    @apply flex-1 flex;\r\n\r\n    &__front {\r\n      @apply flex-1 flex;\r\n    }\r\n\r\n    &__back {\r\n      @apply flex-1 flex;\r\n    }\r\n  }\r\n\r\n  &__stores {\r\n    @apply mb-4;\r\n\r\n    &>strong {\r\n      @apply block mb-1 text-lg;\r\n    }\r\n\r\n    &>ul>li {\r\n      @apply before:content-['\\2014\\a0'] before:mr-2;\r\n    }\r\n  }\r\n\r\n  .variant-selector {\r\n    @apply flex-1 flex flex-col gap-4 mb-4;\r\n\r\n    &__groups strong,\r\n    &__values strong {\r\n      @apply block mb-1 text-lg;\r\n    }\r\n\r\n    &__groups__items {\r\n      @apply items-stretch;\r\n    }\r\n\r\n    &__value {\r\n      @apply text-sm;\r\n    }\r\n\r\n    &__group {\r\n      @apply flex items-center justify-center w-full max-w-[46px] mr-[5px] mb-[5px] aspect-square border border-neutral-300 bg-white;\r\n    }\r\n\r\n  }\r\n}\r\n</style>","<template>\r\n  <AtomsTextLink class=\"warelist__promo-item\" :class=\"{ 'warelist__promo-item--with-hover': props.styleId !== 8 }\" :to=\"props.url\" :style=\"`background-image: url('${useShopZone().value.staticResourcesRoot}/shopFiles/promos/${props.id}.jpg?v=2024');`\" :data-promotioncampaign=\"utils.cleanHtmlAttribute(props.description)\" data-promotiontype=\"wareList\" :data-promotionname=\"utils.cleanHtmlAttribute(props.title)\">\r\n\r\n    <!-- title -->\r\n\r\n    <div v-if=\"props.styleId !== 8\" class=\"warelist__promo-item__title\" :class=\"`warelist__promo-item__title--${props.styleId}`\">{{ props.title }}</div>\r\n\r\n    <!-- button -->\r\n\r\n    <MoleculesButtonsButton v-if=\"props.styleId !== 8\" :dummy=\"true\" :ghost=\"props.styleId === 2\" :secondary=\"props.styleId === 3\" :black=\"props.styleId === 4\" :white-ghost=\"props.styleId === 5\" :secondary-ghost=\"props.styleId === 6\">\r\n      {{ props.description }}\r\n    </MoleculesButtonsButton>\r\n\r\n  </AtomsTextLink>\r\n</template>\r\n<script setup>\r\n\r\nconst props = defineProps({\r\n  id: Number,\r\n  styleId: Number,\r\n  description: String,\r\n  title: String,\r\n  url: String\r\n});\r\n\r\nconst appConfig = useAppConfig();\r\nconst utils = useUtils();\r\n\r\n</script>\r\n<style lang=\"postcss\">\r\n.warelist__promo-item {\r\n  @apply aspect-square relative overflow-hidden flex flex-col justify-end gap-6 m-2 p-6 tracking-normal bg-center bg-cover transition-all ease-in-out tablet:aspect-auto desktop:p-8;\r\n\r\n  &--with-hover {\r\n\r\n    &::before {\r\n      @apply content-[''] absolute left-0 top-0 right-0 bottom-0 bg-cover bg-center transition-all duration-500 ease-in-out z-[1];\r\n      background-image: inherit;\r\n      filter: grayscale(25%) brightness(30%) saturate(100%);\r\n      z-index: 1;\r\n    }\r\n\r\n    &::after {\r\n      @apply content-[''] absolute left-0 top-0 right-0 bottom-0 bg-cover bg-center z-[2] transition-all duration-500 ease-in-out;\r\n      background-image: inherit;\r\n      filter: grayscale(25%) brightness(50%) saturate(50%);\r\n      z-index: 1;\r\n    }\r\n\r\n    &:hover::after {\r\n      opacity: 0;\r\n    }\r\n\r\n    &:hover::before {\r\n      @apply scale-[1.02];\r\n    }\r\n  }\r\n\r\n  &>* {\r\n    position: relative;\r\n    z-index: 3;\r\n  }\r\n\r\n  &__title {\r\n    @apply text-2xl font-bold text-neutral-50;\r\n\r\n    &::before {\r\n      @apply block w-16 mb-4 border-t-2 content-[''];\r\n    }\r\n\r\n    &--1 {\r\n      &::before {\r\n        @apply border-primary-500;\r\n      }\r\n    }\r\n\r\n    &--2 {\r\n      &::before {\r\n        @apply border-primary-500;\r\n      }\r\n    }\r\n\r\n    &--3 {\r\n      &::before {\r\n        @apply border-secondary-500;\r\n      }\r\n    }\r\n\r\n    &--4 {\r\n      &::before {\r\n        @apply border-neutral-500;\r\n      }\r\n    }\r\n\r\n    &--5 {\r\n      &::before {\r\n        @apply border-neutral-50;\r\n      }\r\n    }\r\n\r\n    &--6 {\r\n      &::before {\r\n        @apply border-secondary-500;\r\n      }\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    @apply no-underline shadow-xl;\r\n  }\r\n}\r\n</style>","<template>\r\n  <div class=\"warelist\" :class=\"`warelist--${props.type ?? 'standard'}`\" ref=\"wareList\" data-pagearea=\"wareList\">\r\n    <div v-if=\"props.withSorting\" class=\"min-h-[2rem] mb-4\">\r\n      <ClientOnly>\r\n        <div v-if=\"props.withSorting\" class=\"flex flex-wrap gap-x-10 gap-y-2 items-center\">\r\n          <div class=\"warelist__sort\" :class=\"{ uppercase: !sortMenuOpen }\">\r\n            <button v-for=\"item in sortOptions\" @click=\"sort(item.key)\" class=\"warelist__sort__item\" :class=\"{ 'warelist__sort__item--selected': currentSort === item.key }\">\r\n              {{ $t(item.label) }}\r\n            </button>\r\n          </div>\r\n          <span class=\"uppercase\">{{ $t('n produktů', props.totalFullItems) }}</span>\r\n          <AtomsTextLink :to=\"cache.getPageUrl(33894)\" target=\"blank\" class=\"font-bold underline text-neutral-400 tracking-normal\">{{ $t('Podle čeho řadíme produkty?') }}</AtomsTextLink>\r\n        </div>\r\n      </ClientOnly>\r\n    </div>\r\n    <div v-if=\"props.loading\" class=\"warelist__loader\">\r\n      <div class=\"sticky top-[400px] desktop:top-[500px]\">\r\n        <AtomsGlobalLoader />\r\n      </div>\r\n    </div>\r\n    <div class=\"warelist__items\" ref=\"wareListItems\">\r\n      <template v-if=\"props.type === 'slider' || props.type === 'recent' || props.type === 'light' || props.type === 'article'\">\r\n        <Carousel :breakpoints=\"getCarouselBreakpoints(props.type)\" :itemsToShow=\"1\" :itemsToScroll=\"1\">\r\n          <Slide v-for=\"item in props.items\" :key=\"item.id\">\r\n            <MoleculesBlocksWareListItem :type=\"props.type\" :item=\"item\" :link-target=\"props.itemsLinkTarget\" :list-id=\"props.groupId\" :list-name=\"props.listName\" :element-name-override=\"props.itemNameElementOverride\" />\r\n          </Slide>\r\n          <template #addons>\r\n            <Navigation v-if=\"props.withSliderNavigation\" />\r\n            <Pagination v-if=\"props.withSliderPagination && props.items.length > 1\" />\r\n          </template>\r\n        </Carousel>\r\n      </template>\r\n      <template v-else>\r\n        <template v-for=\"item in props.items\" :key=\"item.id\">\r\n          <MoleculesBlocksWareListPromotionItem v-if=\"props.promotions && item.index % props.pageSize === 5 && getPromotionItem(item.index)\" :id=\"getPromotionItem(item.index).id\" :style-id=\"getPromotionItem(item.index).idStyle\" :description=\"getPromotionItem(item.index).description\" :title=\"getPromotionItem(item.index).title\" :url=\"getPromotionItem(item.index).url\" />\r\n          <MoleculesBlocksWareListItem v-if=\"(item.index + 1) % props.pageSize === 0 && getPromotionItem(item.index) ? false : true\" :type=\"props.type\" :item=\"item\" :link-target=\"props.itemsLinkTarget\" :list-id=\"props.groupId\" :list-name=\"props.listName\" :element-name-override=\"props.itemNameElementOverride\" />\r\n        </template>\r\n      </template>\r\n    </div>\r\n    <OrganismsListsPaging :key=\"props.page\" v-if=\"props.pageSize\" class=\"mt-6\" :shown-items=\"shownItems\" :total-pages=\"totalPages\" :current-page=\"props.page\" :total-items=\"props.totalItems\" :auto-scroll-element=\"wareList\"></OrganismsListsPaging>\r\n  </div>\r\n</template>\r\n<script setup>\r\n\r\nimport { Carousel, Slide, Navigation, Pagination } from '~/components/molecules/containers/carousel.js';\r\nimport \"assets/css/carousel.css\";\r\n\r\nconst props = defineProps({\r\n  type: String,\r\n  items: Object,\r\n  promotions: Array,\r\n  page: Number,\r\n  pageSize: Number,\r\n  totalItems: Number,\r\n  totalFullItems: Number,\r\n  withSorting: Boolean,\r\n  withSliderNavigation: Boolean,\r\n  withSliderPagination: Boolean,\r\n  itemsLinkTarget: String,\r\n  groupId: Number,\r\n  listName: String,\r\n  filter: String,\r\n  appending: Boolean,\r\n  loading: Boolean,\r\n  itemNameElementOverride: String\r\n});\r\n\r\nconst appConfig = useAppConfig();\r\nconst shopRouting = useShopRouting();\r\nconst route = useRoute();\r\nconst analytics = useBaseAnalytics();\r\nconst wareAnalytics = useWareAnalytics();\r\nconst i18n = useI18n();\r\nconst cache = useCache();\r\nconst utils = useUtils();\r\n\r\nconst wareList = ref(null);\r\nconst wareListItems = ref(null);\r\n\r\nconst shownItems = computed(() => Math.min(props.page * props.pageSize, props.totalItems));\r\n\r\nconst totalPages = computed(() => {\r\n  let numOfPages = props.pageSize > 0 ? Math.ceil(props.totalItems / props.pageSize) : 0;\r\n  let result = numOfPages;\r\n\r\n  if (numOfPages && props.promotions?.length) {\r\n    result = Math.ceil((props.totalItems + numOfPages) / props.pageSize);\r\n  }\r\n\r\n  return result;\r\n});\r\n\r\nwatch(() => props.items, async (newValue, oldValue) => {\r\n\r\n  if (process.client && props.items && props.listName && !utils.isDeepEqual(newValue, oldValue)) {\r\n\r\n    wareAnalytics.getItems(props.items.map(item => item.id)).then(data => {\r\n\r\n      // call view_item_list separately in blocks of approx. 10 items, otherwise the payload will be too large in some cases\r\n\r\n      for (let i = 0; i < Math.ceil(data.length / 10); i++) {\r\n        analytics.pushEvent('view_item_list', {\r\n          ecommerce: {\r\n            item_list_id: props.groupId,\r\n            item_list_name: props.listName,\r\n            item_list_page: props.page,\r\n            item_list_filter: props.filter,\r\n            items: data.slice(i * 10, (i * 10) + 10)\r\n          }\r\n        });\r\n      }\r\n\r\n    });\r\n\r\n  }\r\n}, { immediate: true });\r\n\r\nconst getPromotionItem = (itemIndex) => {\r\n  let result = null;\r\n\r\n  if (props.promotions?.length) {\r\n    const index = Math.floor(itemIndex / props.pageSize) % props.promotions.length;\r\n    result = props.promotions[index];\r\n  }\r\n\r\n  return result;\r\n};\r\n\r\nonMounted(() => {\r\n  watch(() => props.loading, () => {\r\n    if (props.loading) {\r\n      wareListItems.value.classList.add('opacity-20');\r\n    }\r\n    else {\r\n      wareListItems.value.classList.remove('opacity-20');\r\n    }\r\n  });\r\n\r\n  watch(() => props.appending, () => {\r\n    if (props.appending) {\r\n\r\n      const previousBottom = wareListItems.value.getBoundingClientRect().bottom + window.scrollY;\r\n\r\n      wareListItems.value.style.maxHeight = `${wareListItems.value.scrollHeight}px`;\r\n      wareListItems.value.style.overflow = 'hidden';\r\n      wareListItems.value.style.maxHeight = `${wareListItems.value.scrollHeight + 2000}px`;\r\n\r\n      //window.scrollTo({ top: previousBottom, behavior: 'smooth' });\r\n      useUtils().scrollTo(previousBottom);\r\n\r\n      setTimeout(() => {\r\n        wareListItems.value.style.maxHeight = 'initial';\r\n        wareListItems.value.style.overflow = 'visible';\r\n      }, 300);\r\n    }\r\n  });\r\n});\r\n\r\nconst getCarouselBreakpoints = type => {\r\n  switch (type) {\r\n    case 'article':\r\n      return {\r\n        0: {\r\n          itemsToShow: 1,\r\n          snapAlign: \"start\",\r\n        },\r\n        768: {\r\n          itemsToShow: 2,\r\n          snapAlign: \"start\",\r\n        },\r\n      };\r\n      break;\r\n    case 'recent':\r\n      return {\r\n        0: {\r\n          itemsToShow: 3,\r\n          snapAlign: \"start\",\r\n        },\r\n        768: {\r\n          itemsToShow: 6,\r\n          snapAlign: \"start\",\r\n        },\r\n        1440: {\r\n          itemsToShow: 8,\r\n          snapAlign: \"start\",\r\n        },\r\n      };\r\n      break;\r\n    case 'light':\r\n      return {\r\n        0: {\r\n          itemsToShow: 1,\r\n          snapAlign: \"start\",\r\n        },\r\n        768: {\r\n          itemsToShow: 2,\r\n          snapAlign: \"start\",\r\n        },\r\n        1440: {\r\n          itemsToShow: 3,\r\n          snapAlign: \"start\",\r\n        },\r\n      };\r\n      break;\r\n    default:\r\n      return {\r\n        768: {\r\n          itemsToShow: 2,\r\n          snapAlign: \"start\",\r\n        },\r\n        1440: {\r\n          itemsToShow: 4,\r\n          snapAlign: \"start\",\r\n        },\r\n      };\r\n      break;\r\n  };\r\n}\r\n\r\nconst sortOptions = [\r\n  { key: \"default\", label: \"Nejprodávanější\" },\r\n  { key: \"newest\", label: \"Nejnovější\" },\r\n  { key: \"cheapest\", label: \"Nejlevnější\" },\r\n  { key: \"most-expensive\", label: \"Nejdražší\" },\r\n];\r\n\r\nconst sortMenuOpen = ref(false);\r\nconst currentSort = ref(\"default\");\r\n\r\nwatch(route, async () => {\r\n\r\n  const newSort = shopRouting.parseHash().find(q => q.key === 'sort')?.value[0];\r\n\r\n  if (newSort && currentSort.value != newSort) {\r\n    currentSort.value = newSort;\r\n  }\r\n\r\n}, { flush: 'pre', immediate: route.hash, deep: true });\r\n\r\nconst sort = (key) => {\r\n  currentSort.value = key;\r\n\r\n  // reset page to 1\r\n  const modifiedHash = shopRouting.stringifyHash(shopRouting.updateValueInHash('p', '', false, true));\r\n\r\n  // update sorting value in hash\r\n  const hashObj = shopRouting.updateValueInHash(\"sort\", key, false, true, modifiedHash);\r\n\r\n  // navigate to the modified hash\r\n  shopRouting.pushHash(hashObj);\r\n\r\n};\r\n\r\n</script>\r\n<style lang=\"postcss\">\r\n.warelist {\r\n\r\n  @apply relative;\r\n\r\n  &__sort {\r\n    @apply flex flex-wrap gap-1;\r\n\r\n    &__item {\r\n      @apply px-5 py-2 uppercase text-xs tracking-wide bg-neutral-100 transition-colors;\r\n\r\n      &--selected {\r\n        @apply bg-neutral-500 text-neutral-50;\r\n      }\r\n    }\r\n  }\r\n\r\n  &--standard {\r\n    & .warelist__items {\r\n      @apply grid grid-cols-1 -ml-2 -mr-2 tablet:grid-cols-3 desktop:grid-cols-4 transition-all duration-300 ease-in-out;\r\n    }\r\n  }\r\n\r\n  &--slider {\r\n    @apply mx-2;\r\n\r\n    & .warelist__items {\r\n      @apply -mx-4;\r\n    }\r\n\r\n    & .warelist__item {\r\n      @apply my-4 desktop:my-14;\r\n    }\r\n  }\r\n\r\n  &--article {\r\n    @apply mx-2;\r\n\r\n    & .warelist__items {\r\n      @apply -mx-4;\r\n    }\r\n  }\r\n\r\n  &--recent {\r\n    @apply flex-1;\r\n\r\n    & .warelist__item {\r\n      @apply flex items-center justify-center my-6 aspect-square bg-white;\r\n    }\r\n  }\r\n\r\n  &--search {\r\n    & .warelist__items {\r\n      @apply block;\r\n    }\r\n  }\r\n\r\n  &--light {\r\n    & .warelist__items {\r\n      @apply -mx-2;\r\n    }\r\n\r\n    & .warelist__item__info {\r\n      @apply justify-start my-0;\r\n    }\r\n\r\n    & .warelist__item {\r\n      &__name {\r\n        @apply mb-4 pr-4 font-bold text-base tracking-normal tablet:text-xl;\r\n      }\r\n    }\r\n  }\r\n\r\n  &--light-single {\r\n\r\n    & .warelist__item {\r\n\r\n      @apply justify-center;\r\n\r\n      &>div {\r\n        @apply !border-0;\r\n      }\r\n\r\n      &__info {\r\n        @apply justify-start my-0;\r\n      }\r\n      \r\n      &__name {\r\n        @apply font-bold text-xl tracking-normal mb-4;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__loader {\r\n    @apply absolute left-0 right-0 top-0 bottom-0 z-[2] flex items-start justify-center pt-[200px] pb-[200px] text-[3rem];\r\n  }\r\n}\r\n</style>\r\n"],"names":["props","__props","i18n","useI18n","appConfig","useAppConfig","badges","useWareBadges","emit","__emit","badge","customLabelStyles","getStyleForBadge","availability","useAvailability","business","useBusiness","analytics","useBaseAnalytics","wareAnalytics","useWareAnalytics","getAvailabilityLabel","ware","getPriceLabel","result","_a","getPriceRecLabel","selectItem","data","transformName","name","transformedName","lastSpaceIndex","utils","useUtils","shopRouting","useShopRouting","route","useRoute","cache","useCache","wareList","ref","wareListItems","shownItems","computed","totalPages","numOfPages","watch","newValue","oldValue","item","i","getPromotionItem","itemIndex","index","onMounted","previousBottom","getCarouselBreakpoints","type","sortOptions","sortMenuOpen","currentSort","newSort","q","sort","key","modifiedHash","hashObj"],"mappings":"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"}