@saooti/octopus-sdk 42.0.4 → 42.0.5

package/dist/SwiperList-BKiF8jIc.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwiperList-BKiF8jIc.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-BoALb00d.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwiperList-BoALb00d.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":";;;;;;;;;;;AAkDA,IAAM,QAAQ;;;;;;;;;;;;;;;;EAPd,MAAM,QAAQ;EAQd,MAAM,eAAe,IAAI,CAAC;EAC1B,MAAM,aAAa,IAAI,CAAC;EACxB,MAAM,eAAe,IAAI,CAAC;EAC1B,MAAM,oBAAoB,IAAI,CAAC;EAC/B,MAAM,4BAA4B,IAAI,CAAC;EACvC,MAAM,iBAAiB,IAAI,KAAK;EAChC,MAAM,UAAU,eAAe,MAAM;EAIrC,MAAM,EAAE,SAAS,gBAAgB,eAAe;EAIhD,MAAM,WAAW,eAAe;GAC9B,IAAI,MAAM,kBACR,OAAO,MAAM;GAEf,IAAI,YAAY,SAAS,KACvB,OAAO;GAET,OAAO,MAAM,kBAAkB,cAC3B,MAAM,kBAAkB,cACxB;EACN,CAAC;EACD,MAAM,uBAAuB,eAAe;GAC1C,MAAM,WAAW,QAAQ,KAAK,IAAI,WAAW,QAAQ,GAAG,CAAC;GACzD,QAAQ,kBAAkB,QAAQ,YAAY,WAAW;EAC3D,CAAC;;EAGD,MAAM,OAAO,eAAwB;GACnC,OAAQ,MAAM,WAAW,SAAS,WAAW;EAC/C,CAAC;EAED,MAAM,UAAU,eAAe;GAC7B,IAAI,KAAK,UAAU,MACjB,OAAO,CAAC,UAAU;QAElB,OAAO,CAAC;EAEZ,CAAC;EAED,MAAM,MAAM,eAAuB;GAEjC,OADiB,mBACV,EAAS;EAClB,CAAC;EACD,MAAM,WAAW,eAAuB,wBAAwB,IAAI,KAAK;EACzE,MAAM,WAAW,eAAuB,wBAAwB,IAAI,KAAK;EACzE,MAAM,oBAAoB,gBAAgB;GACxC,QAAQ,MAAM,SAAS;GACvB,QAAQ,MAAM,SAAS;EACzB,EAAE;EAGF,MAAM,mBAAmB,eAAe,CAAC;EACzC,YAAU,MAAM,kBAAkB;GAChC,aAAa,SAAS;EACxB,GAAG,EAAC,MAAK,KAAI,CAAC;EAGd,gBAAc;GACZ,eAAe;IACb,eAAe;IACf,eAAe,QAAQ;GACzB,CAAC;EACH,CAAC;EAID,SAAS,iBAAgB;GACvB,MAAM,KAAK,SAAS;GACpB,IAAI,CAAC,IAAI;GACT,kBAAkB,QAAO,GAAG,cAAc,aAAa,QAAQ;GAC/D,MAAM,aAAa,kBAAU,mBAAmB,SAAS,QAAQ,EAAG;GACpE,WAAW,QAAQ,KAAK,IACtB,GACA,KAAK,OAAO,kBAAkB,QAAQ,UAAU,aAAa,MAAM,CACrE;GACA,0BAA0B,QAAO,GAAG,cAAc,WAAW;EAC/D;EACA,SAAS,gBAAgB;GACvB,MAAM,KAAK,SAAS;GACpB,IAAI,CAAC,IAAI;GACT,MAAM,SAAS,GAAG,uBAAuB,cAAc;GACvD,KAAK,MAAM,SAAS,QAClB,MAAM,MAAM,QAAQ,qBAAqB,QAAQ;EAErD;EACA,SAAS,cAAc;GACrB,MAAM,KAAK,SAAS;GACpB,IAAI,CAAC,IAAI;GACT,MAAM,UAAU,GAAG,uBAAuB,gBAAgB,EAAE;GAC5D,IAAI,QAAQ,MAAM,UAAU,SAAS,kBAAkB,GACrD;GAEF,MAAM,UAAU,iCAAiC,KAC/C,QAAQ,MAAM,SAChB;GACA,IAAI,CAAC,WAAW,QAAQ,UAAU,GAChC;GAEF,MAAM,iBAAiB,WAAW,QAAQ,EAAE,IAAI,aAAa;GAC7D,MAAM,mBAAmB,KAAK,MAC5B,iBAAiB,0BAA0B,KAC7C;GACA,QAAQ,MAAM,YACZ,kBACC,oBAAoB,qBAAqB,QAAQ,SAAS,aAAa,SACxE;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CChKO,KAAI;CAAO,OAAM;;;;;;CAuBY,OAAM;;;qBAvBxC,mBA4BM,OA5BN,YA4BM,CAAA,CA3Ba,OAAA,WAAA,UAAA,GAAjB,mBAqBW,UAAA,EAAA,KAAA,EAAA,GAAA;gBApBT,YAiBS,OAAA,WAAA;GAhBN,KAAK,OAAA;GACL,mBAAiB,OAAA;GACjB,iBAAe,OAAA;GACf,MAAM,OAAA;GACN,wBAAsB,OAAA;GACtB,uBAAqB,OAAA;GACrB,oBAAkB,OAAA;GAClB,oBAAkB,OAAA;GAClB,YAAY,OAAA;GACZ,SAAS,OAAA;GACT,iBAAgB,OAAA;GAChB,eAAc,OAAA;;0BAEiC,EAAA,UAAA,IAAA,GAAhD,mBAEe,UAAA,MAAA,WAFsB,OAAA,aAAf,KAAK,UAAK;wBAAhC,YAEe,OAAA,gBAAA,EAFmC,KAAK,MAAK,GAAA;4BACqB,CAAnE,OAAA,iBAAZ,WAA+E,KAAA,QAAA,gBAAA;;MAA9B,QAAQ;MAAa;;;;;;;;;;;;;;;;EAG1E,mBAAiD,OAAA;GAA3C,IAAI,OAAA;GAAU,OAAM;;EAC1B,mBAAiD,OAAA;GAA3C,IAAI,OAAA;GAAU,OAAM;;WAEZ,OAAA,kBAAA,UAAA,GAAhB,mBAIM,OAJN,YAIM,EAAA,UAAA,IAAA,GAHJ,mBAEM,UAAA,MAAA,WAFsB,OAAA,aAAf,KAAK,UAAK;sBAAvB,mBAEM,OAAA;GAFmC,KAAK;GAAK,OAAM;MACvD,WAAyD,KAAA,QAAA,gBAAA;GAA9B,QAAQ;GAAa"}

package/dist/SwiperList-DBmjvvCX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwiperList-DBmjvvCX.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-BECg0vNz.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagList-BECg0vNz.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;EAED,MAAM,oBAAoB,eAAe;GACvC,IAAG,YAAY,cACb;GAEF,OAAO,EAAE,GAAG,MAAM,OAAO;EAC3B,CAAC;;;UAlHS,KAAA,MAAc,gBAAA,SAAe,MAAU,gBAAA,MAAgB,UAAA,UAAA,GAD/D,mBAkDM,OAlDN,YAkDM;IA9CJ,mBAEM,OAFN,YAEM,gBADD,MAAA,CAAA,EAAC,cAAA,IAAA,KAAA,GAAA,CAAA;sBAEN,mBAkCc,UAAA,MAAA,WAjCW,KAAA,QAAf,KAAK,UAAK;yBADpB,YAkCc,wBAAA;MAhCX,KAAK;MACN,OAAM;MACL,IAAE;;iBAA2C,IAAG;cAAmB,kBAAA;;;6BAMR,CAAA,CAA3C,MAAA,gBAAA,EAAiB,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;OAbN,IAAE,+BAAiC;OACpC,OAAM;oCAEN,mBAQE,OAAA;OAPA,OAAM;OACN,QAAO;OACP,OAAM;OACN,eAAY;OACZ,KAAI;OACJ,OAAM;OACN,KAAA;qCACA,MACF,gBAAG,MAAA,YAAA,EAAa,GAAG,CAAA,GAAA,CAAA,CAAA,GAAA,GAAA,UAAA,GAErB,YAKE,MAAA,cAAA,GAAA;OAJC,QAAM,+BAAiC;OACvC,SAAS,IAAI,UAAS,GAAI,IAAI,MAAM;OACrC,kBAAe;OACd,YAAU;;;;;IAMT,UAAA,SAAS,CAAK,YAAA,SAAA,UAAA,GADtB,mBAMS,UAAA;;KAJP,OAAM;KACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,YAAA,QAAW;uBAEhB,MAAA,CAAA,EAAC,UAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/TagList-DRJvO9Gr.mjs.map

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

package/dist/TagList-DiGc-7Rj.mjs

