{"version":3,"file":"Br3LeVzI.js","sources":["../../../../node_modules/@smenaspace/ui-layer/components/slider/Slider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SliderOverlay } from './types'\n\nconst enum Directions {\n  Prev = 'prev',\n  Next = 'next',\n}\n\ntype Props = {\n  spaceBetween: number\n  slideWidth: number\n  slidesToScroll?: number\n  overlay?: SliderOverlay\n  isVisibleArrows?: boolean\n  isDifferentWidth?: boolean\n  ripple?: boolean\n  snap?: boolean\n  slideClass?: string\n  slideActiveClass?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  slidesToScroll: 1,\n  overlay: undefined,\n  isVisibleArrows: true,\n  ripple: true,\n  snap: true,\n  slideClass: '',\n  slideActiveClass: '',\n})\n\nconst sliderTrackElement = ref<HTMLDivElement | null>(null)\n\nconst isDisabledPrev = ref(true)\n\nconst isDisabledNext = ref(true)\n\nconst sliderTrackScrollWidth = computed(() => {\n  return sliderTrackElement.value?.scrollWidth || 0\n})\n\nconst sliderTrackClientWidth = computed(() => {\n  return sliderTrackElement.value?.clientWidth || 0\n})\n\nconst componentClasses = computed(() => {\n  const classes = ['app-slider']\n\n  if (props.overlay) classes.push(`app-slider--overlay-${props.overlay}`)\n\n  if (props.snap) classes.push('app-slider--snap')\n\n  return classes\n})\n\nconst onScrollTo = (direction: Directions) => {\n  if (!sliderTrackElement.value) return\n\n  /*\n   * Множитель для управления направлением скролла\n   * Назад = меняем координаты на отрицательные\n   * Вперёд = меняем координаты на положительные\n   * */\n  const multiplier = direction === Directions.Prev ? -1 : 1\n\n  // Сдвиг скролла для слайдов с разной шириной\n  const offsetWithDifferentWidth =\n    sliderTrackClientWidth.value * 0.75 * multiplier\n\n  // Сдвиг скролла для слайдов с одинаковой шириной\n  const offsetWithSameWidth =\n    (props.slideWidth + props.spaceBetween) * props.slidesToScroll * multiplier\n\n  const offset = props.isDifferentWidth\n    ? offsetWithDifferentWidth\n    : offsetWithSameWidth\n\n  scrollTo(sliderTrackElement.value.scrollLeft + offset)\n}\n\nconst scrollEventListener = () => {\n  // Сдвиг скролла берущийся из значений в DOM\n  const scrollLeft = Math.ceil(sliderTrackElement?.value?.scrollLeft || 0)\n\n  const scrollWidth = sliderTrackElement?.value?.scrollWidth || 0\n\n  // Скрываем кнопку \"Назад\" когда сдвиг скролла нулевой\n  isDisabledPrev.value = scrollLeft <= 0\n\n  // Скрываем кнопку \"Вперёд\" когда скролл дошёл до правого края\n  isDisabledNext.value =\n    scrollLeft >= scrollWidth - sliderTrackClientWidth.value\n}\n\nconst clickEventListener = (event: Event) => {\n  // Определяем целевой элемент по которому произошёл клик\n  const eventTarget = event.target as HTMLElement\n\n  // Находим ближайший родительский элемент с классом слайда\n  const element = eventTarget.closest(`.${props.slideClass}`) as HTMLElement\n\n  if (!element) return\n\n  scrollTo(getElementOffset(element))\n}\n\nconst scrollToActiveSlide = async () => {\n  if (!props.slideActiveClass) return\n\n  await nextTick()\n\n  // Находим элемент слайда с активным классом\n  const activeElement = sliderTrackElement.value?.querySelector(\n    `.${props.slideActiveClass}`,\n  ) as HTMLElement\n\n  if (!activeElement) return\n\n  scrollTo(getElementOffset(activeElement), 'instant')\n}\n\nconst scrollTo = (left?: number, behavior: ScrollBehavior = 'smooth') => {\n  sliderTrackElement.value?.scrollTo({ left, behavior })\n}\n\n// Вычисление сдвига активного элемента\nconst getElementOffset = (element: HTMLElement) => {\n  const { offsetLeft, clientWidth } = element\n\n  return offsetLeft + clientWidth / 2 - sliderTrackClientWidth.value / 2\n}\n\nonMounted(() => {\n  scrollToActiveSlide()\n\n  // Скрываем кнопку \"Вперёд\" при загрузке, когда скролл не требуется и оба контейнера одинаковой длины\n  isDisabledNext.value =\n    sliderTrackScrollWidth.value === sliderTrackClientWidth.value\n\n  sliderTrackElement.value?.addEventListener('scroll', scrollEventListener)\n\n  if (props.slideClass) {\n    sliderTrackElement.value?.addEventListener('click', clickEventListener)\n  }\n})\n\nonBeforeUnmount(() => {\n  sliderTrackElement.value?.removeEventListener('scroll', scrollEventListener)\n  sliderTrackElement.value?.removeEventListener('click', clickEventListener)\n})\n</script>\n\n<template>\n  <div :class=\"componentClasses\">\n    <template v-if=\"overlay\">\n      <div\n        class=\"app-slider__overlay app-slider__overlay--prev\"\n        :class=\"{ 'app-slider__overlay--hidden': isDisabledPrev }\"\n      />\n      <div\n        class=\"app-slider__overlay app-slider__overlay--next\"\n        :class=\"{ 'app-slider__overlay--hidden': isDisabledNext }\"\n      />\n    </template>\n\n    <template v-if=\"isVisibleArrows\">\n      <the-button\n        class=\"app-slider__button app-slider__button--prev\"\n        :class=\"{ 'app-slider__button--disabled': isDisabledPrev }\"\n        variant=\"transparent\"\n        icon=\"expand-right\"\n        size=\"sm\"\n        radius=\"lg\"\n        aria-label=\"Предыдущий слайд\"\n        type=\"button\"\n        :ripple=\"ripple\"\n        @click=\"onScrollTo(Directions.Prev)\"\n      />\n\n      <the-button\n        class=\"app-slider__button app-slider__button--next\"\n        :class=\"{ 'app-slider__button--disabled': isDisabledNext }\"\n        variant=\"transparent\"\n        icon=\"expand-right\"\n        size=\"sm\"\n        radius=\"lg\"\n        aria-label=\"Следующий слайд\"\n        type=\"button\"\n        :ripple=\"ripple\"\n        @click=\"onScrollTo(Directions.Next)\"\n      />\n    </template>\n\n    <div class=\"app-slider__wrapper\">\n      <div\n        ref=\"sliderTrackElement\"\n        class=\"app-slider__track\"\n        :style=\"{ gap: `${spaceBetween}px` }\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/ui-layer/styles/mixins';\n\n.app-slider {\n  --slider-button-position: -20px;\n  --slider-overlay-gradient: linear-gradient(\n    270deg,\n    var(--ui-white) 15%,\n    rgba(255, 255, 255, 0) 90%\n  );\n\n  position: relative;\n  z-index: 5;\n  width: 100%;\n\n  &__overlay {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    z-index: 4;\n    width: var(--slider-overlay-width);\n    pointer-events: none;\n    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;\n\n    &--hidden {\n      pointer-events: none;\n      visibility: hidden;\n      opacity: 0;\n    }\n\n    &--prev {\n      left: 0;\n      background: var(--slider-overlay-gradient);\n      transform: scale(-1);\n    }\n\n    &--next {\n      right: 0;\n      background: var(--slider-overlay-gradient);\n    }\n  }\n\n  &__button {\n    position: absolute !important;\n    top: 50%;\n    z-index: 5;\n    color: var(--ui-text-primary);\n    background-color: var(--ui-white);\n    box-shadow: var(--ui-card-shadow);\n    transform: translateY(-50%);\n\n    &--disabled {\n      pointer-events: none;\n      visibility: hidden;\n      opacity: 0;\n    }\n\n    &--prev {\n      left: var(--slider-button-position);\n\n      :deep(.app-icon) {\n        transform: scale(-1);\n      }\n    }\n\n    &--next {\n      right: var(--slider-button-position);\n    }\n  }\n\n  &__wrapper {\n    width: 100%;\n    overflow: hidden;\n  }\n\n  &__track {\n    display: flex;\n    overflow-x: auto;\n    scroll-behavior: smooth;\n    @include invisible-scroll-bar();\n\n    & > * {\n      flex-shrink: 0;\n    }\n  }\n\n  /* Modifiers */\n  &--overlay-sm {\n    --slider-button-position: -8px;\n    --slider-overlay-width: 40px;\n    --slider-overlay-gradient: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 0.7) 20%,\n      var(--ui-white) 100%\n    );\n\n    .app-slider__button {\n      background-color: transparent;\n      box-shadow: none;\n    }\n  }\n\n  &--overlay-md {\n    --slider-button-position: -20px;\n    --slider-overlay-width: 52px;\n  }\n\n  &--overlay-lg {\n    --slider-button-position: 16px;\n    --slider-overlay-width: 87px;\n  }\n\n  &--snap {\n    .app-slider__track {\n      -ms-scroll-snap-type: x mandatory;\n      scroll-snap-type: x mandatory;\n\n      & > * {\n        scroll-snap-align: start;\n        scroll-snap-stop: always;\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","sliderTrackElement","ref","isDisabledPrev","isDisabledNext","sliderTrackScrollWidth","computed","_a","sliderTrackClientWidth","componentClasses","classes","onScrollTo","direction","multiplier","offsetWithDifferentWidth","offsetWithSameWidth","offset","scrollTo","scrollEventListener","scrollLeft","scrollWidth","_b","clickEventListener","event","element","getElementOffset","scrollToActiveSlide","nextTick","activeElement","left","behavior","offsetLeft","clientWidth","onMounted","onBeforeUnmount"],"mappings":";;ozBAqBA,MAAMA,EAAQC,EAURC,EAAqBC,EAA2B,IAAI,EAEpDC,EAAiBD,EAAI,EAAI,EAEzBE,EAAiBF,EAAI,EAAI,EAEzBG,EAAyBC,EAAS,IAAM,OACrC,QAAAC,EAAAN,EAAmB,QAAnB,YAAAM,EAA0B,cAAe,CAAA,CACjD,EAEKC,EAAyBF,EAAS,IAAM,OACrC,QAAAC,EAAAN,EAAmB,QAAnB,YAAAM,EAA0B,cAAe,CAAA,CACjD,EAEKE,EAAmBH,EAAS,IAAM,CAChC,MAAAI,EAAU,CAAC,YAAY,EAE7B,OAAIX,EAAM,SAASW,EAAQ,KAAK,uBAAuBX,EAAM,OAAO,EAAE,EAElEA,EAAM,MAAcW,EAAA,KAAK,kBAAkB,EAExCA,CAAA,CACR,EAEKC,EAAcC,GAA0B,CACxC,GAAA,CAACX,EAAmB,MAAO,OAOzB,MAAAY,EAAaD,IAAc,OAAkB,GAAK,EAGlDE,EACJN,EAAuB,MAAQ,IAAOK,EAGlCE,GACHhB,EAAM,WAAaA,EAAM,cAAgBA,EAAM,eAAiBc,EAE7DG,EAASjB,EAAM,iBACjBe,EACAC,EAEKE,EAAAhB,EAAmB,MAAM,WAAae,CAAM,CACvD,EAEME,EAAsB,IAAM,SAEhC,MAAMC,EAAa,KAAK,OAAKZ,EAAAN,GAAA,YAAAA,EAAoB,QAApB,YAAAM,EAA2B,aAAc,CAAC,EAEjEa,IAAcC,EAAApB,GAAA,YAAAA,EAAoB,QAApB,YAAAoB,EAA2B,cAAe,EAG9DlB,EAAe,MAAQgB,GAAc,EAGtBf,EAAA,MACbe,GAAcC,EAAcZ,EAAuB,KACvD,EAEMc,EAAsBC,GAAiB,CAK3C,MAAMC,EAHcD,EAAM,OAGE,QAAQ,IAAIxB,EAAM,UAAU,EAAE,EAErDyB,GAEIP,EAAAQ,EAAiBD,CAAO,CAAC,CACpC,EAEME,EAAsB,SAAY,OAClC,GAAA,CAAC3B,EAAM,iBAAkB,OAE7B,MAAM4B,EAAS,EAGT,MAAAC,GAAgBrB,EAAAN,EAAmB,QAAnB,YAAAM,EAA0B,cAC9C,IAAIR,EAAM,gBAAgB,IAGvB6B,GAEIX,EAAAQ,EAAiBG,CAAa,EAAG,SAAS,CACrD,EAEMX,EAAW,CAACY,EAAeC,EAA2B,WAAa,QACvEvB,EAAAN,EAAmB,QAAnB,MAAAM,EAA0B,SAAS,CAAE,KAAAsB,EAAM,SAAAC,GAC7C,EAGML,EAAoBD,GAAyB,CAC3C,KAAA,CAAE,WAAAO,EAAY,YAAAC,CAAA,EAAgBR,EAEpC,OAAOO,EAAaC,EAAc,EAAIxB,EAAuB,MAAQ,CACvE,EAEA,OAAAyB,EAAU,IAAM,SACMP,EAAA,EAGLtB,EAAA,MACbC,EAAuB,QAAUG,EAAuB,OAEvCD,EAAAN,EAAA,QAAA,MAAAM,EAAO,iBAAiB,SAAUW,GAEjDnB,EAAM,cACWsB,EAAApB,EAAA,QAAA,MAAAoB,EAAO,iBAAiB,QAASC,GACtD,CACD,EAEDY,EAAgB,IAAM,UACD3B,EAAAN,EAAA,QAAA,MAAAM,EAAO,oBAAoB,SAAUW,IACrCG,EAAApB,EAAA,QAAA,MAAAoB,EAAO,oBAAoB,QAASC,EAAkB,CAC1E","debug_id":"49013760-29db-51dd-ab7d-6ed921ae5b6d"}