@saooti/octopus-sdk 42.1.2 → 42.2.0

package/dist/SubscribeButtons-YXH0jr-u.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscribeButtons-YXH0jr-u.mjs","names":[],"sources":["../src/components/display/sharing/SubscribeButtons.vue","../src/components/display/sharing/SubscribeButtons.vue"],"sourcesContent":["<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n","<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/SwiperList-B5iYhj9n.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwiperList-B5iYhj9n.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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"}

package/dist/SwiperList-CTQ7Jt8y.mjs

@@ -0,0 +1,207 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
+import { t as domHelper_default } from "./domHelper-DTMIrMbs.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { A as state } from "./classicApi-1jdxJdNn.mjs";
+import { t as useResizePhone } from "./useResizePhone-CpfFUmfV.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, nextTick, onMounted, openBlock, ref, renderList, renderSlot, useTemplateRef, watch, withCtx } from "vue";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Navigation } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+//#region src/components/display/list/SwiperList.vue?vue&type=script&setup=true&lang.ts
+var gapPx = 10;
+var SwiperList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SwiperList",
+	props: {
+		listObject: {
+			default: () => [],
+			type: Array
+		},
+		/** Size, in **rem**, of the emission items */
+		sizeItemOverload: {
+			default: void 0,
+			type: Number
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const manualReload = ref(0);
+		const numberItem = ref(5);
+		const offsetSwiper = ref(0);
+		const widthSwiperUsable = ref(0);
+		const itemSizeWithoutRecalculed = ref(0);
+		const composableInit = ref(false);
+		const rootRef = useTemplateRef("root");
+		const { isPhone, windowWidth } = useResizePhone();
+		const sizeItem = computed(() => {
+			if (props.sizeItemOverload) return props.sizeItemOverload;
+			if (windowWidth.value <= 450) return 12.5;
+			return state.generalParameters.podcastItem ? state.generalParameters.podcastItem : 13.5;
+		});
+		const itemRecalculizedSize = computed(() => {
+			const totalGap = gapPx * Math.max(numberItem.value - 1, 0);
+			return (widthSwiperUsable.value - totalGap) / numberItem.value;
+		});
+		/** Indicates that the swiper should loop */
+		const loop = computed(() => {
+			return props.listObject.length > numberItem.value;
+		});
+		const modules = computed(() => {
+			if (loop.value === true) return [Navigation];
+			else return [];
+		});
+		const uid = computed(() => {
+			return getCurrentInstance().uid;
+		});
+		const prevElId = computed(() => "swiper-button-prev-" + uid.value);
+		const nextElId = computed(() => "swiper-button-next-" + uid.value);
+		const navigationOptions = computed(() => ({
+			prevEl: "#" + prevElId.value,
+			nextEl: "#" + nextElId.value
+		}));
+		watch(windowWidth, () => onWindowResize());
+		watch(() => props.listObject, () => {
+			manualReload.value += 1;
+		}, { deep: true });
+		onMounted(() => {
+			nextTick(() => {
+				onWindowResize();
+				composableInit.value = true;
+			});
+		});
+		function onWindowResize() {
+			const el = rootRef?.value;
+			if (!el) return;
+			widthSwiperUsable.value = el.offsetWidth - offsetSwiper.value * 2;
+			const itemSizePx = domHelper_default.convertRemToPixels(sizeItem.value + .5);
+			numberItem.value = Math.max(1, Math.floor((widthSwiperUsable.value + gapPx) / (itemSizePx + gapPx)));
+			itemSizeWithoutRecalculed.value = el.offsetWidth / numberItem.value;
+		}
+		function slidesUpdated() {
+			const el = rootRef?.value;
+			if (!el) return;
+			const slides = el.getElementsByClassName("swiper-slide");
+			for (const slide of slides) slide.style.width = itemRecalculizedSize.value + "px";
+		}
+		function slideChange() {
+			const el = rootRef?.value;
+			if (!el) return;
+			const wrapper = el.getElementsByClassName("swiper-wrapper")[0];
+			if (wrapper.style.transform.includes("translate3d(40px")) return;
+			const matches = /^^translate3d\((-*\d+\.*\d*)px/.exec(wrapper.style.transform);
+			if (!matches || matches.length <= 1) return;
+			const transformPixel = parseFloat(matches[1]) - offsetSwiper.value;
+			const nbTransformItems = Math.round(transformPixel / itemSizeWithoutRecalculed.value);
+			wrapper.style.transform = "translate3d(" + (nbTransformItems * (itemRecalculizedSize.value + gapPx) + offsetSwiper.value) + "px, 0px, 0px)";
+		}
+		const __returned__ = {
+			props,
+			gapPx,
+			manualReload,
+			numberItem,
+			offsetSwiper,
+			widthSwiperUsable,
+			itemSizeWithoutRecalculed,
+			composableInit,
+			rootRef,
+			isPhone,
+			windowWidth,
+			sizeItem,
+			itemRecalculizedSize,
+			loop,
+			modules,
+			uid,
+			prevElId,
+			nextElId,
+			navigationOptions,
+			onWindowResize,
+			slidesUpdated,
+			slideChange,
+			get Swiper() {
+				return Swiper;
+			},
+			get SwiperSlide() {
+				return SwiperSlide;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+//#endregion
+//#region src/components/display/list/SwiperList.vue
+var SwiperList_exports = /* @__PURE__ */ __exportAll({ default: () => SwiperList_default });
+var _hoisted_1 = {
+	ref: "root",
+	class: "position-relative w-100"
+};
+var _hoisted_2 = ["id"];
+var _hoisted_3 = ["id"];
+var _hoisted_4 = {
+	key: 1,
+	class: "element-list-inline"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", _hoisted_1, [!$setup.isPhone ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+		(openBlock(), createBlock($setup["Swiper"], {
+			key: $setup.manualReload,
+			"slides-per-view": $setup.numberItem,
+			"space-between": $setup.gapPx,
+			loop: $setup.loop,
+			"slides-offset-before": $setup.offsetSwiper,
+			"slides-offset-after": $setup.offsetSwiper,
+			"allow-slide-next": $setup.loop,
+			"allow-slide-prev": $setup.loop,
+			navigation: $setup.navigationOptions,
+			modules: $setup.modules,
+			onSlidesUpdated: $setup.slidesUpdated,
+			onSlideChange: $setup.slideChange
+		}, {
+			default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList($props.listObject, (obj, index) => {
+				return openBlock(), createBlock($setup["SwiperSlide"], { key: index }, {
+					default: withCtx(() => [$setup.composableInit ? renderSlot(_ctx.$slots, "octopusSlide", {
+						key: 0,
+						option: obj,
+						index
+					}) : createCommentVNode("v-if", true)]),
+					_: 2
+				}, 1024);
+			}), 128))]),
+			_: 3
+		}, 8, [
+			"slides-per-view",
+			"loop",
+			"slides-offset-before",
+			"slides-offset-after",
+			"allow-slide-next",
+			"allow-slide-prev",
+			"navigation",
+			"modules"
+		])),
+		createElementVNode("div", {
+			id: $setup.prevElId,
+			class: "swiper-button-prev"
+		}, null, 8, _hoisted_2),
+		createElementVNode("div", {
+			id: $setup.nextElId,
+			class: "swiper-button-next"
+		}, null, 8, _hoisted_3)
+	], 64)) : $setup.composableInit ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList($props.listObject, (obj, index) => {
+		return openBlock(), createElementBlock("div", {
+			key: obj,
+			class: "element-list-item"
+		}, [renderSlot(_ctx.$slots, "octopusSlide", {
+			option: obj,
+			index
+		})]);
+	}), 128))])) : createCommentVNode("v-if", true)], 512);
+}
+var SwiperList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SwiperList_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render], ["__file", "/home/julien/Workspace/octopus-sdk/src/components/display/list/SwiperList.vue"]]);
+//#endregion
+export { SwiperList_exports as n, SwiperList_default as t };
+
+//# sourceMappingURL=SwiperList-CTQ7Jt8y.mjs.map