@@ -0,0 +1,110 @@
+import { r as useFilterStore } from "./classicApi-BKNiWOG4.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { t as useTagOf } from "./useTagOf-JxYdEyRm.mjs";
+import "./ouest_france_logo-WOgdbVGH.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineAsyncComponent, defineComponent, openBlock, ref, renderList, resolveComponent, toDisplayString, unref, withCtx } from "vue";
+import { useI18n } from "vue-i18n";
+//#region src/components/display/podcasts/TagList.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "tag-list-component d-flex align-items-center flex-wrap mb-3 small-text"
+};
+var _hoisted_2 = { class: "fw-bold me-3" };
+var _hoisted_3 = ["id"];
+//#endregion
+//#region src/components/display/podcasts/TagList.vue
+var TagList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "TagList",
+	props: {
+		tagList: {
+			default: () => [],
+			type: Array
+		},
+		podcastAnnotations: {
+			default: () => {},
+			type: Object
+		},
+		orgaId: {
+			default: "",
+			type: String
+		},
+		/** Max number of tags to display */
+		max: {
+			type: Number,
+			default: void 0
+		}
+	},
+	setup(__props) {
+		const ClassicPopover = defineAsyncComponent(() => import("./ClassicPopover-Bk5kf37e.mjs").then((n) => n.n));
+		const props = __props;
+		const { t } = useI18n();
+		const { isOuestFranceTag, formateOfTag } = useTagOf();
+		const filterStore = useFilterStore();
+		const showAllTags = ref(false);
+		const limitTags = computed(() => {
+			return !!props.max && tagListFiltered.value.length > props.max;
+		});
+		const tags = computed(() => {
+			if (limitTags.value && !showAllTags.value) return limitedTags.value;
+			else return tagListFiltered.value;
+		});
+		const tagListFiltered = computed(() => {
+			const tags = props.tagList.filter((tag) => {
+				return !tag.match(/^\[\[.*\]\]$/);
+			});
+			return tags.filter((tag, index) => tags.indexOf(tag) === index);
+		});
+		const limitedTags = computed(() => {
+			return tagListFiltered.value.slice(0, props.max);
+		});
+		const organisationQuery = computed(() => {
+			if (filterStore.filterOrgaId) return;
+			return { o: props.orgaId };
+		});
+		return (_ctx, _cache) => {
+			const _component_router_link = resolveComponent("router-link");
+			return void 0 !== tagListFiltered.value && 0 !== tagListFiltered.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, toDisplayString(unref(t)("Podcast tags") + " : "), 1),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(tags.value, (tag, index) => {
+					return openBlock(), createBlock(_component_router_link, {
+						key: tag,
+						class: "d-flex align-items-center border p-1 m-1 text-dark",
+						to: {
+							name: "tag",
+							params: { tag },
+							query: organisationQuery.value
+						}
+					}, {
+						default: withCtx(() => [!unref(isOuestFranceTag)(tag) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(tag), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("button", {
+							id: "tag-list-from-podcast-page" + index,
+							class: "btn-transparent d-flex align-items-center"
+						}, [_cache[1] || (_cache[1] = createElementVNode("img", {
+							width: "20",
+							height: "20",
+							class: "ouest-france-logo",
+							"aria-hidden": "true",
+							alt: "",
+							title: "Ouest France",
+							src: "/img/ouest_france_logo.svg"
+						}, null, -1)), createTextVNode(" " + toDisplayString(unref(formateOfTag)(tag)), 1)], 8, _hoisted_3), createVNode(unref(ClassicPopover), {
+							target: "tag-list-from-podcast-page" + index,
+							content: tag.substring(4, tag.length),
+							"relative-class": "page-element",
+							"is-fixed": true
+						}, null, 8, ["target", "content"])], 64))]),
+						_: 2
+					}, 1032, ["to"]);
+				}), 128)),
+				limitTags.value && !showAllTags.value ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "btn",
+					onClick: _cache[0] || (_cache[0] = ($event) => showAllTags.value = true)
+				}, toDisplayString(unref(t)("See more")), 1)) : createCommentVNode("", true)
+			])) : createCommentVNode("", true);
+		};
+	}
+}), [["__scopeId", "data-v-e4c6d7bb"]]);
+//#endregion
+export { TagList_default as default };
+
+//# sourceMappingURL=TagList-DiGc-7Rj.mjs.map

package/dist/TagList-DiGc-7Rj.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagList-DiGc-7Rj.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;EAED,MAAM,oBAAoB,eAAe;GACvC,IAAG,YAAY,cACb;GAEF,OAAO,EAAE,GAAG,MAAM,OAAO;EAC3B,CAAC;;;UAlHS,KAAA,MAAc,gBAAA,SAAe,MAAU,gBAAA,MAAgB,UAAA,UAAA,GAD/D,mBAkDM,OAlDN,YAkDM;IA9CJ,mBAEM,OAFN,YAEM,gBADD,MAAA,CAAA,EAAC,cAAA,IAAA,KAAA,GAAA,CAAA;sBAEN,mBAkCc,UAAA,MAAA,WAjCW,KAAA,QAAf,KAAK,UAAK;yBADpB,YAkCc,wBAAA;MAhCX,KAAK;MACN,OAAM;MACL,IAAE;;iBAA2C,IAAG;cAAmB,kBAAA;;;6BAMR,CAAA,CAA3C,MAAA,gBAAA,EAAiB,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;OAbN,IAAE,+BAAiC;OACpC,OAAM;oCAEN,mBAQE,OAAA;OAPA,OAAM;OACN,QAAO;OACP,OAAM;OACN,eAAY;OACZ,KAAI;OACJ,OAAM;OACN,KAAA;qCACA,MACF,gBAAG,MAAA,YAAA,EAAa,GAAG,CAAA,GAAA,CAAA,CAAA,GAAA,GAAA,UAAA,GAErB,YAKE,MAAA,cAAA,GAAA;OAJC,QAAM,+BAAiC;OACvC,SAAS,IAAI,UAAS,GAAI,IAAI,MAAM;OACrC,kBAAe;OACd,YAAU;;;;;IAMT,UAAA,SAAS,CAAK,YAAA,SAAA,UAAA,GADtB,mBAMS,UAAA;;KAJP,OAAM;KACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,YAAA,QAAW;uBAEhB,MAAA,CAAA,EAAC,UAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/TagPage-Bn2cVKpN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagPage-Bn2cVKpN.mjs","names":[],"sources":["../src/components/pages/TagPage.vue","../src/components/pages/TagPage.vue"],"sourcesContent":["<template>\n  <section v-if=\"isInit\" class=\"page-box tag-page\">\n    <h1>\n      {{ t(\"Search for keyword\", {tag:titleDisplay})}}\n      <img\n        v-if=\"isOf\"\n        width=\"30\"\n        height=\"30\"\n        class=\"ouest-france-logo-tag-page\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        \n        title=\"Ouest France\"\n        src=\"/img/ouest_france_logo.svg\" \n      />\n    </h1>\n    <ProductorSearch\n      v-model:organisation-id=\"organisationId\"\n      v-model:search-pattern=\"searchPattern\"\n    />\n    <PodcastList\n      :first=\"paginateFirst\"\n      :size=\"ps\"\n      :include-tag=\"[tag]\"\n      :organisation-id=\"orgaArray\"\n      :query=\"searchMinSize\"\n      :sort-criteria=\"sortOrder ?? 'DATE'\"\n    />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport { useSeoTitleUrl } from \"../composable/route/useSeoTitleUrl\";\nimport { useSimplePageParam } from \"../composable/route/useSimplePageParam\";\nimport { useTagOf } from \"../composable/useTagOf\";\nimport PodcastList from \"../display/podcasts/PodcastList.vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nconst ProductorSearch = defineAsyncComponent(\n  () => import(\"../display/filter/ProductorSearch.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  pr: { default: 0, type: Number },\n  ps: { default: 30, type: Number },\n  tag: { default: undefined, type: String },\n  routeOrga: { default: undefined, type: String },\n  routeQuery: { default: \"\", type: String },\n});\n\n//Data \nconst titleDisplay = ref(\"\");\nconst isOf = ref(false);\n\n//Composables\nconst {\n  searchPattern,\n  organisationId,\n  searchMinSize,\n  paginateFirst,\n  isInit\n} = useSimplePageParam(props);\nconst { isOuestFranceTag, formateOfTag } = useTagOf();\nconst { updatePathParams } = useSeoTitleUrl();\nconst {t} = useI18n();\n\n//Computed\nconst orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);\nconst sortOrder = computed(() =>{\n  if(searchMinSize.value.length){\n    return \"SCORE\";\n  }\n  return undefined;\n});\n\n//Watch\nwatch(()=>props.tag, async () => {\n  const tagString = props.tag?? \"\";\n  isOf.value = isOuestFranceTag(tagString);\n  titleDisplay.value= isOf.value ?  formateOfTag(tagString) :tagString;\n  updatePathParams(t(\"Search for keyword\", {tag:titleDisplay.value}));\n}, {immediate: true});\n\n</script>\n<style lang=\"scss\">\n.octopus-app .tag-page{\n  .ouest-france-logo-tag-page{\n    width: 30px;\n    height: 30px;\n    margin-left: 10px;\n    vertical-align: center;\n    @media (width <= 500px) {\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n</style>\n","<template>\n  <section v-if=\"isInit\" class=\"page-box tag-page\">\n    <h1>\n      {{ t(\"Search for keyword\", {tag:titleDisplay})}}\n      <img\n        v-if=\"isOf\"\n        width=\"30\"\n        height=\"30\"\n        class=\"ouest-france-logo-tag-page\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        \n        title=\"Ouest France\"\n        src=\"/img/ouest_france_logo.svg\" \n      />\n    </h1>\n    <ProductorSearch\n      v-model:organisation-id=\"organisationId\"\n      v-model:search-pattern=\"searchPattern\"\n    />\n    <PodcastList\n      :first=\"paginateFirst\"\n      :size=\"ps\"\n      :include-tag=\"[tag]\"\n      :organisation-id=\"orgaArray\"\n      :query=\"searchMinSize\"\n      :sort-criteria=\"sortOrder ?? 'DATE'\"\n    />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport { useSeoTitleUrl } from \"../composable/route/useSeoTitleUrl\";\nimport { useSimplePageParam } from \"../composable/route/useSimplePageParam\";\nimport { useTagOf } from \"../composable/useTagOf\";\nimport PodcastList from \"../display/podcasts/PodcastList.vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nconst ProductorSearch = defineAsyncComponent(\n  () => import(\"../display/filter/ProductorSearch.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  pr: { default: 0, type: Number },\n  ps: { default: 30, type: Number },\n  tag: { default: undefined, type: String },\n  routeOrga: { default: undefined, type: String },\n  routeQuery: { default: \"\", type: String },\n});\n\n//Data \nconst titleDisplay = ref(\"\");\nconst isOf = ref(false);\n\n//Composables\nconst {\n  searchPattern,\n  organisationId,\n  searchMinSize,\n  paginateFirst,\n  isInit\n} = useSimplePageParam(props);\nconst { isOuestFranceTag, formateOfTag } = useTagOf();\nconst { updatePathParams } = useSeoTitleUrl();\nconst {t} = useI18n();\n\n//Computed\nconst orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);\nconst sortOrder = computed(() =>{\n  if(searchMinSize.value.length){\n    return \"SCORE\";\n  }\n  return undefined;\n});\n\n//Watch\nwatch(()=>props.tag, async () => {\n  const tagString = props.tag?? \"\";\n  isOf.value = isOuestFranceTag(tagString);\n  titleDisplay.value= isOf.value ?  formateOfTag(tagString) :tagString;\n  updatePathParams(t(\"Search for keyword\", {tag:titleDisplay.value}));\n}, {immediate: true});\n\n</script>\n<style lang=\"scss\">\n.octopus-app .tag-page{\n  .ouest-france-logo-tag-page{\n    width: 30px;\n    height: 30px;\n    margin-left: 10px;\n    vertical-align: center;\n    @media (width <= 500px) {\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCA,MAAM,kBAAkB,2BAChB,OAAO,kCAAA,MAAA,MAAA,EAAA,CAAA,CACf;EAGA,MAAM,QAAQ;EASd,MAAM,eAAe,IAAI,EAAE;EAC3B,MAAM,OAAO,IAAI,KAAK;EAGtB,MAAM,EACJ,eACA,gBACA,eACA,eACA,WACE,mBAAmB,KAAK;EAC5B,MAAM,EAAE,kBAAkB,iBAAiB,SAAS;EACpD,MAAM,EAAE,qBAAqB,eAAe;EAC5C,MAAM,EAAC,MAAK,QAAQ;EAGpB,MAAM,YAAY,eAAc,eAAe,QAAQ,CAAC,eAAe,KAAK,IAAI,CAAC,CAAC;EAClF,MAAM,YAAY,eAAc;GAC9B,IAAG,cAAc,MAAM,QACrB,OAAO;EAGX,CAAC;EAGD,YAAU,MAAM,KAAK,YAAY;GAC/B,MAAM,YAAY,MAAM,OAAM;GAC9B,KAAK,QAAQ,iBAAiB,SAAS;GACvC,aAAa,QAAO,KAAK,QAAS,aAAa,SAAS,IAAG;GAC3D,iBAAiB,EAAE,sBAAsB,EAAC,KAAI,aAAa,MAAK,CAAC,CAAC;EACpE,GAAG,EAAC,WAAW,KAAI,CAAC;;UAjFH,MAAA,MAAA,KAAA,UAAA,GAAf,mBA2BU,WA3BV,YA2BU;IA1BR,mBAaK,MAAA,MAAA,CAAA,gBAAA,gBAZA,MAAA,CAAA,EAAC,sBAAA,EAAA,KAA4B,aAAA,MAAY,CAAA,CAAA,IAAI,KAChD,CAAA,GACQ,KAAA,SAAA,UAAA,GADR,mBAUE,OAVF,UAUE,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;IAEJ,YAGE,MAAA,eAAA,GAAA;KAFQ,mBAAiB,MAAA,cAAA;6GAAc,QAAA,SAAA;KAC/B,kBAAgB,MAAA,aAAA;0GAAa,QAAA,SAAA;;IAEvC,YAOE,qBAAA;KANC,OAAO,MAAA,aAAA;KACP,MAAM,QAAA;KACN,eAAW,CAAG,QAAA,GAAG;KACjB,mBAAiB,UAAA;KACjB,OAAO,MAAA,aAAA;KACP,iBAAe,UAAA,SAAS"}

