@saooti/octopus-sdk 42.2.0 → 42.2.1

package/dist/ShareNewsletter-B4dn4-jA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareNewsletter-B4dn4-jA.mjs","names":[],"sources":["../src/components/display/sharing/ShareNewsletter.vue","../src/components/display/sharing/ShareNewsletter.vue"],"sourcesContent":["<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n","<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/ShareNewsletter-BM2hE5XO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareNewsletter-BM2hE5XO.mjs","names":[],"sources":["../src/components/display/sharing/ShareNewsletter.vue","../src/components/display/sharing/ShareNewsletter.vue"],"sourcesContent":["<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n","<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/ShareNewsletter-BrwslUOD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareNewsletter-BrwslUOD.mjs","names":[],"sources":["../src/components/display/sharing/ShareNewsletter.vue","../src/components/display/sharing/ShareNewsletter.vue"],"sourcesContent":["<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n","<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/ShareNewsletter-CPjvKO4R.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareNewsletter-CPjvKO4R.mjs","names":[],"sources":["../src/components/display/sharing/ShareNewsletter.vue","../src/components/display/sharing/ShareNewsletter.vue"],"sourcesContent":["<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n","<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/ShareNewsletter-Cl7VbBA9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareNewsletter-Cl7VbBA9.mjs","names":[],"sources":["../src/components/display/sharing/ShareNewsletter.vue","../src/components/display/sharing/ShareNewsletter.vue"],"sourcesContent":["<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n","<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/ShareNewsletter-D-V6qe3a.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareNewsletter-D-V6qe3a.mjs","names":[],"sources":["../src/components/display/sharing/ShareNewsletter.vue","../src/components/display/sharing/ShareNewsletter.vue"],"sourcesContent":["<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n","<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/ShareNewsletter-DsH2srdw.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareNewsletter-DsH2srdw.mjs","names":[],"sources":["../src/components/display/sharing/ShareNewsletter.vue","../src/components/display/sharing/ShareNewsletter.vue"],"sourcesContent":["<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n","<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex flex-grow-1\">\n      <div class=\"d-flex flex-column flex-shrink-0 me-3\">\n        <h2 class=\"mb-3\">\n          {{ t(\"Configure your Newsletter tile\") }}\n        </h2>\n        <div\n          v-for=\"colors in arrayColors\"\n          :key=\"colors.mainText\"\n          class=\"d-flex align-items-center mb-3\"\n        >\n          <VSwatches\n            v-model=\"colors.color\"\n            class=\"c-hand me-2\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-to=\"right\"\n            :data-color=\"colors.color\"\n          />\n          <div class=\"d-flex flex-column\">\n            <div class=\"fw-bold\">{{ colors.mainText }}</div>\n            <div v-if=\"colors.secondText\" class=\"description-text\">\n              {{ colors.secondText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- eslint-disable vue/no-v-html -->\n      <div class=\"border p-3\" v-html=\"newsletterHtml\" />\n      <!-- eslint-enable -->\n    </div>\n    <ClassicCopyButton\n      :text=\"t('Copy code')\"\n      :text-after-copy=\"t('Code copied!')\"\n      :data-to-copy=\"newsletterHtml\"\n    />\n    <div>{{ t(\"And paste it in your newsletter\") }}</div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicCopyButton from \"../../form/ClassicCopyButton.vue\";\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { computed, onBeforeMount, ref } from \"vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n})\n\nconst { t } = useI18n();\n\n//Data \nconst shareUrl = ref(window.location.origin);\nconst arrayColors = ref([\n  {\n    color: \"#40a372\",\n    mainText: t(\"Choose main color\"),\n    secondText: t(\"Newsletter elements\"),\n  },\n  { color: \"#000000\", mainText: t(\"Choose text color\") },\n  { color: \"#FFFFFF\", mainText: t(\"Choose background color\") },\n]);\n\n//Composables\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst saveFetchStore = useSaveFetchStore();\nconst router = useRouter();\n\n//Computed\nconst pathShare = computed(() => {\n  const orga = filterStore.filterOrgaId ? \"?productor=\"+filterStore.filterOrgaId : \"\";\n  if(props.podcast) {\n    return router.resolve({ name: \"podcast\", params: { podcastId: props.podcast.podcastId } }).path + orga;\n  }\n  if(props.emission){\n    return router.resolve({ name: \"emission\", params: { emissionId: props.emission.emissionId } }).path + orga;\n  }\n  if(props.playlist){\n    return router.resolve({ name: \"playlist\", params: { playlistId: props.playlist.playlistId } }).path + orga;\n  }\n  return \"\";\n});\n\nconst newsletterInfo = computed(() => {\n  if (props.podcast) {\n    return {\n      imageUrl: `${props.podcast.imageUrl}\" alt=\"${t(\n        \"Episode name image\",\n        { name: props.podcast.title },\n      )}`,\n      title: props.podcast.title,\n      description: props.podcast.description ?? \"\",\n      shareText: t(\"Listen this episode\"),\n      emissionHtml: `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex; margin-top:5px;\">\n      <div style=\"font-size:16px; color:${\n        arrayColors.value[1].color\n      }; margin-right:5px;text-wrap: nowrap;\">${t(\"Emission\")} :</div>\n      <a href=\"${shareUrl.value+pathShare.value}\" style=\"font-size: 16px;color: ${\n        arrayColors.value[0].color\n      };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\">${\n        props.podcast.emission.name\n      }</a>\n      </div></td></tr>`,\n      articleHtml:\n        !props.podcast?.article || 0 === props.podcast.article?.length\n          ? ``\n          : `<tr><td style=\"padding:5px 0;\">\n      <div style=\"display:flex;\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z\"/></svg>\n      <a href=\"${props.podcast.article}\" style=\"color: ${\n        arrayColors.value[1].color\n      };margin-top:2px\">${t(\"See associated article\")}</a>\n      </div></td></tr>\n      `,\n      colorTitle: `color:${arrayColors.value[1].color};`,\n    };\n  }\n  if (props.emission) {\n    return {\n      imageUrl: `${props.emission.imageUrl}\" alt=\"${t(\n        \"Emission image\",\n      )}`,\n      title: props.emission.name,\n      description: props.emission.description ?? \"\",\n      shareText: t(\"Listen to all episodes\"),\n      emissionHtml: ``,\n      articleHtml: ``,\n      colorTitle: `color:${arrayColors.value[0].color};`,\n    };\n  }\n  return {\n    imageUrl: `${props.playlist?.imageUrl}\" alt=\"${t(\n      \"Playlist image\",\n    )}`,\n    title: props.playlist?.title,\n    description: props.playlist?.description ?? \"\",\n    shareText: t(\"Listen to all episodes\"),\n    emissionHtml: ``,\n    articleHtml: ``,\n    colorTitle: `color:${arrayColors.value[0].color};`,\n  };\n});\nconst newsletterHtml = computed(() => {\n  return `<table style=\"background:${arrayColors.value[2].color};color:${\n        arrayColors.value[1].color\n          };table-layout: fixed;width:100%;font-size: 14px;\">\n    <tr>\n    <td valign=\"top\" width=\"30%\" rowspan=\"7\" style=\"padding-right:5px;\"><img width=\"100%\" src=\"${\n            newsletterInfo.value.imageUrl\n          }\" style=\"border-radius: 4px;\"></td>\n    <td valign=\"top\" width=\"70%\" style=\"padding:5px 0;\"><div style=\"margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${\n            newsletterInfo.value.colorTitle\n          }\">${newsletterInfo.value.title}</div></td>\n    </tr>${newsletterInfo.value.emissionHtml}\n    <tr><td style=\"padding:5px 0;\"><div style=\"overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;\">${\n            newsletterInfo.value.description\n          }</div></td></tr>\n    <tr><td valign=\"top\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"color: ${arrayColors.value[0].color};\">${t(\n            \"See more\",\n          )}</a></td></tr>\n    <tr>${newsletterInfo.value.articleHtml}\n    <td width=\"1\" style=\"padding:5px 0;\"><a href=\"${\n            shareUrl.value+pathShare.value\n          }\" style=\"font-size: 18px;color: ${\n            arrayColors.value[0].color\n          };text-decoration: none; display:flex;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22\"/></svg><div style=\"margin-top: 15px; color:${\n            arrayColors.value[1].color\n          };\">${newsletterInfo.value.shareText}</div></a></td>\n    </tr>\n    </table>\n    `;\n});\n\n\nonBeforeMount(()=>initData())\n\n//Methods\nasync function initData(): Promise<void> {\n  const orgaId = authStore.authOrgaId;\n  if (!orgaId?.length) {\n    return;\n  }\n  const attributes = await saveFetchStore.getOrgaAttributes(orgaId ?? \"\");\n  if (\n    Object.hasOwn(attributes, \"podcastmakerUrl\") &&\n    (attributes.podcastmakerUrl as string | undefined | null)?.length\n  ) {\n    shareUrl.value = attributes.podcastmakerUrl?.toString() ?? window.location.origin;\n  }\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    arrayColors.value[0].color = attributes.COLOR as string;\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/SharePlayer-BWl75Ndj.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharePlayer-BWl75Ndj.mjs","names":[],"sources":["../src/components/display/sharing/SharePlayer.vue","../src/components/display/sharing/SharePlayer.vue"],"sourcesContent":["<template>\n  <section class=\"module-box overflow-visible\">\n    <div class=\"d-flex justify-content-between align-items-center\">\n      <h3 class=\"mb-3\">\n        {{ t(\"Embed\") }}\n      </h3>\n      <div\n        v-if=\"noAd && !generalStore.platformEducation\"\n        class=\"sticker\"\n        :title=\"t('You cannot insert advertising')\"\n      >\n        {{ t(\"No advertising\") }}\n      </div>\n    </div>\n    <template v-if=\"!exclusive && (authenticated || notExclusive)\">\n      <div class=\"d-flex\">\n        <iframe\n          id=\"miniplayerIframe\"\n          title=\"Miniplayer\"\n          allowfullscreen=\"true\"\n          allow=\"clipboard-read; clipboard-write; autoplay\"\n          referrerpolicy=\"no-referrer-when-downgrade\"\n          frameborder=\"0\"\n          :src=\"iFrameSrc\"\n          width=\"100%\"\n          :height=\"iFrameHeight\"\n          class=\"max-iframe mx-3\"\n        />\n        <div class=\"d-flex flex-column flex-grow-1\">\n          <SharePlayerTypes\n            v-model:i-frame-model=\"iFrameModel\"\n            v-model:type-custom-player=\"typeCustomPlayer\"\n            :podcast=\"podcast\"\n            :emission=\"emission\"\n            :playlist=\"playlist\"\n            :organisation-id=\"organisationId\"\n            :is-live=\"isLiveReadyToRecord\"\n          />\n          <SharePlayerColors\n            v-model:color=\"color\"\n            v-model:theme=\"theme\"\n            class=\"mt-3\"\n          />\n          <PlayerParameters\n            v-model:display-article=\"displayArticle\"\n            v-model:display-transcript=\"displayTranscript\"\n            v-model:display-wave=\"displayWave\"\n            v-model:is-visible=\"isVisible\"\n            v-model:player-auto-play=\"playerAutoPlay\"\n            v-model:episodes-number=\"episodesNumber\"\n            v-model:insert-code=\"insertCode\"\n            v-model:auto-height=\"autoHeight\"\n            :display-is-visible=\"displayIsVisible\"\n            :is-podcast-not-visible=\"isPodcastNotVisible\"\n            :chose-number-episode=\"displayChoiceAllEpisodes\"\n            :display-choice-all-episodes=\"displayChoiceAllEpisodes\"\n            :display-transcript-param=\"displayTranscriptParam\"\n            :display-article-param=\"displayArticleParam\"\n            :display-wave-param=\"displayWaveParam\"\n            :display-insert-code=\"displayInsertCode\"\n            :display-auto-height=\"iFrameModel.toLowerCase().includes('large')\"\n            @episode-choice-display=\"episodeChoiceDisplay = $event\"\n          />\n\n          <ShareModalPlayer\n            v-if=\"isShareModal\"\n            :embed-link=\"iFrame\"\n            :embedly-link=\"iFrameSrc\"\n            :direct-link=\"podcast\"\n            @close=\"isShareModal = false\"\n          />\n          <button\n            class=\"btn btn-primary w-fit-content mt-3\"\n            @click=\"isShareModal = true\"\n          >\n            {{ t(\"Share the player\") }}\n          </button>\n        </div>\n      </div>\n    </template>\n    <div v-else-if=\"exclusive && authenticated\">\n      {{ t(\"Only organisation members can share the content\") }}\n    </div>\n    <div v-else-if=\"!authenticated\">\n      {{ t(\"Only authenticated members can share the content\") }}\n    </div>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { defineAsyncComponent, ref, Ref, computed, onBeforeMount } from \"vue\";\nimport { useGeneralStore } from \"../../../stores/GeneralStore\";\nimport { useI18n } from \"vue-i18n\";\nconst ShareModalPlayer = defineAsyncComponent(\n  () => import(\"../../misc/modal/ShareModalPlayer.vue\"),\n);\nconst PlayerParameters = defineAsyncComponent(\n  () => import(\"./PlayerParameters.vue\"),\n);\nconst SharePlayerTypes = defineAsyncComponent(\n  () => import(\"./SharePlayerTypes.vue\"),\n);\nconst SharePlayerColors = defineAsyncComponent(\n  () => import(\"./SharePlayerColors.vue\"),\n);\n\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n  organisationId: { default: undefined, type: String },\n  exclusive: { default: false, type: Boolean },\n  notExclusive: { default: true, type: Boolean },\n})\n\n//Data \nconst typeCustomPlayer = ref(\"\");\nconst iFrameModel = ref(\"default\");\nconst isShareModal = ref(false);\nconst color = ref(\"#40a372\");\nconst theme = ref(\"#000000\");\nconst episodeChoiceDisplay = ref(\"number\");\nconst episodesNumber = ref(3);\nconst isVisible = ref(false);\nconst displayArticle = ref(true);\nconst displayTranscript = ref(true);\nconst displayWave = ref(false);\nconst playerAutoPlay = ref(false);\nconst insertCode = ref(false);\nconst autoHeight = ref(false);\nconst orgaAttributes : Ref<{ [key: string]: string | number | boolean | undefined }| undefined>= ref(undefined);\n\n\n//Composables\nconst { t } = useI18n();\nconst authStore = useAuthStore();\nconst apiStore = useApiStore();\nconst generalStore = useGeneralStore();\nconst saveFetchStore = useSaveFetchStore();\n\n\n//Computed\nconst authenticated = computed(() => undefined !== authStore.authOrgaId);\nconst displayWaveParam = computed(() => \"default\" === iFrameModel.value || \"emission\" === iFrameModel.value);\nconst displayIsVisible = computed(() => displayChoiceAllEpisodes.value || isPodcastNotVisible.value);\nconst isPodcastNotVisible = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    !props.podcast.availability.visibility &&\n    !isTypeEmission.value\n  );\n});\nconst displayArticleParam = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    undefined !== props.podcast.article &&\n    0 !== props.podcast.article.length &&\n    (\"default\" === iFrameModel.value ||\n      \"large\" === iFrameModel.value ||\n      \"largeMore\" === iFrameModel.value)\n  );\n});\nconst displayInsertCode = computed(() => {\n  let orgaResourceId = \"\";\n  if (props.podcast) {\n    orgaResourceId = props.podcast.organisation.id;\n  }\n  if (props.emission) {\n    orgaResourceId = props.emission.orga.id;\n  }\n  if (props.playlist) {\n    orgaResourceId = props.playlist.organisation?.id ?? \"\";\n  }\n  return orgaResourceId === authStore.authOrgaId;\n});\nconst displayTranscriptParam = computed(() => isTranscriptionAuthorize.value && (isDefault.value || isEmission.value));\nconst isTranscriptionAuthorize = computed(() => {\n  if (!orgaAttributes.value) {\n    return false;\n  }\n  return orgaAttributes.value &&\n    Object.hasOwn(orgaAttributes.value, \"speechtotext.active\")\n    ? (orgaAttributes.value[\"speechtotext.active\"] as boolean)\n    : false;\n});\nconst displayChoiceAllEpisodes = computed(() => !props.podcast || isTypeEmission.value);\nconst isDefault = computed(() => \"default\" === iFrameModel.value);\nconst isEmission = computed(() => \"emission\" === iFrameModel.value);\nconst isLargeEmission = computed(() => \"emissionLarge\" === iFrameModel.value);\nconst isTypeEmission = computed(() => {\n  return (\n    isEmission.value ||\n    isLargeEmission.value ||\n    \"EMISSION\" === typeCustomPlayer.value\n  );\n});\nconst isLiveReadyToRecord = computed(() => {\n  if (props.podcast)\n    return (\n      undefined !== props.podcast.conferenceId &&\n      0 !== props.podcast.conferenceId &&\n      props.podcast.processingStatus === \"READY_TO_RECORD\"\n    );\n  return false;\n});\n\nconst noAd = computed(() => {\n  return (\n    (props.podcast?.organisation.id !== props.organisationId &&\n      \"NO\" === props.podcast?.monetisable) ||\n    (\"UNDEFINED\" === props.podcast?.monetisable &&\n      \"NO\" === props.podcast?.emission.monetisable)\n  );\n});\nconst iFrameSrc = computed(() => {\n  if (\"video\" === iFrameModel.value) {\n    return (\n      \"https://www.ultimedia.com/deliver/generic/iframe/mdtk/01009833/zone/1/showtitle/1/src/\" +\n      props.podcast?.video?.videoId +\n      \"/sound/true\"\n    );\n  }\n  let url = [\"\"];\n  const iFrameNumber =\n    displayChoiceAllEpisodes.value && \"all\" === episodeChoiceDisplay.value\n      ? \"/0\"\n      : \"/\" + episodesNumber.value;\n  url.push(`${apiStore.miniplayerUrl}miniplayer/`);\n  if (!props.podcast && !props.playlist && props.emission) {\n    url = constructEmissionUrl(url);\n  } else if (props.playlist) {\n    url = constructPlaylistUrl(url);\n  } else if (props.emission && props.podcast) {\n    url.push(`${iFrameModel.value}/`);\n    if (isTypeEmission.value) {\n      url.push(\n        `${props.emission.emissionId}${iFrameNumber}/${props.podcast.podcastId}`,\n      );\n    } else {\n      url.push(`${props.podcast.podcastId}`);\n    }\n  }\n\n  return addUrlParameters(url).join(\"\");\n});\nconst iFrameHeight = computed(() => {\n  switch (iFrameModel.value) {\n    case \"video\":\n      return \"281px\";\n    case \"large\":\n      if (props.podcast) return \"140px\";\n      return \"350px\";\n    case \"largeMore\":\n      return \"210px\";\n    case \"emissionLarge\":\n      return \"350px\";\n    case \"emission\":\n      return \"540px\";\n    case \"videoLive\":\n      return \"450px\";\n    default:\n      return \"540px\";\n  }\n});\nconst iFrame = computed(() => {\n  const specialDigiteka = props.podcast?.video?.videoId\n    ? 'allowfullscreen=\"true\" referrerpolicy=\"no-referrer-when-downgrade\"'\n    : \"\";\n  return `<iframe src=\"${iFrameSrc.value}\" width=\"100%\" height=\"${iFrameHeight.value}\" frameborder=\"0\" scrolling=\"no\" ${specialDigiteka} allow=\"clipboard-read; clipboard-write; autoplay\"></iframe>`;\n});\nconst dataTitle = computed(() => {\n  if (props.podcast) return props.podcast.podcastId;\n  if (props.emission) return props.emission.emissionId;\n  if (props.playlist) return props.playlist.playlistId;\n  return 0;\n});\n\n\nonBeforeMount(()=>initSharePlayer())\n\n\n//Methods\nasync function initSharePlayer() {\n  orgaAttributes.value = await saveFetchStore.getOrgaAttributes(authStore.authOrgaId ?? \"\");\n  initColor();\n  if (isLiveReadyToRecord.value) {\n    iFrameModel.value = \"large\";\n  }\n  if (\"true\" === props.podcast?.annotations?.[\"fromTTS\"]) {\n    displayTranscript.value = false;\n  }\n}\nfunction getIframeNumber(): string {\n  return displayChoiceAllEpisodes.value && \"all\" === episodeChoiceDisplay.value\n    ? \"/0\"\n    : \"/\" + episodesNumber.value;\n}\nfunction constructEmissionUrl(url: Array<string>) {\n  if (!props.emission) {\n    return [];\n  }\n  switch (iFrameModel.value) {\n    case \"default\":\n      url.push(\"emission\");\n      break;\n    case \"large\":\n      url.push(\"emissionLarge\");\n      break;\n    default:\n      url.push(`${iFrameModel.value}`);\n      break;\n  }\n  url.push(`/${props.emission.emissionId}${getIframeNumber()}`);\n  return url;\n}\nfunction constructPlaylistUrl(url: Array<string>) {\n  if (!props.playlist) {\n    return [];\n  }\n  switch (iFrameModel.value) {\n    case \"default\":\n      url.push(\"playlist\");\n      break;\n    case \"large\":\n      url.push(\"playlistLarge\");\n      break;\n    default:\n      url.push(`${iFrameModel.value}`);\n      break;\n  }\n  url.push(`/${props.playlist.playlistId}`);\n  return url;\n}\nfunction addUrlParameters(url: Array<string>) {\n  url.push(\"?distributorId=\" + props.organisationId);\n  url.push(\n    `&color=${color.value.substring(1)}&theme=${theme.value.substring(1)}`,\n  );\n  if (!displayArticle.value && displayArticleParam.value) {\n    url.push(\"&article=false\");\n  }\n  if (!displayTranscript.value) {\n    url.push(\"&transcript=false\");\n  }\n  if (!displayWave.value) {\n    url.push(\"&wave=false\");\n  }\n  if (playerAutoPlay.value) {\n    url.push(\"&autoplay=true\");\n  }\n  if (isVisible.value) {\n    url.push(\"&key=\" + window.btoa(dataTitle.value.toString()));\n  }\n  if (insertCode.value) {\n    url.push(\"&insertCode=true\");\n  }\n  if (autoHeight.value) {\n    url.push(\"&autoHeight=true\");\n  }\n  return url;\n}\nfunction initColor(): void {\n  if (!orgaAttributes.value) {\n    return;\n  }\n  color.value = Object.hasOwn(orgaAttributes.value, \"COLOR\")\n    ? (orgaAttributes.value.COLOR as string)\n    : \"#40a372\";\n  theme.value = Object.hasOwn(orgaAttributes.value, \"THEME\")\n    ? (orgaAttributes.value.THEME as string)\n    : \"#ffffff\";\n}\n</script>\n\n<style lang=\"scss\">\n\n@use \"../../../style/iframe\";\n\n.octopus-app {\n  .sticker {\n    align-self: center;\n    background: var(--octopus-primary);\n    padding: 0.5rem;\n    transition: all 0.5s ease;\n    color: white;\n    font-weight: bold;\n    letter-spacing: 1px;\n    box-shadow: 10px 10px 34px -15px var(--octopus-shadow);\n    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;\n    border: solid 2px var(--octopus-gray-text);\n\n    &:hover {\n      box-shadow: 2px 8px 4px -6px var(--octopus-shadow);\n      background: transparent;\n      color: var(--octopus-primary);\n    }\n  }\n}\n</style>\n","<template>\n  <section class=\"module-box overflow-visible\">\n    <div class=\"d-flex justify-content-between align-items-center\">\n      <h3 class=\"mb-3\">\n        {{ t(\"Embed\") }}\n      </h3>\n      <div\n        v-if=\"noAd && !generalStore.platformEducation\"\n        class=\"sticker\"\n        :title=\"t('You cannot insert advertising')\"\n      >\n        {{ t(\"No advertising\") }}\n      </div>\n    </div>\n    <template v-if=\"!exclusive && (authenticated || notExclusive)\">\n      <div class=\"d-flex\">\n        <iframe\n          id=\"miniplayerIframe\"\n          title=\"Miniplayer\"\n          allowfullscreen=\"true\"\n          allow=\"clipboard-read; clipboard-write; autoplay\"\n          referrerpolicy=\"no-referrer-when-downgrade\"\n          frameborder=\"0\"\n          :src=\"iFrameSrc\"\n          width=\"100%\"\n          :height=\"iFrameHeight\"\n          class=\"max-iframe mx-3\"\n        />\n        <div class=\"d-flex flex-column flex-grow-1\">\n          <SharePlayerTypes\n            v-model:i-frame-model=\"iFrameModel\"\n            v-model:type-custom-player=\"typeCustomPlayer\"\n            :podcast=\"podcast\"\n            :emission=\"emission\"\n            :playlist=\"playlist\"\n            :organisation-id=\"organisationId\"\n            :is-live=\"isLiveReadyToRecord\"\n          />\n          <SharePlayerColors\n            v-model:color=\"color\"\n            v-model:theme=\"theme\"\n            class=\"mt-3\"\n          />\n          <PlayerParameters\n            v-model:display-article=\"displayArticle\"\n            v-model:display-transcript=\"displayTranscript\"\n            v-model:display-wave=\"displayWave\"\n            v-model:is-visible=\"isVisible\"\n            v-model:player-auto-play=\"playerAutoPlay\"\n            v-model:episodes-number=\"episodesNumber\"\n            v-model:insert-code=\"insertCode\"\n            v-model:auto-height=\"autoHeight\"\n            :display-is-visible=\"displayIsVisible\"\n            :is-podcast-not-visible=\"isPodcastNotVisible\"\n            :chose-number-episode=\"displayChoiceAllEpisodes\"\n            :display-choice-all-episodes=\"displayChoiceAllEpisodes\"\n            :display-transcript-param=\"displayTranscriptParam\"\n            :display-article-param=\"displayArticleParam\"\n            :display-wave-param=\"displayWaveParam\"\n            :display-insert-code=\"displayInsertCode\"\n            :display-auto-height=\"iFrameModel.toLowerCase().includes('large')\"\n            @episode-choice-display=\"episodeChoiceDisplay = $event\"\n          />\n\n          <ShareModalPlayer\n            v-if=\"isShareModal\"\n            :embed-link=\"iFrame\"\n            :embedly-link=\"iFrameSrc\"\n            :direct-link=\"podcast\"\n            @close=\"isShareModal = false\"\n          />\n          <button\n            class=\"btn btn-primary w-fit-content mt-3\"\n            @click=\"isShareModal = true\"\n          >\n            {{ t(\"Share the player\") }}\n          </button>\n        </div>\n      </div>\n    </template>\n    <div v-else-if=\"exclusive && authenticated\">\n      {{ t(\"Only organisation members can share the content\") }}\n    </div>\n    <div v-else-if=\"!authenticated\">\n      {{ t(\"Only authenticated members can share the content\") }}\n    </div>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { defineAsyncComponent, ref, Ref, computed, onBeforeMount } from \"vue\";\nimport { useGeneralStore } from \"../../../stores/GeneralStore\";\nimport { useI18n } from \"vue-i18n\";\nconst ShareModalPlayer = defineAsyncComponent(\n  () => import(\"../../misc/modal/ShareModalPlayer.vue\"),\n);\nconst PlayerParameters = defineAsyncComponent(\n  () => import(\"./PlayerParameters.vue\"),\n);\nconst SharePlayerTypes = defineAsyncComponent(\n  () => import(\"./SharePlayerTypes.vue\"),\n);\nconst SharePlayerColors = defineAsyncComponent(\n  () => import(\"./SharePlayerColors.vue\"),\n);\n\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  emission: { default: undefined, type: Object as () => Emission },\n  playlist: { default: undefined, type: Object as () => Playlist },\n  organisationId: { default: undefined, type: String },\n  exclusive: { default: false, type: Boolean },\n  notExclusive: { default: true, type: Boolean },\n})\n\n//Data \nconst typeCustomPlayer = ref(\"\");\nconst iFrameModel = ref(\"default\");\nconst isShareModal = ref(false);\nconst color = ref(\"#40a372\");\nconst theme = ref(\"#000000\");\nconst episodeChoiceDisplay = ref(\"number\");\nconst episodesNumber = ref(3);\nconst isVisible = ref(false);\nconst displayArticle = ref(true);\nconst displayTranscript = ref(true);\nconst displayWave = ref(false);\nconst playerAutoPlay = ref(false);\nconst insertCode = ref(false);\nconst autoHeight = ref(false);\nconst orgaAttributes : Ref<{ [key: string]: string | number | boolean | undefined }| undefined>= ref(undefined);\n\n\n//Composables\nconst { t } = useI18n();\nconst authStore = useAuthStore();\nconst apiStore = useApiStore();\nconst generalStore = useGeneralStore();\nconst saveFetchStore = useSaveFetchStore();\n\n\n//Computed\nconst authenticated = computed(() => undefined !== authStore.authOrgaId);\nconst displayWaveParam = computed(() => \"default\" === iFrameModel.value || \"emission\" === iFrameModel.value);\nconst displayIsVisible = computed(() => displayChoiceAllEpisodes.value || isPodcastNotVisible.value);\nconst isPodcastNotVisible = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    !props.podcast.availability.visibility &&\n    !isTypeEmission.value\n  );\n});\nconst displayArticleParam = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    undefined !== props.podcast.article &&\n    0 !== props.podcast.article.length &&\n    (\"default\" === iFrameModel.value ||\n      \"large\" === iFrameModel.value ||\n      \"largeMore\" === iFrameModel.value)\n  );\n});\nconst displayInsertCode = computed(() => {\n  let orgaResourceId = \"\";\n  if (props.podcast) {\n    orgaResourceId = props.podcast.organisation.id;\n  }\n  if (props.emission) {\n    orgaResourceId = props.emission.orga.id;\n  }\n  if (props.playlist) {\n    orgaResourceId = props.playlist.organisation?.id ?? \"\";\n  }\n  return orgaResourceId === authStore.authOrgaId;\n});\nconst displayTranscriptParam = computed(() => isTranscriptionAuthorize.value && (isDefault.value || isEmission.value));\nconst isTranscriptionAuthorize = computed(() => {\n  if (!orgaAttributes.value) {\n    return false;\n  }\n  return orgaAttributes.value &&\n    Object.hasOwn(orgaAttributes.value, \"speechtotext.active\")\n    ? (orgaAttributes.value[\"speechtotext.active\"] as boolean)\n    : false;\n});\nconst displayChoiceAllEpisodes = computed(() => !props.podcast || isTypeEmission.value);\nconst isDefault = computed(() => \"default\" === iFrameModel.value);\nconst isEmission = computed(() => \"emission\" === iFrameModel.value);\nconst isLargeEmission = computed(() => \"emissionLarge\" === iFrameModel.value);\nconst isTypeEmission = computed(() => {\n  return (\n    isEmission.value ||\n    isLargeEmission.value ||\n    \"EMISSION\" === typeCustomPlayer.value\n  );\n});\nconst isLiveReadyToRecord = computed(() => {\n  if (props.podcast)\n    return (\n      undefined !== props.podcast.conferenceId &&\n      0 !== props.podcast.conferenceId &&\n      props.podcast.processingStatus === \"READY_TO_RECORD\"\n    );\n  return false;\n});\n\nconst noAd = computed(() => {\n  return (\n    (props.podcast?.organisation.id !== props.organisationId &&\n      \"NO\" === props.podcast?.monetisable) ||\n    (\"UNDEFINED\" === props.podcast?.monetisable &&\n      \"NO\" === props.podcast?.emission.monetisable)\n  );\n});\nconst iFrameSrc = computed(() => {\n  if (\"video\" === iFrameModel.value) {\n    return (\n      \"https://www.ultimedia.com/deliver/generic/iframe/mdtk/01009833/zone/1/showtitle/1/src/\" +\n      props.podcast?.video?.videoId +\n      \"/sound/true\"\n    );\n  }\n  let url = [\"\"];\n  const iFrameNumber =\n    displayChoiceAllEpisodes.value && \"all\" === episodeChoiceDisplay.value\n      ? \"/0\"\n      : \"/\" + episodesNumber.value;\n  url.push(`${apiStore.miniplayerUrl}miniplayer/`);\n  if (!props.podcast && !props.playlist && props.emission) {\n    url = constructEmissionUrl(url);\n  } else if (props.playlist) {\n    url = constructPlaylistUrl(url);\n  } else if (props.emission && props.podcast) {\n    url.push(`${iFrameModel.value}/`);\n    if (isTypeEmission.value) {\n      url.push(\n        `${props.emission.emissionId}${iFrameNumber}/${props.podcast.podcastId}`,\n      );\n    } else {\n      url.push(`${props.podcast.podcastId}`);\n    }\n  }\n\n  return addUrlParameters(url).join(\"\");\n});\nconst iFrameHeight = computed(() => {\n  switch (iFrameModel.value) {\n    case \"video\":\n      return \"281px\";\n    case \"large\":\n      if (props.podcast) return \"140px\";\n      return \"350px\";\n    case \"largeMore\":\n      return \"210px\";\n    case \"emissionLarge\":\n      return \"350px\";\n    case \"emission\":\n      return \"540px\";\n    case \"videoLive\":\n      return \"450px\";\n    default:\n      return \"540px\";\n  }\n});\nconst iFrame = computed(() => {\n  const specialDigiteka = props.podcast?.video?.videoId\n    ? 'allowfullscreen=\"true\" referrerpolicy=\"no-referrer-when-downgrade\"'\n    : \"\";\n  return `<iframe src=\"${iFrameSrc.value}\" width=\"100%\" height=\"${iFrameHeight.value}\" frameborder=\"0\" scrolling=\"no\" ${specialDigiteka} allow=\"clipboard-read; clipboard-write; autoplay\"></iframe>`;\n});\nconst dataTitle = computed(() => {\n  if (props.podcast) return props.podcast.podcastId;\n  if (props.emission) return props.emission.emissionId;\n  if (props.playlist) return props.playlist.playlistId;\n  return 0;\n});\n\n\nonBeforeMount(()=>initSharePlayer())\n\n\n//Methods\nasync function initSharePlayer() {\n  orgaAttributes.value = await saveFetchStore.getOrgaAttributes(authStore.authOrgaId ?? \"\");\n  initColor();\n  if (isLiveReadyToRecord.value) {\n    iFrameModel.value = \"large\";\n  }\n  if (\"true\" === props.podcast?.annotations?.[\"fromTTS\"]) {\n    displayTranscript.value = false;\n  }\n}\nfunction getIframeNumber(): string {\n  return displayChoiceAllEpisodes.value && \"all\" === episodeChoiceDisplay.value\n    ? \"/0\"\n    : \"/\" + episodesNumber.value;\n}\nfunction constructEmissionUrl(url: Array<string>) {\n  if (!props.emission) {\n    return [];\n  }\n  switch (iFrameModel.value) {\n    case \"default\":\n      url.push(\"emission\");\n      break;\n    case \"large\":\n      url.push(\"emissionLarge\");\n      break;\n    default:\n      url.push(`${iFrameModel.value}`);\n      break;\n  }\n  url.push(`/${props.emission.emissionId}${getIframeNumber()}`);\n  return url;\n}\nfunction constructPlaylistUrl(url: Array<string>) {\n  if (!props.playlist) {\n    return [];\n  }\n  switch (iFrameModel.value) {\n    case \"default\":\n      url.push(\"playlist\");\n      break;\n    case \"large\":\n      url.push(\"playlistLarge\");\n      break;\n    default:\n      url.push(`${iFrameModel.value}`);\n      break;\n  }\n  url.push(`/${props.playlist.playlistId}`);\n  return url;\n}\nfunction addUrlParameters(url: Array<string>) {\n  url.push(\"?distributorId=\" + props.organisationId);\n  url.push(\n    `&color=${color.value.substring(1)}&theme=${theme.value.substring(1)}`,\n  );\n  if (!displayArticle.value && displayArticleParam.value) {\n    url.push(\"&article=false\");\n  }\n  if (!displayTranscript.value) {\n    url.push(\"&transcript=false\");\n  }\n  if (!displayWave.value) {\n    url.push(\"&wave=false\");\n  }\n  if (playerAutoPlay.value) {\n    url.push(\"&autoplay=true\");\n  }\n  if (isVisible.value) {\n    url.push(\"&key=\" + window.btoa(dataTitle.value.toString()));\n  }\n  if (insertCode.value) {\n    url.push(\"&insertCode=true\");\n  }\n  if (autoHeight.value) {\n    url.push(\"&autoHeight=true\");\n  }\n  return url;\n}\nfunction initColor(): void {\n  if (!orgaAttributes.value) {\n    return;\n  }\n  color.value = Object.hasOwn(orgaAttributes.value, \"COLOR\")\n    ? (orgaAttributes.value.COLOR as string)\n    : \"#40a372\";\n  theme.value = Object.hasOwn(orgaAttributes.value, \"THEME\")\n    ? (orgaAttributes.value.THEME as string)\n    : \"#ffffff\";\n}\n</script>\n\n<style lang=\"scss\">\n\n@use \"../../../style/iframe\";\n\n.octopus-app {\n  .sticker {\n    align-self: center;\n    background: var(--octopus-primary);\n    padding: 0.5rem;\n    transition: all 0.5s ease;\n    color: white;\n    font-weight: bold;\n    letter-spacing: 1px;\n    box-shadow: 10px 10px 34px -15px var(--octopus-shadow);\n    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;\n    border: solid 2px var(--octopus-gray-text);\n\n    &:hover {\n      box-shadow: 2px 8px 4px -6px var(--octopus-shadow);\n      background: transparent;\n      color: var(--octopus-primary);\n    }\n  }\n}\n</style>\n"],"mappings":"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"}