package/dist/SwiperList-CTQ7Jt8y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwiperList-CTQ7Jt8y.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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"}

package/dist/SwiperList-D8SO3Jhr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwiperList-D8SO3Jhr.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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"}

package/dist/SwiperList-D9irPcis.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwiperList-D9irPcis.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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"}

package/dist/SwiperList-DoOIgAp8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwiperList-DoOIgAp8.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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"}

package/dist/SwiperList-DozCqnS-.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwiperList-DozCqnS-.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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"}

package/dist/SwiperList-e2b8uKKS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwiperList-e2b8uKKS.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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"}

package/dist/SwiperList-oOWaXHrC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwiperList-oOWaXHrC.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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"}

package/dist/TagList-B7S-QXor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagList-B7S-QXor.mjs","names":[],"sources":["../src/components/display/podcasts/TagList.vue","../src/components/display/podcasts/TagList.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"undefined !== tagListFiltered && 0 !== tagListFiltered.length\"\n    class=\"tag-list-component d-flex align-items-center flex-wrap mb-3 small-text\"\n  >\n    <div class=\"fw-bold me-3\">\n      {{ t(\"Podcast tags\") + \" : \" }}\n    </div>\n    <router-link\n      v-for=\"(tag, index) in tags\"\n      :key=\"tag\"\n      class=\"d-flex align-items-center border p-1 m-1 text-dark\"\n      :to=\"{\n        name: 'tag',\n        params: { tag },\n        query: organisationQuery\n      }\"\n    >\n      <template v-if=\"!isOuestFranceTag(tag)\">{{ tag }}</template>\n      <template v-else>\n        <button\n          :id=\"'tag-list-from-podcast-page' + index\"\n          class=\"btn-transparent d-flex align-items-center\"\n        >\n          <img\n            width=\"20\"\n            height=\"20\"\n            class=\"ouest-france-logo\"\n            aria-hidden=\"true\"\n            alt=\"\"\n            title=\"Ouest France\"\n            src=\"/img/ouest_france_logo.svg\" \n          />\n          {{ formateOfTag(tag) }}\n        </button>\n        <ClassicPopover\n          :target=\"'tag-list-from-podcast-page' + index\"\n          :content=\"tag.substring(4, tag.length)\"\n          relative-class=\"page-element\"\n          :is-fixed=\"true\"\n        />\n      </template>\n    </router-link>\n\n    <button\n      v-if=\"limitTags && !showAllTags\"\n      class=\"btn\"\n      @click=\"showAllTags = true\"\n    >\n      {{ t('See more') }}\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent, ref } from \"vue\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../../misc/ClassicPopover.vue\"),\n);\nimport {useTagOf} from \"../../composable/useTagOf\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  tagList: { default: () => [], type: Array as () => Array<string> },\n  podcastAnnotations: {\n    default: () => {},\n    type: Object as () => {\n      [key: string]: string | number | boolean | undefined;\n    },\n  },\n  orgaId: {default: \"\", type: String },\n  /** Max number of tags to display */\n  max: { type: Number, default: undefined }\n})\n\n\n//Composables\nconst { t } = useI18n()\nconst { isOuestFranceTag, formateOfTag } = useTagOf();\nconst filterStore = useFilterStore();\n\nconst showAllTags = ref(false);\n\n//Computed\nconst limitTags = computed((): boolean => {\n  return !!props.max && tagListFiltered.value.length > props.max;\n});\n\nconst tags = computed(() => {\n  if (limitTags.value && !showAllTags.value) {\n    return limitedTags.value;\n  } else {\n    return tagListFiltered.value;\n  }\n});\n\nconst tagListFiltered = computed(() => {\n  const tags = props.tagList.filter((tag: string) => {\n    return !tag.match(/^\\[\\[.*\\]\\]$/);\n  });\n\n  // Each tag is only displayed once\n  return tags.filter((tag, index) => tags.indexOf(tag) === index);\n});\n\nconst limitedTags = computed(() => {\n  return tagListFiltered.value.slice(0, props.max);\n});\n\nconst organisationQuery = computed(() => {\n  if(filterStore.filterOrgaId){\n    return undefined;\n  }\n  return { o: props.orgaId };\n});\n/* const ouestFranceMainTag = computed(() => {\n  if (props.podcastAnnotations?.[\"mainOfTag\"]) {\n    for (const key in props.podcastAnnotations) {\n      if (\n        props.podcastAnnotations[key] ===\n        props.podcastAnnotations[\"mainOfTag\"] &&\n        key !== \"mainOfTag\"\n      ) {\n        return \"[of]\" + key;\n      }\n    }\n  }\n  return undefined;\n}); */\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app {\n  .tag-list-component {\n    .ouest-france-logo {\n      width: 20px;\n      height: 20px;\n      margin-right: 5px;\n    }\n\n    .main-of-tag {\n      box-shadow: var(--octopus-shadow) 0 5px 15px;\n      font-size: 0.9rem;\n    }\n  }\n\n  .btn {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n}\n</style>\n","<template>\n  <div\n    v-if=\"undefined !== tagListFiltered && 0 !== tagListFiltered.length\"\n    class=\"tag-list-component d-flex align-items-center flex-wrap mb-3 small-text\"\n  >\n    <div class=\"fw-bold me-3\">\n      {{ t(\"Podcast tags\") + \" : \" }}\n    </div>\n    <router-link\n      v-for=\"(tag, index) in tags\"\n      :key=\"tag\"\n      class=\"d-flex align-items-center border p-1 m-1 text-dark\"\n      :to=\"{\n        name: 'tag',\n        params: { tag },\n        query: organisationQuery\n      }\"\n    >\n      <template v-if=\"!isOuestFranceTag(tag)\">{{ tag }}</template>\n      <template v-else>\n        <button\n          :id=\"'tag-list-from-podcast-page' + index\"\n          class=\"btn-transparent d-flex align-items-center\"\n        >\n          <img\n            width=\"20\"\n            height=\"20\"\n            class=\"ouest-france-logo\"\n            aria-hidden=\"true\"\n            alt=\"\"\n            title=\"Ouest France\"\n            src=\"/img/ouest_france_logo.svg\" \n          />\n          {{ formateOfTag(tag) }}\n        </button>\n        <ClassicPopover\n          :target=\"'tag-list-from-podcast-page' + index\"\n          :content=\"tag.substring(4, tag.length)\"\n          relative-class=\"page-element\"\n          :is-fixed=\"true\"\n        />\n      </template>\n    </router-link>\n\n    <button\n      v-if=\"limitTags && !showAllTags\"\n      class=\"btn\"\n      @click=\"showAllTags = true\"\n    >\n      {{ t('See more') }}\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent, ref } from \"vue\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../../misc/ClassicPopover.vue\"),\n);\nimport {useTagOf} from \"../../composable/useTagOf\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  tagList: { default: () => [], type: Array as () => Array<string> },\n  podcastAnnotations: {\n    default: () => {},\n    type: Object as () => {\n      [key: string]: string | number | boolean | undefined;\n    },\n  },\n  orgaId: {default: \"\", type: String },\n  /** Max number of tags to display */\n  max: { type: Number, default: undefined }\n})\n\n\n//Composables\nconst { t } = useI18n()\nconst { isOuestFranceTag, formateOfTag } = useTagOf();\nconst filterStore = useFilterStore();\n\nconst showAllTags = ref(false);\n\n//Computed\nconst limitTags = computed((): boolean => {\n  return !!props.max && tagListFiltered.value.length > props.max;\n});\n\nconst tags = computed(() => {\n  if (limitTags.value && !showAllTags.value) {\n    return limitedTags.value;\n  } else {\n    return tagListFiltered.value;\n  }\n});\n\nconst tagListFiltered = computed(() => {\n  const tags = props.tagList.filter((tag: string) => {\n    return !tag.match(/^\\[\\[.*\\]\\]$/);\n  });\n\n  // Each tag is only displayed once\n  return tags.filter((tag, index) => tags.indexOf(tag) === index);\n});\n\nconst limitedTags = computed(() => {\n  return tagListFiltered.value.slice(0, props.max);\n});\n\nconst organisationQuery = computed(() => {\n  if(filterStore.filterOrgaId){\n    return undefined;\n  }\n  return { o: props.orgaId };\n});\n/* const ouestFranceMainTag = computed(() => {\n  if (props.podcastAnnotations?.[\"mainOfTag\"]) {\n    for (const key in props.podcastAnnotations) {\n      if (\n        props.podcastAnnotations[key] ===\n        props.podcastAnnotations[\"mainOfTag\"] &&\n        key !== \"mainOfTag\"\n      ) {\n        return \"[of]\" + key;\n      }\n    }\n  }\n  return undefined;\n}); */\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app {\n  .tag-list-component {\n    .ouest-france-logo {\n      width: 20px;\n      height: 20px;\n      margin-right: 5px;\n    }\n\n    .main-of-tag {\n      box-shadow: var(--octopus-shadow) 0 5px 15px;\n      font-size: 0.9rem;\n    }\n  }\n\n  .btn {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDA,MAAM,iBAAiB,2BACf,OAAO,iCAAA,MAAA,MAAA,EAAA,CAAA,CACf;EAMA,MAAM,QAAQ;EAed,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,EAAE,kBAAkB,iBAAiB,SAAS;EACpD,MAAM,cAAc,eAAe;EAEnC,MAAM,cAAc,IAAI,KAAK;EAG7B,MAAM,YAAY,eAAwB;GACxC,OAAO,CAAC,CAAC,MAAM,OAAO,gBAAgB,MAAM,SAAS,MAAM;EAC7D,CAAC;EAED,MAAM,OAAO,eAAe;GAC1B,IAAI,UAAU,SAAS,CAAC,YAAY,OAClC,OAAO,YAAY;QAEnB,OAAO,gBAAgB;EAE3B,CAAC;EAED,MAAM,kBAAkB,eAAe;GACrC,MAAM,OAAO,MAAM,QAAQ,QAAQ,QAAgB;IACjD,OAAO,CAAC,IAAI,MAAM,cAAc;GAClC,CAAC;GAGD,OAAO,KAAK,QAAQ,KAAK,UAAU,KAAK,QAAQ,GAAG,MAAM,KAAK;EAChE,CAAC;EAED,MAAM,cAAc,eAAe;GACjC,OAAO,gBAAgB,MAAM,MAAM,GAAG,MAAM,GAAG;EACjD,CAAC;;;;;;;;;;;;;sBAEyB,eAAe;IACvC,IAAG,YAAY,cACb;IAEF,OAAO,EAAE,GAAG,MAAM,OAAO;GAC3B,CAAA;;;;;;;;;;;;;CCjHI,OAAM;;mBAED,OAAM,eAAc;;;;QAHnB,KAAA,MAAc,OAAA,mBAAe,MAAU,OAAA,gBAAgB,UAAA,UAAA,GAD/D,mBAkDM,OAlDN,YAkDM;EA9CJ,mBAEM,OAFN,YAEM,gBADD,OAAA,EAAC,cAAA,IAAA,KAAA,GAAA,CAAA;oBAEN,mBAkCc,UAAA,MAAA,WAjCW,OAAA,OAAf,KAAK,UAAK;uBADpB,YAkCc,wBAAA;IAhCX,KAAK;IACN,OAAM;IACL,IAAE;;eAA2C,IAAG;YAAmB,OAAA;;;2BAMR,CAAA,CAA3C,OAAA,iBAAiB,GAAG,KAAA,UAAA,GAArC,mBAA4D,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBAAjB,GAAG,GAAA,CAAA,CAAA,GAAA,EAAA,MAAA,UAAA,GAC9C,mBAsBW,UAAA,EAAA,KAAA,EAAA,GAAA,CArBT,mBAcS,UAAA;KAbN,IAAE,+BAAiC;KACpC,OAAM;kCAEN,mBAQE,OAAA;KAPA,OAAM;KACN,QAAO;KACP,OAAM;KACN,eAAY;KACZ,KAAI;KACJ,OAAM;KACN,KAAA;mCACA,MACF,gBAAG,OAAA,aAAa,GAAG,CAAA,GAAA,CAAA,CAAA,GAAA,GAAA,UAAA,GAErB,YAKE,OAAA,mBAAA;KAJC,QAAM,+BAAiC;KACvC,SAAS,IAAI,UAAS,GAAI,IAAI,MAAM;KACrC,kBAAe;KACd,YAAU;;;;;EAMT,OAAA,aAAS,CAAK,OAAA,eAAA,UAAA,GADtB,mBAMS,UAAA;;GAJP,OAAM;GACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,cAAW;qBAEhB,OAAA,EAAC,UAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA"}