package/dist/TagPage-C9x5XWOd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagPage-C9x5XWOd.mjs","names":[],"sources":["../src/components/pages/TagPage.vue","../src/components/pages/TagPage.vue"],"sourcesContent":["<template>\n  <section v-if=\"isInit\" class=\"page-box tag-page\">\n    <h1>\n      {{ t(\"Search for keyword\", {tag:titleDisplay})}}\n      <img\n        v-if=\"isOf\"\n        width=\"30\"\n        height=\"30\"\n        class=\"ouest-france-logo-tag-page\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        \n        title=\"Ouest France\"\n        src=\"/img/ouest_france_logo.svg\" \n      />\n    </h1>\n    <ProductorSearch\n      v-model:organisation-id=\"organisationId\"\n      v-model:search-pattern=\"searchPattern\"\n    />\n    <PodcastList\n      :first=\"paginateFirst\"\n      :size=\"ps\"\n      :include-tag=\"[tag]\"\n      :organisation-id=\"orgaArray\"\n      :query=\"searchMinSize\"\n      :sort-criteria=\"sortOrder ?? 'DATE'\"\n    />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport { useSeoTitleUrl } from \"../composable/route/useSeoTitleUrl\";\nimport { useSimplePageParam } from \"../composable/route/useSimplePageParam\";\nimport { useTagOf } from \"../composable/useTagOf\";\nimport PodcastList from \"../display/podcasts/PodcastList.vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nconst ProductorSearch = defineAsyncComponent(\n  () => import(\"../display/filter/ProductorSearch.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  pr: { default: 0, type: Number },\n  ps: { default: 30, type: Number },\n  tag: { default: undefined, type: String },\n  routeOrga: { default: undefined, type: String },\n  routeQuery: { default: \"\", type: String },\n});\n\n//Data \nconst titleDisplay = ref(\"\");\nconst isOf = ref(false);\n\n//Composables\nconst {\n  searchPattern,\n  organisationId,\n  searchMinSize,\n  paginateFirst,\n  isInit\n} = useSimplePageParam(props);\nconst { isOuestFranceTag, formateOfTag } = useTagOf();\nconst { updatePathParams } = useSeoTitleUrl();\nconst {t} = useI18n();\n\n//Computed\nconst orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);\nconst sortOrder = computed(() =>{\n  if(searchMinSize.value.length){\n    return \"SCORE\";\n  }\n  return undefined;\n});\n\n//Watch\nwatch(()=>props.tag, async () => {\n  const tagString = props.tag?? \"\";\n  isOf.value = isOuestFranceTag(tagString);\n  titleDisplay.value= isOf.value ?  formateOfTag(tagString) :tagString;\n  updatePathParams(t(\"Search for keyword\", {tag:titleDisplay.value}));\n}, {immediate: true});\n\n</script>\n<style lang=\"scss\">\n.octopus-app .tag-page{\n  .ouest-france-logo-tag-page{\n    width: 30px;\n    height: 30px;\n    margin-left: 10px;\n    vertical-align: center;\n    @media (width <= 500px) {\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n</style>\n","<template>\n  <section v-if=\"isInit\" class=\"page-box tag-page\">\n    <h1>\n      {{ t(\"Search for keyword\", {tag:titleDisplay})}}\n      <img\n        v-if=\"isOf\"\n        width=\"30\"\n        height=\"30\"\n        class=\"ouest-france-logo-tag-page\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        \n        title=\"Ouest France\"\n        src=\"/img/ouest_france_logo.svg\" \n      />\n    </h1>\n    <ProductorSearch\n      v-model:organisation-id=\"organisationId\"\n      v-model:search-pattern=\"searchPattern\"\n    />\n    <PodcastList\n      :first=\"paginateFirst\"\n      :size=\"ps\"\n      :include-tag=\"[tag]\"\n      :organisation-id=\"orgaArray\"\n      :query=\"searchMinSize\"\n      :sort-criteria=\"sortOrder ?? 'DATE'\"\n    />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport { useSeoTitleUrl } from \"../composable/route/useSeoTitleUrl\";\nimport { useSimplePageParam } from \"../composable/route/useSimplePageParam\";\nimport { useTagOf } from \"../composable/useTagOf\";\nimport PodcastList from \"../display/podcasts/PodcastList.vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nconst ProductorSearch = defineAsyncComponent(\n  () => import(\"../display/filter/ProductorSearch.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  pr: { default: 0, type: Number },\n  ps: { default: 30, type: Number },\n  tag: { default: undefined, type: String },\n  routeOrga: { default: undefined, type: String },\n  routeQuery: { default: \"\", type: String },\n});\n\n//Data \nconst titleDisplay = ref(\"\");\nconst isOf = ref(false);\n\n//Composables\nconst {\n  searchPattern,\n  organisationId,\n  searchMinSize,\n  paginateFirst,\n  isInit\n} = useSimplePageParam(props);\nconst { isOuestFranceTag, formateOfTag } = useTagOf();\nconst { updatePathParams } = useSeoTitleUrl();\nconst {t} = useI18n();\n\n//Computed\nconst orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);\nconst sortOrder = computed(() =>{\n  if(searchMinSize.value.length){\n    return \"SCORE\";\n  }\n  return undefined;\n});\n\n//Watch\nwatch(()=>props.tag, async () => {\n  const tagString = props.tag?? \"\";\n  isOf.value = isOuestFranceTag(tagString);\n  titleDisplay.value= isOf.value ?  formateOfTag(tagString) :tagString;\n  updatePathParams(t(\"Search for keyword\", {tag:titleDisplay.value}));\n}, {immediate: true});\n\n</script>\n<style lang=\"scss\">\n.octopus-app .tag-page{\n  .ouest-france-logo-tag-page{\n    width: 30px;\n    height: 30px;\n    margin-left: 10px;\n    vertical-align: center;\n    @media (width <= 500px) {\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCA,MAAM,kBAAkB,2BAChB,OAAO,kCAAA,MAAA,MAAA,EAAA,CAAA,CACf;EAGA,MAAM,QAAQ;EASd,MAAM,eAAe,IAAI,EAAE;EAC3B,MAAM,OAAO,IAAI,KAAK;EAGtB,MAAM,EACJ,eACA,gBACA,eACA,eACA,WACE,mBAAmB,KAAK;EAC5B,MAAM,EAAE,kBAAkB,iBAAiB,SAAS;EACpD,MAAM,EAAE,qBAAqB,eAAe;EAC5C,MAAM,EAAC,MAAK,QAAQ;EAGpB,MAAM,YAAY,eAAc,eAAe,QAAQ,CAAC,eAAe,KAAK,IAAI,CAAC,CAAC;EAClF,MAAM,YAAY,eAAc;GAC9B,IAAG,cAAc,MAAM,QACrB,OAAO;EAGX,CAAC;EAGD,YAAU,MAAM,KAAK,YAAY;GAC/B,MAAM,YAAY,MAAM,OAAM;GAC9B,KAAK,QAAQ,iBAAiB,SAAS;GACvC,aAAa,QAAO,KAAK,QAAS,aAAa,SAAS,IAAG;GAC3D,iBAAiB,EAAE,sBAAsB,EAAC,KAAI,aAAa,MAAK,CAAC,CAAC;EACpE,GAAG,EAAC,WAAW,KAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CCjFK,OAAM;;;;CAKvB,OAAM;CACN,QAAO;CACP,OAAM;CACN,eAAY;CACZ,KAAI;CAEJ,OAAM;CACN,KAAA;;;QAZS,OAAA,UAAA,UAAA,GAAf,mBA2BU,WA3BV,YA2BU;EA1BR,mBAaK,MAAA,MAAA,CAAA,gBAAA,gBAZA,OAAA,EAAC,sBAAA,EAAA,KAA4B,OAAA,aAAY,CAAA,CAAA,IAAI,KAChD,CAAA,GACQ,OAAA,QAAA,UAAA,GADR,mBAUE,OAVF,UAUE,KAAA,mBAAA,QAAA,IAAA,CAAA,CAAA;EAEJ,YAGE,OAAA,oBAAA;GAFQ,mBAAiB,OAAA;oEAAA,OAAA,iBAAc;GAC/B,kBAAgB,OAAA;mEAAA,OAAA,gBAAa;;EAEvC,YAOE,OAAA,gBAAA;GANC,OAAO,OAAA;GACP,MAAM,OAAA;GACN,eAAW,CAAG,OAAA,GAAG;GACjB,mBAAiB,OAAA;GACjB,OAAO,OAAA;GACP,iBAAe,OAAA,aAAS"}

