{"version":3,"file":"B0Pwzswo.js","sources":["../../../../types/products.ts","../../../../utils/defineLayoutOfProduct.ts","../../../../components/Product/ProductItem/ProductImage/ProductImage.vue","../../../../components/Product/ProductItem/ProductTags/ProductTag.vue","../../../../components/Product/ProductItem/ProductTags/ProductTags.vue","../../../../types/store/category.ts","../../../../components/Product/ProductItem/ProductContent/ProductButton.vue","../../../../components/Product/ProductItem/ProductContent/ProductModifications.vue","../../../../components/Product/ProductItem/ProductContent/MainDesktopColories.vue","../../../../components/Product/ProductItem/ProductContent/ProductCalories.vue","../../../../components/Product/ProductItem/ProductContent/ProductCompound.vue","../../../../components/Product/ProductItem/ProductContent/ProductCardComponentsItem.vue","../../../../components/Product/ProductItem/ProductContent/ProductCardComponents.vue","../../../../components/Product/ProductItem/ProductContent/ProductContent.vue","../../../../components/Product/ProductItem/ProductItem.vue"],"sourcesContent":["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 { PropType } from 'vue'\n\n/* Utils */\nimport { defineLayoutOfProduct } from '@/utils/defineLayoutOfProduct'\n\n/* Stores */\nimport { useCityStore } from '@/store/city/city'\n\n/* Types */\nimport { Product, Modification } from '@/types/api/api-v3/product'\nimport { NAME_PARENT_COMPONENT } from '@/types/products'\n\nconst emit = defineEmits(['openDialogProduct'])\n\nconst props = defineProps({\n  product: {\n    type: Object as PropType<Product>,\n    required: true,\n  },\n  currentModification: {\n    type: Object as PropType<Modification>,\n    required: true,\n  },\n  parentComponent: {\n    type: String,\n    required: true,\n  },\n  wrapperAttrs: {\n    type: Object,\n    default: () => {},\n  },\n  wrapperComponent: {\n    type: String,\n    default: '',\n  },\n  isMainPage: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst { isDesktop, isMobileOrTablet } = useDevice()\n\nconst {\n  cityInfo: { padeg },\n} = useCityStore()\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 && props.product.category_slug?.includes('sety'),\n  ),\n)\n\nconst isHighLight = computed(() =>\n  props.product.tags.find((item) => item.as_highlight === true),\n)\n\nconst isShowDiscount = computed(() => !!props.currentModification.discount)\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  </component>\n</template>\n\n<style scoped lang=\"scss\">\n.product__image {\n  img {\n    width: 100%;\n    border-radius: 20px;\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: $white;\n  background: $text-dark-gray;\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: $discount-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: $white;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    background: $success;\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: $discount-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 { PropType, computed } from 'vue'\n\nimport ProductTag from '@/components/Product/ProductItem/ProductTags/ProductTag.vue'\n\n/* Types */\nimport { Product } from '@/types/api/api-v3/product'\nimport { NAME_PARENT_COMPONENT, TagSize } from '@/types/products'\n\n/* Components */\n\nconst props = defineProps({\n  product: {\n    type: Object as PropType<Product>,\n    required: true,\n  },\n  parentComponent: {\n    type: String,\n    required: true,\n  },\n})\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\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","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 { computed, onMounted } from 'vue'\n\n/* Components */\nimport AppButton from '@/components/App/AppButton.vue'\n\nimport AppCounter from '@/components/App/AppCounter.vue'\n\nconst props = defineProps({\n  productQuantity: {\n    type: Number,\n    required: true,\n  },\n  large: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  isForDialog: {\n    type: Boolean,\n    required: false,\n    default: false,\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 buttonClasses = computed(() => {\n  return [\n    'actions',\n    {\n      'large--button': props.large,\n      'dialog-button': props.isForDialog,\n    },\n  ]\n})\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=\"buttonClasses\">\n    <app-button\n      v-if=\"!productQuantity\"\n      :disabled=\"disabled\"\n      class=\"action__button\"\n      @click=\"addToCart\"\n    >\n      Хочу!\n    </app-button>\n    <app-counter\n      v-else\n      class=\"action__counter\"\n      :model-value=\"productQuantity\"\n      :large=\"large\"\n      @increase=\"setIncreaseProduct\"\n      @decrease=\"setDecreaseProduct\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.actions {\n  .action__button {\n    padding: 12px 35px;\n    font-weight: 800;\n    border-radius: 40px;\n    box-shadow: 0 4px 20px rgba(255, 80, 0, 0.16);\n    @include media('<=desktop-mini') {\n      min-height: 30px;\n      padding: 8px 24px;\n      font-size: 12px;\n      font-weight: 800;\n      line-height: 14px;\n    }\n  }\n\n  .action__counter {\n    @include media('<=desktop-mini') {\n      height: 30px;\n      font-size: 12px;\n      font-weight: 800;\n      line-height: 14px;\n    }\n  }\n}\n\n.large--button {\n  .action__button {\n    width: 177px;\n    height: 64px;\n  }\n  .app-count__value {\n    font-size: 18px;\n    font-weight: 600;\n  }\n  .app-count__btn {\n    width: 64px !important;\n    height: 64px !important;\n  }\n}\n\n.dialog-button {\n  .action__button {\n    width: 108px;\n    padding: 12px 35px;\n\n    @include media('<=desktop-mini') {\n      min-height: 40px;\n      font-size: 14px !important;\n    }\n  }\n\n  :deep() {\n    .app-count {\n      height: 40px;\n\n      &__value {\n        width: 28px;\n        margin: 0;\n        font-size: 12px;\n        font-weight: 600;\n      }\n\n      &__btn {\n        width: 40px !important;\n        height: 40px !important;\n      }\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { PropType } from 'vue'\n\n/* Types */\nimport { Modification } from '@/types/api/api-v3/product'\n\nconst props = defineProps({\n  modifications: {\n    type: Array as PropType<Modification[]>,\n    required: true,\n  },\n})\n\nconst emit = defineEmits(['changeModification'])\n\nconst changeModification = (modificationId: number) => {\n  emit('changeModification', modificationId)\n}\n</script>\n\n<template>\n  <v-tabs class=\"modification__tabs\">\n    <v-tab\n      v-for=\"modification in props.modifications\"\n      :key=\"modification.id\"\n      :ripple=\"false\"\n      @click=\"changeModification(modification.id)\"\n    >\n      {{ modification.mode }}\n    </v-tab>\n  </v-tabs>\n</template>\n\n<style lang=\"scss\" scoped>\n.modification__tabs {\n  max-width: 100%;\n}\n\n.v-slide-group {\n  height: 32px !important;\n  background: $button-background !important;\n  border-radius: 100px;\n}\n\n:deep(.v-tab__slider) {\n  z-index: -1 !important;\n  height: 100% !important;\n  padding: 3px 0 !important;\n  background: #fff !important;\n  border-radius: 466px !important;\n}\n\n:deep(.v-btn__overlay),\n:deep(.v-btn__underlay) {\n  display: none !important;\n}\n\n.v-tab {\n  display: flex;\n  flex: 0 1 auto;\n  width: 100%;\n  min-width: 0 !important;\n  max-width: 100%;\n  height: 26px;\n  padding: 0;\n  margin: 3px;\n  font-size: 12px;\n  font-weight: 600;\n  color: $text-black !important;\n  text-transform: none;\n  letter-spacing: unset;\n\n  &:hover {\n    background-color: transparent !important;\n  }\n\n  &::before {\n    display: none;\n    opacity: 0 !important;\n  }\n\n  &::after {\n    display: none;\n    opacity: 0 !important;\n  }\n\n  &--selected {\n    font-weight: 800;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref, 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})\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        <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      </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: $unactive-grey;\n    text-transform: uppercase;\n    cursor: pointer;\n    background-color: $button-background;\n    border-radius: 6px;\n\n    &:hover {\n      color: $text-dark-gray;\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: $white;\n      text-align: center;\n    }\n\n    &-table {\n      font-size: 12px;\n      color: $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\">\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: $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 lang=\"ts\" setup>\nconst { isDesktop, isMobileOrTablet } = useDevice()\n\ndefineProps({\n  markingComposition: {\n    type: String,\n    required: true,\n  },\n})\n\nconst tooltipCompound = ref(false)\n</script>\n\n<template>\n  <div class=\"compound\">\n    <app-tooltip\n      v-model=\"tooltipCompound\"\n      :right=\"isDesktop\"\n      :bottom=\"isMobileOrTablet\"\n    >\n      <template #activator>\n        <span\n          class=\"button\"\n          @mouseover=\"tooltipCompound = true\"\n          @mouseleave=\"tooltipCompound = false\"\n          @click=\"\n            tooltipCompound\n              ? (tooltipCompound = false)\n              : (tooltipCompound = true)\n          \"\n        >\n          Состав\n        </span>\n      </template>\n\n      <template #content>\n        <div class=\"compound__text\">\n          <span class=\"compound__text-title\">Состав</span>\n          <span class=\"compound__text-content\">{{ markingComposition }}</span>\n        </div>\n      </template>\n    </app-tooltip>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.compound {\n  width: max-content;\n  font-size: 16px;\n  font-weight: 600;\n  color: $primary;\n\n  &__text {\n    &-title {\n      display: block;\n      margin-bottom: 8px;\n      font-size: 16px;\n      font-weight: 800;\n      line-height: 19px;\n      letter-spacing: 0;\n    }\n\n    &-content {\n      display: inline-block;\n      font-size: 14px;\n      font-weight: 600;\n      line-height: 26px;\n      letter-spacing: 0;\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\n/* Types */\nimport { Component } from '@/types/api/api-v3/product'\n\ntype Props = {\n  component: Component\n}\n\nconst props = defineProps<Props>()\n\nconst isErrorImage = ref(false)\n\nconst imageUrl = computed(() => {\n  if (!props.component?.image || isErrorImage.value) {\n    return './no-image-category.webp'\n  }\n\n  return props.component.image\n})\n</script>\n\n<template>\n  <div class=\"component\">\n    <nuxt-img\n      class=\"component__image\"\n      :src=\"imageUrl\"\n      :alt=\"component.name\"\n      @error=\"isErrorImage = true\"\n    />\n\n    <h5 class=\"component__title\">{{ component.name }}</h5>\n\n    <p class=\"component__description\">{{ component.description }}</p>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.component {\n  min-width: 140px;\n  max-width: 140px;\n  height: 180px;\n  padding: 10px;\n  margin-right: 12px;\n  cursor: pointer;\n  background: $white;\n  border-radius: 16px;\n  box-shadow: 0 4px 13px rgba(50, 52, 72, 0.07);\n  -webkit-transition: max-width 0.5s ease;\n  transition: max-width 0.5s ease;\n\n  &__image {\n    width: 76px;\n    height: 50px;\n    margin-top: 4px;\n  }\n\n  &__title {\n    width: 100%;\n    margin-top: 8px;\n    font-size: 12px;\n    font-weight: 800;\n    line-height: 11px;\n    color: $text-dark-gray;\n    white-space: pre-wrap;\n  }\n  &__description {\n    display: -moz-box;\n    display: -webkit-box;\n    width: 100%;\n    margin-block-end: 0;\n    margin-top: 8px;\n    overflow: hidden;\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 12px;\n    color: $dark-grey;\n\n    // для разных браузеров ставим ограничение в 5 строк видимости описания\n    text-overflow: ellipsis;\n    white-space: pre-wrap;\n    -moz-box-orient: vertical;\n    -webkit-line-clamp: 5;\n    -webkit-box-orient: vertical;\n    line-clamp: 5;\n  }\n\n  &:hover {\n    max-width: 250px;\n  }\n\n  @include media('>=tablet', '<=desktop-mini') {\n    &__title {\n      font-size: 14px;\n    }\n\n    &__description {\n      font-size: 12px;\n    }\n  }\n\n  @include media('<desktop-mini') {\n    display: grid;\n    grid-template-columns: max-content 1fr;\n    gap: 0 10px;\n    align-items: center;\n    min-width: 100%;\n    height: max-content;\n    min-height: 105px;\n    padding: 20px 10px;\n    box-shadow: 0 6px 30px rgba(50, 52, 72, 0.1);\n\n    &__image {\n      grid-area: 1 / 1 / 3 / 2;\n    }\n\n    &__title {\n      grid-area: 1 / 2 / 2 / 3;\n      height: max-content;\n      font-weight: 800;\n      line-height: 16px;\n    }\n\n    &__description {\n      grid-area: 2 / 2 / 3 / 3;\n      font-weight: 500;\n      line-height: 14px;\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { PropType } from 'vue'\n\n/* Components */\nimport ProductCardComponentsItem from '@/components/Product/ProductItem/ProductContent/ProductCardComponentsItem.vue'\nimport IconArrowRight from '@/components/Icons/IconArrowRight.vue'\nimport IconArrowLeft from '@/components/Icons/IconArrowLeft.vue'\n\n/* Types */\nimport { Component } from '@/types/api/api-v3/product'\n\nconst props = defineProps({\n  components: {\n    type: Array as PropType<Component[]>,\n    required: true,\n  },\n})\n</script>\n\n<template>\n  <v-slide-group\n    show-arrows\n    :prev-icon=\"IconArrowLeft\"\n    :next-icon=\"IconArrowRight\"\n  >\n    <v-slide-group-item\n      v-for=\"component in props.components\"\n      :key=\"component.id\"\n      v-ripple\n    >\n      <product-card-components-item :component=\"component\" />\n    </v-slide-group-item>\n  </v-slide-group>\n</template>\n\n<style lang=\"scss\" scoped>\n.v-slide-group {\n  position: relative;\n  display: flex;\n  flex: 0 1 auto;\n  max-width: 100%;\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n\n:deep() {\n  .v-slide-group__container {\n    padding-bottom: 20px;\n\n    @include media('<=desktop-mini') {\n      padding: 24px 48px 20px 48px;\n    }\n\n    @include media('<=tablet') {\n      padding: 24px 20px 26px 20px;\n    }\n  }\n\n  .v-slide-group__prev,\n  .v-slide-group__next {\n    position: absolute;\n    top: 0;\n    z-index: 1;\n    width: 30px;\n    height: 100%;\n\n    &--disabled {\n      display: none;\n    }\n\n    .v-icon:before {\n      color: $text-black;\n    }\n  }\n\n  .v-slide-group__next {\n    right: -10px;\n    background: linear-gradient(90deg, rgba(255, 255, 255, 0), white);\n  }\n\n  .v-slide-group__prev {\n    left: -10px;\n    background: linear-gradient(90deg, white, rgba(255, 255, 255, 0));\n  }\n\n  .v-slide-group__content {\n    @include media('<desktop-mini') {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 20px;\n    }\n    @include media('<tablet') {\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 10px;\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { PropType } from 'vue'\n\n/* Stores */\nimport { useCityStore } from '@/store/city/city'\nimport { useBasketStore } from '@/store/basket/basket'\nimport { useAppStore } from '@/store/app/app'\n\n/* Composables */\nimport { useProductCounter } from '@/composables/useProductCounter'\n\n/* Utils */\nimport { defineLayoutOfProduct } from '@/utils/defineLayoutOfProduct'\n\n/* Types */\nimport { Modification } from '@/types/api/api-v3/product'\nimport { NAME_PARENT_COMPONENT } from '@/types/products'\nimport { EcommerceEventName } from '@/types/plugins/yandex-metrika'\nimport { SetProductType, SetProductIncludeType } from '@/types/store/category'\nimport { SnackbarType } from '@/store/app/app.types'\n\n/* Components */\nimport AppButton from '@/components/App/AppButton.vue'\n\nimport ProductButton from '@/components/Product/ProductItem/ProductContent/ProductButton.vue'\nimport ProductModifications from '@/components/Product/ProductItem/ProductContent/ProductModifications.vue'\nimport MainDesktopColories from '@/components/Product/ProductItem/ProductContent/MainDesktopColories.vue'\nimport ProductCalories from '@/components/Product/ProductItem/ProductContent/ProductCalories.vue'\nimport ProductCompound from '@/components/Product/ProductItem/ProductContent/ProductCompound.vue'\nimport ProductCardComponents from '@/components/Product/ProductItem/ProductContent/ProductCardComponents.vue'\nimport AppMeasureUnits from '@/components/App/AppMeasureUnits.vue'\n\nconst props = defineProps({\n  product: {\n    type: Object as PropType<CategoryProduct>,\n    required: true,\n  },\n  currentModification: {\n    type: Object as PropType<Modification>,\n    required: true,\n  },\n  parentComponent: {\n    type: String,\n    required: true,\n  },\n  wrapperAttrs: {\n    type: Object,\n    default: () => {},\n  },\n  wrapperComponent: {\n    type: String,\n    default: '',\n  },\n  isMainPage: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst emit = defineEmits(['openDialogProduct', 'changeModification'])\n\n/* Stores */\nconst cityStore = useCityStore()\nconst basketStore = useBasketStore()\nconst { showSnackbar } = useAppStore()\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  props.product.tags.find((item) => item.as_highlight === true),\n)\n\nconst isVisibleProductCalories = computed(\n  () =>\n    NAME_PARENT_COMPONENT.DIALOG === props.parentComponent ||\n    NAME_PARENT_COMPONENT.PAGE === props.parentComponent,\n)\n\nconst isVisibleComponents = computed(\n  () =>\n    !!props.product.components.length &&\n    !isDesktop &&\n    NAME_PARENT_COMPONENT.DIALOG === 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 {\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  // 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        :itemprop=\"itemPropProductTitle\"\n      >\n        {{ isTitleProduct }}\n      </h1>\n\n      <div v-else :itemprop=\"itemPropProductTitle\" v-on=\"vOnOpenDialog\">\n        {{ isTitleProduct }}\n      </div>\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      <app-button\n        v-if=\"\n          !basketStore.isLoaded &&\n          NAME_PARENT_COMPONENT.DIALOG !== parentComponent\n        \"\n        :class=\"!isDesktop ? 'button--loading--mobile' : 'button--loading'\"\n        loading\n      />\n      <product-button\n        v-else\n        :large=\"isDesktop && NAME_PARENT_COMPONENT.PAGE === parentComponent\"\n        :is-for-dialog=\"NAME_PARENT_COMPONENT.DIALOG === parentComponent\"\n        :product-quantity=\"quantitySelectedProducts\"\n        @add-to-cart=\"addToCart(currentModification.id)\"\n        @set-increase-product=\"setProduct('INCREASE')\"\n        @set-decrease-product=\"setProduct('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\n    <product-card-components\n      v-if=\"isVisibleComponents\"\n      class=\"product__content-components\"\n      :components=\"product.components\"\n    />\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\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: $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: $text-black;\n      white-space: nowrap;\n\n      &--new {\n        color: $discount-price;\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: $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: $text-black;\n      border-radius: 20px;\n\n      h1 {\n        font-size: 12px;\n        font-weight: 800;\n        line-height: 14px;\n        color: $text-black;\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: $discount-price;\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: $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--mobile {\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      :deep() {\n        .app-button.v-btn {\n          height: 30px;\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: $text-dark-gray;\n      word-break: break-word;\n\n      h1 {\n        font-size: 22px;\n        font-weight: 800;\n        line-height: 26px;\n        color: $text-dark-gray;\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: $dark-grey;\n    }\n\n    &-components {\n      overflow: hidden;\n    }\n\n    &-modifications {\n      margin-top: 24px;\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: $text-black;\n\n      &--new {\n        color: $discount-price;\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: $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: $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: #fff;\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 !important;\n        height: 64px !important;\n        border-radius: 40px;\n        box-shadow: 0 4px 20px rgba(255, 80, 0, 0.16);\n      }\n\n      .button--loading--mobile {\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        @include media('>portrait-phone') {\n          width: 80px !important;\n        }\n      }\n    }\n\n    &-price {\n      display: flex;\n      align-items: center;\n\n      &--new {\n        color: $discount-price;\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: $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 { watch, PropType } from 'vue'\n\n/* Components */\nimport ProductImage from './ProductImage/ProductImage.vue'\nimport ProductTags from './ProductTags/ProductTags.vue'\nimport ProductContent from './ProductContent/ProductContent.vue'\n\n/* Utils */\nimport { mapEcommerceData } from '@/services/metrics/utils/ecommerce'\nimport { defineLayoutOfProduct } from '@/utils/defineLayoutOfProduct'\n\n/* Stores */\nimport { useCityStore } from '@/store/city/city'\n\n/* Types */\nimport { EcommerceEventName } from '@/types/plugins/yandex-metrika'\nimport { Product } from '@/types/api/api-v3/product'\nimport { NAME_PARENT_COMPONENT } from '@/types/products'\n\nconst emit = defineEmits(['openDialogProduct'])\n\nconst props = defineProps({\n  product: {\n    type: Object as PropType<Product>,\n    required: true,\n  },\n  parentComponent: {\n    type: String,\n    required: true,\n  },\n})\n\nconst cityStore = useCityStore()\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  return props.product.tags.find((item) => item.as_highlight === true)\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 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</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    <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\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 v-deep-content {\n  :deep() {\n    .v-responsive__content {\n      width: auto !important;\n    }\n\n    @include media('>=desktop') {\n      .v-slide-group {\n        height: 48px !important;\n        background: $button-background !important;\n        border-radius: 100px;\n\n        .v-btn {\n          height: unset;\n        }\n      }\n    }\n  }\n}\n\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: #fff;\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: $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: #fff;\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  :deep() {\n    .v-responsive__content {\n      width: auto !important;\n    }\n  }\n\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  @include v-deep-content;\n\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</style>\n"],"names":["NAME_PARENT_COMPONENT","TagSize","defineLayoutOfProduct","pageName","propValue","emit","__emit","props","__props","isDesktop","isMobileOrTablet","useDevice","padeg","useCityStore","productTitle","computed","isImageCrashed","ref","checkVisibleQuantity","_a","isHighLight","item","isShowDiscount","productImageClasses","openDialogProduct","itemTypeProductItem","onError","error","target","tagsClasses","tagSize","SetProductType","buttonClasses","onMounted","addToCart","setIncreaseProduct","setDecreaseProduct","changeModification","modificationId","isTooltipShow","tooltipCompound","isErrorImage","imageUrl","cityStore","basketStore","useBasketStore","showSnackbar","useAppStore","vOnOpenDialog","isTitleProduct","isShowDescription","isVisibleProductCalories","isVisibleComponents","currencyCode","currencySymbol","quantityInProductBasket","productId","isCompoundVisible","basketError","quantitySelectedProducts","setProductQuantity","decreaseQuantity","increaseQuantity","useProductCounter","pushMetrics","useSendMetricsOfProduct","onUpdateProductQuantity","quantity","EcommerceEventName","SnackbarType","setProduct","type","getProductMicrolayouts","itemPropProductTitle","itemPropProductDescription","$metrics","useNuxtApp","productClasses","isMainPage","wrapperComponent","wrapperAttrs","isShowHighLight","currentModification","watch","newProduct","ecommerceData","mapEcommerceData","itemScopeProductItem","modification"],"mappings":"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","debug_id":"2e41f713-029a-5a63-b753-850a0952af72"}