{"version":3,"file":"Dzv1l442.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  slidesToScroll?: number\n  slideWidth: number\n  overlay?: SliderOverlay\n  isVisibleArrows?: boolean\n  isDifferentWidth?: boolean\n  ripple?: boolean\n  snap?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  slidesToScroll: 1,\n  overlay: undefined,\n  isVisibleArrows: true,\n  ripple: true,\n  snap: true,\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  /*\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  sliderTrackElement.value?.scrollTo({\n    left: sliderTrackElement.value?.scrollLeft + offset,\n    behavior: 'smooth',\n  })\n}\n\nconst onScrollListener = () => {\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\nonMounted(() => {\n  // Скрываем кнопку \"Вперёд\" при загрузке, когда скролл не требуется и оба контейнера одинаковой длины\n  isDisabledNext.value =\n    sliderTrackScrollWidth.value === sliderTrackClientWidth.value\n\n  sliderTrackElement.value?.addEventListener('scroll', onScrollListener)\n})\n\nonBeforeUnmount(() => {\n  sliderTrackElement.value?.removeEventListener('scroll', onScrollListener)\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\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","_b","onScrollListener","scrollLeft","scrollWidth","onMounted","onBeforeUnmount"],"mappings":";;svBAmBA,MAAMA,EAAQC,EAQRC,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,SAMtC,MAAAC,EAAaD,IAAc,OAAkB,GAAK,EAGlDE,EACJN,EAAuB,MAAQ,IAAOK,EAGlCE,GACHhB,EAAM,WAAaA,EAAM,cAAgBA,EAAM,eAAiBc,EAE7DG,EAASjB,EAAM,iBACjBe,EACAC,GAEJE,EAAAhB,EAAmB,QAAnB,MAAAgB,EAA0B,SAAS,CACjC,OAAMV,EAAAN,EAAmB,QAAnB,YAAAM,EAA0B,YAAaS,EAC7C,SAAU,QAAA,EAEd,EAEME,EAAmB,IAAM,SAE7B,MAAMC,EAAa,KAAK,OAAKZ,EAAAN,GAAA,YAAAA,EAAoB,QAApB,YAAAM,EAA2B,aAAc,CAAC,EAEjEa,IAAcH,EAAAhB,GAAA,YAAAA,EAAoB,QAApB,YAAAgB,EAA2B,cAAe,EAG9Dd,EAAe,MAAQgB,GAAc,EAGtBf,EAAA,MACbe,GAAcC,EAAcZ,EAAuB,KACvD,EAEA,OAAAa,EAAU,IAAM,OAECjB,EAAA,MACbC,EAAuB,QAAUG,EAAuB,OAEvCD,EAAAN,EAAA,QAAA,MAAAM,EAAO,iBAAiB,SAAUW,EAAgB,CACtE,EAEDI,EAAgB,IAAM,QACDf,EAAAN,EAAA,QAAA,MAAAM,EAAO,oBAAoB,SAAUW,EAAgB,CACzE","debug_id":"f224c86e-6588-5c1d-bf33-d627acc2a4a1"}