package/dist/TagPage-DchdAQV2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagPage-DchdAQV2.mjs","names":[],"sources":["../src/components/pages/TagPage.vue","../src/components/pages/TagPage.vue"],"sourcesContent":["<template>\n  <section v-if=\"isInit\" class=\"page-box tag-page\">\n    <h1>\n      {{ t(\"Search for keyword\", {tag:titleDisplay})}}\n      <img\n        v-if=\"isOf\"\n        width=\"30\"\n        height=\"30\"\n        class=\"ouest-france-logo-tag-page\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        \n        title=\"Ouest France\"\n        src=\"/img/ouest_france_logo.svg\" \n      />\n    </h1>\n    <ProductorSearch\n      v-model:organisation-id=\"organisationId\"\n      v-model:search-pattern=\"searchPattern\"\n    />\n    <PodcastList\n      :first=\"paginateFirst\"\n      :size=\"ps\"\n      :include-tag=\"[tag]\"\n      :organisation-id=\"orgaArray\"\n      :query=\"searchMinSize\"\n      :sort-criteria=\"sortOrder ?? 'DATE'\"\n    />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport { useSeoTitleUrl } from \"../composable/route/useSeoTitleUrl\";\nimport { useSimplePageParam } from \"../composable/route/useSimplePageParam\";\nimport { useTagOf } from \"../composable/useTagOf\";\nimport PodcastList from \"../display/podcasts/PodcastList.vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nconst ProductorSearch = defineAsyncComponent(\n  () => import(\"../display/filter/ProductorSearch.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  pr: { default: 0, type: Number },\n  ps: { default: 30, type: Number },\n  tag: { default: undefined, type: String },\n  routeOrga: { default: undefined, type: String },\n  routeQuery: { default: \"\", type: String },\n});\n\n//Data \nconst titleDisplay = ref(\"\");\nconst isOf = ref(false);\n\n//Composables\nconst {\n  searchPattern,\n  organisationId,\n  searchMinSize,\n  paginateFirst,\n  isInit\n} = useSimplePageParam(props);\nconst { isOuestFranceTag, formateOfTag } = useTagOf();\nconst { updatePathParams } = useSeoTitleUrl();\nconst {t} = useI18n();\n\n//Computed\nconst orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);\nconst sortOrder = computed(() =>{\n  if(searchMinSize.value.length){\n    return \"SCORE\";\n  }\n  return undefined;\n});\n\n//Watch\nwatch(()=>props.tag, async () => {\n  const tagString = props.tag?? \"\";\n  isOf.value = isOuestFranceTag(tagString);\n  titleDisplay.value= isOf.value ?  formateOfTag(tagString) :tagString;\n  updatePathParams(t(\"Search for keyword\", {tag:titleDisplay.value}));\n}, {immediate: true});\n\n</script>\n<style lang=\"scss\">\n.octopus-app .tag-page{\n  .ouest-france-logo-tag-page{\n    width: 30px;\n    height: 30px;\n    margin-left: 10px;\n    vertical-align: center;\n    @media (width <= 500px) {\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n</style>\n","<template>\n  <section v-if=\"isInit\" class=\"page-box tag-page\">\n    <h1>\n      {{ t(\"Search for keyword\", {tag:titleDisplay})}}\n      <img\n        v-if=\"isOf\"\n        width=\"30\"\n        height=\"30\"\n        class=\"ouest-france-logo-tag-page\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        \n        title=\"Ouest France\"\n        src=\"/img/ouest_france_logo.svg\" \n      />\n    </h1>\n    <ProductorSearch\n      v-model:organisation-id=\"organisationId\"\n      v-model:search-pattern=\"searchPattern\"\n    />\n    <PodcastList\n      :first=\"paginateFirst\"\n      :size=\"ps\"\n      :include-tag=\"[tag]\"\n      :organisation-id=\"orgaArray\"\n      :query=\"searchMinSize\"\n      :sort-criteria=\"sortOrder ?? 'DATE'\"\n    />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport { useSeoTitleUrl } from \"../composable/route/useSeoTitleUrl\";\nimport { useSimplePageParam } from \"../composable/route/useSimplePageParam\";\nimport { useTagOf } from \"../composable/useTagOf\";\nimport PodcastList from \"../display/podcasts/PodcastList.vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nconst ProductorSearch = defineAsyncComponent(\n  () => import(\"../display/filter/ProductorSearch.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  pr: { default: 0, type: Number },\n  ps: { default: 30, type: Number },\n  tag: { default: undefined, type: String },\n  routeOrga: { default: undefined, type: String },\n  routeQuery: { default: \"\", type: String },\n});\n\n//Data \nconst titleDisplay = ref(\"\");\nconst isOf = ref(false);\n\n//Composables\nconst {\n  searchPattern,\n  organisationId,\n  searchMinSize,\n  paginateFirst,\n  isInit\n} = useSimplePageParam(props);\nconst { isOuestFranceTag, formateOfTag } = useTagOf();\nconst { updatePathParams } = useSeoTitleUrl();\nconst {t} = useI18n();\n\n//Computed\nconst orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);\nconst sortOrder = computed(() =>{\n  if(searchMinSize.value.length){\n    return \"SCORE\";\n  }\n  return undefined;\n});\n\n//Watch\nwatch(()=>props.tag, async () => {\n  const tagString = props.tag?? \"\";\n  isOf.value = isOuestFranceTag(tagString);\n  titleDisplay.value= isOf.value ?  formateOfTag(tagString) :tagString;\n  updatePathParams(t(\"Search for keyword\", {tag:titleDisplay.value}));\n}, {immediate: true});\n\n</script>\n<style lang=\"scss\">\n.octopus-app .tag-page{\n  .ouest-france-logo-tag-page{\n    width: 30px;\n    height: 30px;\n    margin-left: 10px;\n    vertical-align: center;\n    @media (width <= 500px) {\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCA,MAAM,kBAAkB,2BAChB,OAAO,kCAAA,MAAA,MAAA,EAAA,CAAA,CACf;EAGA,MAAM,QAAQ;EASd,MAAM,eAAe,IAAI,EAAE;EAC3B,MAAM,OAAO,IAAI,KAAK;EAGtB,MAAM,EACJ,eACA,gBACA,eACA,eACA,WACE,mBAAmB,KAAK;EAC5B,MAAM,EAAE,kBAAkB,iBAAiB,SAAS;EACpD,MAAM,EAAE,qBAAqB,eAAe;EAC5C,MAAM,EAAC,MAAK,QAAQ;EAGpB,MAAM,YAAY,eAAc,eAAe,QAAQ,CAAC,eAAe,KAAK,IAAI,CAAC,CAAC;EAClF,MAAM,YAAY,eAAc;GAC9B,IAAG,cAAc,MAAM,QACrB,OAAO;EAGX,CAAC;EAGD,YAAU,MAAM,KAAK,YAAY;GAC/B,MAAM,YAAY,MAAM,OAAM;GAC9B,KAAK,QAAQ,iBAAiB,SAAS;GACvC,aAAa,QAAO,KAAK,QAAS,aAAa,SAAS,IAAG;GAC3D,iBAAiB,EAAE,sBAAsB,EAAC,KAAI,aAAa,MAAK,CAAC,CAAC;EACpE,GAAG,EAAC,WAAW,KAAI,CAAC;;UAjFH,MAAA,MAAA,KAAA,UAAA,GAAf,mBA2BU,WA3BV,YA2BU;IA1BR,mBAaK,MAAA,MAAA,CAAA,gBAAA,gBAZA,MAAA,CAAA,EAAC,sBAAA,EAAA,KAA4B,aAAA,MAAY,CAAA,CAAA,IAAI,KAChD,CAAA,GACQ,KAAA,SAAA,UAAA,GADR,mBAUE,OAVF,UAUE,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;IAEJ,YAGE,MAAA,eAAA,GAAA;KAFQ,mBAAiB,MAAA,cAAA;6GAAc,QAAA,SAAA;KAC/B,kBAAgB,MAAA,aAAA;0GAAa,QAAA,SAAA;;IAEvC,YAOE,qBAAA;KANC,OAAO,MAAA,aAAA;KACP,MAAM,QAAA;KACN,eAAW,CAAG,QAAA,GAAG;KACjB,mBAAiB,UAAA;KACjB,OAAO,MAAA,aAAA;KACP,iBAAe,UAAA,SAAS"}

package/dist/TagPage-Vd8JH7-r.mjs

