{"version":3,"file":"BPg44Mr1.js","sources":["../../../../types/components/product-card.types.ts","../../../../components/Product/ProductTags/ProductTag.vue","../../../../components/Product/ProductTags/ProductTagElements.vue","../../../../components/Product/ProductTags/ProductTagRating.vue","../../../../components/Product/ProductTags/ProductTagDiscount.vue","../../../../components/Product/ProductTags/ProductTags.vue","../../../../types/store/category.ts","../../../../components/Product/ProductTags/ProductTagExtra.vue","../../../../types/products.ts","../../../../utils/defineLayoutOfProduct.ts","../../../../components/Product/ProductItem/ProductContent/MainDesktopColories.vue","../../../../components/Product/ProductItem/ProductContent/ProductButton.vue","../../../../components/Product/ProductItem/ProductContent/ProductButtonPage.vue","../../../../components/Product/ProductItem/ProductContent/ProductCalories.vue","../../../../components/Product/ProductItem/ProductContent/ProductModifications.vue","../../../../components/Product/ProductItem/ProductContent/ProductContent.vue","../../../../components/Product/ProductItem/ProductImage/ProductImage.vue","../../../../components/Product/ProductItem/ProductTags/ProductTag.vue","../../../../components/Product/ProductItem/ProductTags/ProductTags.vue","../../../../components/Product/ProductItem/ProductItem.vue"],"sourcesContent":["export const enum ProductDetailType {\n  Page = 'page',\n  Dialog = 'dialog',\n}\n\nexport const enum ProductType {\n  simple = 'simple',\n  selection = 'selection',\n}\n\nexport const enum ProductParentType {\n  card = 'card',\n  detail = 'detail',\n}\n\nexport type ProductTagSize = 'sm' | 'md'\n","<script setup lang=\"ts\">\nimport {\n  ProductParentType,\n  ProductTagSize,\n} from '@/types/components/product-card.types'\n\ntype Props = {\n  type: ProductParentType\n  size?: ProductTagSize\n  color?: string\n  backgroundColor?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 'md',\n  color: '',\n  backgroundColor: '',\n})\n\nconst componentClasses = [\n  'product-tag',\n  `product-tag--type-${props.type}`,\n  `product-tag--size-${props.size}`,\n]\n\nconst componentStyles = {\n  color: props.color || 'var(--ui-white)',\n  background: props.backgroundColor || 'var(--ui-violet)',\n}\n</script>\n\n<template>\n  <div :class=\"componentClasses\" :style=\"componentStyles\">\n    <slot />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-tag {\n  display: flex;\n  gap: 2px;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  border-radius: 50px;\n}\n\n.product-tag--size-sm {\n  padding: 2px 4px;\n\n  @include media('>=desktop-mini') {\n    padding: 2px 8px;\n  }\n}\n\n.product-tag--size-md {\n  padding: 4px 8px;\n}\n\n.product-tag--type-card {\n  font-size: 8px;\n  font-weight: 700;\n  line-height: 10px;\n\n  @include media('>=desktop-mini') {\n    font-size: 12px;\n    font-weight: 800;\n    line-height: 16px;\n  }\n}\n\n.product-tag--type-detail {\n  font-size: 12px;\n  font-weight: 800;\n  line-height: 16px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { NewProduct } from '@/types/api/api-v4/product'\nimport {\n  ProductParentType,\n  ProductTagSize,\n} from '@/types/components/product-card.types'\n\nimport ProductTag from '@/components/Product/ProductTags/ProductTag.vue'\n\ntype Props = {\n  product: NewProduct\n  type: ProductParentType\n  size?: ProductTagSize\n}\n\nconst props = defineProps<Props>()\n\nconst isVisible = computed(() => {\n  return (\n    props.product?.elements && props.product.category_slug?.includes('sety')\n  )\n})\n</script>\n\n<template>\n  <product-tag\n    v-if=\"isVisible\"\n    color=\"var(--ui-white)\"\n    background-color=\"rgba(var(--ui-secondary-rgb), 0.8)\"\n    :type=\"type\"\n    :size=\"size\"\n  >\n    {{ product.elements }}&nbsp;шт.\n  </product-tag>\n</template>\n","<script setup lang=\"ts\">\nimport { NewProduct } from '@/types/api/api-v4/product'\nimport {\n  ProductParentType,\n  ProductTagSize,\n} from '@/types/components/product-card.types'\n\nimport ProductTag from '@/components/Product/ProductTags/ProductTag.vue'\n\nconst MIN_RATING = 4\n\ntype Props = {\n  product: NewProduct\n  type: ProductParentType\n  size?: ProductTagSize\n}\n\nconst props = defineProps<Props>()\n\nconst componentClasses = [\n  'product-tag-rating',\n  `product-tag-rating--type-${props.type}`,\n]\n\nconst isVisible = computed(() => {\n  return props.product?.rating && props.product?.rating >= MIN_RATING\n})\n</script>\n\n<template>\n  <product-tag\n    v-if=\"isVisible\"\n    :class=\"componentClasses\"\n    color=\"var(--ui-white)\"\n    background-color=\"rgba(var(--ui-secondary-rgb), 0.8)\"\n    :type=\"type\"\n    :size=\"size\"\n  >\n    <nuxt-img src=\"/product/rating-star.svg\" alt=\"Рейтинг\" />\n\n    <span>{{ product.rating }}</span>\n  </product-tag>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-tag-rating {\n  img {\n    flex-shrink: 0;\n  }\n}\n\n.product-tag-rating--type-card {\n  img {\n    width: 10px;\n    height: 10px;\n\n    @include media('>=desktop-mini') {\n      width: 14px;\n      height: 14px;\n    }\n  }\n}\n\n.product-tag-rating--type-detail {\n  img {\n    width: 16px;\n    height: 16px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useCityStore } from '@/store/city/city'\n\nimport { NewProductModification } from '@/types/api/api-v4/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\n\nimport ProductTag from '@/components/Product/ProductTags/ProductTag.vue'\n\ntype Props = {\n  type: ProductParentType\n  currentModification: NewProductModification\n}\n\nconst props = defineProps<Props>()\n\nconst { currencySymbol } = useCityStore()\n\nconst discountValue = computed(() => {\n  const { discount, price, subprice } = props.currentModification\n\n  return discount ? Number((price - subprice).toFixed(2)) : 0\n})\n</script>\n\n<template>\n  <product-tag\n    v-if=\"discountValue\"\n    color=\"var(--ui-text-primary)\"\n    background-color=\"var(--ui-yellow)\"\n    :type=\"type\"\n  >\n    {{ discountValue }} {{ currencySymbol }}\n  </product-tag>\n</template>\n","<script setup lang=\"ts\">\nimport type {\n  NewProductModification,\n  NewProductTag,\n} from '@/types/api/api-v4/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\n\nimport ProductTag from '@/components/Product/ProductTags/ProductTag.vue'\nimport ProductTagDiscount from '@/components/Product/ProductTags/ProductTagDiscount.vue'\n\ntype Props = {\n  type: ProductParentType\n  currentModification: NewProductModification\n  mainTags: NewProductTag[]\n  additionalTags: NewProductTag[]\n}\n\nconst props = defineProps<Props>()\n\nconst filteredTags = computed(() => {\n  // По умолчанию отображаем основные теги\n  const tags = [...props.mainTags]\n\n  // Если это детальная страница товара или ДО товара, то отображаем основные и дополнительные теги\n  if (props.type === ProductParentType.detail) {\n    tags.push(...props.additionalTags)\n  }\n\n  return tags.filter(({ is_extra, hidden }) => !is_extra && !hidden)\n})\n\nconst componentClasses = computed(() => {\n  return ['product-tags', `product-tags--type-${props.type}`]\n})\n</script>\n\n<template>\n  <div :class=\"componentClasses\">\n    <slot name=\"prepend\" />\n\n    <product-tag-discount\n      :current-modification=\"currentModification\"\n      :type=\"type\"\n    />\n\n    <product-tag\n      v-for=\"(tag, index) in filteredTags\"\n      :key=\"index\"\n      :color=\"tag.hover_color\"\n      :background-color=\"tag.hover_background_color\"\n      :type=\"type\"\n    >\n      {{ tag.name }}\n    </product-tag>\n\n    <slot name=\"append\" />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-tags {\n  display: flex;\n  gap: 4px;\n}\n\n.product-tags--type-card {\n  min-height: 21px;\n  padding: 8px;\n\n  @include media('>=desktop-mini') {\n    min-height: 40px;\n    padding: 16px 16px 8px;\n  }\n}\n</style>\n","import { AxiosError } from 'axios'\n\nimport { Category } from '@/types/api/api-v3/category'\nimport { LoadState } from '@/types/main'\nimport { ErrorData } from '@/types/api/api-v3/basket'\n\nexport type CategoryState = LoadState<Category[], AxiosError<ErrorData>>\n\nexport type SimpleCategoriesState = LoadState<Category[]>\n\n// Перечисление для определения типа ивента counter-а\nexport enum SetProductType {\n  INCREASE = 'INCREASE',\n  DECREASE = 'DECREASE',\n}\n\nexport type SetProductIncludeType = 'INCREASE' | 'DECREASE'\n","<script setup lang=\"ts\">\nimport { NewProductTag } from '@/types/api/api-v4/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\n\ntype Props = {\n  mainTags: NewProductTag[]\n  additionalTags: NewProductTag[]\n  type: ProductParentType\n}\n\nconst props = defineProps<Props>()\n\nconst componentClasses = [\n  'product-tag-extra',\n  `product-tag-extra--type-${props.type}`,\n]\n\nconst filteredTag = computed(() => {\n  // По умолчанию ищем is_extra среди основных тегов\n  const tags = [...props.mainTags]\n\n  // Если это детальная страница товара или ДО товара, то ищем среди основных и дополнительных тегов\n  if (props.type === ProductParentType.detail) {\n    tags.push(...props.additionalTags)\n  }\n\n  return tags.find((tag) => tag.is_extra)\n})\n</script>\n\n<template>\n  <nuxt-img\n    v-if=\"filteredTag\"\n    :class=\"componentClasses\"\n    :src=\"filteredTag.image\"\n    :alt=\"filteredTag.name\"\n  />\n</template>\n\n<style lang=\"scss\" scoped>\n.product-tag-extra--type-card {\n  width: 12px;\n  height: 12px;\n}\n\n.product-tag-extra--type-detail {\n  width: 14px;\n  height: 14px;\n}\n</style>\n","export enum NAME_PARENT_COMPONENT {\n  MAIN_DESKTOP = 'mainDesktop',\n  MAIN_MOBILE = 'mainMobile',\n  DIALOG = 'dialog',\n  PAGE = 'page',\n}\n\nexport enum TagSize {\n  'NORMAL' = 'NORMAL',\n  'LARGE' = 'LARGE',\n  'SMALL' = 'SMALL',\n}\n","import { NAME_PARENT_COMPONENT } from '@/types/products'\n\n/**\n * Определение наименования шаблона для карточки товара\n * @param pageName - наименование страницы\n */\nexport const defineLayoutOfProduct = (pageName: string) => {\n  return <Type>(propValue: Type | undefined): undefined | Type => {\n    if (NAME_PARENT_COMPONENT.PAGE !== pageName) {\n      return\n    }\n\n    return propValue\n  }\n}\n","<script setup lang=\"ts\">\nimport { NutritionalValues } from '@/types/api/api-v3/product'\n\ntype Props = {\n  nutritionalValue: NutritionalValues\n}\n\nconst props = defineProps<Props>()\n\nconst isTooltipShow = ref(false)\n</script>\n\n<template>\n  <div class=\"product__tooltip\">\n    <div\n      class=\"product__tooltip-trigger\"\n      @mouseover=\"isTooltipShow = !isTooltipShow\"\n      @mouseout=\"isTooltipShow = !isTooltipShow\"\n    >\n      <div>КБЖУ</div>\n    </div>\n    <div\n      v-if=\"isTooltipShow\"\n      class=\"product__tooltip-content product__calories\"\n    >\n      <h4 class=\"product__calories-headline\">Пищевая ценность на 100 г</h4>\n      <table class=\"product__calories-table\">\n        <tbody>\n          <tr>\n            <td>{{ props.nutritionalValue.protein }}</td>\n            <td>{{ props.nutritionalValue.fat }}</td>\n            <td>{{ props.nutritionalValue.carbohydrate }}</td>\n            <td>{{ props.nutritionalValue.calorific }}</td>\n          </tr>\n          <tr>\n            <th>белки</th>\n            <th>жиры</th>\n            <th>углеводы</th>\n            <th>Ккал</th>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product__tooltip {\n  position: relative;\n\n  &-trigger {\n    padding: 3px 5px;\n    font-size: 9px;\n    font-weight: 800;\n    color: var(--ui-unactive-gray);\n    text-transform: uppercase;\n    cursor: pointer;\n    background-color: var(--ui-grey);\n    border-radius: 6px;\n\n    &:hover {\n      color: var(--ui-text-primary);\n      background-color: $carousel-dot-background;\n    }\n  }\n\n  &-content {\n    position: absolute;\n    bottom: 120%;\n    left: -130%;\n    z-index: 9;\n    padding: 22px 15px;\n    background-color: #000;\n    border-radius: 20px;\n  }\n\n  .product__calories {\n    &-headline {\n      margin-bottom: 5px;\n      font-size: 12px;\n      font-weight: 800;\n      color: var(--ui-white);\n      text-align: center;\n    }\n\n    &-table {\n      font-size: 12px;\n      color: var(--ui-white);\n      border-spacing: 10px 0;\n\n      tr {\n        td {\n          height: max-content;\n          font-size: 12px;\n          font-weight: 800;\n        }\n\n        th {\n          font-size: 12px;\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\ndefineProps({\n  productQuantity: {\n    type: Number,\n    required: true,\n  },\n  disabled: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n})\n\nconst emit = defineEmits([\n  'updateProductQuantity',\n  'addToCart',\n  'setIncreaseProduct',\n  'setDecreaseProduct',\n])\n\nconst { isMobileOrTablet } = useDevice()\n\nonMounted(() => {\n  emit('updateProductQuantity')\n})\n\nconst addToCart = () => {\n  emit('addToCart')\n}\n\nconst setIncreaseProduct = () => {\n  emit('setIncreaseProduct')\n}\n\nconst setDecreaseProduct = () => {\n  emit('setDecreaseProduct')\n}\n</script>\n\n<template>\n  <div class=\"product-button\">\n    <the-button\n      v-if=\"!productQuantity\"\n      class=\"product-button__action\"\n      :size=\"isMobileOrTablet ? 'xs' : 'sm'\"\n      font=\"sm\"\n      radius=\"lg\"\n      :disabled=\"disabled\"\n      @click=\"addToCart\"\n    >\n      Хочу!\n    </the-button>\n\n    <the-counter\n      v-else\n      class=\"product-button__counter\"\n      :value=\"productQuantity\"\n      @on-increase=\"setIncreaseProduct\"\n      @on-decrease=\"setDecreaseProduct\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-button {\n  &__action {\n    width: 108px;\n\n    @include media('<=tablet') {\n      width: 80px;\n    }\n  }\n\n  &__counter {\n    @include media('<=tablet') {\n      min-width: 80px !important;\n\n      :deep(.app-button) {\n        min-width: 30px !important;\n        min-height: 30px !important;\n      }\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\ntype Props = {\n  productQuantity: number\n  disabled?: boolean\n}\ndefineProps<Props>()\n\nconst emit = defineEmits([\n  'updateProductQuantity',\n  'addToCart',\n  'setIncreaseProduct',\n  'setDecreaseProduct',\n])\n\nconst { isDesktop } = useDevice()\n\nonMounted(() => {\n  emit('updateProductQuantity')\n})\n\nconst addToCart = () => emit('addToCart')\n\nconst setIncreaseProduct = () => emit('setIncreaseProduct')\n\nconst setDecreaseProduct = () => emit('setDecreaseProduct')\n\nconst sizeButton = computed(() => (!isDesktop ? 'sm' : 'md'))\n</script>\n\n<template>\n  <div class=\"action\">\n    <the-button\n      v-if=\"!productQuantity\"\n      class=\"action__button\"\n      :disabled=\"disabled\"\n      :size=\"sizeButton\"\n      :font=\"sizeButton\"\n      radius=\"lg\"\n      @click=\"addToCart\"\n    >\n      Хочу!\n    </the-button>\n    <the-counter\n      v-else\n      class=\"action__counter\"\n      :value=\"productQuantity\"\n      :size=\"sizeButton\"\n      @on-increase=\"setIncreaseProduct\"\n      @on-decrease=\"setDecreaseProduct\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.action__button {\n  width: 160px;\n\n  @include media('<=desktop-mini') {\n    width: 108px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { PropType } from 'vue'\n\n/* Types */\nimport { NutritionalValues } from '@/types/api/api-v3/product'\n\nconst props = defineProps({\n  nutritionalValue: {\n    type: Object as PropType<NutritionalValues>,\n    required: true,\n  },\n  isProductPage: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n})\n</script>\n\n<template>\n  <div class=\"product__content-calories\">\n    <table>\n      <tbody>\n        <tr :class=\"{ 'large--font': props.isProductPage }\">\n          <th>КБЖУ</th>\n          <th>{{ `${props.nutritionalValue.protein} г` }}</th>\n          <th>{{ `${props.nutritionalValue.fat} г` }}</th>\n          <th>{{ `${props.nutritionalValue.carbohydrate} г` }}</th>\n          <th>{{ props.nutritionalValue.calorific }}</th>\n        </tr>\n        <tr :class=\"{ 'large--font': props.isProductPage }\">\n          <td>на 100 г</td>\n          <td>белки</td>\n          <td>жиры</td>\n          <td>углеводы</td>\n          <td>кКал</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product__content {\n  &-calories {\n    @include media('<=tablet') {\n      width: 264px;\n      margin-top: 0;\n    }\n\n    table {\n      width: 100%;\n      color: var(--ui-dark-grey);\n      text-align: left;\n      border-collapse: collapse;\n\n      tr {\n        th {\n          height: max-content;\n          font-size: 12px;\n          font-weight: 600;\n          line-height: 19px;\n        }\n\n        td {\n          font-size: 12px;\n          font-weight: 600;\n          line-height: 19px;\n        }\n      }\n\n      th:first-child,\n      td:first-child {\n        border-left: none;\n      }\n\n      .large--font {\n        td {\n          font-size: 16px;\n        }\n        th {\n          font-size: 16px;\n        }\n      }\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\n/* Types */\nimport { Modification } from '@/types/api/api-v3/product'\n\ntype Props = {\n  modifications: Modification[]\n}\n\nconst props = defineProps<Props>()\n\nconst emit = defineEmits(['changeModification'])\n\nconst { isDesktop } = useDevice()\n\nconst productModificationId = ref(props.modifications[0]?.id)\n\nconst tabsSize = computed(() => (isDesktop ? 'md' : 'sm'))\n\nconst changeModification = (modificationId: number) => {\n  productModificationId.value = modificationId\n\n  emit('changeModification', modificationId)\n}\n</script>\n\n<template>\n  <the-tabs\n    class=\"modification__tabs\"\n    :size=\"tabsSize\"\n    :model-value=\"productModificationId\"\n  >\n    <the-tabs-item\n      v-for=\"modification in modifications\"\n      :key=\"modification.id\"\n      :value=\"modification.id\"\n      @click=\"changeModification(modification.id)\"\n    >\n      {{ modification.mode }}\n    </the-tabs-item>\n  </the-tabs>\n</template>\n\n<style lang=\"scss\" scoped>\n.modification__tabs {\n  max-width: 100%;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { defineLayoutOfProduct } from '@/utils/defineLayoutOfProduct'\n\nimport { useProductCounter } from '@/composables/useProductCounter'\n\nimport { useAppStore } from '@/store/app/app'\nimport { SnackbarType } from '@/store/app/app.types'\nimport { useBasketStore } from '@/store/basket/basket'\nimport { useCityStore } from '@/store/city/city'\nimport { useToggleStore } from '@/store/toggle/toggle'\n\nimport { Modification, Product } from '@/types/api/api-v3/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\nimport { EcommerceEventName } from '@/types/plugins/yandex-metrika'\nimport { NAME_PARENT_COMPONENT } from '@/types/products'\nimport { SetProductIncludeType, SetProductType } from '@/types/store/category'\n\nimport AppMeasureUnits from '@/components/App/AppMeasureUnits.vue'\nimport MainDesktopColories from '@/components/Product/ProductItem/ProductContent/MainDesktopColories.vue'\nimport ProductButton from '@/components/Product/ProductItem/ProductContent/ProductButton.vue'\nimport ProductButtonPage from '@/components/Product/ProductItem/ProductContent/ProductButtonPage.vue'\nimport ProductCalories from '@/components/Product/ProductItem/ProductContent/ProductCalories.vue'\nimport ProductCompound from '@/components/Product/ProductItem/ProductContent/ProductCompound.vue'\nimport ProductModifications from '@/components/Product/ProductItem/ProductContent/ProductModifications.vue'\nimport ProductTagExtra from '@/components/Product/ProductTags/ProductTagExtra.vue'\n\ntype Props = {\n  product: Product\n  currentModification: Modification\n  parentComponent: string\n  wrapperAttrs: object\n  wrapperComponent: string\n  isMainPage: boolean\n}\nconst props = defineProps<Props>()\n\nconst emit = defineEmits(['openDialogProduct', 'changeModification'])\n\nconst cityStore = useCityStore()\nconst basketStore = useBasketStore()\nconst { showSnackbar } = useAppStore()\nconst { newProductCardEnabled } = useToggleStore()\n\nconst { isDesktop } = useDevice()\n\nconst vOnOpenDialog = computed(() =>\n  props.isMainPage ? { click: openDialogProduct } : {},\n)\n\nconst openDialogProduct = () => {\n  emit('openDialogProduct')\n}\n\nconst isTitleProduct = computed(() => {\n  if (props.product.modifications.length >= 2) return `${props.product.name}`\n  else\n    return props.product.modifications[0].mode\n      ? `${props.product.name}: ${props.product.modifications[0].mode}`\n      : `${props.product.name}`\n})\n\nconst isShowDescription = computed(\n  () => NAME_PARENT_COMPONENT.MAIN_MOBILE !== props.parentComponent,\n)\n\nconst isHighLight = computed(() => {\n  if (newProductCardEnabled) return false\n\n  return props.product.tags.find((item) => item.as_highlight)\n})\n\nconst isVisibleProductCalories = computed(\n  () =>\n    NAME_PARENT_COMPONENT.DIALOG === props.parentComponent ||\n    NAME_PARENT_COMPONENT.PAGE === props.parentComponent,\n)\n\nconst currencyCode = computed(() => cityStore.currencyCode)\n\nconst currencySymbol = computed(() => cityStore.currencySymbol)\n\nconst quantityInProductBasket = computed(() => {\n  return (\n    basketStore.isProductInBasket(props.currentModification.id)?.quantity || 0\n  )\n})\n\nconst productId = computed(() => props.currentModification.id)\n\nconst isCompoundVisible = computed(() => {\n  return (\n    props.product?.marking_composition &&\n    (props.parentComponent === NAME_PARENT_COMPONENT.DIALOG ||\n      props.parentComponent === NAME_PARENT_COMPONENT.PAGE)\n  )\n})\n\nconst showExtraTag = computed(() => {\n  return (\n    props.product?.main_tags &&\n    props.product?.additional_tags &&\n    newProductCardEnabled\n  )\n})\n\nconst {\n  basketError,\n  quantitySelectedProducts,\n  setProductQuantity,\n  decreaseQuantity,\n  increaseQuantity,\n} = useProductCounter(productId, props.currentModification)\n\nconst { pushMetrics } = useSendMetricsOfProduct(props.currentModification)\n\nconst onUpdateProductQuantity = () => {\n  let quantity = quantityInProductBasket.value\n\n  if (NAME_PARENT_COMPONENT.DIALOG === props.parentComponent) {\n    quantity = quantitySelectedProducts.value\n  }\n\n  setProductQuantity(quantity)\n}\n\nconst changeModification = (modificationId: number) => {\n  if (\n    newProductCardEnabled &&\n    props.parentComponent === NAME_PARENT_COMPONENT.DIALOG\n  ) {\n    setTimeout(() => {\n      emit('changeModification', modificationId)\n    }, 100)\n\n    return\n  }\n\n  // TODO: Удалить после того как все города перейдут на новый дизайн карточек\n  // await, чтобы работать дальше с измененным currentModification\n  emit('changeModification', modificationId)\n\n  // ищем кол- во товара по модификации в корзине и меняем в случае, если он есть\n  setProductQuantity(quantityInProductBasket.value)\n}\n\nconst addToCart = async (productId: number) => {\n  setProductQuantity(quantitySelectedProducts.value + 1) // текущее + 1\n\n  await basketStore.addProduct(productId)\n\n  if (!basketError.value) {\n    pushMetrics(EcommerceEventName.ADD, 1)\n\n    return\n  }\n\n  setProductQuantity(quantityInProductBasket.value) // при ошибке возвращаем кол-во с сервера\n\n  showSnackbar({\n    message: 'Что-то пошло не так',\n    type: SnackbarType.MESSAGE,\n  })\n}\n\nconst setProduct = (type: SetProductIncludeType) => {\n  // Проверяем, какая кнопка counter-а была нажата и высчитываем измененнное кол- во продукта\n  if (type === SetProductType.DECREASE) {\n    decreaseQuantity()\n    return\n  }\n\n  increaseQuantity()\n}\n\nconst getProductMicrolayouts = defineLayoutOfProduct(props.parentComponent)\n\nconst itemPropProductTitle = getProductMicrolayouts('name')\nconst itemPropProductDescription = getProductMicrolayouts('description')\n</script>\n\n<template>\n  <div class=\"product__content\">\n    <component\n      :is=\"wrapperComponent\"\n      class=\"product__content-title\"\n      v-bind=\"wrapperAttrs\"\n      v-on=\"vOnOpenDialog\"\n      @click.prevent\n    >\n      <h1\n        v-if=\"NAME_PARENT_COMPONENT.PAGE === parentComponent\"\n        class=\"product__content-headline\"\n        :itemprop=\"itemPropProductTitle\"\n      >\n        {{ isTitleProduct }}\n      </h1>\n\n      <div\n        v-else\n        class=\"product__content-headline\"\n        :itemprop=\"itemPropProductTitle\"\n        v-on=\"vOnOpenDialog\"\n      >\n        {{ isTitleProduct }}\n      </div>\n\n      <product-tag-extra\n        v-if=\"showExtraTag\"\n        class=\"product__content-extra-tag\"\n        :main-tags=\"product.main_tags\"\n        :additional-tags=\"product.additional_tags\"\n        :type=\"ProductParentType.detail\"\n      />\n    </component>\n\n    <div\n      v-if=\"isHighLight && NAME_PARENT_COMPONENT.PAGE === parentComponent\"\n      class=\"product__content-sale\"\n    >\n      <span\n        class=\"product__content-sale--text\"\n        :style=\"{ 'background-color': isHighLight.hover_background_color }\"\n      >\n        {{ isHighLight.name }}\n      </span>\n    </div>\n\n    <component\n      :is=\"wrapperComponent\"\n      v-if=\"isShowDescription\"\n      class=\"product__content-description\"\n      v-bind=\"wrapperAttrs\"\n      v-on=\"vOnOpenDialog\"\n    >\n      <div\n        :itemprop=\"itemPropProductDescription\"\n        v-html=\"currentModification.description\"\n      />\n    </component>\n\n    <product-compound\n      v-if=\"isCompoundVisible\"\n      :marking-composition=\"product?.marking_composition\"\n      class=\"product__content-compound\"\n    />\n\n    <product-calories\n      v-if=\"isVisibleProductCalories\"\n      class=\"product__content-calories\"\n      :is-product-page=\"\n        isDesktop && NAME_PARENT_COMPONENT.PAGE === parentComponent\n      \"\n      :nutritional-value=\"currentModification.nutritional_values\"\n    />\n\n    <div\n      v-if=\"product.modifications.length >= 2\"\n      class=\"product__content-modifications\"\n      tabindex=\"-1\"\n    >\n      <product-modifications\n        :modifications=\"product.modifications\"\n        @change-modification=\"changeModification\"\n      />\n    </div>\n\n    <template v-if=\"NAME_PARENT_COMPONENT.PAGE === parentComponent\">\n      <div\n        v-for=\"modificationItem in product.modifications\"\n        :key=\"`offer_${modificationItem.id}`\"\n        class=\"hidden\"\n        itemprop=\"offers\"\n        itemscope\n        itemtype=\"http://schema.org/Offer\"\n      >\n        <meta itemprop=\"price\" :content=\"`${modificationItem.price}`\" />\n        <meta itemprop=\"priceCurrency\" :content=\"currencyCode\" />\n      </div>\n    </template>\n    <div class=\"product__content-price\">\n      <p\n        :class=\"{\n          'product__content-price--new': currentModification.subprice,\n        }\"\n      >\n        {{ currentModification.price }} {{ currencySymbol }}\n      </p>\n\n      <div\n        v-if=\"currentModification.discount\"\n        class=\"product__content-price--discount\"\n      >\n        {{ currentModification.subprice }} {{ currencySymbol }}\n      </div>\n    </div>\n\n    <div class=\"product__content-actions\">\n      <the-button\n        v-if=\"\n          !basketStore.isLoaded &&\n          NAME_PARENT_COMPONENT.DIALOG !== parentComponent\n        \"\n        class=\"button--loading\"\n        loading\n        disabled\n        radius=\"lg\"\n        :size=\"!isDesktop ? 'sm' : 'md'\"\n      />\n      <product-button-page\n        v-else-if=\"NAME_PARENT_COMPONENT.PAGE === parentComponent\"\n        :product-quantity=\"quantitySelectedProducts\"\n        @add-to-cart=\"addToCart(currentModification.id)\"\n        @set-increase-product=\"setProduct(SetProductType.INCREASE)\"\n        @set-decrease-product=\"setProduct(SetProductType.DECREASE)\"\n        @update-product-quantity=\"onUpdateProductQuantity\"\n      />\n      <product-button\n        v-else\n        :product-quantity=\"quantitySelectedProducts\"\n        @add-to-cart=\"addToCart(currentModification.id)\"\n        @set-increase-product=\"setProduct(SetProductType.INCREASE)\"\n        @set-decrease-product=\"setProduct(SetProductType.DECREASE)\"\n        @update-product-quantity=\"onUpdateProductQuantity\"\n      />\n    </div>\n\n    <div class=\"product__content-weight\">\n      <app-measure-units\n        :weight=\"currentModification.weight\"\n        :volume-in-liters=\"currentModification.volume_in_liters\"\n        :measure=\"currentModification.measure\"\n      />\n\n      <main-desktop-colories\n        v-if=\"NAME_PARENT_COMPONENT.MAIN_DESKTOP === parentComponent\"\n        class=\"product__content-calories\"\n        :nutritional-value=\"currentModification.nutritional_values\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.product__content {\n  &-title {\n    grid-area: title;\n  }\n\n  &-sale {\n    grid-area: sale;\n  }\n\n  &-description {\n    grid-area: description;\n  }\n\n  &-modifications {\n    grid-area: modifications;\n  }\n\n  &-price {\n    grid-area: price;\n  }\n\n  &-actions {\n    grid-area: actions;\n  }\n\n  &-weight {\n    grid-area: weight;\n  }\n\n  &-calories {\n    grid-area: calories;\n  }\n\n  &-compound {\n    grid-area: compound;\n  }\n\n  &-components {\n    grid-area: components;\n  }\n\n  &-headline {\n    display: inline;\n  }\n\n  &-extra-tag {\n    margin-left: 4px;\n\n    @include media('>=desktop-mini') {\n      margin-left: 8px;\n    }\n  }\n}\n\n.hidden {\n  display: none;\n}\n\n@mixin product-main-desktop {\n  .product__content {\n    display: grid;\n    grid-template-areas:\n      'title title'\n      'description description'\n      'modifications modifications'\n      'price actions'\n      'weight calories';\n    grid-template-rows: max-content 1fr max-content;\n    width: 100%;\n\n    .product__control {\n      margin-top: 200px;\n    }\n\n    &-title {\n      display: flex;\n      align-items: flex-start;\n      margin: 16px 0 16px;\n      font-size: 16px;\n      font-weight: 800;\n      line-height: 20px;\n      color: #2c2f39;\n\n      h1 {\n        font-size: 16px;\n        font-weight: 800;\n        line-height: 20px;\n        color: #2c2f39;\n      }\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    &-description {\n      width: 100%;\n      margin-bottom: 27px;\n      overflow: hidden;\n      font-size: 14px;\n      font-weight: 500;\n      line-height: 17px;\n      color: var(--ui-dark-grey);\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    &-modifications {\n      width: 100%;\n      padding-bottom: 24px;\n    }\n\n    &-price {\n      display: flex;\n      align-items: center;\n      color: var(--ui-text-primary);\n      white-space: nowrap;\n\n      &--new {\n        color: var(--ui-primary);\n      }\n\n      p {\n        margin: 2px 0 0 0;\n        font-size: 22px;\n        font-weight: 800;\n        line-height: 26px;\n      }\n\n      &--discount {\n        margin-left: 10px;\n        font-size: 16px;\n        font-weight: 600;\n        line-height: 19px;\n        text-decoration: line-through;\n      }\n    }\n\n    &-actions {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      min-height: 40px;\n\n      .button--loading {\n        width: 108px !important;\n        height: 40px !important;\n        padding: 12px 35px;\n        font-weight: 800;\n        border-radius: 40px;\n        box-shadow: 0 4px 20px rgb(255 80 0 / 16%);\n      }\n    }\n\n    &-weight {\n      position: relative;\n      display: flex;\n      gap: 0 10px;\n      align-items: center;\n      padding-top: 12px;\n      font-size: 14px;\n      font-weight: 600;\n      line-height: 16px;\n      color: var(--ui-dark-grey);\n    }\n  }\n}\n\n@mixin product-main-mobile {\n  .product__content {\n    display: grid;\n    grid-template-areas:\n      'title title'\n      'modifications modifications'\n      'price price'\n      'weight actions'\n      'compound compound';\n    grid-template-rows: max-content 1fr max-content;\n    width: 100%;\n\n    &-title {\n      display: flex;\n      align-items: center;\n      height: 44px;\n      margin-bottom: 10px;\n      font-size: 12px;\n      font-weight: 800;\n      line-height: 14px;\n      color: var(--ui-text-primary);\n      border-radius: 20px;\n\n      h1 {\n        font-size: 12px;\n        font-weight: 800;\n        line-height: 14px;\n        color: var(--ui-text-primary);\n      }\n    }\n\n    &-modifications {\n      width: 100%;\n      max-width: 100%;\n      padding-bottom: 10px;\n    }\n\n    &-price {\n      display: flex;\n      align-items: center;\n      padding-bottom: 10px;\n\n      &--new {\n        color: var(--ui-primary);\n      }\n\n      p {\n        margin: 0;\n        font-size: 14px;\n        font-weight: 800;\n        line-height: 17px;\n      }\n\n      &--discount {\n        margin-left: 10px;\n        font-size: 12px;\n        font-weight: 600;\n        line-height: 14px;\n        text-decoration: line-through;\n      }\n    }\n\n    &-control {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      width: -webkit-fill-available;\n    }\n\n    &-weight {\n      position: relative;\n      display: grid;\n      gap: 0 10px;\n      align-items: center;\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 14px;\n      color: var(--ui-dark-grey);\n    }\n\n    &-actions {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      height: 30px;\n\n      .button--loading {\n        @include media('<desktop-mini') {\n          width: 80px !important;\n          height: 30px !important;\n          min-height: 30px;\n          padding: 8px 24px;\n          font-size: 12px;\n          font-weight: 800;\n          line-height: 14px;\n          border-radius: 40px;\n          box-shadow: 0 4px 20px rgba(255, 80, 0, 0.16);\n        }\n      }\n    }\n  }\n}\n\n@mixin product-dialog {\n  .product__content {\n    display: grid;\n    grid-template-areas:\n      'title title'\n      'description description'\n      'compound compound'\n      'calories calories'\n      'modifications modifications'\n      'price actions'\n      'weight weight';\n    width: 280px;\n    margin: auto 0;\n\n    @include media('<desktop') {\n      grid-template-areas:\n        'title title'\n        'description description'\n        'compound compound'\n        'modifications modifications'\n        'price actions'\n        'weight weight'\n        'calories calories'\n        'components components';\n      width: 100%;\n\n      &-title {\n        margin-top: 24px;\n        font-size: 16px;\n        line-height: 19px;\n\n        h1 {\n          font-size: 16px;\n          line-height: 19px;\n        }\n\n        @include media('<tablet') {\n          margin-bottom: 16px;\n        }\n      }\n\n      &-calories {\n        max-width: 264px;\n        margin-top: 24px;\n      }\n\n      &-description {\n        margin-bottom: 0;\n      }\n    }\n\n    &-title {\n      margin-bottom: 24px;\n      font-size: 22px;\n      font-weight: 800;\n      line-height: 26px;\n      color: var(--ui-text-primary);\n      word-break: break-word;\n\n      h1 {\n        font-size: 22px;\n        font-weight: 800;\n        line-height: 26px;\n        color: var(--ui-text-primary);\n        word-break: break-word;\n      }\n    }\n\n    &-description {\n      width: auto;\n      margin-bottom: 24px;\n      overflow: hidden;\n      font-size: 14px;\n      font-weight: 600;\n      line-height: 17px;\n      color: var(--ui-dark-grey);\n    }\n\n    &-components {\n      overflow: hidden;\n    }\n\n    &-modifications {\n      margin: 24px 20px 0;\n\n      @include media('>=desktop-mini') {\n        margin: 24px 0 0;\n      }\n    }\n\n    &-compound {\n      margin: 0 0 10px;\n    }\n\n    &-price {\n      display: flex;\n      align-items: center;\n      margin-top: 24px;\n      color: var(--ui-text-primary);\n\n      &--new {\n        color: var(--ui-primary);\n      }\n\n      p {\n        margin: 0;\n        font-size: 22px;\n        font-weight: 800;\n        line-height: 26px;\n      }\n\n      &--discount {\n        margin-left: 10px;\n        font-size: 16px;\n        font-weight: 600;\n        line-height: 19px;\n        text-decoration: line-through;\n      }\n    }\n\n    &-actions {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      margin-top: 24px;\n    }\n\n    &-weight {\n      padding-top: 10px;\n      font-size: 14px;\n      font-weight: 600;\n      line-height: 16px;\n      color: var(--ui-dark-grey);\n    }\n\n    @include media('<=desktop-mini') {\n      &-title {\n        margin: 24px 48px 24px 48px;\n      }\n      &-description {\n        margin: 0 48px 24px 48px;\n      }\n\n      &-price,\n      &-calories {\n        margin: 24px 48px 0 48px;\n      }\n      &-actions {\n        margin: 24px 48px 0 0;\n      }\n\n      &-weight {\n        margin: 0 48px 0 48px;\n      }\n\n      &-compound {\n        margin-left: 0px;\n      }\n    }\n\n    @include media('<=tablet') {\n      &-title {\n        margin: 24px 20px 24px 20px;\n      }\n\n      &-description {\n        margin: 0 20px 24px 20px;\n      }\n\n      &-price,\n      &-calories {\n        margin: 24px 20px 0 20px;\n      }\n\n      &-compound {\n        margin-left: 20px;\n      }\n\n      &-actions {\n        margin: 24px 20px 0 0;\n      }\n      &-weight {\n        margin: 0 20px 0 20px;\n      }\n    }\n  }\n}\n\n@mixin product-page {\n  .product__content {\n    display: grid;\n    grid-template-areas:\n      'title title'\n      'sale sale'\n      'description description'\n      'compound compound'\n      'calories calories'\n      'modifications modifications'\n      'price actions'\n      'weight actions';\n\n    @include media('>=tablet', '<desktop') {\n      grid-template-areas:\n        'sale sale'\n        'title title'\n        'modifications modifications'\n        'price actions'\n        'weight actions'\n        'compound compound'\n        'description description'\n        'calories calories';\n    }\n\n    @include media('<tablet') {\n      grid-template-areas:\n        'sale sale'\n        'title title'\n        'description description'\n        'modifications modifications'\n        'price actions'\n        'weight actions'\n        'compound compound'\n        'calories calories';\n    }\n\n    &-title {\n      margin-bottom: 24px;\n      font-size: 22px;\n      font-weight: 800;\n\n      h1 {\n        font-size: 22px;\n        font-weight: 800;\n      }\n\n      @include media('<desktop') {\n        margin-bottom: 16px;\n        font-size: 16px;\n\n        h1 {\n          font-size: 16px;\n        }\n      }\n    }\n\n    &-description {\n      margin: 40px 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 19px;\n      color: var(--ui-dark-grey);\n\n      @include media('<desktop') {\n        margin: 24px 0;\n        font-size: 14px;\n      }\n\n      @include media('<tablet') {\n        margin-bottom: 24px;\n        font-size: 12px;\n      }\n    }\n\n    &-sale {\n      width: max-content;\n\n      @include media('<=desktop') {\n        margin-bottom: 24px;\n      }\n\n      &--text {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 5px 10px;\n        font-size: 12px;\n        font-weight: 700;\n        line-height: 14px;\n        color: var(--ui-white);\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        background: #00c304;\n        border-radius: 20px;\n      }\n    }\n\n    &-calories {\n      max-width: 80%;\n      margin-bottom: 40px;\n      font-size: 22px !important;\n\n      @include media('<desktop') {\n        max-width: 260px;\n        margin: 0;\n      }\n\n      @include media('<tablet') {\n        margin-top: 24px;\n      }\n    }\n\n    &-modifications {\n      margin-bottom: 40px;\n\n      @include media('<desktop') {\n        margin-bottom: 24px;\n      }\n    }\n\n    &-compound {\n      margin-bottom: 20px;\n    }\n\n    &-actions {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n\n      .button--loading {\n        width: 177px;\n\n        @include media('<desktop-mini') {\n          width: 108px;\n        }\n      }\n    }\n\n    &-price {\n      display: flex;\n      align-items: center;\n\n      &--new {\n        color: var(--ui-primary);\n      }\n\n      p {\n        margin: 0;\n        font-size: 28px;\n        font-weight: 800;\n        line-height: 33px;\n\n        @include media('<desktop') {\n          font-size: 22px;\n          line-height: 26px;\n        }\n      }\n\n      &--discount {\n        margin-left: 10px;\n        font-size: 20px;\n        font-weight: 600;\n        line-height: 23px;\n        text-decoration: line-through;\n\n        @include media('<desktop') {\n          font-size: 16px;\n          line-height: 19px;\n        }\n      }\n    }\n\n    &-weight {\n      display: flex;\n      align-items: center;\n      margin-top: 10px;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--ui-dark-grey);\n\n      @include media('<desktop') {\n        font-size: 14px;\n      }\n    }\n  }\n}\n\n.product--main-desktop {\n  @include product-main-desktop();\n}\n\n.product--main-mobile {\n  @include product-main-mobile;\n}\n\n.product--dialog {\n  @include product-dialog;\n}\n\n.product--page {\n  @include product-page;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { defineLayoutOfProduct } from '@/utils/defineLayoutOfProduct'\n\nimport { useCityStore } from '@/store/city/city'\nimport { useToggleStore } from '@/store/toggle/toggle'\n\nimport { Modification, Product } from '@/types/api/api-v3/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\nimport { NAME_PARENT_COMPONENT } from '@/types/products'\n\nimport ProductTagElements from '@/components/Product/ProductTags/ProductTagElements.vue'\nimport ProductTagRating from '@/components/Product/ProductTags/ProductTagRating.vue'\nimport ProductTagsNew from '@/components/Product/ProductTags/ProductTags.vue'\n\nconst emit = defineEmits(['openDialogProduct'])\n\ntype Props = {\n  product: Product\n  currentModification: Modification\n  parentComponent: string\n  wrapperAttrs: Record<string, unknown>\n  wrapperComponent: string\n  isMainPage: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  wrapperComponent: '',\n})\n\nconst { isDesktop, isMobileOrTablet } = useDevice()\n\nconst {\n  cityInfo: { padeg },\n} = useCityStore()\nconst { newProductCardEnabled } = useToggleStore()\n\nconst productTitle = computed(() => {\n  if (props.product.name === props.currentModification.name) {\n    return `Заказать \"${props.product.name}\" с доставкой в ${padeg?.pred} от ресторана Farfor`\n  }\n  return `Заказать \"${props.product.name} ${props.currentModification.name}\" с доставкой в ${padeg?.pred} от ресторана Farfor`\n})\n\nconst isImageCrashed = ref(false)\n\nconst checkVisibleQuantity = computed(() =>\n  Boolean(\n    props.product.elements &&\n      props.product.category_slug?.includes('sety') &&\n      !newProductCardEnabled,\n  ),\n)\n\nconst isHighLight = computed(() => {\n  if (newProductCardEnabled) return false\n\n  return props.product.tags.find((item) => item.as_highlight)\n})\n\nconst isShowDiscount = computed(() => {\n  return !!props.currentModification.discount && !newProductCardEnabled\n})\n\nconst showNewTags = computed(() => {\n  return newProductCardEnabled && props.product.main_tags && isDesktop\n})\n\nconst productImageClasses = computed(() => {\n  return [\n    'product__image',\n    {\n      'product__image--mobile':\n        NAME_PARENT_COMPONENT.DIALOG === props.parentComponent &&\n        isMobileOrTablet,\n      'product__image--dialog-desktop':\n        NAME_PARENT_COMPONENT.DIALOG === props.parentComponent && isDesktop,\n    },\n  ]\n})\n\nconst openDialogProduct = () => {\n  emit('openDialogProduct')\n}\n\nconst getProductMicrolayouts = defineLayoutOfProduct(props.parentComponent)\n\nconst itemTypeProductItem = getProductMicrolayouts('image')\n</script>\n\n<template>\n  <component\n    :is=\"wrapperComponent\"\n    :class=\"productImageClasses\"\n    v-bind=\"wrapperAttrs\"\n    v-on=\"isMainPage ? { click: openDialogProduct } : {}\"\n    @click.prevent\n  >\n    <nuxt-img\n      v-if=\"product.image && !isImageCrashed\"\n      :src=\"product.image\"\n      :alt=\"product.name\"\n      :title=\"productTitle\"\n      :itemprop=\"itemTypeProductItem\"\n      class=\"image\"\n      loading=\"lazy\"\n      format=\"webp\"\n      width=\"100%\"\n      height=\"100%\"\n      @error=\"isImageCrashed = true\"\n    />\n\n    <nuxt-img\n      v-else\n      :alt=\"product.name\"\n      :title=\"productTitle\"\n      src=\"/no-image-category.webp\"\n      format=\"webp\"\n      width=\"100%\"\n      height=\"100%\"\n      loading=\"lazy\"\n    />\n\n    <div v-if=\"checkVisibleQuantity\" class=\"product__image-quantity\">\n      {{ product.elements }} шт.\n    </div>\n\n    <span v-if=\"isShowDiscount\" class=\"product__image-discount\">\n      -{{ currentModification.discount }}%\n    </span>\n\n    <template v-if=\"NAME_PARENT_COMPONENT.DIALOG === parentComponent\">\n      <div\n        v-if=\"isHighLight\"\n        :style=\"{ 'background-color': isHighLight.hover_background_color }\"\n        class=\"product__image-sale\"\n      >\n        {{ isHighLight.name }}\n      </div>\n    </template>\n\n    <product-tags-new\n      v-if=\"showNewTags\"\n      class=\"product__image-tags\"\n      :type=\"ProductParentType.detail\"\n      :current-modification=\"currentModification\"\n      :main-tags=\"product.main_tags\"\n      :additional-tags=\"product.additional_tags\"\n    >\n      <template #prepend>\n        <product-tag-elements\n          :product=\"product\"\n          :type=\"ProductParentType.detail\"\n        />\n\n        <product-tag-rating\n          :product=\"product\"\n          :type=\"ProductParentType.detail\"\n        />\n      </template>\n    </product-tags-new>\n  </component>\n</template>\n\n<style scoped lang=\"scss\">\n.product__image {\n  img {\n    display: block;\n    width: 100%;\n    border-radius: 20px;\n  }\n\n  &-tags {\n    @include media('>=desktop-mini') {\n      position: absolute;\n      top: 0;\n      left: 0;\n      max-width: 100%;\n      overflow: hidden;\n    }\n  }\n}\n\n@mixin quantity {\n  position: absolute;\n  right: 0;\n  display: flex;\n  justify-content: center;\n  padding: 3px 8px;\n  font-size: 12px;\n  font-weight: 800;\n  color: var(--ui-white);\n  background: var(--ui-text-primary);\n  border-radius: 200px;\n}\n\n@mixin quantity-tablet {\n  width: initial;\n  padding: 2px 4px;\n  margin-top: 24px;\n  font-size: 10px;\n  line-height: 12px;\n}\n\n@mixin discount-styles {\n  position: absolute;\n  top: 0;\n  right: 0;\n  font-weight: 800;\n  color: #000;\n  background: var(--ui-yellow);\n}\n\n@mixin product-main-desktop {\n  .product__image {\n    position: relative;\n    grid-area: 1 / 1 / 2 / 3;\n    height: max-content;\n    min-height: 187px;\n    max-height: 270px;\n    transition: 0.2s ease-in;\n\n    &:hover {\n      cursor: pointer;\n      transition: 0.2s ease-in;\n      transform: translateY(5px);\n    }\n  }\n\n  .product__image-quantity {\n    @include quantity;\n\n    bottom: 18px;\n\n    @include media('<=tablet') {\n      @include quantity-tablet;\n    }\n  }\n\n  .product__image-discount {\n    @include discount-styles;\n\n    padding: 6px 12px;\n    font-size: 12px;\n    line-height: 14px;\n    border-radius: 20px;\n  }\n}\n\n@mixin product-main-mobile {\n  .product__image {\n    position: relative;\n    grid-area: 1 / 1 / 2 / 2;\n    height: max-content;\n    min-height: 100px;\n    max-height: 270px;\n    transition: 0.2s ease-in;\n  }\n\n  .product__image-quantity {\n    @include quantity;\n\n    bottom: 10px;\n\n    @include media('<=tablet') {\n      @include quantity-tablet;\n    }\n  }\n\n  .product__image-discount {\n    @include discount-styles;\n\n    padding: 3px 5px;\n    margin-left: 10px;\n    font-size: 10px;\n    line-height: 12px;\n    border-radius: 20px;\n  }\n}\n\n@mixin product-dialog {\n  .product__image {\n    position: relative;\n    width: 426px;\n    height: 100%;\n\n    &--mobile {\n      width: inherit;\n      height: initial;\n      margin: 0 48px;\n      overflow: visible;\n\n      @include media('<=tablet') {\n        margin: 0 20px;\n      }\n    }\n\n    &--dialog-desktop {\n      height: 284px;\n    }\n  }\n\n  .product__image-quantity {\n    @include quantity;\n\n    bottom: 0;\n\n    @include media('<=tablet') {\n      width: initial;\n      margin-top: 24px;\n    }\n  }\n\n  .product__image-sale {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    justify-content: center;\n    width: fit-content;\n    padding: 7px 10px;\n    font-size: 12px;\n    font-weight: bold;\n    line-height: 12px;\n    color: var(--ui-white);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    background: var(--ui-green);\n    border-radius: 20px;\n\n    @include media('<=tablet') {\n      position: relative;\n      padding: 6px 10px;\n    }\n  }\n\n  .product__image-discount {\n    position: absolute;\n    top: 0;\n    right: 0;\n    padding: 6px 12px;\n    font-size: 16px;\n    font-weight: 800;\n    line-height: 19px;\n    background: var(--ui-yellow);\n    border-radius: 20px;\n\n    @include media('<=tablet') {\n      padding: 5px 12px;\n      font-size: 12px;\n      line-height: 14px;\n    }\n  }\n}\n\n@mixin product-page {\n  .product__image {\n    position: relative;\n    max-height: 452px;\n    border-radius: 32px;\n\n    @include media('<=desktop') {\n      margin-bottom: 15px;\n    }\n\n    @include media('>=tablet', '<=desktop-mini') {\n      max-width: 100%;\n      max-height: 100%;\n    }\n  }\n\n  .product__image-discount {\n    @include discount-styles;\n\n    padding: 6px 10px;\n    font-size: 16px;\n    line-height: 19px;\n    border-radius: 40px;\n\n    @include media('<desktop') {\n      padding: 5px 12px;\n      font-size: 12px;\n      line-height: 14px;\n      border-radius: 20px;\n    }\n  }\n\n  .product__image-quantity {\n    @include quantity;\n\n    bottom: 18px;\n    padding: 3px 12px;\n    font-size: 18px;\n    line-height: 29px;\n\n    @include media('<=tablet') {\n      @include quantity-tablet;\n    }\n  }\n}\n\n.product--main-desktop {\n  @include product-main-desktop();\n}\n\n.product--main-mobile {\n  @include product-main-mobile;\n}\n\n.product--dialog {\n  @include product-dialog;\n}\n\n.product--page {\n  @include product-page;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { PropType } from 'vue'\n\n/* Types */\nimport { Tag } from '@/types/api/api-v3/product'\nimport { TagSize } from '@/types/products'\n\ndefineProps({\n  tag: {\n    type: Object as PropType<Tag>,\n    required: true,\n  },\n  size: {\n    type: String as PropType<TagSize>,\n    required: false,\n    default: String(TagSize.NORMAL),\n  },\n})\n\nconst onError = (error: Event) => {\n  if (!error.target) {\n    return\n  }\n\n  const target = error.target as HTMLElement\n\n  target.style.display = 'none'\n}\n</script>\n\n<template>\n  <nuxt-img\n    v-if=\"tag.image\"\n    class=\"tag\"\n    :class=\"{ 'size--large': size === TagSize.LARGE }\"\n    :src=\"tag.image\"\n    :alt=\"tag.name\"\n    @error=\"onError\"\n  />\n</template>\n\n<style lang=\"scss\" scoped>\n.tag {\n  width: 14px;\n  height: 14px;\n  object-fit: cover;\n  border-radius: 50%;\n  @include media('>=tablet') {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n.size--large {\n  width: 24px;\n  height: 24px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Product } from '@/types/api/api-v3/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\nimport { NAME_PARENT_COMPONENT, TagSize } from '@/types/products'\n\nimport ProductOldTag from '@/components/Product/ProductItem/ProductTags/ProductTag.vue'\nimport ProductTagRating from '@/components/Product/ProductTags/ProductTagRating.vue'\n\ntype Props = {\n  product: Product\n  parentComponent: string\n}\n\nconst props = defineProps<Props>()\n\nconst tagsClasses = computed(() => [\n  'product__tags',\n  {\n    'product__tags--wide':\n      NAME_PARENT_COMPONENT.MAIN_DESKTOP === props.parentComponent &&\n      props.product.tags.length > 5,\n  },\n])\n\nconst tagSize = computed(() =>\n  NAME_PARENT_COMPONENT.DIALOG === props.parentComponent\n    ? TagSize.LARGE\n    : TagSize.NORMAL,\n)\n</script>\n\n<template>\n  <div :class=\"tagsClasses\">\n    <product-tag-rating :product=\"product\" :type=\"ProductParentType.detail\" />\n\n    <product-old-tag\n      v-for=\"tag in product.tags\"\n      :key=\"tag.name\"\n      :tag=\"tag\"\n      :size=\"tagSize\"\n    />\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n@mixin product-main-desktop {\n  .product__tags {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: grid;\n    gap: 10px 0;\n    margin-top: 12px;\n\n    &--wide {\n      display: flex;\n      flex-direction: column;\n      flex-wrap: wrap;\n      width: 54px;\n      max-height: 150px;\n    }\n  }\n}\n\n@mixin product-main-mobile {\n  .product__tags {\n    position: absolute;\n    top: 12px;\n    left: 12px;\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    gap: 8px;\n    max-height: 100px;\n\n    @include media('>=tablet') {\n      gap: 10px;\n    }\n\n    @include media('<=desktop-mini') {\n      max-height: 160px;\n    }\n\n    @include media('<tablet') {\n      max-height: 110px;\n    }\n  }\n}\n\n@mixin product-dialog {\n  .product__tags {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    gap: 16px;\n    height: calc(100% - 34px);\n\n    @include media('<=desktop-mini') {\n      left: 48px;\n    }\n\n    @include media('<tablet') {\n      left: 20px;\n    }\n  }\n}\n\n@mixin product-page {\n  .product__tags {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: grid;\n    gap: 12px 0;\n    padding: 25px 0 0 5px;\n\n    @include media('<=tablet') {\n      padding: 0;\n    }\n  }\n}\n\n.product--main-desktop {\n  @include product-main-desktop();\n}\n\n.product--main-mobile {\n  @include product-main-mobile;\n}\n\n.product--dialog {\n  @include product-dialog;\n}\n\n.product--page {\n  @include product-page;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { defineLayoutOfProduct } from '@/utils/defineLayoutOfProduct'\n\nimport { useCityStore } from '@/store/city/city'\nimport { useToggleStore } from '@/store/toggle/toggle'\n\nimport { Product } from '@/types/api/api-v3/product'\nimport { ProductParentType } from '@/types/components/product-card.types'\nimport { EcommerceEventName } from '@/types/plugins/yandex-metrika'\nimport { NAME_PARENT_COMPONENT } from '@/types/products'\n\nimport ProductContent from '@/components/Product/ProductItem/ProductContent/ProductContent.vue'\nimport ProductImage from '@/components/Product/ProductItem/ProductImage/ProductImage.vue'\nimport ProductTags from '@/components/Product/ProductItem/ProductTags/ProductTags.vue'\nimport ProductTagElements from '@/components/Product/ProductTags/ProductTagElements.vue'\nimport ProductTagRating from '@/components/Product/ProductTags/ProductTagRating.vue'\nimport ProductTagsNew from '@/components/Product/ProductTags/ProductTags.vue'\n\nimport { mapEcommerceData } from '@/services/metrics/utils/ecommerce'\n\nconst emit = defineEmits(['openDialogProduct'])\n\ntype Props = {\n  product: Product\n  parentComponent: string\n}\nconst props = defineProps<Props>()\n\nconst cityStore = useCityStore()\nconst { newProductCardEnabled } = useToggleStore()\n\nconst { isMobileOrTablet } = useDevice()\n\nconst { $metrics } = useNuxtApp()\n\nconst productClasses = computed(() => {\n  return [\n    'product',\n    {\n      'product--main-desktop':\n        NAME_PARENT_COMPONENT.MAIN_DESKTOP === props.parentComponent,\n      'product--main-mobile':\n        NAME_PARENT_COMPONENT.MAIN_MOBILE === props.parentComponent,\n      'product--dialog': NAME_PARENT_COMPONENT.DIALOG === props.parentComponent,\n      'product--dialog-mobile':\n        NAME_PARENT_COMPONENT.DIALOG === props.parentComponent &&\n        isMobileOrTablet,\n      'product--page': NAME_PARENT_COMPONENT.PAGE === props.parentComponent,\n    },\n  ]\n})\n\nconst isMainPage = computed(\n  () =>\n    NAME_PARENT_COMPONENT.MAIN_DESKTOP === props.parentComponent ||\n    NAME_PARENT_COMPONENT.MAIN_MOBILE === props.parentComponent,\n)\n\nconst wrapperComponent = computed(() => (isMainPage.value ? 'a' : 'div'))\n\nconst wrapperAttrs = computed(() => {\n  return isMainPage.value\n    ? {\n        href: `/product/${props.product.slug}/`,\n      }\n    : {}\n})\n\nconst isHighLight = computed(() => {\n  if (newProductCardEnabled) return false\n\n  return props.product.tags.find((item) => item.as_highlight)\n})\n\nconst isShowHighLight = computed(\n  () =>\n    NAME_PARENT_COMPONENT.MAIN_DESKTOP === props.parentComponent ||\n    NAME_PARENT_COMPONENT.MAIN_MOBILE === props.parentComponent,\n)\n\nconst showNewTags = computed(() => {\n  return newProductCardEnabled && props.product.main_tags && isMobileOrTablet\n})\n\nconst currentModification = ref(props.product?.modifications[0] || {}) // текущая модификация товара\n\nwatch(\n  () => props.product,\n  (newProduct) => {\n    currentModification.value = newProduct?.modifications[0] || {}\n  },\n)\n\nconst currencyCode = computed(() => cityStore.currencyCode)\n\nconst openDialogProduct = () => {\n  emit('openDialogProduct', props.product)\n\n  const ecommerceData = mapEcommerceData(\n    currentModification.value,\n    EcommerceEventName.DETAIL,\n    currencyCode?.value || '',\n  )\n\n  $metrics?.eventViewedProduct({ ym: ecommerceData })\n}\n\nconst getProductMicrolayouts = defineLayoutOfProduct(props.parentComponent)\n\nconst itemScopeProductItem = getProductMicrolayouts(true)\nconst itemTypeProductItem = getProductMicrolayouts('http://schema.org/Product')\n\nconst changeModification = (modificationId: number) => {\n  // меняем текущую модификацию продукта путем поиска по id модификации\n  currentModification.value =\n    props.product.modifications.find(\n      (modification) => modification.id === modificationId,\n    ) || props.product.modifications[0]\n}\n\nconst showOldTags = computed(() => {\n  return (\n    !newProductCardEnabled ||\n    props.parentComponent === NAME_PARENT_COMPONENT.PAGE\n  )\n})\n</script>\n\n<template>\n  <div\n    :itemscope=\"itemScopeProductItem\"\n    :itemtype=\"itemTypeProductItem\"\n    :class=\"productClasses\"\n  >\n    <product-image\n      :product=\"product\"\n      :wrapper-attrs=\"wrapperAttrs\"\n      :wrapper-component=\"wrapperComponent\"\n      :is-main-page=\"isMainPage\"\n      :current-modification=\"currentModification\"\n      :parent-component=\"parentComponent\"\n      @open-dialog-product=\"openDialogProduct\"\n    />\n\n    <div v-if=\"showNewTags\" class=\"product__tags-top\">\n      <product-tag-elements\n        :product=\"product\"\n        :type=\"ProductParentType.detail\"\n      />\n\n      <product-tag-rating :product=\"product\" :type=\"ProductParentType.detail\" />\n    </div>\n\n    <product-tags-new\n      v-if=\"showNewTags\"\n      class=\"product__tags-new\"\n      :type=\"ProductParentType.detail\"\n      :current-modification=\"currentModification\"\n      :main-tags=\"product.main_tags\"\n      :additional-tags=\"product.additional_tags\"\n    />\n\n    <template v-if=\"showOldTags\">\n      <product-tags\n        v-if=\"product.tags\"\n        :product=\"product\"\n        :parent-component=\"parentComponent\"\n      />\n\n      <div class=\"product__sale\">\n        <span\n          v-if=\"isHighLight && isShowHighLight\"\n          class=\"product__sale--text\"\n          :style=\"{ 'background-color': isHighLight.hover_background_color }\"\n        >\n          {{ isHighLight.name }}\n        </span>\n      </div>\n    </template>\n\n    <product-content\n      :product=\"product\"\n      :wrapper-attrs=\"wrapperAttrs\"\n      :wrapper-component=\"wrapperComponent\"\n      :is-main-page=\"isMainPage\"\n      :current-modification=\"currentModification\"\n      :parent-component=\"parentComponent\"\n      @open-dialog-product=\"openDialogProduct\"\n      @change-modification=\"changeModification\"\n    />\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n@mixin product-main-desktop {\n  position: relative;\n  display: grid;\n  grid-template-rows: repeat(2, max-content) 1fr;\n  grid-template-columns: 100%;\n  width: 273px;\n  cursor: default;\n\n  .product__sale {\n    display: flex;\n    grid-area: 2 / 1 / 3 / 3;\n    height: 20px;\n\n    &--text {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 20px;\n      font-size: 12px;\n      font-weight: bold;\n      line-height: 14px;\n      color: var(--ui-white);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      background: #00c304;\n      border-radius: 20px;\n    }\n  }\n}\n\n@mixin product-main-mobile {\n  position: relative;\n  display: grid;\n  grid-template-rows: repeat(2, max-content) 1fr;\n  grid-template-columns: 100%;\n  padding: 12px 12px 16px;\n  background: var(--ui-white);\n  border-radius: 16px;\n  box-shadow: 0 6px 30px rgba(50, 52, 72, 0.08);\n\n  .product__sale {\n    display: flex;\n    grid-area: 2 / 1 / 3 / 2;\n    height: 20px;\n\n    &--text {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 20px;\n      font-size: 12px;\n      font-weight: bold;\n      line-height: 12px;\n      color: var(--ui-white);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      background: #00c304;\n      border-radius: 20px;\n\n      @include media('<tablet') {\n        font-size: 8px;\n        font-weight: 800;\n        line-height: 16px;\n      }\n    }\n  }\n}\n\n@mixin product-dialog {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n\n  @include media('<=tablet') {\n    align-items: flex-start;\n    justify-content: flex-start;\n    height: initial;\n  }\n\n  &-mobile {\n    align-items: flex-start !important;\n    justify-content: flex-start !important;\n    height: initial;\n  }\n}\n\n@mixin product-page {\n  position: relative;\n  display: grid;\n  grid-template-columns: 1fr 0 max(452px);\n  gap: 0 35px;\n  align-items: center;\n  margin: 50px 0 90px;\n\n  @include media('<=desktop-mini') {\n    margin: 26px 0;\n  }\n\n  @include media('<=desktop') {\n    grid-template-columns: 1fr;\n    padding-bottom: 0;\n  }\n}\n\n.product--main-desktop {\n  @include product-main-desktop;\n}\n\n.product--main-mobile {\n  @include product-main-mobile;\n}\n\n.product--dialog {\n  @include product-dialog;\n}\n\n.product--page {\n  @include product-page;\n}\n\n.product__tags-new {\n  max-width: 100%;\n  margin: 16px 20px 0;\n  overflow: hidden;\n}\n\n.product__tags-top {\n  position: absolute;\n  top: 0;\n  left: 20px;\n  display: flex;\n  gap: 4px;\n}\n</style>\n"],"names":["ProductDetailType","ProductType","ProductParentType","props","__props","componentClasses","componentStyles","isVisible","computed","_a","_b","MIN_RATING","currencySymbol","useCityStore","discountValue","discount","price","subprice","filteredTags","tags","is_extra","hidden","SetProductType","filteredTag","tag","NAME_PARENT_COMPONENT","TagSize","defineLayoutOfProduct","pageName","propValue","isTooltipShow","ref","emit","__emit","isMobileOrTablet","useDevice","onMounted","addToCart","setIncreaseProduct","setDecreaseProduct","isDesktop","sizeButton","productModificationId","tabsSize","changeModification","modificationId","cityStore","basketStore","useBasketStore","showSnackbar","useAppStore","newProductCardEnabled","useToggleStore","vOnOpenDialog","openDialogProduct","isTitleProduct","isShowDescription","isHighLight","item","isVisibleProductCalories","currencyCode","quantityInProductBasket","productId","isCompoundVisible","showExtraTag","basketError","quantitySelectedProducts","setProductQuantity","decreaseQuantity","increaseQuantity","useProductCounter","pushMetrics","useSendMetricsOfProduct","onUpdateProductQuantity","quantity","EcommerceEventName","SnackbarType","setProduct","type","getProductMicrolayouts","itemPropProductTitle","itemPropProductDescription","padeg","productTitle","isImageCrashed","checkVisibleQuantity","isShowDiscount","showNewTags","productImageClasses","itemTypeProductItem","onError","error","target","tagsClasses","tagSize","$metrics","useNuxtApp","productClasses","isMainPage","wrapperComponent","wrapperAttrs","isShowHighLight","currentModification","watch","newProduct","ecommerceData","mapEcommerceData","itemScopeProductItem","modification","showOldTags"],"mappings":"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","debug_id":"5f153872-4371-5964-b1f2-ed4d1c4b81cd"}