{"version":3,"file":"SwiperList-CFKov21b.mjs","names":[],"sources":["../src/components/display/list/SwiperList.vue","../src/components/display/list/SwiperList.vue"],"sourcesContent":["<template>\n  <div ref=\"root\" class=\"position-relative w-100\">\n    <template v-if=\"!isPhone\">\n      <swiper\n        :key=\"manualReload\"\n        :slides-per-view=\"numberItem\"\n        :space-between=\"gapPx\"\n        :loop=\"loop\"\n        :slides-offset-before=\"offsetSwiper\"\n        :slides-offset-after=\"offsetSwiper\"\n        :allow-slide-next=\"loop\"\n        :allow-slide-prev=\"loop\"\n        :navigation=\"navigationOptions\"\n        :modules=\"modules\"\n        @slides-updated=\"slidesUpdated\"\n        @slide-change=\"slideChange\"\n      >\n        <swiper-slide v-for=\"(obj, index) in listObject\" :key=\"index\">\n          <slot v-if=\"composableInit\" name=\"octopusSlide\" :option=\"obj\" :index=\"index\" />\n        </swiper-slide>\n      </swiper>\n      <div :id=\"prevElId\" class=\"swiper-button-prev\" />\n      <div :id=\"nextElId\" class=\"swiper-button-next\" />\n    </template>\n    <div v-else-if=\"composableInit\" class=\"element-list-inline\">\n      <div v-for=\"(obj, index) in listObject\" :key=\"obj\" class=\"element-list-item\">\n        <slot name=\"octopusSlide\" :option=\"obj\" :index=\"index\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport domHelper from \"../../../helper/domHelper\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Swiper, SwiperSlide } from \"swiper/vue\";\nimport { Navigation } from \"swiper/modules\";\nimport \"swiper/css\";\nimport \"swiper/css/navigation\";\nimport {useResizePhone} from \"../../composable/useResizePhone\";\nimport { computed, getCurrentInstance, nextTick, onMounted, ref, useTemplateRef, watch } from \"vue\";\n\n//Props \nconst props = defineProps({\n  listObject: { default: () => [], type: Array as () => Array<unknown> },\n  /** Size, in **rem**, of the emission items */\n  sizeItemOverload: { default: undefined, type: Number },\n})\n \n//Data\nconst gapPx = 10;\nconst manualReload = ref(0);\nconst numberItem = ref(5);\nconst offsetSwiper = ref(0);\nconst widthSwiperUsable = ref(0);\nconst itemSizeWithoutRecalculed = ref(0);\nconst composableInit = ref(false);\nconst rootRef = useTemplateRef('root');\n\n\n//Composables\nconst { isPhone, windowWidth } = useResizePhone();\n\n\n//Computed\nconst sizeItem = computed(() => {\n  if (props.sizeItemOverload) {\n    return props.sizeItemOverload;\n  }\n  if (windowWidth.value <= 450) {\n    return 12.5;\n  }\n  return state.generalParameters.podcastItem\n    ? state.generalParameters.podcastItem\n    : 13.5;\n});\nconst itemRecalculizedSize = computed(() => {\n  const totalGap = gapPx * Math.max(numberItem.value - 1, 0);\n  return (widthSwiperUsable.value - totalGap) / numberItem.value;\n});\n\n/** Indicates that the swiper should loop */\nconst loop = computed((): boolean => {\n  return (props.listObject.length > numberItem.value);\n});\n\nconst modules = computed(() => {\n  if (loop.value === true) {\n    return [Navigation];\n  } else {\n    return [];\n  }\n});\n\nconst uid = computed((): number => {\n  const instance = getCurrentInstance();\n  return instance.uid;\n});\nconst prevElId = computed((): string => 'swiper-button-prev-' + uid.value);\nconst nextElId = computed((): string => 'swiper-button-next-' + uid.value);\nconst navigationOptions = computed(() => ({\n  prevEl: '#' + prevElId.value,\n  nextEl: '#' + nextElId.value\n}));\n\n//Watch\nwatch(windowWidth, () => onWindowResize());\nwatch(()=>props.listObject, () => {\n  manualReload.value += 1;\n}, {deep:true});\n\n\nonMounted(()=>{\n  nextTick(() => {\n    onWindowResize();\n    composableInit.value = true;\n  });\n})\n\n\n//Methods\nfunction onWindowResize(){\n  const el = rootRef?.value as HTMLElement;\n  if (!el) return;\n  widthSwiperUsable.value =el.offsetWidth - offsetSwiper.value * 2;\n  const itemSizePx = domHelper.convertRemToPixels(sizeItem.value + 0.5);\n  numberItem.value = Math.max(\n    1,\n    Math.floor((widthSwiperUsable.value + gapPx) / (itemSizePx + gapPx)),\n  );\n  itemSizeWithoutRecalculed.value =el.offsetWidth / numberItem.value;\n}\nfunction slidesUpdated() {\n  const el = rootRef?.value as HTMLElement;\n  if (!el) return;\n  const slides = el.getElementsByClassName(\"swiper-slide\") as Array<HTMLElement>;\n  for (const slide of slides) {\n    slide.style.width = itemRecalculizedSize.value + \"px\";\n  }\n}\nfunction slideChange() {\n  const el = rootRef?.value as HTMLElement;\n  if (!el) return;\n  const wrapper = el.getElementsByClassName(\"swiper-wrapper\")[0] as HTMLElement;\n  if (wrapper.style.transform.includes(\"translate3d(40px\")) {\n    return;\n  }\n  const matches = /^^translate3d\\((-*\\d+\\.*\\d*)px/.exec(\n    wrapper.style.transform,\n  );\n  if (!matches || matches.length <= 1) {\n    return;\n  }\n  const transformPixel = parseFloat(matches[1]) - offsetSwiper.value;\n  const nbTransformItems = Math.round(\n    transformPixel / itemSizeWithoutRecalculed.value,\n  );\n  wrapper.style.transform =\n    \"translate3d(\" +\n    (nbTransformItems * (itemRecalculizedSize.value + gapPx) + offsetSwiper.value) +\n    \"px, 0px, 0px)\";\n}\n</script>\n\n<style lang=\"scss\">\n:root {\n  --swiper-navigation-sides-offset: -50px;\n}\n\n.swiper {\n  width: 100%;\n  height: 100%;\n}\n\n.swiper-button-next,\n.swiper-button-prev {\n  color: var(--octopus-primary) !important;\n  //height: 100%;\n  inset-block:0;\n  margin: 0;\n  width: 40px;\n  z-index: 5;\n  //background: var(--octopus-background);\n}\n\n.swiper-button-lock {\n  display: flex;\n}\n\n.swiper-slide {\n  display: flex !important;\n  align-items: center;\n  justify-content: center;\n}\n</style>\n","<template>\n  <div ref=\"root\" class=\"position-relative w-100\">\n    <template v-if=\"!isPhone\">\n      <swiper\n        :key=\"manualReload\"\n        :slides-per-view=\"numberItem\"\n        :space-between=\"gapPx\"\n        :loop=\"loop\"\n        :slides-offset-before=\"offsetSwiper\"\n        :slides-offset-after=\"offsetSwiper\"\n        :allow-slide-next=\"loop\"\n        :allow-slide-prev=\"loop\"\n        :navigation=\"navigationOptions\"\n        :modules=\"modules\"\n        @slides-updated=\"slidesUpdated\"\n        @slide-change=\"slideChange\"\n      >\n        <swiper-slide v-for=\"(obj, index) in listObject\" :key=\"index\">\n          <slot v-if=\"composableInit\" name=\"octopusSlide\" :option=\"obj\" :index=\"index\" />\n        </swiper-slide>\n      </swiper>\n      <div :id=\"prevElId\" class=\"swiper-button-prev\" />\n      <div :id=\"nextElId\" class=\"swiper-button-next\" />\n    </template>\n    <div v-else-if=\"composableInit\" class=\"element-list-inline\">\n      <div v-for=\"(obj, index) in listObject\" :key=\"obj\" class=\"element-list-item\">\n        <slot name=\"octopusSlide\" :option=\"obj\" :index=\"index\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport domHelper from \"../../../helper/domHelper\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Swiper, SwiperSlide } from \"swiper/vue\";\nimport { Navigation } from \"swiper/modules\";\nimport \"swiper/css\";\nimport \"swiper/css/navigation\";\nimport {useResizePhone} from \"../../composable/useResizePhone\";\nimport { computed, getCurrentInstance, nextTick, onMounted, ref, useTemplateRef, watch } from \"vue\";\n\n//Props \nconst props = defineProps({\n  listObject: { default: () => [], type: Array as () => Array<unknown> },\n  /** Size, in **rem**, of the emission items */\n  sizeItemOverload: { default: undefined, type: Number },\n})\n \n//Data\nconst gapPx = 10;\nconst manualReload = ref(0);\nconst numberItem = ref(5);\nconst offsetSwiper = ref(0);\nconst widthSwiperUsable = ref(0);\nconst itemSizeWithoutRecalculed = ref(0);\nconst composableInit = ref(false);\nconst rootRef = useTemplateRef('root');\n\n\n//Composables\nconst { isPhone, windowWidth } = useResizePhone();\n\n\n//Computed\nconst sizeItem = computed(() => {\n  if (props.sizeItemOverload) {\n    return props.sizeItemOverload;\n  }\n  if (windowWidth.value <= 450) {\n    return 12.5;\n  }\n  return state.generalParameters.podcastItem\n    ? state.generalParameters.podcastItem\n    : 13.5;\n});\nconst itemRecalculizedSize = computed(() => {\n  const totalGap = gapPx * Math.max(numberItem.value - 1, 0);\n  return (widthSwiperUsable.value - totalGap) / numberItem.value;\n});\n\n/** Indicates that the swiper should loop */\nconst loop = computed((): boolean => {\n  return (props.listObject.length > numberItem.value);\n});\n\nconst modules = computed(() => {\n  if (loop.value === true) {\n    return [Navigation];\n  } else {\n    return [];\n  }\n});\n\nconst uid = computed((): number => {\n  const instance = getCurrentInstance();\n  return instance.uid;\n});\nconst prevElId = computed((): string => 'swiper-button-prev-' + uid.value);\nconst nextElId = computed((): string => 'swiper-button-next-' + uid.value);\nconst navigationOptions = computed(() => ({\n  prevEl: '#' + prevElId.value,\n  nextEl: '#' + nextElId.value\n}));\n\n//Watch\nwatch(windowWidth, () => onWindowResize());\nwatch(()=>props.listObject, () => {\n  manualReload.value += 1;\n}, {deep:true});\n\n\nonMounted(()=>{\n  nextTick(() => {\n    onWindowResize();\n    composableInit.value = true;\n  });\n})\n\n\n//Methods\nfunction onWindowResize(){\n  const el = rootRef?.value as HTMLElement;\n  if (!el) return;\n  widthSwiperUsable.value =el.offsetWidth - offsetSwiper.value * 2;\n  const itemSizePx = domHelper.convertRemToPixels(sizeItem.value + 0.5);\n  numberItem.value = Math.max(\n    1,\n    Math.floor((widthSwiperUsable.value + gapPx) / (itemSizePx + gapPx)),\n  );\n  itemSizeWithoutRecalculed.value =el.offsetWidth / numberItem.value;\n}\nfunction slidesUpdated() {\n  const el = rootRef?.value as HTMLElement;\n  if (!el) return;\n  const slides = el.getElementsByClassName(\"swiper-slide\") as Array<HTMLElement>;\n  for (const slide of slides) {\n    slide.style.width = itemRecalculizedSize.value + \"px\";\n  }\n}\nfunction slideChange() {\n  const el = rootRef?.value as HTMLElement;\n  if (!el) return;\n  const wrapper = el.getElementsByClassName(\"swiper-wrapper\")[0] as HTMLElement;\n  if (wrapper.style.transform.includes(\"translate3d(40px\")) {\n    return;\n  }\n  const matches = /^^translate3d\\((-*\\d+\\.*\\d*)px/.exec(\n    wrapper.style.transform,\n  );\n  if (!matches || matches.length <= 1) {\n    return;\n  }\n  const transformPixel = parseFloat(matches[1]) - offsetSwiper.value;\n  const nbTransformItems = Math.round(\n    transformPixel / itemSizeWithoutRecalculed.value,\n  );\n  wrapper.style.transform =\n    \"translate3d(\" +\n    (nbTransformItems * (itemRecalculizedSize.value + gapPx) + offsetSwiper.value) +\n    \"px, 0px, 0px)\";\n}\n</script>\n\n<style lang=\"scss\">\n:root {\n  --swiper-navigation-sides-offset: -50px;\n}\n\n.swiper {\n  width: 100%;\n  height: 100%;\n}\n\n.swiper-button-next,\n.swiper-button-prev {\n  color: var(--octopus-primary) !important;\n  //height: 100%;\n  inset-block:0;\n  margin: 0;\n  width: 40px;\n  z-index: 5;\n  //background: var(--octopus-background);\n}\n\n.swiper-button-lock {\n  display: flex;\n}\n\n.swiper-slide {\n  display: flex !important;\n  align-items: center;\n  justify-content: center;\n}\n</style>\n"],"mappings":"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"}