@@ -0,0 +1,99 @@
+import { t as useTagOf } from "./useTagOf-JxYdEyRm.mjs";
+import { t as useSimplePageParam } from "./useSimplePageParam-CPjjYD88.mjs";
+import { t as useSeoTitleUrl } from "./useSeoTitleUrl-CrM1YzAc.mjs";
+import { t as PodcastList_default } from "./PodcastList-gdQbPtGY.mjs";
+import { t as ouest_france_logo_default } from "./ouest_france_logo-WOgdbVGH.mjs";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineAsyncComponent, defineComponent, isRef, openBlock, ref, toDisplayString, unref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+//#region src/components/pages/TagPage.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "page-box tag-page"
+};
+var _hoisted_2 = {
+	key: 0,
+	width: "30",
+	height: "30",
+	class: "ouest-france-logo-tag-page",
+	"aria-hidden": "true",
+	alt: "",
+	title: "Ouest France",
+	src: ouest_france_logo_default
+};
+//#endregion
+//#region src/components/pages/TagPage.vue
+var TagPage_default = /* @__PURE__ */ defineComponent({
+	__name: "TagPage",
+	props: {
+		pr: {
+			default: 0,
+			type: Number
+		},
+		ps: {
+			default: 30,
+			type: Number
+		},
+		tag: {
+			default: void 0,
+			type: String
+		},
+		routeOrga: {
+			default: void 0,
+			type: String
+		},
+		routeQuery: {
+			default: "",
+			type: String
+		}
+	},
+	setup(__props) {
+		const ProductorSearch = defineAsyncComponent(() => import("./ProductorSearch-ir5rkehT.mjs").then((n) => n.n));
+		const props = __props;
+		const titleDisplay = ref("");
+		const isOf = ref(false);
+		const { searchPattern, organisationId, searchMinSize, paginateFirst, isInit } = useSimplePageParam(props);
+		const { isOuestFranceTag, formateOfTag } = useTagOf();
+		const { updatePathParams } = useSeoTitleUrl();
+		const { t } = useI18n();
+		const orgaArray = computed(() => organisationId.value ? [organisationId.value] : []);
+		const sortOrder = computed(() => {
+			if (searchMinSize.value.length) return "SCORE";
+		});
+		watch(() => props.tag, async () => {
+			const tagString = props.tag ?? "";
+			isOf.value = isOuestFranceTag(tagString);
+			titleDisplay.value = isOf.value ? formateOfTag(tagString) : tagString;
+			updatePathParams(t("Search for keyword", { tag: titleDisplay.value }));
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return unref(isInit) ? (openBlock(), createElementBlock("section", _hoisted_1, [
+				createElementVNode("h1", null, [createTextVNode(toDisplayString(unref(t)("Search for keyword", { tag: titleDisplay.value })) + " ", 1), isOf.value ? (openBlock(), createElementBlock("img", _hoisted_2)) : createCommentVNode("", true)]),
+				createVNode(unref(ProductorSearch), {
+					"organisation-id": unref(organisationId),
+					"onUpdate:organisationId": _cache[0] || (_cache[0] = ($event) => isRef(organisationId) ? organisationId.value = $event : null),
+					"search-pattern": unref(searchPattern),
+					"onUpdate:searchPattern": _cache[1] || (_cache[1] = ($event) => isRef(searchPattern) ? searchPattern.value = $event : null)
+				}, null, 8, ["organisation-id", "search-pattern"]),
+				createVNode(PodcastList_default, {
+					first: unref(paginateFirst),
+					size: __props.ps,
+					"include-tag": [__props.tag],
+					"organisation-id": orgaArray.value,
+					query: unref(searchMinSize),
+					"sort-criteria": sortOrder.value ?? "DATE"
+				}, null, 8, [
+					"first",
+					"size",
+					"include-tag",
+					"organisation-id",
+					"query",
+					"sort-criteria"
+				])
+			])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { TagPage_default as default };
+
+//# sourceMappingURL=TagPage-Vd8JH7-r.mjs.map

package/dist/TagPage-Vd8JH7-r.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagPage-Vd8JH7-r.mjs","names":[],"sources":["../src/components/pages/TagPage.vue","../src/components/pages/TagPage.vue"],"sourcesContent":["<template>\n  <section v-if=\"isInit\" class=\"page-box tag-page\">\n    <h1>\n      {{ t(\"Search for keyword\", {tag:titleDisplay})}}\n      <img\n        v-if=\"isOf\"\n        width=\"30\"\n        height=\"30\"\n        class=\"ouest-france-logo-tag-page\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        \n        title=\"Ouest France\"\n        src=\"/img/ouest_france_logo.svg\" \n      />\n    </h1>\n    <ProductorSearch\n      v-model:organisation-id=\"organisationId\"\n      v-model:search-pattern=\"searchPattern\"\n    />\n    <PodcastList\n      :first=\"paginateFirst\"\n      :size=\"ps\"\n      :include-tag=\"[tag]\"\n      :organisation-id=\"orgaArray\"\n      :query=\"searchMinSize\"\n      :sort-criteria=\"sortOrder ?? 'DATE'\"\n    />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport { useSeoTitleUrl } from \"../composable/route/useSeoTitleUrl\";\nimport { useSimplePageParam } from \"../composable/route/useSimplePageParam\";\nimport { useTagOf } from \"../composable/useTagOf\";\nimport PodcastList from \"../display/podcasts/PodcastList.vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nconst ProductorSearch = defineAsyncComponent(\n  () => import(\"../display/filter/ProductorSearch.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  pr: { default: 0, type: Number },\n  ps: { default: 30, type: Number },\n  tag: { default: undefined, type: String },\n  routeOrga: { default: undefined, type: String },\n  routeQuery: { default: \"\", type: String },\n});\n\n//Data \nconst titleDisplay = ref(\"\");\nconst isOf = ref(false);\n\n//Composables\nconst {\n  searchPattern,\n  organisationId,\n  searchMinSize,\n  paginateFirst,\n  isInit\n} = useSimplePageParam(props);\nconst { isOuestFranceTag, formateOfTag } = useTagOf();\nconst { updatePathParams } = useSeoTitleUrl();\nconst {t} = useI18n();\n\n//Computed\nconst orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);\nconst sortOrder = computed(() =>{\n  if(searchMinSize.value.length){\n    return \"SCORE\";\n  }\n  return undefined;\n});\n\n//Watch\nwatch(()=>props.tag, async () => {\n  const tagString = props.tag?? \"\";\n  isOf.value = isOuestFranceTag(tagString);\n  titleDisplay.value= isOf.value ?  formateOfTag(tagString) :tagString;\n  updatePathParams(t(\"Search for keyword\", {tag:titleDisplay.value}));\n}, {immediate: true});\n\n</script>\n<style lang=\"scss\">\n.octopus-app .tag-page{\n  .ouest-france-logo-tag-page{\n    width: 30px;\n    height: 30px;\n    margin-left: 10px;\n    vertical-align: center;\n    @media (width <= 500px) {\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n</style>\n","<template>\n  <section v-if=\"isInit\" class=\"page-box tag-page\">\n    <h1>\n      {{ t(\"Search for keyword\", {tag:titleDisplay})}}\n      <img\n        v-if=\"isOf\"\n        width=\"30\"\n        height=\"30\"\n        class=\"ouest-france-logo-tag-page\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        \n        title=\"Ouest France\"\n        src=\"/img/ouest_france_logo.svg\" \n      />\n    </h1>\n    <ProductorSearch\n      v-model:organisation-id=\"organisationId\"\n      v-model:search-pattern=\"searchPattern\"\n    />\n    <PodcastList\n      :first=\"paginateFirst\"\n      :size=\"ps\"\n      :include-tag=\"[tag]\"\n      :organisation-id=\"orgaArray\"\n      :query=\"searchMinSize\"\n      :sort-criteria=\"sortOrder ?? 'DATE'\"\n    />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport { useSeoTitleUrl } from \"../composable/route/useSeoTitleUrl\";\nimport { useSimplePageParam } from \"../composable/route/useSimplePageParam\";\nimport { useTagOf } from \"../composable/useTagOf\";\nimport PodcastList from \"../display/podcasts/PodcastList.vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nconst ProductorSearch = defineAsyncComponent(\n  () => import(\"../display/filter/ProductorSearch.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  pr: { default: 0, type: Number },\n  ps: { default: 30, type: Number },\n  tag: { default: undefined, type: String },\n  routeOrga: { default: undefined, type: String },\n  routeQuery: { default: \"\", type: String },\n});\n\n//Data \nconst titleDisplay = ref(\"\");\nconst isOf = ref(false);\n\n//Composables\nconst {\n  searchPattern,\n  organisationId,\n  searchMinSize,\n  paginateFirst,\n  isInit\n} = useSimplePageParam(props);\nconst { isOuestFranceTag, formateOfTag } = useTagOf();\nconst { updatePathParams } = useSeoTitleUrl();\nconst {t} = useI18n();\n\n//Computed\nconst orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);\nconst sortOrder = computed(() =>{\n  if(searchMinSize.value.length){\n    return \"SCORE\";\n  }\n  return undefined;\n});\n\n//Watch\nwatch(()=>props.tag, async () => {\n  const tagString = props.tag?? \"\";\n  isOf.value = isOuestFranceTag(tagString);\n  titleDisplay.value= isOf.value ?  formateOfTag(tagString) :tagString;\n  updatePathParams(t(\"Search for keyword\", {tag:titleDisplay.value}));\n}, {immediate: true});\n\n</script>\n<style lang=\"scss\">\n.octopus-app .tag-page{\n  .ouest-france-logo-tag-page{\n    width: 30px;\n    height: 30px;\n    margin-left: 10px;\n    vertical-align: center;\n    @media (width <= 500px) {\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCA,MAAM,kBAAkB,2BAChB,OAAO,kCAAA,MAAA,MAAA,EAAA,CAAA,CACf;EAGA,MAAM,QAAQ;EASd,MAAM,eAAe,IAAI,EAAE;EAC3B,MAAM,OAAO,IAAI,KAAK;EAGtB,MAAM,EACJ,eACA,gBACA,eACA,eACA,WACE,mBAAmB,KAAK;EAC5B,MAAM,EAAE,kBAAkB,iBAAiB,SAAS;EACpD,MAAM,EAAE,qBAAqB,eAAe;EAC5C,MAAM,EAAC,MAAK,QAAQ;EAGpB,MAAM,YAAY,eAAc,eAAe,QAAQ,CAAC,eAAe,KAAK,IAAI,CAAC,CAAC;EAClF,MAAM,YAAY,eAAc;GAC9B,IAAG,cAAc,MAAM,QACrB,OAAO;EAGX,CAAC;EAGD,YAAU,MAAM,KAAK,YAAY;GAC/B,MAAM,YAAY,MAAM,OAAM;GAC9B,KAAK,QAAQ,iBAAiB,SAAS;GACvC,aAAa,QAAO,KAAK,QAAS,aAAa,SAAS,IAAG;GAC3D,iBAAiB,EAAE,sBAAsB,EAAC,KAAI,aAAa,MAAK,CAAC,CAAC;EACpE,GAAG,EAAC,WAAW,KAAI,CAAC;;UAjFH,MAAA,MAAA,KAAA,UAAA,GAAf,mBA2BU,WA3BV,YA2BU;IA1BR,mBAaK,MAAA,MAAA,CAAA,gBAAA,gBAZA,MAAA,CAAA,EAAC,sBAAA,EAAA,KAA4B,aAAA,MAAY,CAAA,CAAA,IAAI,KAChD,CAAA,GACQ,KAAA,SAAA,UAAA,GADR,mBAUE,OAVF,UAUE,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;IAEJ,YAGE,MAAA,eAAA,GAAA;KAFQ,mBAAiB,MAAA,cAAA;6GAAc,QAAA,SAAA;KAC/B,kBAAgB,MAAA,aAAA;0GAAa,QAAA,SAAA;;IAEvC,YAOE,qBAAA;KANC,OAAO,MAAA,aAAA;KACP,MAAM,QAAA;KACN,eAAW,CAAG,QAAA,GAAG;KACjB,mBAAiB,UAAA;KACjB,OAAO,MAAA,aAAA;KACP,iBAAe,UAAA,SAAS"}

package/dist/TopBar-B20_SqNY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar-B20_SqNY.mjs","names":[],"sources":["../src/components/misc/TopBarMainContent.vue","../src/components/misc/TopBarMainContent.vue","../src/components/misc/TopBar.vue","../src/components/misc/TopBar.vue"],"sourcesContent":["<template>\n  <div class=\"top-bar-grid header-content\" :class=\"{ scrolled: titleIsDisplayed }\">\n    <router-link\n      class=\"top-bar-logo d-flex align-items-center\"\n      :to=\"{\n        name: 'home',\n        query: getQueriesRouter('home'),\n      }\"\n      :title=\"t('Home')\"\n    >\n      <img\n        v-if=\"!filterStore.filterOrgaId || '' === imgUrl\"\n        :src=\"logoUrl\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        width=\"140\"\n        height=\"50\"\n        title=\"Logo\"\n        :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n      >\n      <img\n        v-else\n        :src=\"useProxyImageUrl(imgUrl, '', '80')\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        class=\"client-logo\"\n        title=\"Logo\"\n        :class=\"generalStore.platformEducation ? 'education-logo' : ''\"\n      >\n    </router-link>\n    <h1 v-if=\"titleIsDisplayed\" class=\"text-truncate m-0 align-self-center\">\n      {{ titleDisplay }}\n    </h1>\n    <div\n      class=\"d-flex\"\n      :class=\"[\n        inContentDisplayPage || isPhone\n          ? 'flex-row-reverse align-items-center'\n          : 'flex-column align-items-end',\n      ]\"\n    >\n      <template v-if=\"filterStore.filterOrgaId && '' !== imgUrl\">\n        <img\n          v-if=\"authStore.isGarRole\"\n          :src=\"logoUrl\"\n          aria-hidden=\"true\"\n          alt=\"\"\n          width=\"100\"\n          height=\"29\"\n          class=\"ms-2\"\n          title=\"Logo\"\n          :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n        >\n        <a\n          v-else\n          href=\"https://www.saooti.com/\"\n          target=\"_blank\"\n          rel=\"noreferrer noopener\"\n          :title=\"t('New window', {text: 'Saooti'})\"\n        >\n          <img\n            :src=\"logoUrl\"\n            aria-hidden=\"true\"\n            alt=\"\"\n            \n            title=\"Saooti\"\n            width=\"100\"\n            height=\"29\"\n            class=\"ms-2\"\n            :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n          >\n        </a>\n      </template>\n      <div role=\"navigation\" class=\"d-flex align-items-center justify-content-end flex-grow-1\">\n        <nav :aria-label=\"t('Site menu')\">\n          <ul class=\"d-flex\">\n            <template v-for=\"link in routerLinkArray\" :key=\"link.routeName\">\n              <li v-if=\"link.condition\" class=\"li-style-none\">\n                <router-link\n                  v-show=\"!isPhone\"\n                  :to=\"{\n                    name: link.routeName,\n                    query: getQueriesRouter(link.routeName),\n                  }\"\n                  class=\"link-hover py-2 px-3\"\n                >\n                  {{ link.title }}\n                </router-link>\n              </li>\n            </template>\n          </ul>\n        </nav>\n        <button\n          v-show=\"!isPhone && !inContentDisplayPage\"\n          id=\"more-dropdown\"\n          :title=\"t('More')\"\n          class=\"d-flex-column flex-nowrap align-items-center btn-transparent py-2 px-3 text-white\"\n        >\n          <span class=\"link-hover\">\n            {{ t(\"More\") }}\n          </span>\n          <ChevronDownIcon />\n        </button>\n        <ClassicPopover\n          target=\"more-dropdown\"\n          :only-click=\"true\"\n          :is-fixed=\"true\"\n          :left-pos=\"true\"\n          :is-top-layer=\"true\"\n        >\n          <nav class=\"d-flex flex-column\" :aria-label=\"t('Site menu')\">\n            <ul class=\"p-0 m-0\">\n              <template v-for=\"link in routerLinkInsideArray\" :key=\"link.routeName\">\n                <li\n                  v-if=\"link.condition\"\n                  class=\"li-style-none\"\n                >\n                  <router-link\n                    :to=\"{\n                      name: link.routeName,\n                      query: getQueriesRouter(link.routeName),\n                    }\"\n                    class=\"p-1 octopus-dropdown-item\"\n                  >\n                    {{ link.title }}\n                  </router-link>\n                </li>\n              </template>\n            </ul>\n          </nav>\n        </ClassicPopover>\n\n        <MobileMenu\n          :is-education=\"generalStore.platformEducation\"\n          :show=\"mobileMenuDisplay\"\n          :not-podcast-and-emission=\"inContentDisplayPage && !scrolled\"\n        />\n        <HomeDropdown\n          :is-education=\"generalStore.platformEducation\"\n          :mobile-menu-display=\"mobileMenuDisplay\"\n          v-bind=\"options?.homeDropdown\"\n        />\n        <router-link\n          v-show=\"!isPhone && !inContentDisplayPage\"\n          :title=\"t('Search')\"\n          :to=\"{\n            name: 'podcasts',\n          }\"\n          class=\"btn admin-button m-1 text-blue-octopus\"\n          role=\"search\"\n        >\n          <MagnifyIcon :size=\"30\" />\n        </router-link>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport MagnifyIcon from \"vue-material-design-icons/Magnify.vue\";\nimport { useRubriquesFilterComputed } from \"../composable/route/useRubriquesFilterComputed\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport HomeDropdown, { type HomeDropdownProps } from \"./HomeDropdown.vue\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport { useFilterStore } from \"../../stores/FilterStore\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport ClassicPopover from \"../misc/ClassicPopover.vue\";\nimport {  defineAsyncComponent, computed } from \"vue\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { useI18n } from \"vue-i18n\";\nconst MobileMenu = defineAsyncComponent(() => import(\"./MobileMenu.vue\"));\n\nexport interface TopBarMainContentOptions {\n  homeDropdown?: HomeDropdownProps;\n}\n\nexport interface TopBarMainContentProps {\n  isPhone?: boolean;\n  titleDisplay?: string;\n  scrolled?: boolean;\n};\n\n//Props \nconst props = defineProps<TopBarMainContentProps & {\n  /** Props for subcomponents */\n  options?: TopBarMainContentOptions;\n}>();\n\n\n//Composables\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { rubriqueQueryParam } = useRubriquesFilterComputed();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\nconst filterStore = useFilterStore();\n\n//Computed\nconst mobileMenuDisplay = computed(() => props.isPhone || inContentDisplayPage.value);\nconst titleIsDisplayed = computed(() => inContentDisplayPage.value && props.scrolled && !props.isPhone);\nconst inContentDisplayPage = computed(() => 0 !== props.titleDisplay.length);\nconst routerLinkArray = computed(() =>{\n  return [\n    {\n      title: t(\"Radio & Live\"),\n      routeName: \"lives\",\n      condition:\n        !inContentDisplayPage.value &&\n        (state.generalParameters.isLiveTab as boolean) &&\n        ((filterStore.filterOrgaId && filterStore.filterLive) || !filterStore.filterOrgaId),\n    },\n    {\n      title: t(\"Podcasts\"),\n      routeName: \"podcasts\",\n      condition:\n        !inContentDisplayPage.value ||\n        (inContentDisplayPage.value && !props.scrolled),\n    },\n    {\n      title: t(\"Emissions\"),\n      routeName: \"emissions\",\n      condition:\n        !inContentDisplayPage.value ||\n        (inContentDisplayPage.value && !props.scrolled),\n    },\n  ];\n});\nconst routerLinkInsideArray = computed(() =>{\n  return [\n    {\n      title: t(\"Speakers\"),\n      routeName: \"participants\",\n      condition: true,\n    },\n    {\n      title: t(\"Playlists\"),\n      routeName: \"playlists\",\n      condition: true,\n    },\n    {\n      title: t(\"Productors\"),\n      routeName: \"productors\",\n      condition:\n        !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || generalStore.platformEducation),\n    },\n  ];\n});\nconst logoUrl = computed(() =>{\n  if (generalStore.platformEducation) {\n    return \"/img/logo_education_white.svg\";\n  }\n  return props.isPhone\n    ? \"/img/logo_octopus_bubble.svg\"\n    : \"/img/logo_saooti_play_white.svg\";\n});\nconst imgUrl = computed(() =>{\n  if (!filterStore.filterImgUrl?.includes(\"emptypodcast\")){\n    return `${filterStore.filterImgUrl}`;\n  }\n  return \"\";\n});\n \n//Methods\nfunction getQueriesRouter(routeName: string) {\n  if (\"podcasts\" !== routeName && \"emissions\" !== routeName  && \"home\" !== routeName) {\n    return { productor: filterStore.filterOrgaId };\n  }\n  return {\n    productor: filterStore.filterOrgaId,\n    iabId: filterStore.filterIab?.id,\n    rubriquesId: rubriqueQueryParam.value,\n  };\n}\n</script>\n\n<style lang=\"scss\">\n\n\n.octopus-app {\n  .top-bar-grid {\n    display: grid;\n    grid-template-columns: 1fr 5fr;\n    padding: 0.5rem 1rem 0 1rem;\n\n    &.scrolled {\n      grid-template-columns: 1fr 2fr 1fr;\n    }\n\n    @media (width <= 450px) {\n      padding: 0 0.5rem;\n    }\n\n    .link-hover {\n      color: white;\n      font-weight: bold;\n      font-size: 0.93rem;\n      text-decoration: underline;\n      text-decoration-color: transparent;\n      transition: text-decoration-color 250ms;\n      text-underline-offset: 8px;\n\n      &.link-hover:hover,\n      &.link-hover.router-link-exact-active.router-link-active {\n        color: white;\n        text-decoration-color: white;\n      }\n    }\n\n    .client-logo {\n      border-radius: var(--octopus-border-radius);\n    }\n\n    .top-bar-logo img {\n      max-width: 140px !important;\n      max-height: 4rem;\n      height: 4rem;\n\n      &.education-logo {\n        height: auto;\n      }\n\n      @media (width <= 650px) {\n        max-height: 2rem;\n      }\n    }\n\n    .octopus-logo {\n      @media (width <= 960px) {\n        max-width: 30px !important;\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"top-bar-grid header-content\" :class=\"{ scrolled: titleIsDisplayed }\">\n    <router-link\n      class=\"top-bar-logo d-flex align-items-center\"\n      :to=\"{\n        name: 'home',\n        query: getQueriesRouter('home'),\n      }\"\n      :title=\"t('Home')\"\n    >\n      <img\n        v-if=\"!filterStore.filterOrgaId || '' === imgUrl\"\n        :src=\"logoUrl\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        width=\"140\"\n        height=\"50\"\n        title=\"Logo\"\n        :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n      >\n      <img\n        v-else\n        :src=\"useProxyImageUrl(imgUrl, '', '80')\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        class=\"client-logo\"\n        title=\"Logo\"\n        :class=\"generalStore.platformEducation ? 'education-logo' : ''\"\n      >\n    </router-link>\n    <h1 v-if=\"titleIsDisplayed\" class=\"text-truncate m-0 align-self-center\">\n      {{ titleDisplay }}\n    </h1>\n    <div\n      class=\"d-flex\"\n      :class=\"[\n        inContentDisplayPage || isPhone\n          ? 'flex-row-reverse align-items-center'\n          : 'flex-column align-items-end',\n      ]\"\n    >\n      <template v-if=\"filterStore.filterOrgaId && '' !== imgUrl\">\n        <img\n          v-if=\"authStore.isGarRole\"\n          :src=\"logoUrl\"\n          aria-hidden=\"true\"\n          alt=\"\"\n          width=\"100\"\n          height=\"29\"\n          class=\"ms-2\"\n          title=\"Logo\"\n          :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n        >\n        <a\n          v-else\n          href=\"https://www.saooti.com/\"\n          target=\"_blank\"\n          rel=\"noreferrer noopener\"\n          :title=\"t('New window', {text: 'Saooti'})\"\n        >\n          <img\n            :src=\"logoUrl\"\n            aria-hidden=\"true\"\n            alt=\"\"\n            \n            title=\"Saooti\"\n            width=\"100\"\n            height=\"29\"\n            class=\"ms-2\"\n            :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n          >\n        </a>\n      </template>\n      <div role=\"navigation\" class=\"d-flex align-items-center justify-content-end flex-grow-1\">\n        <nav :aria-label=\"t('Site menu')\">\n          <ul class=\"d-flex\">\n            <template v-for=\"link in routerLinkArray\" :key=\"link.routeName\">\n              <li v-if=\"link.condition\" class=\"li-style-none\">\n                <router-link\n                  v-show=\"!isPhone\"\n                  :to=\"{\n                    name: link.routeName,\n                    query: getQueriesRouter(link.routeName),\n                  }\"\n                  class=\"link-hover py-2 px-3\"\n                >\n                  {{ link.title }}\n                </router-link>\n              </li>\n            </template>\n          </ul>\n        </nav>\n        <button\n          v-show=\"!isPhone && !inContentDisplayPage\"\n          id=\"more-dropdown\"\n          :title=\"t('More')\"\n          class=\"d-flex-column flex-nowrap align-items-center btn-transparent py-2 px-3 text-white\"\n        >\n          <span class=\"link-hover\">\n            {{ t(\"More\") }}\n          </span>\n          <ChevronDownIcon />\n        </button>\n        <ClassicPopover\n          target=\"more-dropdown\"\n          :only-click=\"true\"\n          :is-fixed=\"true\"\n          :left-pos=\"true\"\n          :is-top-layer=\"true\"\n        >\n          <nav class=\"d-flex flex-column\" :aria-label=\"t('Site menu')\">\n            <ul class=\"p-0 m-0\">\n              <template v-for=\"link in routerLinkInsideArray\" :key=\"link.routeName\">\n                <li\n                  v-if=\"link.condition\"\n                  class=\"li-style-none\"\n                >\n                  <router-link\n                    :to=\"{\n                      name: link.routeName,\n                      query: getQueriesRouter(link.routeName),\n                    }\"\n                    class=\"p-1 octopus-dropdown-item\"\n                  >\n                    {{ link.title }}\n                  </router-link>\n                </li>\n              </template>\n            </ul>\n          </nav>\n        </ClassicPopover>\n\n        <MobileMenu\n          :is-education=\"generalStore.platformEducation\"\n          :show=\"mobileMenuDisplay\"\n          :not-podcast-and-emission=\"inContentDisplayPage && !scrolled\"\n        />\n        <HomeDropdown\n          :is-education=\"generalStore.platformEducation\"\n          :mobile-menu-display=\"mobileMenuDisplay\"\n          v-bind=\"options?.homeDropdown\"\n        />\n        <router-link\n          v-show=\"!isPhone && !inContentDisplayPage\"\n          :title=\"t('Search')\"\n          :to=\"{\n            name: 'podcasts',\n          }\"\n          class=\"btn admin-button m-1 text-blue-octopus\"\n          role=\"search\"\n        >\n          <MagnifyIcon :size=\"30\" />\n        </router-link>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport MagnifyIcon from \"vue-material-design-icons/Magnify.vue\";\nimport { useRubriquesFilterComputed } from \"../composable/route/useRubriquesFilterComputed\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport HomeDropdown, { type HomeDropdownProps } from \"./HomeDropdown.vue\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport { useFilterStore } from \"../../stores/FilterStore\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport ClassicPopover from \"../misc/ClassicPopover.vue\";\nimport {  defineAsyncComponent, computed } from \"vue\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { useI18n } from \"vue-i18n\";\nconst MobileMenu = defineAsyncComponent(() => import(\"./MobileMenu.vue\"));\n\nexport interface TopBarMainContentOptions {\n  homeDropdown?: HomeDropdownProps;\n}\n\nexport interface TopBarMainContentProps {\n  isPhone?: boolean;\n  titleDisplay?: string;\n  scrolled?: boolean;\n};\n\n//Props \nconst props = defineProps<TopBarMainContentProps & {\n  /** Props for subcomponents */\n  options?: TopBarMainContentOptions;\n}>();\n\n\n//Composables\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { rubriqueQueryParam } = useRubriquesFilterComputed();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\nconst filterStore = useFilterStore();\n\n//Computed\nconst mobileMenuDisplay = computed(() => props.isPhone || inContentDisplayPage.value);\nconst titleIsDisplayed = computed(() => inContentDisplayPage.value && props.scrolled && !props.isPhone);\nconst inContentDisplayPage = computed(() => 0 !== props.titleDisplay.length);\nconst routerLinkArray = computed(() =>{\n  return [\n    {\n      title: t(\"Radio & Live\"),\n      routeName: \"lives\",\n      condition:\n        !inContentDisplayPage.value &&\n        (state.generalParameters.isLiveTab as boolean) &&\n        ((filterStore.filterOrgaId && filterStore.filterLive) || !filterStore.filterOrgaId),\n    },\n    {\n      title: t(\"Podcasts\"),\n      routeName: \"podcasts\",\n      condition:\n        !inContentDisplayPage.value ||\n        (inContentDisplayPage.value && !props.scrolled),\n    },\n    {\n      title: t(\"Emissions\"),\n      routeName: \"emissions\",\n      condition:\n        !inContentDisplayPage.value ||\n        (inContentDisplayPage.value && !props.scrolled),\n    },\n  ];\n});\nconst routerLinkInsideArray = computed(() =>{\n  return [\n    {\n      title: t(\"Speakers\"),\n      routeName: \"participants\",\n      condition: true,\n    },\n    {\n      title: t(\"Playlists\"),\n      routeName: \"playlists\",\n      condition: true,\n    },\n    {\n      title: t(\"Productors\"),\n      routeName: \"productors\",\n      condition:\n        !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || generalStore.platformEducation),\n    },\n  ];\n});\nconst logoUrl = computed(() =>{\n  if (generalStore.platformEducation) {\n    return \"/img/logo_education_white.svg\";\n  }\n  return props.isPhone\n    ? \"/img/logo_octopus_bubble.svg\"\n    : \"/img/logo_saooti_play_white.svg\";\n});\nconst imgUrl = computed(() =>{\n  if (!filterStore.filterImgUrl?.includes(\"emptypodcast\")){\n    return `${filterStore.filterImgUrl}`;\n  }\n  return \"\";\n});\n \n//Methods\nfunction getQueriesRouter(routeName: string) {\n  if (\"podcasts\" !== routeName && \"emissions\" !== routeName  && \"home\" !== routeName) {\n    return { productor: filterStore.filterOrgaId };\n  }\n  return {\n    productor: filterStore.filterOrgaId,\n    iabId: filterStore.filterIab?.id,\n    rubriquesId: rubriqueQueryParam.value,\n  };\n}\n</script>\n\n<style lang=\"scss\">\n\n\n.octopus-app {\n  .top-bar-grid {\n    display: grid;\n    grid-template-columns: 1fr 5fr;\n    padding: 0.5rem 1rem 0 1rem;\n\n    &.scrolled {\n      grid-template-columns: 1fr 2fr 1fr;\n    }\n\n    @media (width <= 450px) {\n      padding: 0 0.5rem;\n    }\n\n    .link-hover {\n      color: white;\n      font-weight: bold;\n      font-size: 0.93rem;\n      text-decoration: underline;\n      text-decoration-color: transparent;\n      transition: text-decoration-color 250ms;\n      text-underline-offset: 8px;\n\n      &.link-hover:hover,\n      &.link-hover.router-link-exact-active.router-link-active {\n        color: white;\n        text-decoration-color: white;\n      }\n    }\n\n    .client-logo {\n      border-radius: var(--octopus-border-radius);\n    }\n\n    .top-bar-logo img {\n      max-width: 140px !important;\n      max-height: 4rem;\n      height: 4rem;\n\n      &.education-logo {\n        height: auto;\n      }\n\n      @media (width <= 650px) {\n        max-height: 2rem;\n      }\n    }\n\n    .octopus-logo {\n      @media (width <= 960px) {\n        max-width: 30px !important;\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <header\n    role=\"banner\"\n    class=\"header-saooti-play\"\n    :style=\"headerBackgroundImage\"\n    :class=\"[generalStore.contentToDisplay ? 'header-img-bg':'bg-gradient', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']\"\n  >\n    <TopBarMainContent\n      :is-phone=\"isPhone\"\n      :scrolled=\"scrolled\"\n      :title-display=\"titleToDisplay\"\n      style=\"height: var(--header-size);\"\n      :class=\"headerBackgroundImage.length ? 'header-opacity':''\"\n      :options=\"options?.topBarMainContent\"\n    />\n  </header>\n\n  <div\n    v-if=\"generalStore.contentToDisplay\"\n    class=\"header-content-bg\"\n    :style=\"headerBackgroundImage\"\n    :class=\"{ scrolled: scrolled, 'header-force-blur':needToBlur }\"\n  >\n    <div class=\"header-additional-content header-content\">\n      <h1 v-if=\"!scrolled\" class=\"text-truncate\">\n        {{ titleToDisplay }}\n      </h1>\n      <SubscribeButtons\n        v-if=\"!authStore.isGarRole && content\"\n        v-show=\"!scrolled\"\n        :content=\"content\"\n        :window-width=\"windowWidth\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport TopBarMainContent, { type TopBarMainContentOptions } from \"./TopBarMainContent.vue\";\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { Canal } from \"@/stores/class/radio/canal\";\nimport axios from \"axios\";\nconst SubscribeButtons = defineAsyncComponent(\n  () => import(\"../display/sharing/SubscribeButtons.vue\"),\n);\n\ndefineProps<{\n  options?: {\n    topBarMainContent?: TopBarMainContentOptions\n  }\n}>();\n\n//Data \nconst scrolled = ref(false);\nconst oldScrollY = ref(0);\nconst minScroll = ref(0);\nconst headerBackgroundImage = ref(\"\");\nconst needToBlur = ref(false);\n\n\n//Composables\nconst { isPhone, windowWidth } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\n\n//Computed\nconst titleToDisplay = computed(() => {\n  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n    return (generalStore.contentToDisplay as Podcast).emission.name;\n  }\n  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n    return (generalStore.contentToDisplay as Playlist).title;\n  }\n  if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n    return (generalStore.contentToDisplay as Emission).name;\n  }\n  if ((generalStore.contentToDisplay as Canal)?.id) {\n    return (generalStore.contentToDisplay as Canal).name;\n  }\n  return \"\";\n});\n\n/** The element displayed by the subscribe buttons */\nconst content = computed(() => {\n  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n    return (generalStore.contentToDisplay as Podcast).emission;\n  }\n  if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n    return generalStore.contentToDisplay as Emission;\n  }\n  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n    return generalStore.contentToDisplay as Playlist;\n  }\n  return null;\n});\n\n//Watch\nwatch(()=>generalStore.contentToDisplay, async () => {\n  if(!generalStore.contentToDisplay){\n    headerBackgroundImage.value = \"\";\n    needToBlur.value = false;\n    return;\n  }\n  const widthAsked = window.innerWidth > 960 ? \"1600\":\"1000\";\n  const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl, widthAsked, undefined, true);\n  try {\n    const result = await axios.get(proxyUrl);\n    headerBackgroundImage.value = `background-image: url('${result.data}');`;\n    needToBlur.value = result.data === generalStore.contentToDisplay.imageUrl;\n  } catch {\n    if (generalStore.contentToDisplay.imageUrl) {\n      const url = encodeURI(generalStore.contentToDisplay.imageUrl);\n      headerBackgroundImage.value = `background-image: url('${url}');`;\n      needToBlur.value = true;\n    } else {\n      headerBackgroundImage.value = '';\n    }\n  }\n}, {deep: true, immediate: true});\n\n\nonMounted(()=>{\n  window.addEventListener(\"scroll\", handleScroll);\n})\nonBeforeUnmount(() => {\n  window.removeEventListener(\"scroll\", handleScroll);\n})\n\n\n//Methods\nfunction handleScroll(): void {\n  if (\n    window.scrollY - oldScrollY.value > 0 &&\n    window.scrollY > 1 &&\n    document.body.offsetHeight - window.innerHeight > 40\n  ) {\n    if (!scrolled.value) {\n      scrolled.value = true;\n      minScroll.value = 0;\n    }\n  } else if (\n    window.scrollY - oldScrollY.value  < 0 &&\n    window.scrollY < 1 &&\n    minScroll.value > 20\n  ) {\n    scrolled.value = false;\n    minScroll.value = 0;\n  }\n  oldScrollY.value  = window.scrollY;\n  if (minScroll.value < window.scrollY) {\n    minScroll.value = window.scrollY;\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  --header-size: 5rem;\n  --header-additional-content-size: 22rem;\n  @media (width <= 650px) {\n    --header-size: 3.5rem;\n  }\n  @media (width <= 550px) {\n    --header-additional-content-size: 13rem;\n  }\n  .header-saooti-play{\n    z-index: 11;\n    position: sticky;\n    top: 0;\n    background-color: black;\n    &.header-img-bg{\n      background-position: center -20vw;\n      background-repeat: no-repeat;\n      background-size: cover;\n    }\n    &.bg-gradient, &.scrolled{\n      box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; \n    }\n  }\n  .header-content-bg{\n    background-position: center calc(calc(var(--header-size) * -1) - 20vw);\n    background-repeat: no-repeat;\n    background-size: cover;\n    width: 100%;\n    display: flex;\n    background-color: black;\n    transition: height 0.7s;\n    height: calc(var(--header-additional-content-size) - var(--header-size));\n    @starting-style {\n      height: 0rem;\n    }\n    &.scrolled {\n      height: 0rem;\n    }\n  }\n  .header-additional-content{\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    width: 100%;\n  }\n  .header-additional-content, .header-opacity{\n    background: oklch(0 0 0 / 0.5);\n  }\n  .header-force-blur .header-additional-content, .header-force-blur .header-opacity{\n    backdrop-filter: blur(8px);\n  }\n  .header-content{\n    *:focus-visible {\n      box-shadow: 0 0 10px 1px white !important;\n    }\n    h1 {\n      color: white !important;\n      font-size: 1.8rem;\n      margin: 2rem 5rem;\n      @media (width <= 550px) {\n        font-size: 1rem;\n        margin: 1rem 0.5rem 0.5rem;\n      }\n    }\n    .admin-button:hover,\n    .share-btn:hover {\n      background: white;\n    }\n  }\n}\n</style>\n","<template>\n  <header\n    role=\"banner\"\n    class=\"header-saooti-play\"\n    :style=\"headerBackgroundImage\"\n    :class=\"[generalStore.contentToDisplay ? 'header-img-bg':'bg-gradient', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']\"\n  >\n    <TopBarMainContent\n      :is-phone=\"isPhone\"\n      :scrolled=\"scrolled\"\n      :title-display=\"titleToDisplay\"\n      style=\"height: var(--header-size);\"\n      :class=\"headerBackgroundImage.length ? 'header-opacity':''\"\n      :options=\"options?.topBarMainContent\"\n    />\n  </header>\n\n  <div\n    v-if=\"generalStore.contentToDisplay\"\n    class=\"header-content-bg\"\n    :style=\"headerBackgroundImage\"\n    :class=\"{ scrolled: scrolled, 'header-force-blur':needToBlur }\"\n  >\n    <div class=\"header-additional-content header-content\">\n      <h1 v-if=\"!scrolled\" class=\"text-truncate\">\n        {{ titleToDisplay }}\n      </h1>\n      <SubscribeButtons\n        v-if=\"!authStore.isGarRole && content\"\n        v-show=\"!scrolled\"\n        :content=\"content\"\n        :window-width=\"windowWidth\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport TopBarMainContent, { type TopBarMainContentOptions } from \"./TopBarMainContent.vue\";\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { Canal } from \"@/stores/class/radio/canal\";\nimport axios from \"axios\";\nconst SubscribeButtons = defineAsyncComponent(\n  () => import(\"../display/sharing/SubscribeButtons.vue\"),\n);\n\ndefineProps<{\n  options?: {\n    topBarMainContent?: TopBarMainContentOptions\n  }\n}>();\n\n//Data \nconst scrolled = ref(false);\nconst oldScrollY = ref(0);\nconst minScroll = ref(0);\nconst headerBackgroundImage = ref(\"\");\nconst needToBlur = ref(false);\n\n\n//Composables\nconst { isPhone, windowWidth } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\n\n//Computed\nconst titleToDisplay = computed(() => {\n  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n    return (generalStore.contentToDisplay as Podcast).emission.name;\n  }\n  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n    return (generalStore.contentToDisplay as Playlist).title;\n  }\n  if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n    return (generalStore.contentToDisplay as Emission).name;\n  }\n  if ((generalStore.contentToDisplay as Canal)?.id) {\n    return (generalStore.contentToDisplay as Canal).name;\n  }\n  return \"\";\n});\n\n/** The element displayed by the subscribe buttons */\nconst content = computed(() => {\n  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n    return (generalStore.contentToDisplay as Podcast).emission;\n  }\n  if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n    return generalStore.contentToDisplay as Emission;\n  }\n  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n    return generalStore.contentToDisplay as Playlist;\n  }\n  return null;\n});\n\n//Watch\nwatch(()=>generalStore.contentToDisplay, async () => {\n  if(!generalStore.contentToDisplay){\n    headerBackgroundImage.value = \"\";\n    needToBlur.value = false;\n    return;\n  }\n  const widthAsked = window.innerWidth > 960 ? \"1600\":\"1000\";\n  const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl, widthAsked, undefined, true);\n  try {\n    const result = await axios.get(proxyUrl);\n    headerBackgroundImage.value = `background-image: url('${result.data}');`;\n    needToBlur.value = result.data === generalStore.contentToDisplay.imageUrl;\n  } catch {\n    if (generalStore.contentToDisplay.imageUrl) {\n      const url = encodeURI(generalStore.contentToDisplay.imageUrl);\n      headerBackgroundImage.value = `background-image: url('${url}');`;\n      needToBlur.value = true;\n    } else {\n      headerBackgroundImage.value = '';\n    }\n  }\n}, {deep: true, immediate: true});\n\n\nonMounted(()=>{\n  window.addEventListener(\"scroll\", handleScroll);\n})\nonBeforeUnmount(() => {\n  window.removeEventListener(\"scroll\", handleScroll);\n})\n\n\n//Methods\nfunction handleScroll(): void {\n  if (\n    window.scrollY - oldScrollY.value > 0 &&\n    window.scrollY > 1 &&\n    document.body.offsetHeight - window.innerHeight > 40\n  ) {\n    if (!scrolled.value) {\n      scrolled.value = true;\n      minScroll.value = 0;\n    }\n  } else if (\n    window.scrollY - oldScrollY.value  < 0 &&\n    window.scrollY < 1 &&\n    minScroll.value > 20\n  ) {\n    scrolled.value = false;\n    minScroll.value = 0;\n  }\n  oldScrollY.value  = window.scrollY;\n  if (minScroll.value < window.scrollY) {\n    minScroll.value = window.scrollY;\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  --header-size: 5rem;\n  --header-additional-content-size: 22rem;\n  @media (width <= 650px) {\n    --header-size: 3.5rem;\n  }\n  @media (width <= 550px) {\n    --header-additional-content-size: 13rem;\n  }\n  .header-saooti-play{\n    z-index: 11;\n    position: sticky;\n    top: 0;\n    background-color: black;\n    &.header-img-bg{\n      background-position: center -20vw;\n      background-repeat: no-repeat;\n      background-size: cover;\n    }\n    &.bg-gradient, &.scrolled{\n      box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; \n    }\n  }\n  .header-content-bg{\n    background-position: center calc(calc(var(--header-size) * -1) - 20vw);\n    background-repeat: no-repeat;\n    background-size: cover;\n    width: 100%;\n    display: flex;\n    background-color: black;\n    transition: height 0.7s;\n    height: calc(var(--header-additional-content-size) - var(--header-size));\n    @starting-style {\n      height: 0rem;\n    }\n    &.scrolled {\n      height: 0rem;\n    }\n  }\n  .header-additional-content{\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    width: 100%;\n  }\n  .header-additional-content, .header-opacity{\n    background: oklch(0 0 0 / 0.5);\n  }\n  .header-force-blur .header-additional-content, .header-force-blur .header-opacity{\n    backdrop-filter: blur(8px);\n  }\n  .header-content{\n    *:focus-visible {\n      box-shadow: 0 0 10px 1px white !important;\n    }\n    h1 {\n      color: white !important;\n      font-size: 1.8rem;\n      margin: 2rem 5rem;\n      @media (width <= 550px) {\n        font-size: 1rem;\n        margin: 1rem 0.5rem 0.5rem;\n      }\n    }\n    .admin-button:hover,\n    .share-btn:hover {\n      background: white;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}