{"version":3,"file":"CNfn7sGk.js","sources":["../../../../node_modules/@smenaspace/ui-layer/components/slider/Slider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { throttle } from 'throttle-debounce'\nimport type { SliderOverlay } from './types'\nimport SliderDots from './SliderDots.vue'\n\nconst enum Directions {\n  Prev = 'prev',\n  Next = 'next',\n}\n\ntype Props = {\n  spaceBetween: number\n  slideWidth: number\n  slidesToScroll?: number\n  length?: number\n  overlay?: SliderOverlay\n  arrows?: boolean\n  dots?: boolean\n  dotsOffset?: number | string\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  length: undefined,\n  overlay: undefined,\n  arrows: true,\n  ripple: true,\n  snap: true,\n  slideClass: '',\n  slideActiveClass: '',\n  dotsOffset: 8,\n})\n\nconst sliderTrackElement = ref<HTMLDivElement | null>(null)\n\nconst isDisabledPrev = ref(true)\nconst isDisabledNext = ref(true)\n\nconst sliderTrackScrollWidth = ref(0)\nconst sliderTrackClientWidth = ref(0)\n\nconst slideActiveIndex = ref(0)\n\nconst updateWidth = () => {\n  if (!sliderTrackElement.value) return\n\n  const { scrollWidth, clientWidth } = sliderTrackElement.value\n\n  sliderTrackScrollWidth.value = scrollWidth\n  sliderTrackClientWidth.value = clientWidth\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 setSlideActiveIndex = (scrollLeft: number) => {\n  slideActiveIndex.value = Math.round(\n    scrollLeft / (sliderTrackClientWidth.value + props.spaceBetween),\n  )\n}\n\nconst scrollEventListener = throttle(100, () => {\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  setSlideActiveIndex(scrollLeft)\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  updateWidth()\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  if (props.slideActiveClass) scrollToActiveSlide()\n})\n\nonBeforeUnmount(() => {\n  sliderTrackElement.value?.removeEventListener('scroll', scrollEventListener)\n  sliderTrackElement.value?.removeEventListener('click', clickEventListener)\n})\n</script>\n\n<template>\n  <div data-test-id=\"slider\" :class=\"componentClasses\">\n    <template v-if=\"overlay\">\n      <div\n        data-test-id=\"slider-overlay-prev\"\n        class=\"app-slider__overlay app-slider__overlay--prev\"\n        :class=\"{ 'app-slider__overlay--hidden': isDisabledPrev }\"\n      />\n      <div\n        data-test-id=\"slider-overlay-next\"\n        class=\"app-slider__overlay app-slider__overlay--next\"\n        :class=\"{ 'app-slider__overlay--hidden': isDisabledNext }\"\n      />\n    </template>\n\n    <template v-if=\"arrows\">\n      <the-button\n        data-test-id=\"slider-button-prev\"\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        data-test-id=\"slider-button-next\"\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        data-test-id=\"slider-track\"\n        class=\"app-slider__track\"\n        :style=\"{ gap: `${spaceBetween}px` }\"\n      >\n        <slot />\n      </div>\n\n      <SliderDots\n        v-if=\"dots && length > 0\"\n        class=\"app-slider__dots\"\n        :style=\"{ paddingTop: `${dotsOffset}px` }\"\n        :length=\"length\"\n        :active-index=\"slideActiveIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/ui-layer/styles/mixins' as *;\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    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;\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  &__dots {\n    position: absolute;\n    top: 100%;\n    right: 0;\n    left: 0;\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","sliderTrackClientWidth","slideActiveIndex","updateWidth","scrollWidth","clientWidth","componentClasses","computed","classes","onScrollTo","direction","multiplier","offsetWithDifferentWidth","offsetWithSameWidth","offset","scrollTo","setSlideActiveIndex","scrollLeft","scrollEventListener","throttle","_a","_b","clickEventListener","event","element","getElementOffset","scrollToActiveSlide","nextTick","activeElement","left","behavior","offsetLeft","onMounted","onBeforeUnmount"],"mappings":";;guCA0BA,MAAMA,EAAQC,EAYRC,EAAqBC,EAA2B,IAAI,EAEpDC,EAAiBD,EAAI,EAAI,EACzBE,EAAiBF,EAAI,EAAI,EAEzBG,EAAyBH,EAAI,CAAC,EAC9BI,EAAyBJ,EAAI,CAAC,EAE9BK,EAAmBL,EAAI,CAAC,EAExBM,EAAc,IAAM,CACpB,GAAA,CAACP,EAAmB,MAAO,OAE/B,KAAM,CAAE,YAAAQ,EAAa,YAAAC,CAAY,EAAIT,EAAmB,MAExDI,EAAuB,MAAQI,EAC/BH,EAAuB,MAAQI,CACjC,EAEMC,EAAmBC,EAAS,IAAM,CAChC,MAAAC,EAAU,CAAC,YAAY,EAE7B,OAAId,EAAM,SAASc,EAAQ,KAAK,uBAAuBd,EAAM,OAAO,EAAE,EAElEA,EAAM,MAAcc,EAAA,KAAK,kBAAkB,EAExCA,CAAA,CACR,EAEKC,EAAcC,GAA0B,CACxC,GAAA,CAACd,EAAmB,MAAO,OAOzB,MAAAe,EAAaD,IAAc,OAAkB,GAAK,EAGlDE,EACJX,EAAuB,MAAQ,IAAOU,EAGlCE,GACHnB,EAAM,WAAaA,EAAM,cAAgBA,EAAM,eAAiBiB,EAE7DG,EAASpB,EAAM,iBACjBkB,EACAC,EAEKE,EAAAnB,EAAmB,MAAM,WAAakB,CAAM,CACvD,EAEME,EAAuBC,GAAuB,CAClDf,EAAiB,MAAQ,KAAK,MAC5Be,GAAchB,EAAuB,MAAQP,EAAM,aACrD,CACF,EAEMwB,EAAsBC,EAAS,IAAK,IAAM,SAE9C,MAAMF,EAAa,KAAK,OAAKG,EAAAxB,GAAA,YAAAA,EAAoB,QAApB,YAAAwB,EAA2B,aAAc,CAAC,EAEjEhB,IAAciB,EAAAzB,GAAA,YAAAA,EAAoB,QAApB,YAAAyB,EAA2B,cAAe,EAG9DvB,EAAe,MAAQmB,GAAc,EAGtBlB,EAAA,MACbkB,GAAcb,EAAcH,EAAuB,MAErDe,EAAoBC,CAAU,CAAA,CAC/B,EAEKK,EAAsBC,GAAiB,CAK3C,MAAMC,EAHcD,EAAM,OAGE,QAAQ,IAAI7B,EAAM,UAAU,EAAE,EAErD8B,GAEIT,EAAAU,EAAiBD,CAAO,CAAC,CACpC,EAEME,EAAsB,SAAY,OAClC,GAAA,CAAChC,EAAM,iBAAkB,OAE7B,MAAMiC,EAAS,EAGT,MAAAC,GAAgBR,EAAAxB,EAAmB,QAAnB,YAAAwB,EAA0B,cAC9C,IAAI1B,EAAM,gBAAgB,IAGvBkC,GAEIb,EAAAU,EAAiBG,CAAa,EAAG,SAAS,CACrD,EAEMb,EAAW,CAACc,EAAeC,EAA2B,WAAa,QACvEV,EAAAxB,EAAmB,QAAnB,MAAAwB,EAA0B,SAAS,CAAE,KAAAS,EAAM,SAAAC,GAC7C,EAGML,EAAoBD,GAAyB,CAC3C,KAAA,CAAE,WAAAO,EAAY,YAAA1B,CAAA,EAAgBmB,EAEpC,OAAOO,EAAa1B,EAAc,EAAIJ,EAAuB,MAAQ,CACvE,EAEA,OAAA+B,EAAU,IAAM,SACF7B,EAAA,EAGGJ,EAAA,MACbC,EAAuB,QAAUC,EAAuB,OAEvCmB,EAAAxB,EAAA,QAAA,MAAAwB,EAAO,iBAAiB,SAAUF,GAEjDxB,EAAM,cACW2B,EAAAzB,EAAA,QAAA,MAAAyB,EAAO,iBAAiB,QAASC,IAGlD5B,EAAM,kBAAsCgC,EAAA,CAAA,CACjD,EAEDO,EAAgB,IAAM,UACDb,EAAAxB,EAAA,QAAA,MAAAwB,EAAO,oBAAoB,SAAUF,IACrCG,EAAAzB,EAAA,QAAA,MAAAyB,EAAO,oBAAoB,QAASC,EAAkB,CAC1E","debug_id":"51a316e0-9354-5d71-88d1-da93505afd92"}