{"version":3,"file":"UISliderBase-v2.js","sources":["../../../../../design-system/components/UI/Slider/UISliderBase.props.ts","../../../../../design-system/components/UI/Slider/UISliderBase.vue"],"sourcesContent":["import type { EmblaOptionsType } from 'embla-carousel'\nimport type { EmblaCarouselVueType } from 'embla-carousel-vue'\n\nexport interface UISliderBaseProps {\n  /**\n   * Embla carousel options\n   * @see https://www.embla-carousel.com/api/options/\n   */\n  options?: EmblaOptionsType\n\n  /**\n   * Enable/disable the slider\n   * @default true\n   */\n  enabled?: boolean\n\n  /**\n   * Class to be applied to the slider container\n   */\n  containerClass?: string\n\n  /**\n   * Class to be applied to the slides wrapper\n   */\n  slidesWrapperClass?: string\n\n  /**\n   * Class to be applied to each slide\n   */\n  slideClass?: string\n\n  /**\n   * Center content horizontally\n   */\n  justifyCenter?: boolean\n}\n\nexport interface UISliderBaseEmits {\n  /**\n   * Emitted when Embla is initialized\n   */\n  (event: 'init', api: NonNullable<EmblaCarouselVueType[1]>): void\n\n  /**\n   * Emitted when the selected slide changes\n   */\n  (event: 'select', selectedIndex: number): void\n\n  /**\n   * Emitted when the slider starts scrolling\n   */\n  (event: 'scroll-start'): void\n\n  /**\n   * Emitted when the slider stops scrolling\n   */\n  (event: 'scroll-end'): void\n\n  /**\n   * Emitted when the slider is resized\n   */\n  (event: 'resize'): void\n}\n\nexport interface UISliderBaseSlots {\n  default: () => any\n  'button-navigation-prev'?: (props: { disabled: boolean }) => any\n  'button-navigation-next'?: (props: { disabled: boolean }) => any\n  'bullets-navigation'?: (props: {\n    selectedIndex: number\n    slidesCount: number\n  }) => any\n  scrollbar?: (props: { progress: number }) => any\n}\n\nexport interface UISliderInjectionState {\n  api: NonNullable<EmblaCarouselVueType[1]>\n  canScrollNext: boolean\n  canScrollPrev: boolean\n  selectedIndex: number\n  slidesCount: number\n  scrollProgress: number\n  scrollTo: (index: number) => void\n  scrollNext: () => void\n  scrollPrev: () => void\n}\n\n// Injection key for provide/inject\nexport const SLIDER_INJECTION_KEY = Symbol('slider-state')\n","<script setup lang=\"ts\">\nimport useEmblaCarousel from 'embla-carousel-vue'\nimport type { EmblaCarouselType } from 'embla-carousel'\nimport type {\n  UISliderBaseProps,\n  UISliderBaseEmits,\n  UISliderInjectionState,\n} from './UISliderBase.props'\nimport { SLIDER_INJECTION_KEY } from './UISliderBase.props'\n\nconst props = withDefaults(defineProps<UISliderBaseProps>(), {\n  options: () => ({}),\n  enabled: true,\n  justifyCenter: false,\n  containerClass: '',\n  slidesWrapperClass: '',\n  slideClass: '',\n})\n\nconst emit = defineEmits<UISliderBaseEmits>()\n\n// Core state\nconst enabled = ref(props.enabled)\nconst selectedIndex = ref(0)\nconst slidesCount = ref(0)\nconst scrollProgress = ref(0)\n\n// Initialize Embla\nconst [emblaNode, emblaApi] = useEmblaCarousel({\n  ...props.options,\n  active: enabled.value,\n})\n\n// Reactive state for navigation\nconst emblaState = reactive<{\n  canScrollNext: boolean\n  canScrollPrev: boolean\n  selectedIndex: number\n  slidesCount: number\n  scrollProgress: number\n  scrollMeasurements: {\n    width: number\n    scrollWidth: number\n  } | null\n}>({\n  canScrollNext: false,\n  canScrollPrev: false,\n  selectedIndex: 0,\n  slidesCount: 0,\n  scrollProgress: 0,\n  scrollMeasurements: null,\n})\n\n// Update navigation state\nfunction updateState() {\n  if (!emblaApi.value) return\n\n  const api = emblaApi.value\n  emblaState.canScrollNext = api.canScrollNext()\n  emblaState.canScrollPrev = api.canScrollPrev()\n  emblaState.selectedIndex = api.selectedScrollSnap()\n  emblaState.slidesCount = api.scrollSnapList().length\n  emblaState.scrollProgress = api.scrollProgress()\n  emblaState.scrollMeasurements = {\n    width: api.rootNode()?.getBoundingClientRect().width,\n    scrollWidth: api.containerNode()?.scrollWidth,\n  }\n}\n\n// Navigation methods\nconst scrollNext = () => {\n  emblaApi.value?.scrollNext()\n  updateState()\n}\n\nconst scrollPrev = () => {\n  emblaApi.value?.scrollPrev()\n  updateState()\n}\n\nconst scrollTo = (index: number) => {\n  if (index < 0 || index >= emblaState.slidesCount) {\n    console.warn(\n      `Invalid slide index: ${index}. Slide index must be between 0 and ${emblaState.slidesCount - 1}.`\n    )\n    return\n  }\n\n  emblaApi.value?.scrollTo(index)\n  updateState()\n}\n\n// Event handlers\nconst handleInit = () => {\n  if (!emblaApi.value) return\n  updateState()\n  emit('init', emblaApi)\n}\n\nconst handleSelect = () => {\n  if (!emblaApi.value) return\n  selectedIndex.value = emblaApi.value.selectedScrollSnap()\n  emit('select', selectedIndex.value)\n  updateState()\n}\n\nconst handleScroll = () => {\n  if (!emblaApi.value) return\n  scrollProgress.value = emblaApi.value.scrollProgress()\n  updateState()\n}\n\nconst handleResize = () => {\n  if (!emblaApi.value) return\n  updateState()\n  emit('resize')\n}\n\n// Watch for prop changes\nwatch(\n  () => props.enabled,\n  newVal => {\n    if (emblaApi.value) {\n      emblaApi.value.reInit({\n        ...props.options,\n        active: newVal,\n      })\n    }\n  }\n)\n\nwatch(\n  () => props.options,\n  newVal => {\n    if (emblaApi.value) {\n      emblaApi.value.reInit(newVal)\n    }\n  },\n  { deep: true }\n)\n\n// Provide slider state immediately\nconst sliderState = reactive<UISliderInjectionState>({\n  api: emblaApi,\n  canScrollNext: false,\n  canScrollPrev: false,\n  selectedIndex: 0,\n  slidesCount: 0,\n  scrollProgress: 0,\n  scrollTo,\n  scrollNext,\n  scrollPrev,\n})\n\n// Watch for state changes\nwatch(\n  () => emblaState,\n  newState => {\n    sliderState.canScrollNext = newState.canScrollNext\n    sliderState.canScrollPrev = newState.canScrollPrev\n    sliderState.selectedIndex = newState.selectedIndex\n    sliderState.slidesCount = newState.slidesCount\n    sliderState.scrollProgress = newState.scrollProgress\n  },\n  { deep: true, immediate: true }\n)\n\n// Provide the state before mounting\nprovide(SLIDER_INJECTION_KEY, readonly(sliderState))\n\n// Lifecycle hooks\nonMounted(() => {\n  if (!emblaApi.value) return\n\n  // Setup event listeners\n  emblaApi.value\n    .on('init', handleInit)\n    .on('select', handleSelect)\n    .on('scroll', handleScroll)\n    .on('resize', handleResize)\n\n  // Initial state update\n  updateState()\n})\n\nonUnmounted(() => {\n  if (!emblaApi.value) return\n\n  // Remove event listeners\n  emblaApi.value\n    .off('init', handleInit)\n    .off('select', handleSelect)\n    .off('scroll', handleScroll)\n    .off('resize', handleResize)\n\n  // Cleanup\n  emblaApi.value.destroy()\n})\n\n// Computed values for scrollbar\nconst scrollbarMeasurements = computed(() => {\n  if (!emblaApi.value) return null\n  const api = emblaApi.value\n  const viewport = api.rootNode()\n  const container = api.containerNode()\n\n  if (!viewport || !container) return null\n\n  return {\n    viewportWidth: viewport.getBoundingClientRect().width,\n    scrollWidth: container.scrollWidth,\n  }\n})\n\n// Expose API\ndefineExpose({\n  api: emblaApi,\n  scrollTo,\n  scrollNext,\n  scrollPrev,\n})\n</script>\n\n<template>\n  <div class=\"slider-base-container\">\n    <div\n      ref=\"emblaNode\"\n      class=\"embla\"\n      :class=\"[containerClass]\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        class=\"embla__container\"\n        :class=\"[\n          slidesWrapperClass,\n          { 'is-vertical': options?.axis === 'y' },\n          { 'md:justify-center': justifyCenter },\n        ]\"\n      >\n        <slot />\n      </div>\n    </div>\n\n    <div class=\"navigation-buttons-container\">\n      <div class=\"navigation-button-prev\" @click.stop=\"scrollPrev\">\n        <slot\n          name=\"button-navigation-prev\"\n          :disabled=\"!emblaState.canScrollPrev\"\n        />\n      </div>\n\n      <div class=\"navigation-button-next\" @click.stop=\"scrollNext\">\n        <slot\n          name=\"button-navigation-next\"\n          :disabled=\"!emblaState.canScrollNext\"\n        />\n      </div>\n    </div>\n\n    <slot\n      name=\"scrollbar\"\n      :progress=\"emblaState.scrollProgress\"\n      :measurements=\"scrollbarMeasurements\"\n    />\n\n    <slot\n      name=\"bullets-navigation\"\n      :selected-index=\"emblaState.selectedIndex\"\n      :slides-count=\"emblaState.slidesCount\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.slider-base-container {\n  position: relative;\n  width: 100%;\n}\n\n.embla {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.embla__container {\n  display: flex;\n  height: 100%;\n  user-select: none;\n  -webkit-touch-callout: none;\n  -khtml-user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-overflow-scrolling: touch;\n  margin: 0;\n\n  &.is-vertical {\n    flex-direction: column;\n  }\n}\n\n.navigation-buttons-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  z-index: 1;\n\n  .navigation-button-prev,\n  .navigation-button-next {\n    position: absolute;\n    top: 0;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    pointer-events: auto;\n  }\n\n  .navigation-button-prev {\n    left: var(--padding-x);\n  }\n\n  .navigation-button-next {\n    right: var(--padding-x);\n  }\n}\n</style>\n"],"names":["SLIDER_INJECTION_KEY","_hoisted_2","__props","__expose","__emit","props","emit","enabled","ref","selectedIndex","scrollProgress","emblaNode","emblaApi","emblaState","reactive","updateState","api","_a","scrollNext","scrollPrev","scrollTo","index","handleInit","handleSelect","handleScroll","handleResize","watch","newVal","sliderState","newState","provide","readonly","onMounted","onUnmounted","scrollbarMeasurements","computed","viewport","container"],"mappings":"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"}