@saooti/octopus-sdk 42.3.0 → 42.3.1

package/dist/ProductorSearch-C4Nv2HzS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductorSearch-C4Nv2HzS.mjs","names":["_openBlock","_createElementBlock","_createVNode","_Fragment","_normalizeClass","_toDisplayString","_createCommentVNode","_sfc_main"],"sources":["../src/components/display/filter/ProductorSearch.vue","../src/components/display/filter/ProductorSearch.vue"],"sourcesContent":["<template>\n  <div id=\"productor-search\" class=\"d-flex-column align-items-center my-3\">\n    <div\n      v-if=\"!state.generalParameters.podcastmaker && !filterStore.filterOrgaId\"\n      class=\"w-50-responsive pe-3 position-relative\"\n    >\n      <OrganisationChooser\n        :defaultanswer=\"t('No organisation filter')\"\n        :orga-id-selected=\"organisationId\"\n        @selected=\"onOrganisationSelected\"\n      />\n      <template  v-if=\"!authStore.authOrgaId ||authStore.authOrgaId ===organisationId\">\n        <ClassicCheckbox\n          v-model:text-init=\"keepOrganisation\"\n          :class=\"!!organisationId ? '' : 'invisible'\"\n          class=\"m-3\"\n          :label=\"\n            t(\n              'check this box if you want to keep this filter for the rest of your visit',\n            )\n          \"\n          :display-label=\"false\"\n          id-checkbox=\"organisation-checkbox\"\n          @click-action=\"onKeepOrganisation\"\n        />\n        <div v-if=\"showBubble\" class=\"filter-speech-bubble\">\n          {{\n            t(\n              \"check this box if you want to keep this filter for the rest of your visit\",\n            )\n          }}\n        </div>\n      </template>\n    </div>\n    <ClassicSearch\n      :text-init=\"searchPattern\"\n      class=\"w-50-responsive\"\n      :autofocus=\"true\"\n      id-search=\"productor-search-input\"\n      :label=\"searchText\"\n      @update:text-init=\"updateSearchPattern\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useRouteUpdateParams } from \"../../composable/route/useRouteUpdateParams\";\nimport ClassicSearch from \"../../form/ClassicSearch.vue\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Organisation } from \"../../../stores/class/general/organisation\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { defineAsyncComponent, ref, computed, watch, onBeforeMount } from \"vue\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRoute, useRouter } from \"vue-router\";\nconst OrganisationChooser = defineAsyncComponent(\n  () => import(\"../organisation/OrganisationChooser.vue\"),\n);\nconst ClassicCheckbox = defineAsyncComponent(\n  () => import(\"../../form/ClassicCheckbox.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  organisationId: { default: undefined, type: String },\n  searchPattern: { default: \"\", type: String },\n  type: { default: \"podcast\", type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"update:organisationId\", \"update:searchPattern\"]);\n\n//Data \nconst keepOrganisation = ref(false);\nconst showBubble = ref(false);\n\n//Composables\nconst { t } = useI18n();\nconst { updateRouteParam } = useRouteUpdateParams();\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst router = useRouter();\nconst route = useRoute();\n\n\n//Computed\nconst searchText = computed(() => {\n  if (\"emission\" === props.type) return t(\"Look for emission name\");\n  if (\"participant\" === props.type)\n    return t(\"Look for participant name\");\n  if (\"playlist\" === props.type) return t(\"Look for playlist name\");\n  return t(\"Look for podcast name\");\n});\n\n\n//Watch\nwatch(()=>filterStore.filterOrgaId, async () => {\n  keepOrganisation.value = undefined !== filterStore.filterOrgaId;\n  if (filterStore.filterOrgaId) {\n    emit(\"update:organisationId\", filterStore.filterOrgaId);\n  }else{\n    updateRouteParam({ o: props.organisationId, productor:undefined});\n  }\n});\n \n\nonBeforeMount(()=>{\n  if (!props.organisationId) return;\n  if (filterStore.filterOrgaId === props.organisationId) {\n    keepOrganisation.value = true;\n  }\n})\n\n\n//Methods\nfunction updateSearchPattern(newSearch: string) {\n  emit(\"update:searchPattern\", newSearch);\n}\nfunction onOrganisationSelected(organisation: Organisation): void {\n  updateRouteParam({ o: organisation.id, productor: undefined });\n  keepOrganisation.value = false;\n  if (!organisation?.id) {\n    emit(\"update:organisationId\", undefined);\n  }\n  emit(\"update:organisationId\", organisation.id);\n  if (undefined===authStore.authOrgaId && \"PUBLIC\" !== organisation.privacy) {\n    onKeepOrganisation(organisation.id);\n  } else {\n    showBubble.value = true;\n    setTimeout(() => {\n      showBubble.value = false;\n    }, 6000);\n  }\n}\nasync function onKeepOrganisation(orgaId: string|undefined = undefined): Promise<void> {\n  const orgaToApply= orgaId ?? props.organisationId;\n  if (!orgaToApply) {\n    return;\n  }\n  router.push({\n    query: { ...route.query, ...{ productor: orgaToApply, o:undefined }},\n  });\n}\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app {\n  .filter-speech-bubble {\n    position: absolute;\n    background: var(--octopus-primary);\n    border-radius: var(--octopus-border-radius);\n    width: 10rem;\n    right: 4rem;\n    padding: 5px;\n    animation: fadein 1s;\n    color: white;\n  }\n\n  .filter-speech-bubble::after {\n    content: \"\";\n    position: absolute;\n    right: 0;\n    top: 50%;\n    width: 0;\n    height: 0;\n    border: 18px solid transparent;\n    border-left-color: var(--octopus-primary);\n    border-right: 0;\n    border-bottom: 0;\n    margin-top: -9px;\n    margin-right: -18px;\n    animation: fadein 1s;\n  }\n  @keyframes fadein {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n}\n</style>\n","<template>\n  <div id=\"productor-search\" class=\"d-flex-column align-items-center my-3\">\n    <div\n      v-if=\"!state.generalParameters.podcastmaker && !filterStore.filterOrgaId\"\n      class=\"w-50-responsive pe-3 position-relative\"\n    >\n      <OrganisationChooser\n        :defaultanswer=\"t('No organisation filter')\"\n        :orga-id-selected=\"organisationId\"\n        @selected=\"onOrganisationSelected\"\n      />\n      <template  v-if=\"!authStore.authOrgaId ||authStore.authOrgaId ===organisationId\">\n        <ClassicCheckbox\n          v-model:text-init=\"keepOrganisation\"\n          :class=\"!!organisationId ? '' : 'invisible'\"\n          class=\"m-3\"\n          :label=\"\n            t(\n              'check this box if you want to keep this filter for the rest of your visit',\n            )\n          \"\n          :display-label=\"false\"\n          id-checkbox=\"organisation-checkbox\"\n          @click-action=\"onKeepOrganisation\"\n        />\n        <div v-if=\"showBubble\" class=\"filter-speech-bubble\">\n          {{\n            t(\n              \"check this box if you want to keep this filter for the rest of your visit\",\n            )\n          }}\n        </div>\n      </template>\n    </div>\n    <ClassicSearch\n      :text-init=\"searchPattern\"\n      class=\"w-50-responsive\"\n      :autofocus=\"true\"\n      id-search=\"productor-search-input\"\n      :label=\"searchText\"\n      @update:text-init=\"updateSearchPattern\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useRouteUpdateParams } from \"../../composable/route/useRouteUpdateParams\";\nimport ClassicSearch from \"../../form/ClassicSearch.vue\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Organisation } from \"../../../stores/class/general/organisation\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { defineAsyncComponent, ref, computed, watch, onBeforeMount } from \"vue\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRoute, useRouter } from \"vue-router\";\nconst OrganisationChooser = defineAsyncComponent(\n  () => import(\"../organisation/OrganisationChooser.vue\"),\n);\nconst ClassicCheckbox = defineAsyncComponent(\n  () => import(\"../../form/ClassicCheckbox.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  organisationId: { default: undefined, type: String },\n  searchPattern: { default: \"\", type: String },\n  type: { default: \"podcast\", type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"update:organisationId\", \"update:searchPattern\"]);\n\n//Data \nconst keepOrganisation = ref(false);\nconst showBubble = ref(false);\n\n//Composables\nconst { t } = useI18n();\nconst { updateRouteParam } = useRouteUpdateParams();\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst router = useRouter();\nconst route = useRoute();\n\n\n//Computed\nconst searchText = computed(() => {\n  if (\"emission\" === props.type) return t(\"Look for emission name\");\n  if (\"participant\" === props.type)\n    return t(\"Look for participant name\");\n  if (\"playlist\" === props.type) return t(\"Look for playlist name\");\n  return t(\"Look for podcast name\");\n});\n\n\n//Watch\nwatch(()=>filterStore.filterOrgaId, async () => {\n  keepOrganisation.value = undefined !== filterStore.filterOrgaId;\n  if (filterStore.filterOrgaId) {\n    emit(\"update:organisationId\", filterStore.filterOrgaId);\n  }else{\n    updateRouteParam({ o: props.organisationId, productor:undefined});\n  }\n});\n \n\nonBeforeMount(()=>{\n  if (!props.organisationId) return;\n  if (filterStore.filterOrgaId === props.organisationId) {\n    keepOrganisation.value = true;\n  }\n})\n\n\n//Methods\nfunction updateSearchPattern(newSearch: string) {\n  emit(\"update:searchPattern\", newSearch);\n}\nfunction onOrganisationSelected(organisation: Organisation): void {\n  updateRouteParam({ o: organisation.id, productor: undefined });\n  keepOrganisation.value = false;\n  if (!organisation?.id) {\n    emit(\"update:organisationId\", undefined);\n  }\n  emit(\"update:organisationId\", organisation.id);\n  if (undefined===authStore.authOrgaId && \"PUBLIC\" !== organisation.privacy) {\n    onKeepOrganisation(organisation.id);\n  } else {\n    showBubble.value = true;\n    setTimeout(() => {\n      showBubble.value = false;\n    }, 6000);\n  }\n}\nasync function onKeepOrganisation(orgaId: string|undefined = undefined): Promise<void> {\n  const orgaToApply= orgaId ?? props.organisationId;\n  if (!orgaToApply) {\n    return;\n  }\n  router.push({\n    query: { ...route.query, ...{ productor: orgaToApply, o:undefined }},\n  });\n}\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app {\n  .filter-speech-bubble {\n    position: absolute;\n    background: var(--octopus-primary);\n    border-radius: var(--octopus-border-radius);\n    width: 10rem;\n    right: 4rem;\n    padding: 5px;\n    animation: fadein 1s;\n    color: white;\n  }\n\n  .filter-speech-bubble::after {\n    content: \"\";\n    position: absolute;\n    right: 0;\n    top: 50%;\n    width: 0;\n    height: 0;\n    border: 18px solid transparent;\n    border-left-color: var(--octopus-primary);\n    border-right: 0;\n    border-bottom: 0;\n    margin-top: -9px;\n    margin-right: -18px;\n    animation: fadein 1s;\n  }\n  @keyframes fadein {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/ProductorSearch-DtVe_rU9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductorSearch-DtVe_rU9.mjs","names":["_openBlock","_createElementBlock","_createVNode","_Fragment","_normalizeClass","_toDisplayString","_createCommentVNode","_sfc_main"],"sources":["../src/components/display/filter/ProductorSearch.vue","../src/components/display/filter/ProductorSearch.vue"],"sourcesContent":["<template>\n  <div id=\"productor-search\" class=\"d-flex-column align-items-center my-3\">\n    <div\n      v-if=\"!state.generalParameters.podcastmaker && !filterStore.filterOrgaId\"\n      class=\"w-50-responsive pe-3 position-relative\"\n    >\n      <OrganisationChooser\n        :defaultanswer=\"t('No organisation filter')\"\n        :orga-id-selected=\"organisationId\"\n        @selected=\"onOrganisationSelected\"\n      />\n      <template  v-if=\"!authStore.authOrgaId ||authStore.authOrgaId ===organisationId\">\n        <ClassicCheckbox\n          v-model:text-init=\"keepOrganisation\"\n          :class=\"!!organisationId ? '' : 'invisible'\"\n          class=\"m-3\"\n          :label=\"\n            t(\n              'check this box if you want to keep this filter for the rest of your visit',\n            )\n          \"\n          :display-label=\"false\"\n          id-checkbox=\"organisation-checkbox\"\n          @click-action=\"onKeepOrganisation\"\n        />\n        <div v-if=\"showBubble\" class=\"filter-speech-bubble\">\n          {{\n            t(\n              \"check this box if you want to keep this filter for the rest of your visit\",\n            )\n          }}\n        </div>\n      </template>\n    </div>\n    <ClassicSearch\n      :text-init=\"searchPattern\"\n      class=\"w-50-responsive\"\n      :autofocus=\"true\"\n      id-search=\"productor-search-input\"\n      :label=\"searchText\"\n      @update:text-init=\"updateSearchPattern\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useRouteUpdateParams } from \"../../composable/route/useRouteUpdateParams\";\nimport ClassicSearch from \"../../form/ClassicSearch.vue\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Organisation } from \"../../../stores/class/general/organisation\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { defineAsyncComponent, ref, computed, watch, onBeforeMount } from \"vue\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRoute, useRouter } from \"vue-router\";\nconst OrganisationChooser = defineAsyncComponent(\n  () => import(\"../organisation/OrganisationChooser.vue\"),\n);\nconst ClassicCheckbox = defineAsyncComponent(\n  () => import(\"../../form/ClassicCheckbox.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  organisationId: { default: undefined, type: String },\n  searchPattern: { default: \"\", type: String },\n  type: { default: \"podcast\", type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"update:organisationId\", \"update:searchPattern\"]);\n\n//Data \nconst keepOrganisation = ref(false);\nconst showBubble = ref(false);\n\n//Composables\nconst { t } = useI18n();\nconst { updateRouteParam } = useRouteUpdateParams();\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst router = useRouter();\nconst route = useRoute();\n\n\n//Computed\nconst searchText = computed(() => {\n  if (\"emission\" === props.type) return t(\"Look for emission name\");\n  if (\"participant\" === props.type)\n    return t(\"Look for participant name\");\n  if (\"playlist\" === props.type) return t(\"Look for playlist name\");\n  return t(\"Look for podcast name\");\n});\n\n\n//Watch\nwatch(()=>filterStore.filterOrgaId, async () => {\n  keepOrganisation.value = undefined !== filterStore.filterOrgaId;\n  if (filterStore.filterOrgaId) {\n    emit(\"update:organisationId\", filterStore.filterOrgaId);\n  }else{\n    updateRouteParam({ o: props.organisationId, productor:undefined});\n  }\n});\n \n\nonBeforeMount(()=>{\n  if (!props.organisationId) return;\n  if (filterStore.filterOrgaId === props.organisationId) {\n    keepOrganisation.value = true;\n  }\n})\n\n\n//Methods\nfunction updateSearchPattern(newSearch: string) {\n  emit(\"update:searchPattern\", newSearch);\n}\nfunction onOrganisationSelected(organisation: Organisation): void {\n  updateRouteParam({ o: organisation.id, productor: undefined });\n  keepOrganisation.value = false;\n  if (!organisation?.id) {\n    emit(\"update:organisationId\", undefined);\n  }\n  emit(\"update:organisationId\", organisation.id);\n  if (undefined===authStore.authOrgaId && \"PUBLIC\" !== organisation.privacy) {\n    onKeepOrganisation(organisation.id);\n  } else {\n    showBubble.value = true;\n    setTimeout(() => {\n      showBubble.value = false;\n    }, 6000);\n  }\n}\nasync function onKeepOrganisation(orgaId: string|undefined = undefined): Promise<void> {\n  const orgaToApply= orgaId ?? props.organisationId;\n  if (!orgaToApply) {\n    return;\n  }\n  router.push({\n    query: { ...route.query, ...{ productor: orgaToApply, o:undefined }},\n  });\n}\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app {\n  .filter-speech-bubble {\n    position: absolute;\n    background: var(--octopus-primary);\n    border-radius: var(--octopus-border-radius);\n    width: 10rem;\n    right: 4rem;\n    padding: 5px;\n    animation: fadein 1s;\n    color: white;\n  }\n\n  .filter-speech-bubble::after {\n    content: \"\";\n    position: absolute;\n    right: 0;\n    top: 50%;\n    width: 0;\n    height: 0;\n    border: 18px solid transparent;\n    border-left-color: var(--octopus-primary);\n    border-right: 0;\n    border-bottom: 0;\n    margin-top: -9px;\n    margin-right: -18px;\n    animation: fadein 1s;\n  }\n  @keyframes fadein {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n}\n</style>\n","<template>\n  <div id=\"productor-search\" class=\"d-flex-column align-items-center my-3\">\n    <div\n      v-if=\"!state.generalParameters.podcastmaker && !filterStore.filterOrgaId\"\n      class=\"w-50-responsive pe-3 position-relative\"\n    >\n      <OrganisationChooser\n        :defaultanswer=\"t('No organisation filter')\"\n        :orga-id-selected=\"organisationId\"\n        @selected=\"onOrganisationSelected\"\n      />\n      <template  v-if=\"!authStore.authOrgaId ||authStore.authOrgaId ===organisationId\">\n        <ClassicCheckbox\n          v-model:text-init=\"keepOrganisation\"\n          :class=\"!!organisationId ? '' : 'invisible'\"\n          class=\"m-3\"\n          :label=\"\n            t(\n              'check this box if you want to keep this filter for the rest of your visit',\n            )\n          \"\n          :display-label=\"false\"\n          id-checkbox=\"organisation-checkbox\"\n          @click-action=\"onKeepOrganisation\"\n        />\n        <div v-if=\"showBubble\" class=\"filter-speech-bubble\">\n          {{\n            t(\n              \"check this box if you want to keep this filter for the rest of your visit\",\n            )\n          }}\n        </div>\n      </template>\n    </div>\n    <ClassicSearch\n      :text-init=\"searchPattern\"\n      class=\"w-50-responsive\"\n      :autofocus=\"true\"\n      id-search=\"productor-search-input\"\n      :label=\"searchText\"\n      @update:text-init=\"updateSearchPattern\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useRouteUpdateParams } from \"../../composable/route/useRouteUpdateParams\";\nimport ClassicSearch from \"../../form/ClassicSearch.vue\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Organisation } from \"../../../stores/class/general/organisation\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { defineAsyncComponent, ref, computed, watch, onBeforeMount } from \"vue\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRoute, useRouter } from \"vue-router\";\nconst OrganisationChooser = defineAsyncComponent(\n  () => import(\"../organisation/OrganisationChooser.vue\"),\n);\nconst ClassicCheckbox = defineAsyncComponent(\n  () => import(\"../../form/ClassicCheckbox.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  organisationId: { default: undefined, type: String },\n  searchPattern: { default: \"\", type: String },\n  type: { default: \"podcast\", type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"update:organisationId\", \"update:searchPattern\"]);\n\n//Data \nconst keepOrganisation = ref(false);\nconst showBubble = ref(false);\n\n//Composables\nconst { t } = useI18n();\nconst { updateRouteParam } = useRouteUpdateParams();\nconst filterStore = useFilterStore();\nconst authStore = useAuthStore();\nconst router = useRouter();\nconst route = useRoute();\n\n\n//Computed\nconst searchText = computed(() => {\n  if (\"emission\" === props.type) return t(\"Look for emission name\");\n  if (\"participant\" === props.type)\n    return t(\"Look for participant name\");\n  if (\"playlist\" === props.type) return t(\"Look for playlist name\");\n  return t(\"Look for podcast name\");\n});\n\n\n//Watch\nwatch(()=>filterStore.filterOrgaId, async () => {\n  keepOrganisation.value = undefined !== filterStore.filterOrgaId;\n  if (filterStore.filterOrgaId) {\n    emit(\"update:organisationId\", filterStore.filterOrgaId);\n  }else{\n    updateRouteParam({ o: props.organisationId, productor:undefined});\n  }\n});\n \n\nonBeforeMount(()=>{\n  if (!props.organisationId) return;\n  if (filterStore.filterOrgaId === props.organisationId) {\n    keepOrganisation.value = true;\n  }\n})\n\n\n//Methods\nfunction updateSearchPattern(newSearch: string) {\n  emit(\"update:searchPattern\", newSearch);\n}\nfunction onOrganisationSelected(organisation: Organisation): void {\n  updateRouteParam({ o: organisation.id, productor: undefined });\n  keepOrganisation.value = false;\n  if (!organisation?.id) {\n    emit(\"update:organisationId\", undefined);\n  }\n  emit(\"update:organisationId\", organisation.id);\n  if (undefined===authStore.authOrgaId && \"PUBLIC\" !== organisation.privacy) {\n    onKeepOrganisation(organisation.id);\n  } else {\n    showBubble.value = true;\n    setTimeout(() => {\n      showBubble.value = false;\n    }, 6000);\n  }\n}\nasync function onKeepOrganisation(orgaId: string|undefined = undefined): Promise<void> {\n  const orgaToApply= orgaId ?? props.organisationId;\n  if (!orgaToApply) {\n    return;\n  }\n  router.push({\n    query: { ...route.query, ...{ productor: orgaToApply, o:undefined }},\n  });\n}\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app {\n  .filter-speech-bubble {\n    position: absolute;\n    background: var(--octopus-primary);\n    border-radius: var(--octopus-border-radius);\n    width: 10rem;\n    right: 4rem;\n    padding: 5px;\n    animation: fadein 1s;\n    color: white;\n  }\n\n  .filter-speech-bubble::after {\n    content: \"\";\n    position: absolute;\n    right: 0;\n    top: 50%;\n    width: 0;\n    height: 0;\n    border: 18px solid transparent;\n    border-left-color: var(--octopus-primary);\n    border-right: 0;\n    border-bottom: 0;\n    margin-top: -9px;\n    margin-right: -18px;\n    animation: fadein 1s;\n  }\n  @keyframes fadein {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/ProgressBar-BMeSiueh.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar-BMeSiueh.mjs","names":["_openBlock","_createElementBlock","_normalizeStyle","_createCommentVNode","_Fragment","_createElementVNode","_renderList","_createBlock","_Teleport","_createVNode","_sfc_main"],"sources":["../src/components/misc/ProgressBar.vue","../src/components/misc/ProgressBar.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"!inPlayer || display\"\n    id=\"test-menu-dropdown\"\n    class=\"octopus-progress\"\n  >\n    <div\n      v-if=\"secondaryProgress\"\n      class=\"octopus-progress-bar bg-warning\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Live progress bar')\"\n      :style=\"'width: ' + secondaryProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar bg-complementary\"\n        :style=\"{ width: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 bg-complementary\"\n        :style=\"{ width: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      class=\"octopus-progress-bar current-progress\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Listening progress bar')\"\n      :style=\"'width: ' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ left: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ right: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      v-if=\"alertBar\"\n      class=\"octopus-progress-bar octopus-progress-bar-duration bg-danger\"\n      :style=\"'left: ' + alertBar + '%'\"\n    />\n    <div\n      v-if=\"isProgressCursor\"\n      class=\"octopus-progress-bar-cursor\"\n      :style=\"'left:' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerChapteringPercent\">\n      <template v-for=\"chapter in playerStore.playerChapteringPercent\" :key=\"chapter\">\n        <div\n          :id=\"'chapter-' + chapter.startPercent\"\n          class=\"octopus-progress-bar octopus-chapter\"\n          :style=\"{\n            left: chapter.startPercent + '%',\n            right: 100 - chapter.endPercent + '%',\n          }\"\n        />\n        <!-- If top layer widely available no need to teleport -->\n        <Teleport to=\"#octopus-player-component\">\n          <ClassicPopover\n            :target=\"'chapter-' + chapter.startPercent\"\n            :is-fixed=\"true\"\n            relative-class=\"player-container\"\n            :only-mouse=\"true\"\n            popover-class=\"octopus-small-popover popover-z-index\"\n            :content=\"chapter.title\"\n            :is-top-layer=\"true\"\n          />\n        </Teleport>\n      </template>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\n\n//Props \ndefineProps({\n  alertBar: { default: undefined, type: Number },\n  mainProgress: { default: 0, type: Number },\n  secondaryProgress: { default: 0, type: Number },\n  isProgressCursor: { default: false, type: Boolean },\n  inPlayer: { default: false, type: Boolean },\n})\n\n\n//Data \nconst mediaCueInPercent = ref(0);\nconst mediaCueOutPercent = ref(100);\n\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst display = computed(() => \"STOPPED\" !== playerStore.playerStatus);\n\n\n//Watch\nwatch(()=>playerStore.playerMedia, () => {\n  if (playerStore.playerMedia) {\n    mediaCueInPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueIn ?? 0,\n    );\n    mediaCueOutPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueOut ?? null,\n    );\n  }\n}, {deep: true, immediate: true});\n\n\n//Methods\nfunction timeMediaToPercent(value: number | null): number {\n  if (null === value || !playerStore.playerMedia) {\n    return 100;\n  }\n  return (value * 100) / (playerStore.playerMedia?.duration ?? 1);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app{\n  .octopus-progress{\n    display: flex;\n    overflow: hidden;\n    background-color: var(--octopus-player-progress-background-color);\n    border-radius: var(--octopus-border-radius);\n    position: relative;\n    cursor: pointer;\n\n    .octopus-progress-bar{\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      overflow: hidden;\n      color: var(--octopus-color-on-primary);\n      text-align: center;\n      white-space: nowrap;\n      background-color: var(--octopus-player-progress-color-current);\n      transition: width 0.6s ease;\n    }\n\n    .octopus-chapter{\n      position: absolute;\n      background: transparent;\n      background-clip: content-box;\n      padding: 0 5px;\n      box-shadow: inset -2px 1px 0 0 black,\n                  inset 2px 1px 0 0 black;\n\n      &:hover{\n        background: var(--octopus-background-transparent);\n        box-shadow: -4px 1px 0 0 black;\n      }\n    }\n\n    &,.octopus-progress-bar{\n      height: 4px;\n      @media (width <= 960px) {\n        height: 8px;\n      }\n    }\n\n    &.large,&.large .octopus-progress-bar{\n      height: 15px;\n    }\n\n    &.medium,&.medium .octopus-progress-bar{\n      height: 6px;\n    }\n\n    .octopus-progress-bar-duration {\n      width: 10px;\n    }\n\n    .octopus-progress-bar-cursor{\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: black;\n      align-self: center;\n      position: absolute;\n    }\n\n    .end-0{\n      right: 0;\n    }\n  }\n\n  .player-container {\n    .octopus-small-popover {\n      font-size: 0.7rem;\n      background: var(--octopus-player-color);\n      color: white;\n      border: 0;\n\n      .p-2 {\n        padding: 0.2rem !important;\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <div\n    v-if=\"!inPlayer || display\"\n    id=\"test-menu-dropdown\"\n    class=\"octopus-progress\"\n  >\n    <div\n      v-if=\"secondaryProgress\"\n      class=\"octopus-progress-bar bg-warning\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Live progress bar')\"\n      :style=\"'width: ' + secondaryProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar bg-complementary\"\n        :style=\"{ width: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 bg-complementary\"\n        :style=\"{ width: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      class=\"octopus-progress-bar current-progress\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Listening progress bar')\"\n      :style=\"'width: ' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ left: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ right: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      v-if=\"alertBar\"\n      class=\"octopus-progress-bar octopus-progress-bar-duration bg-danger\"\n      :style=\"'left: ' + alertBar + '%'\"\n    />\n    <div\n      v-if=\"isProgressCursor\"\n      class=\"octopus-progress-bar-cursor\"\n      :style=\"'left:' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerChapteringPercent\">\n      <template v-for=\"chapter in playerStore.playerChapteringPercent\" :key=\"chapter\">\n        <div\n          :id=\"'chapter-' + chapter.startPercent\"\n          class=\"octopus-progress-bar octopus-chapter\"\n          :style=\"{\n            left: chapter.startPercent + '%',\n            right: 100 - chapter.endPercent + '%',\n          }\"\n        />\n        <!-- If top layer widely available no need to teleport -->\n        <Teleport to=\"#octopus-player-component\">\n          <ClassicPopover\n            :target=\"'chapter-' + chapter.startPercent\"\n            :is-fixed=\"true\"\n            relative-class=\"player-container\"\n            :only-mouse=\"true\"\n            popover-class=\"octopus-small-popover popover-z-index\"\n            :content=\"chapter.title\"\n            :is-top-layer=\"true\"\n          />\n        </Teleport>\n      </template>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\n\n//Props \ndefineProps({\n  alertBar: { default: undefined, type: Number },\n  mainProgress: { default: 0, type: Number },\n  secondaryProgress: { default: 0, type: Number },\n  isProgressCursor: { default: false, type: Boolean },\n  inPlayer: { default: false, type: Boolean },\n})\n\n\n//Data \nconst mediaCueInPercent = ref(0);\nconst mediaCueOutPercent = ref(100);\n\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst display = computed(() => \"STOPPED\" !== playerStore.playerStatus);\n\n\n//Watch\nwatch(()=>playerStore.playerMedia, () => {\n  if (playerStore.playerMedia) {\n    mediaCueInPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueIn ?? 0,\n    );\n    mediaCueOutPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueOut ?? null,\n    );\n  }\n}, {deep: true, immediate: true});\n\n\n//Methods\nfunction timeMediaToPercent(value: number | null): number {\n  if (null === value || !playerStore.playerMedia) {\n    return 100;\n  }\n  return (value * 100) / (playerStore.playerMedia?.duration ?? 1);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app{\n  .octopus-progress{\n    display: flex;\n    overflow: hidden;\n    background-color: var(--octopus-player-progress-background-color);\n    border-radius: var(--octopus-border-radius);\n    position: relative;\n    cursor: pointer;\n\n    .octopus-progress-bar{\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      overflow: hidden;\n      color: var(--octopus-color-on-primary);\n      text-align: center;\n      white-space: nowrap;\n      background-color: var(--octopus-player-progress-color-current);\n      transition: width 0.6s ease;\n    }\n\n    .octopus-chapter{\n      position: absolute;\n      background: transparent;\n      background-clip: content-box;\n      padding: 0 5px;\n      box-shadow: inset -2px 1px 0 0 black,\n                  inset 2px 1px 0 0 black;\n\n      &:hover{\n        background: var(--octopus-background-transparent);\n        box-shadow: -4px 1px 0 0 black;\n      }\n    }\n\n    &,.octopus-progress-bar{\n      height: 4px;\n      @media (width <= 960px) {\n        height: 8px;\n      }\n    }\n\n    &.large,&.large .octopus-progress-bar{\n      height: 15px;\n    }\n\n    &.medium,&.medium .octopus-progress-bar{\n      height: 6px;\n    }\n\n    .octopus-progress-bar-duration {\n      width: 10px;\n    }\n\n    .octopus-progress-bar-cursor{\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: black;\n      align-self: center;\n      position: absolute;\n    }\n\n    .end-0{\n      right: 0;\n    }\n  }\n\n  .player-container {\n    .octopus-small-popover {\n      font-size: 0.7rem;\n      background: var(--octopus-player-color);\n      color: white;\n      border: 0;\n\n      .p-2 {\n        padding: 0.2rem !important;\n      }\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/ProgressBar-C15ih0uL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar-C15ih0uL.mjs","names":["_openBlock","_createElementBlock","_normalizeStyle","_createCommentVNode","_Fragment","_createElementVNode","_renderList","_createBlock","_Teleport","_createVNode","_sfc_main"],"sources":["../src/components/misc/ProgressBar.vue","../src/components/misc/ProgressBar.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"!inPlayer || display\"\n    id=\"test-menu-dropdown\"\n    class=\"octopus-progress\"\n  >\n    <div\n      v-if=\"secondaryProgress\"\n      class=\"octopus-progress-bar bg-warning\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Live progress bar')\"\n      :style=\"'width: ' + secondaryProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar bg-complementary\"\n        :style=\"{ width: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 bg-complementary\"\n        :style=\"{ width: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      class=\"octopus-progress-bar current-progress\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Listening progress bar')\"\n      :style=\"'width: ' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ left: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ right: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      v-if=\"alertBar\"\n      class=\"octopus-progress-bar octopus-progress-bar-duration bg-danger\"\n      :style=\"'left: ' + alertBar + '%'\"\n    />\n    <div\n      v-if=\"isProgressCursor\"\n      class=\"octopus-progress-bar-cursor\"\n      :style=\"'left:' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerChapteringPercent\">\n      <template v-for=\"chapter in playerStore.playerChapteringPercent\" :key=\"chapter\">\n        <div\n          :id=\"'chapter-' + chapter.startPercent\"\n          class=\"octopus-progress-bar octopus-chapter\"\n          :style=\"{\n            left: chapter.startPercent + '%',\n            right: 100 - chapter.endPercent + '%',\n          }\"\n        />\n        <!-- If top layer widely available no need to teleport -->\n        <Teleport to=\"#octopus-player-component\">\n          <ClassicPopover\n            :target=\"'chapter-' + chapter.startPercent\"\n            :is-fixed=\"true\"\n            relative-class=\"player-container\"\n            :only-mouse=\"true\"\n            popover-class=\"octopus-small-popover popover-z-index\"\n            :content=\"chapter.title\"\n            :is-top-layer=\"true\"\n          />\n        </Teleport>\n      </template>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\n\n//Props \ndefineProps({\n  alertBar: { default: undefined, type: Number },\n  mainProgress: { default: 0, type: Number },\n  secondaryProgress: { default: 0, type: Number },\n  isProgressCursor: { default: false, type: Boolean },\n  inPlayer: { default: false, type: Boolean },\n})\n\n\n//Data \nconst mediaCueInPercent = ref(0);\nconst mediaCueOutPercent = ref(100);\n\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst display = computed(() => \"STOPPED\" !== playerStore.playerStatus);\n\n\n//Watch\nwatch(()=>playerStore.playerMedia, () => {\n  if (playerStore.playerMedia) {\n    mediaCueInPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueIn ?? 0,\n    );\n    mediaCueOutPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueOut ?? null,\n    );\n  }\n}, {deep: true, immediate: true});\n\n\n//Methods\nfunction timeMediaToPercent(value: number | null): number {\n  if (null === value || !playerStore.playerMedia) {\n    return 100;\n  }\n  return (value * 100) / (playerStore.playerMedia?.duration ?? 1);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app{\n  .octopus-progress{\n    display: flex;\n    overflow: hidden;\n    background-color: var(--octopus-player-progress-background-color);\n    border-radius: var(--octopus-border-radius);\n    position: relative;\n    cursor: pointer;\n\n    .octopus-progress-bar{\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      overflow: hidden;\n      color: var(--octopus-color-on-primary);\n      text-align: center;\n      white-space: nowrap;\n      background-color: var(--octopus-player-progress-color-current);\n      transition: width 0.6s ease;\n    }\n\n    .octopus-chapter{\n      position: absolute;\n      background: transparent;\n      background-clip: content-box;\n      padding: 0 5px;\n      box-shadow: inset -2px 1px 0 0 black,\n                  inset 2px 1px 0 0 black;\n\n      &:hover{\n        background: var(--octopus-background-transparent);\n        box-shadow: -4px 1px 0 0 black;\n      }\n    }\n\n    &,.octopus-progress-bar{\n      height: 4px;\n      @media (width <= 960px) {\n        height: 8px;\n      }\n    }\n\n    &.large,&.large .octopus-progress-bar{\n      height: 15px;\n    }\n\n    &.medium,&.medium .octopus-progress-bar{\n      height: 6px;\n    }\n\n    .octopus-progress-bar-duration {\n      width: 10px;\n    }\n\n    .octopus-progress-bar-cursor{\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: black;\n      align-self: center;\n      position: absolute;\n    }\n\n    .end-0{\n      right: 0;\n    }\n  }\n\n  .player-container {\n    .octopus-small-popover {\n      font-size: 0.7rem;\n      background: var(--octopus-player-color);\n      color: white;\n      border: 0;\n\n      .p-2 {\n        padding: 0.2rem !important;\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <div\n    v-if=\"!inPlayer || display\"\n    id=\"test-menu-dropdown\"\n    class=\"octopus-progress\"\n  >\n    <div\n      v-if=\"secondaryProgress\"\n      class=\"octopus-progress-bar bg-warning\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Live progress bar')\"\n      :style=\"'width: ' + secondaryProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar bg-complementary\"\n        :style=\"{ width: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 bg-complementary\"\n        :style=\"{ width: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      class=\"octopus-progress-bar current-progress\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Listening progress bar')\"\n      :style=\"'width: ' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ left: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ right: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      v-if=\"alertBar\"\n      class=\"octopus-progress-bar octopus-progress-bar-duration bg-danger\"\n      :style=\"'left: ' + alertBar + '%'\"\n    />\n    <div\n      v-if=\"isProgressCursor\"\n      class=\"octopus-progress-bar-cursor\"\n      :style=\"'left:' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerChapteringPercent\">\n      <template v-for=\"chapter in playerStore.playerChapteringPercent\" :key=\"chapter\">\n        <div\n          :id=\"'chapter-' + chapter.startPercent\"\n          class=\"octopus-progress-bar octopus-chapter\"\n          :style=\"{\n            left: chapter.startPercent + '%',\n            right: 100 - chapter.endPercent + '%',\n          }\"\n        />\n        <!-- If top layer widely available no need to teleport -->\n        <Teleport to=\"#octopus-player-component\">\n          <ClassicPopover\n            :target=\"'chapter-' + chapter.startPercent\"\n            :is-fixed=\"true\"\n            relative-class=\"player-container\"\n            :only-mouse=\"true\"\n            popover-class=\"octopus-small-popover popover-z-index\"\n            :content=\"chapter.title\"\n            :is-top-layer=\"true\"\n          />\n        </Teleport>\n      </template>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\n\n//Props \ndefineProps({\n  alertBar: { default: undefined, type: Number },\n  mainProgress: { default: 0, type: Number },\n  secondaryProgress: { default: 0, type: Number },\n  isProgressCursor: { default: false, type: Boolean },\n  inPlayer: { default: false, type: Boolean },\n})\n\n\n//Data \nconst mediaCueInPercent = ref(0);\nconst mediaCueOutPercent = ref(100);\n\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst display = computed(() => \"STOPPED\" !== playerStore.playerStatus);\n\n\n//Watch\nwatch(()=>playerStore.playerMedia, () => {\n  if (playerStore.playerMedia) {\n    mediaCueInPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueIn ?? 0,\n    );\n    mediaCueOutPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueOut ?? null,\n    );\n  }\n}, {deep: true, immediate: true});\n\n\n//Methods\nfunction timeMediaToPercent(value: number | null): number {\n  if (null === value || !playerStore.playerMedia) {\n    return 100;\n  }\n  return (value * 100) / (playerStore.playerMedia?.duration ?? 1);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app{\n  .octopus-progress{\n    display: flex;\n    overflow: hidden;\n    background-color: var(--octopus-player-progress-background-color);\n    border-radius: var(--octopus-border-radius);\n    position: relative;\n    cursor: pointer;\n\n    .octopus-progress-bar{\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      overflow: hidden;\n      color: var(--octopus-color-on-primary);\n      text-align: center;\n      white-space: nowrap;\n      background-color: var(--octopus-player-progress-color-current);\n      transition: width 0.6s ease;\n    }\n\n    .octopus-chapter{\n      position: absolute;\n      background: transparent;\n      background-clip: content-box;\n      padding: 0 5px;\n      box-shadow: inset -2px 1px 0 0 black,\n                  inset 2px 1px 0 0 black;\n\n      &:hover{\n        background: var(--octopus-background-transparent);\n        box-shadow: -4px 1px 0 0 black;\n      }\n    }\n\n    &,.octopus-progress-bar{\n      height: 4px;\n      @media (width <= 960px) {\n        height: 8px;\n      }\n    }\n\n    &.large,&.large .octopus-progress-bar{\n      height: 15px;\n    }\n\n    &.medium,&.medium .octopus-progress-bar{\n      height: 6px;\n    }\n\n    .octopus-progress-bar-duration {\n      width: 10px;\n    }\n\n    .octopus-progress-bar-cursor{\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: black;\n      align-self: center;\n      position: absolute;\n    }\n\n    .end-0{\n      right: 0;\n    }\n  }\n\n  .player-container {\n    .octopus-small-popover {\n      font-size: 0.7rem;\n      background: var(--octopus-player-color);\n      color: white;\n      border: 0;\n\n      .p-2 {\n        padding: 0.2rem !important;\n      }\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/{ProgressBar-CTOa-MDz.mjs → ProgressBar-CXB5q3-H.mjs}

@@ -1,5 +1,5 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.mjs";
-import { n as t } from "./PlayerStore-CKprkxa0.mjs";
+import { n as t } from "./PlayerStore-DggKki80.mjs";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.mjs";
 import { Fragment as r, Teleport as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineAsyncComponent as d, defineComponent as f, normalizeStyle as p, openBlock as m, ref as h, renderList as g, unref as _, watch as v } from "vue";
 import { useI18n as y } from "vue-i18n";
@@ -33,7 +33,7 @@ var b = {
 		}
 	},
 	setup(e) {
-		let n = d(() => import("./ClassicPopover-DWR50Nxi.mjs").then((e) => e.n)), f = h(0), w = h(100), { t: T } = y(), E = t(), D = a(() => E.playerStatus !== "STOPPED");
+		let n = d(() => import("./ClassicPopover-BUb-1WMB.mjs").then((e) => e.n)), f = h(0), w = h(100), { t: T } = y(), E = t(), D = a(() => E.playerStatus !== "STOPPED");
 		v(() => E.playerMedia, () => {
 			E.playerMedia && (f.value = O(E.playerMedia.cueIn ?? 0), w.value = O(E.playerMedia.cueOut ?? null));
 		}, {

package/dist/ProgressBar-DAUOWol1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar-DAUOWol1.mjs","names":["_openBlock","_createElementBlock","_normalizeStyle","_createCommentVNode","_Fragment","_createElementVNode","_renderList","_createBlock","_Teleport","_createVNode","_sfc_main"],"sources":["../src/components/misc/ProgressBar.vue","../src/components/misc/ProgressBar.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"!inPlayer || display\"\n    id=\"test-menu-dropdown\"\n    class=\"octopus-progress\"\n  >\n    <div\n      v-if=\"secondaryProgress\"\n      class=\"octopus-progress-bar bg-warning\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Live progress bar')\"\n      :style=\"'width: ' + secondaryProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar bg-complementary\"\n        :style=\"{ width: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 bg-complementary\"\n        :style=\"{ width: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      class=\"octopus-progress-bar current-progress\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Listening progress bar')\"\n      :style=\"'width: ' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ left: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ right: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      v-if=\"alertBar\"\n      class=\"octopus-progress-bar octopus-progress-bar-duration bg-danger\"\n      :style=\"'left: ' + alertBar + '%'\"\n    />\n    <div\n      v-if=\"isProgressCursor\"\n      class=\"octopus-progress-bar-cursor\"\n      :style=\"'left:' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerChapteringPercent\">\n      <template v-for=\"chapter in playerStore.playerChapteringPercent\" :key=\"chapter\">\n        <div\n          :id=\"'chapter-' + chapter.startPercent\"\n          class=\"octopus-progress-bar octopus-chapter\"\n          :style=\"{\n            left: chapter.startPercent + '%',\n            right: 100 - chapter.endPercent + '%',\n          }\"\n        />\n        <!-- If top layer widely available no need to teleport -->\n        <Teleport to=\"#octopus-player-component\">\n          <ClassicPopover\n            :target=\"'chapter-' + chapter.startPercent\"\n            :is-fixed=\"true\"\n            relative-class=\"player-container\"\n            :only-mouse=\"true\"\n            popover-class=\"octopus-small-popover popover-z-index\"\n            :content=\"chapter.title\"\n            :is-top-layer=\"true\"\n          />\n        </Teleport>\n      </template>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\n\n//Props \ndefineProps({\n  alertBar: { default: undefined, type: Number },\n  mainProgress: { default: 0, type: Number },\n  secondaryProgress: { default: 0, type: Number },\n  isProgressCursor: { default: false, type: Boolean },\n  inPlayer: { default: false, type: Boolean },\n})\n\n\n//Data \nconst mediaCueInPercent = ref(0);\nconst mediaCueOutPercent = ref(100);\n\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst display = computed(() => \"STOPPED\" !== playerStore.playerStatus);\n\n\n//Watch\nwatch(()=>playerStore.playerMedia, () => {\n  if (playerStore.playerMedia) {\n    mediaCueInPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueIn ?? 0,\n    );\n    mediaCueOutPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueOut ?? null,\n    );\n  }\n}, {deep: true, immediate: true});\n\n\n//Methods\nfunction timeMediaToPercent(value: number | null): number {\n  if (null === value || !playerStore.playerMedia) {\n    return 100;\n  }\n  return (value * 100) / (playerStore.playerMedia?.duration ?? 1);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app{\n  .octopus-progress{\n    display: flex;\n    overflow: hidden;\n    background-color: var(--octopus-player-progress-background-color);\n    border-radius: var(--octopus-border-radius);\n    position: relative;\n    cursor: pointer;\n\n    .octopus-progress-bar{\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      overflow: hidden;\n      color: var(--octopus-color-on-primary);\n      text-align: center;\n      white-space: nowrap;\n      background-color: var(--octopus-player-progress-color-current);\n      transition: width 0.6s ease;\n    }\n\n    .octopus-chapter{\n      position: absolute;\n      background: transparent;\n      background-clip: content-box;\n      padding: 0 5px;\n      box-shadow: inset -2px 1px 0 0 black,\n                  inset 2px 1px 0 0 black;\n\n      &:hover{\n        background: var(--octopus-background-transparent);\n        box-shadow: -4px 1px 0 0 black;\n      }\n    }\n\n    &,.octopus-progress-bar{\n      height: 4px;\n      @media (width <= 960px) {\n        height: 8px;\n      }\n    }\n\n    &.large,&.large .octopus-progress-bar{\n      height: 15px;\n    }\n\n    &.medium,&.medium .octopus-progress-bar{\n      height: 6px;\n    }\n\n    .octopus-progress-bar-duration {\n      width: 10px;\n    }\n\n    .octopus-progress-bar-cursor{\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: black;\n      align-self: center;\n      position: absolute;\n    }\n\n    .end-0{\n      right: 0;\n    }\n  }\n\n  .player-container {\n    .octopus-small-popover {\n      font-size: 0.7rem;\n      background: var(--octopus-player-color);\n      color: white;\n      border: 0;\n\n      .p-2 {\n        padding: 0.2rem !important;\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <div\n    v-if=\"!inPlayer || display\"\n    id=\"test-menu-dropdown\"\n    class=\"octopus-progress\"\n  >\n    <div\n      v-if=\"secondaryProgress\"\n      class=\"octopus-progress-bar bg-warning\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Live progress bar')\"\n      :style=\"'width: ' + secondaryProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar bg-complementary\"\n        :style=\"{ width: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 bg-complementary\"\n        :style=\"{ width: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      class=\"octopus-progress-bar current-progress\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Listening progress bar')\"\n      :style=\"'width: ' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ left: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ right: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      v-if=\"alertBar\"\n      class=\"octopus-progress-bar octopus-progress-bar-duration bg-danger\"\n      :style=\"'left: ' + alertBar + '%'\"\n    />\n    <div\n      v-if=\"isProgressCursor\"\n      class=\"octopus-progress-bar-cursor\"\n      :style=\"'left:' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerChapteringPercent\">\n      <template v-for=\"chapter in playerStore.playerChapteringPercent\" :key=\"chapter\">\n        <div\n          :id=\"'chapter-' + chapter.startPercent\"\n          class=\"octopus-progress-bar octopus-chapter\"\n          :style=\"{\n            left: chapter.startPercent + '%',\n            right: 100 - chapter.endPercent + '%',\n          }\"\n        />\n        <!-- If top layer widely available no need to teleport -->\n        <Teleport to=\"#octopus-player-component\">\n          <ClassicPopover\n            :target=\"'chapter-' + chapter.startPercent\"\n            :is-fixed=\"true\"\n            relative-class=\"player-container\"\n            :only-mouse=\"true\"\n            popover-class=\"octopus-small-popover popover-z-index\"\n            :content=\"chapter.title\"\n            :is-top-layer=\"true\"\n          />\n        </Teleport>\n      </template>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\n\n//Props \ndefineProps({\n  alertBar: { default: undefined, type: Number },\n  mainProgress: { default: 0, type: Number },\n  secondaryProgress: { default: 0, type: Number },\n  isProgressCursor: { default: false, type: Boolean },\n  inPlayer: { default: false, type: Boolean },\n})\n\n\n//Data \nconst mediaCueInPercent = ref(0);\nconst mediaCueOutPercent = ref(100);\n\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst display = computed(() => \"STOPPED\" !== playerStore.playerStatus);\n\n\n//Watch\nwatch(()=>playerStore.playerMedia, () => {\n  if (playerStore.playerMedia) {\n    mediaCueInPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueIn ?? 0,\n    );\n    mediaCueOutPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueOut ?? null,\n    );\n  }\n}, {deep: true, immediate: true});\n\n\n//Methods\nfunction timeMediaToPercent(value: number | null): number {\n  if (null === value || !playerStore.playerMedia) {\n    return 100;\n  }\n  return (value * 100) / (playerStore.playerMedia?.duration ?? 1);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app{\n  .octopus-progress{\n    display: flex;\n    overflow: hidden;\n    background-color: var(--octopus-player-progress-background-color);\n    border-radius: var(--octopus-border-radius);\n    position: relative;\n    cursor: pointer;\n\n    .octopus-progress-bar{\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      overflow: hidden;\n      color: var(--octopus-color-on-primary);\n      text-align: center;\n      white-space: nowrap;\n      background-color: var(--octopus-player-progress-color-current);\n      transition: width 0.6s ease;\n    }\n\n    .octopus-chapter{\n      position: absolute;\n      background: transparent;\n      background-clip: content-box;\n      padding: 0 5px;\n      box-shadow: inset -2px 1px 0 0 black,\n                  inset 2px 1px 0 0 black;\n\n      &:hover{\n        background: var(--octopus-background-transparent);\n        box-shadow: -4px 1px 0 0 black;\n      }\n    }\n\n    &,.octopus-progress-bar{\n      height: 4px;\n      @media (width <= 960px) {\n        height: 8px;\n      }\n    }\n\n    &.large,&.large .octopus-progress-bar{\n      height: 15px;\n    }\n\n    &.medium,&.medium .octopus-progress-bar{\n      height: 6px;\n    }\n\n    .octopus-progress-bar-duration {\n      width: 10px;\n    }\n\n    .octopus-progress-bar-cursor{\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: black;\n      align-self: center;\n      position: absolute;\n    }\n\n    .end-0{\n      right: 0;\n    }\n  }\n\n  .player-container {\n    .octopus-small-popover {\n      font-size: 0.7rem;\n      background: var(--octopus-player-color);\n      color: white;\n      border: 0;\n\n      .p-2 {\n        padding: 0.2rem !important;\n      }\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/QrCode-BYLxjhwi.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCode-BYLxjhwi.mjs","names":["_hoisted_1","_hoisted_2","_sfc_render","_openBlock","_createElementBlock","_createElementVNode","_sfc_main","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_createVNode","_sfc_main"],"sources":["../src/components/display/sharing/FormatSwitch.vue","../src/components/display/sharing/FormatSwitch.vue","../src/components/display/sharing/QrCode.vue","../src/components/display/sharing/QrCode.vue"],"sourcesContent":["<template>\n    <div class=\"format-switch\">\n      <input \n        id=\"format-switch-checkbox\"\n        :checked=\"isSvg\"\n        class=\"format-switch-checkbox\" \n        type=\"checkbox\" \n        @input=\"changeIsSvg\"/>\n      <label class=\"format-switch-label\" for=\"format-switch-checkbox\">\n        <span class=\"format-switch-label-span\">SVG</span>\n      </label>\n    </div>\n  </template>\n  \n<script setup lang=\"ts\">\n\n//Props \nconst props = defineProps({\n  isSvg: { default: true, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits(['update:isSvg']);\n\n//Methods\nfunction changeIsSvg(){\n  emit('update:isSvg', !props.isSvg)\n}\n</script>\n  <style lang=\"scss\">\n  .octopus-app {\n\n    --format-switch-size:140px;\n    --format-switch-half: calc(var(--format-switch-size) / 2 );\n  \n    .format-switch {\n      background: var(--octopus-secondary);\n      border-radius: 30px;\n      overflow: hidden;\n      width: var(--format-switch-size);\n      text-align: center;\n      color: black;\n      border: 2px solid var(--octopus-secondary);\n      padding-right: var(--format-switch-half);\n      position: relative;\n  \n      &::before {\n        content: \"PNG\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        width: var(--format-switch-half);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        pointer-events: none;\n      }\n  \n    \n      &-checkbox {\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        z-index: 2;\n        margin: 0;\n  \n        & + .format-switch-label {\n          position: relative;\n          padding: 0.5rem 0;\n          display: block;\n          user-select: none;\n          pointer-events: none;\n  \n          &::before {\n            content: \"\";\n            background: white;\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            border-radius: 30px;\n            transform: translateX(var(--format-switch-half));\n            transition: transform 300ms;\n          }\n  \n          .format-switch-label-span {\n            position: relative;\n          }\n        }\n  \n        &:checked + .format-switch-label::before {\n          transform: translateX(0px);\n          transition: transform 300ms linear;\n        }\n      }\n  \n      &:has(input:focus-visible){\n        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;\n      }\n    }\n  }\n  </style>","<template>\n    <div class=\"format-switch\">\n      <input \n        id=\"format-switch-checkbox\"\n        :checked=\"isSvg\"\n        class=\"format-switch-checkbox\" \n        type=\"checkbox\" \n        @input=\"changeIsSvg\"/>\n      <label class=\"format-switch-label\" for=\"format-switch-checkbox\">\n        <span class=\"format-switch-label-span\">SVG</span>\n      </label>\n    </div>\n  </template>\n  \n<script setup lang=\"ts\">\n\n//Props \nconst props = defineProps({\n  isSvg: { default: true, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits(['update:isSvg']);\n\n//Methods\nfunction changeIsSvg(){\n  emit('update:isSvg', !props.isSvg)\n}\n</script>\n  <style lang=\"scss\">\n  .octopus-app {\n\n    --format-switch-size:140px;\n    --format-switch-half: calc(var(--format-switch-size) / 2 );\n  \n    .format-switch {\n      background: var(--octopus-secondary);\n      border-radius: 30px;\n      overflow: hidden;\n      width: var(--format-switch-size);\n      text-align: center;\n      color: black;\n      border: 2px solid var(--octopus-secondary);\n      padding-right: var(--format-switch-half);\n      position: relative;\n  \n      &::before {\n        content: \"PNG\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        width: var(--format-switch-half);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        pointer-events: none;\n      }\n  \n    \n      &-checkbox {\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        z-index: 2;\n        margin: 0;\n  \n        & + .format-switch-label {\n          position: relative;\n          padding: 0.5rem 0;\n          display: block;\n          user-select: none;\n          pointer-events: none;\n  \n          &::before {\n            content: \"\";\n            background: white;\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            border-radius: 30px;\n            transform: translateX(var(--format-switch-half));\n            transition: transform 300ms;\n          }\n  \n          .format-switch-label-span {\n            position: relative;\n          }\n        }\n  \n        &:checked + .format-switch-label::before {\n          transform: translateX(0px);\n          transition: transform 300ms linear;\n        }\n      }\n  \n      &:has(input:focus-visible){\n        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;\n      }\n    }\n  }\n  </style>","<template>\n    <div :id=\"uid\" class=\"d-flex flex-column align-items-center\">\n        <div class=\"d-flex align-items-center mb-3\">\n            <div class=\"form-label me-3\">\n                {{ t(\"Color of the QR Code\") }}\n            </div>\n            <VSwatches\n                v-model:model-value=\"color\"\n                class=\"c-hand\"\n                show-fallback\n                fallback-input-type=\"color\"\n                colors=\"text-advanced\"\n                popover-to=\"right\"\n                popover-y=\"bottom\"\n                :data-color=\"color\"\n            />\n        </div>\n        <qrcode-vue\n            :render-as=\"renderQrCode\"\n            :value=\"url\"\n            :size=\"size\"\n            level=\"H\"\n            :foreground=\"color\"\n            class=\"myQrCode\"\n            :margin=\"2\"\n        />\n        <div class=\"d-flex align-items-center my-3\">\n            <FormatSwitch v-model:is-svg=\"isSvg\" class=\"me-3\" />\n            <button class=\"btn btn-primary\" @click=\"download\">\n                {{ t(\"Download\") }}\n            </button>\n        </div>\n        <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport SnackBar from \"../../misc/SnackBar.vue\";\nimport QrcodeVue from \"qrcode.vue\";\nimport FormatSwitch from \"./FormatSwitch.vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { computed, onBeforeMount, ref, useId, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n    url: { default: \"\", type: String },\n    orgaForColor: { default: undefined, type: String },\n})\n\n//Data \nconst size = ref(1000);\nconst color = ref(\"#000000\");\nconst isSvg = ref(true);\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst saveFetchStore = useSaveFetchStore();\nconst uid = `qrcode-${useId()}`;\n\n//Computed\nconst renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');\n\nonBeforeMount(()=>initDefaultColor())\n\n//Methods\nfunction download(): void {\n    const canvas = document.getElementById(uid).getElementsByClassName(\"myQrCode\");\n    if (!canvas || canvas.length <=0 || !canvas[0]) {\n        return;\n    }\n    const downloadLink = document.createElement(\"a\");\n    if (isSvg.value) {\n        const svgData = canvas[0].outerHTML;\n        const svgBlob = new Blob([svgData], {type:\"image/svg+xml;charset=utf-8\"});\n        const svgUrl = URL.createObjectURL(svgBlob);\n        downloadLink.href = svgUrl;\n        downloadLink.download = \"qrcode.svg\";\n    }else{\n        downloadLink.download = \"qrcode.png\";\n        downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();\n    }\n    downloadLink.click();\n    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(\n        t(\"Download started\"),\n    );\n}\nasync function initDefaultColor(): Promise<void> {\n    if (undefined === props.orgaForColor) {return;}\n    const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);\n    if (Object.hasOwn(attributes, \"COLOR\")) {\n        color.value = attributes.COLOR as string;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n:deep(.myQrCode) {\n    height: 200px !important;\n    width: 200px !important;\n}\n</style>\n","<template>\n    <div :id=\"uid\" class=\"d-flex flex-column align-items-center\">\n        <div class=\"d-flex align-items-center mb-3\">\n            <div class=\"form-label me-3\">\n                {{ t(\"Color of the QR Code\") }}\n            </div>\n            <VSwatches\n                v-model:model-value=\"color\"\n                class=\"c-hand\"\n                show-fallback\n                fallback-input-type=\"color\"\n                colors=\"text-advanced\"\n                popover-to=\"right\"\n                popover-y=\"bottom\"\n                :data-color=\"color\"\n            />\n        </div>\n        <qrcode-vue\n            :render-as=\"renderQrCode\"\n            :value=\"url\"\n            :size=\"size\"\n            level=\"H\"\n            :foreground=\"color\"\n            class=\"myQrCode\"\n            :margin=\"2\"\n        />\n        <div class=\"d-flex align-items-center my-3\">\n            <FormatSwitch v-model:is-svg=\"isSvg\" class=\"me-3\" />\n            <button class=\"btn btn-primary\" @click=\"download\">\n                {{ t(\"Download\") }}\n            </button>\n        </div>\n        <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport SnackBar from \"../../misc/SnackBar.vue\";\nimport QrcodeVue from \"qrcode.vue\";\nimport FormatSwitch from \"./FormatSwitch.vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { computed, onBeforeMount, ref, useId, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n    url: { default: \"\", type: String },\n    orgaForColor: { default: undefined, type: String },\n})\n\n//Data \nconst size = ref(1000);\nconst color = ref(\"#000000\");\nconst isSvg = ref(true);\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst saveFetchStore = useSaveFetchStore();\nconst uid = `qrcode-${useId()}`;\n\n//Computed\nconst renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');\n\nonBeforeMount(()=>initDefaultColor())\n\n//Methods\nfunction download(): void {\n    const canvas = document.getElementById(uid).getElementsByClassName(\"myQrCode\");\n    if (!canvas || canvas.length <=0 || !canvas[0]) {\n        return;\n    }\n    const downloadLink = document.createElement(\"a\");\n    if (isSvg.value) {\n        const svgData = canvas[0].outerHTML;\n        const svgBlob = new Blob([svgData], {type:\"image/svg+xml;charset=utf-8\"});\n        const svgUrl = URL.createObjectURL(svgBlob);\n        downloadLink.href = svgUrl;\n        downloadLink.download = \"qrcode.svg\";\n    }else{\n        downloadLink.download = \"qrcode.png\";\n        downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();\n    }\n    downloadLink.click();\n    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(\n        t(\"Download started\"),\n    );\n}\nasync function initDefaultColor(): Promise<void> {\n    if (undefined === props.orgaForColor) {return;}\n    const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);\n    if (Object.hasOwn(attributes, \"COLOR\")) {\n        color.value = attributes.COLOR as string;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n:deep(.myQrCode) {\n    height: 200px !important;\n    width: 200px !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/QrCode-CCigeTaZ.mjs

@@ -0,0 +1,109 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.mjs";
+import { E as t } from "./classicApi-CGipMqf7.mjs";
+import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.mjs";
+import { t as r } from "./SnackBar-BL-mLRun.mjs";
+import { computed as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, onBeforeMount as l, openBlock as u, ref as d, toDisplayString as f, unref as p, useId as m, useTemplateRef as h } from "vue";
+import { useI18n as g } from "vue-i18n";
+import { VSwatches as _ } from "vue3-swatches";
+import "vue3-swatches/dist/style.css";
+import v from "qrcode.vue";
+//#region src/components/display/sharing/FormatSwitch.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "format-switch" }, b = ["checked"], x = /* @__PURE__ */ c({
+	__name: "FormatSwitch",
+	props: { isSvg: {
+		default: !0,
+		type: Boolean
+	} },
+	emits: ["update:isSvg"],
+	setup(e, { emit: t }) {
+		let n = e, r = t;
+		function i() {
+			r("update:isSvg", !n.isSvg);
+		}
+		return (t, n) => (u(), a("div", y, [o("input", {
+			id: "format-switch-checkbox",
+			checked: e.isSvg,
+			class: "format-switch-checkbox",
+			type: "checkbox",
+			onInput: i
+		}, null, 40, b), n[0] ||= o("label", {
+			class: "format-switch-label",
+			for: "format-switch-checkbox"
+		}, [o("span", { class: "format-switch-label-span" }, "SVG")], -1)]));
+	}
+}), S = { class: "d-flex align-items-center mb-3" }, C = { class: "form-label me-3" }, w = { class: "d-flex align-items-center my-3" }, T = /*@__PURE__*/ c({
+	__name: "QrCode",
+	props: {
+		url: {
+			default: "",
+			type: String
+		},
+		orgaForColor: {
+			default: void 0,
+			type: String
+		}
+	},
+	setup(e) {
+		let n = e, c = d(1e3), y = d("#000000"), b = d(!0), T = h("snackbar"), { t: E } = g(), D = t(), O = `qrcode-${m()}`, k = i(() => b.value ? "svg" : "canvas");
+		l(() => j());
+		function A() {
+			let e = document.getElementById(O).getElementsByClassName("myQrCode");
+			if (!e || e.length <= 0 || !e[0]) return;
+			let t = document.createElement("a");
+			if (b.value) {
+				let n = e[0].outerHTML, r = new Blob([n], { type: "image/svg+xml;charset=utf-8" });
+				t.href = URL.createObjectURL(r), t.download = "qrcode.svg";
+			} else t.download = "qrcode.png", t.href = e[0].toDataURL();
+			t.click(), (T?.value).open(E("Download started"));
+		}
+		async function j() {
+			if (n.orgaForColor === void 0) return;
+			let e = await D.getOrgaAttributes(n.orgaForColor);
+			Object.hasOwn(e, "COLOR") && (y.value = e.COLOR);
+		}
+		return (t, n) => (u(), a("div", {
+			id: O,
+			class: "d-flex flex-column align-items-center"
+		}, [
+			o("div", S, [o("div", C, f(p(E)("Color of the QR Code")), 1), s(p(_), {
+				"model-value": y.value,
+				"onUpdate:modelValue": n[0] ||= (e) => y.value = e,
+				class: "c-hand",
+				"show-fallback": "",
+				"fallback-input-type": "color",
+				colors: "text-advanced",
+				"popover-to": "right",
+				"popover-y": "bottom",
+				"data-color": y.value
+			}, null, 8, ["model-value", "data-color"])]),
+			s(v, {
+				"render-as": k.value,
+				value: e.url,
+				size: c.value,
+				level: "H",
+				foreground: y.value,
+				class: "myQrCode",
+				margin: 2
+			}, null, 8, [
+				"render-as",
+				"value",
+				"size",
+				"foreground"
+			]),
+			o("div", w, [s(x, {
+				"is-svg": b.value,
+				"onUpdate:isSvg": n[1] ||= (e) => b.value = e,
+				class: "me-3"
+			}, null, 8, ["is-svg"]), o("button", {
+				class: "btn btn-primary",
+				onClick: A
+			}, f(p(E)("Download")), 1)]),
+			s(r, {
+				ref: "snackbar",
+				position: "bottom-left"
+			}, null, 512)
+		]));
+	}
+}), E = /* @__PURE__ */ e({ default: () => D }), D = /*#__PURE__*/ n(T, [["__scopeId", "data-v-a9dff2c6"]]);
+//#endregion
+export { E as n, D as t };

package/dist/QrCode-CaXoOjo-.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCode-CaXoOjo-.mjs","names":["_hoisted_1","_hoisted_2","_sfc_render","_openBlock","_createElementBlock","_createElementVNode","_sfc_main","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_createVNode","_sfc_main"],"sources":["../src/components/display/sharing/FormatSwitch.vue","../src/components/display/sharing/FormatSwitch.vue","../src/components/display/sharing/QrCode.vue","../src/components/display/sharing/QrCode.vue"],"sourcesContent":["<template>\n    <div class=\"format-switch\">\n      <input \n        id=\"format-switch-checkbox\"\n        :checked=\"isSvg\"\n        class=\"format-switch-checkbox\" \n        type=\"checkbox\" \n        @input=\"changeIsSvg\"/>\n      <label class=\"format-switch-label\" for=\"format-switch-checkbox\">\n        <span class=\"format-switch-label-span\">SVG</span>\n      </label>\n    </div>\n  </template>\n  \n<script setup lang=\"ts\">\n\n//Props \nconst props = defineProps({\n  isSvg: { default: true, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits(['update:isSvg']);\n\n//Methods\nfunction changeIsSvg(){\n  emit('update:isSvg', !props.isSvg)\n}\n</script>\n  <style lang=\"scss\">\n  .octopus-app {\n\n    --format-switch-size:140px;\n    --format-switch-half: calc(var(--format-switch-size) / 2 );\n  \n    .format-switch {\n      background: var(--octopus-secondary);\n      border-radius: 30px;\n      overflow: hidden;\n      width: var(--format-switch-size);\n      text-align: center;\n      color: black;\n      border: 2px solid var(--octopus-secondary);\n      padding-right: var(--format-switch-half);\n      position: relative;\n  \n      &::before {\n        content: \"PNG\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        width: var(--format-switch-half);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        pointer-events: none;\n      }\n  \n    \n      &-checkbox {\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        z-index: 2;\n        margin: 0;\n  \n        & + .format-switch-label {\n          position: relative;\n          padding: 0.5rem 0;\n          display: block;\n          user-select: none;\n          pointer-events: none;\n  \n          &::before {\n            content: \"\";\n            background: white;\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            border-radius: 30px;\n            transform: translateX(var(--format-switch-half));\n            transition: transform 300ms;\n          }\n  \n          .format-switch-label-span {\n            position: relative;\n          }\n        }\n  \n        &:checked + .format-switch-label::before {\n          transform: translateX(0px);\n          transition: transform 300ms linear;\n        }\n      }\n  \n      &:has(input:focus-visible){\n        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;\n      }\n    }\n  }\n  </style>","<template>\n    <div class=\"format-switch\">\n      <input \n        id=\"format-switch-checkbox\"\n        :checked=\"isSvg\"\n        class=\"format-switch-checkbox\" \n        type=\"checkbox\" \n        @input=\"changeIsSvg\"/>\n      <label class=\"format-switch-label\" for=\"format-switch-checkbox\">\n        <span class=\"format-switch-label-span\">SVG</span>\n      </label>\n    </div>\n  </template>\n  \n<script setup lang=\"ts\">\n\n//Props \nconst props = defineProps({\n  isSvg: { default: true, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits(['update:isSvg']);\n\n//Methods\nfunction changeIsSvg(){\n  emit('update:isSvg', !props.isSvg)\n}\n</script>\n  <style lang=\"scss\">\n  .octopus-app {\n\n    --format-switch-size:140px;\n    --format-switch-half: calc(var(--format-switch-size) / 2 );\n  \n    .format-switch {\n      background: var(--octopus-secondary);\n      border-radius: 30px;\n      overflow: hidden;\n      width: var(--format-switch-size);\n      text-align: center;\n      color: black;\n      border: 2px solid var(--octopus-secondary);\n      padding-right: var(--format-switch-half);\n      position: relative;\n  \n      &::before {\n        content: \"PNG\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        width: var(--format-switch-half);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        pointer-events: none;\n      }\n  \n    \n      &-checkbox {\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        z-index: 2;\n        margin: 0;\n  \n        & + .format-switch-label {\n          position: relative;\n          padding: 0.5rem 0;\n          display: block;\n          user-select: none;\n          pointer-events: none;\n  \n          &::before {\n            content: \"\";\n            background: white;\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            border-radius: 30px;\n            transform: translateX(var(--format-switch-half));\n            transition: transform 300ms;\n          }\n  \n          .format-switch-label-span {\n            position: relative;\n          }\n        }\n  \n        &:checked + .format-switch-label::before {\n          transform: translateX(0px);\n          transition: transform 300ms linear;\n        }\n      }\n  \n      &:has(input:focus-visible){\n        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;\n      }\n    }\n  }\n  </style>","<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex align-items-center mb-3\">\n      <div class=\"form-label me-3\">\n        {{ t(\"Color of the QR Code\") }}\n      </div>\n      <VSwatches\n        v-model:model-value=\"color\"\n        class=\"c-hand\"\n        show-fallback\n        fallback-input-type=\"color\"\n        colors=\"text-advanced\"\n        popover-to=\"right\"\n        popover-y=\"bottom\"\n        :data-color=\"color\"\n      />\n    </div>\n    <qrcode-vue\n      :id=\"'test-id'\"\n      :render-as=\"renderQrCode\"\n      :value=\"url\"\n      :size=\"size\"\n      level=\"H\"\n      :foreground=\"color\"\n      class=\"myQrCode\"\n      :margin=\"2\"\n    />\n    <div class=\"d-flex align-items-center my-3\">\n      <FormatSwitch v-model:is-svg=\"isSvg\" class=\"me-3\"/>\n      <button class=\"btn btn-primary\" @click=\"download\">\n        {{ t(\"Download\") }}\n      </button>\n    </div>\n    <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport SnackBar from \"../../misc/SnackBar.vue\";\nimport QrcodeVue from \"qrcode.vue\";\nimport FormatSwitch from \"./FormatSwitch.vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { computed, onBeforeMount, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n    url: { default: \"\", type: String },\n    orgaForColor: { default: undefined, type: String },\n})\n\n//Data \nconst size = ref(1000);\nconst color = ref(\"#000000\");\nconst isSvg = ref(true);\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst saveFetchStore = useSaveFetchStore();\n\n\n//Computed\nconst renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');\n\nonBeforeMount(()=>initDefaultColor())\n\n//Methods\nfunction download(): void {\n  const canvas = document.getElementsByClassName(\"myQrCode\");\n  if (!canvas || canvas.length <=0 || !canvas[0]) {\n    return;\n  }\n  const downloadLink = document.createElement(\"a\");\n  if (isSvg.value) {\n    const svgData = canvas[0].outerHTML;\n    const svgBlob = new Blob([svgData], {type:\"image/svg+xml;charset=utf-8\"});\n    const svgUrl = URL.createObjectURL(svgBlob);\n    downloadLink.href = svgUrl;\n    downloadLink.download = \"qrcode.svg\";\n  }else{\n    downloadLink.download = \"qrcode.png\";\n    downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();\n  }\n  downloadLink.click();\n  (snackBarRef?.value as InstanceType<typeof SnackBar>).open(\n    t(\"Download started\"),\n  );\n}\nasync function initDefaultColor(): Promise<void> {\n  if (undefined === props.orgaForColor) return;\n  const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    color.value = attributes.COLOR as string;\n  }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.myQrCode{\n    height: 200px !important;\n    width: 200px !important;\n}\n</style>\n","<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex align-items-center mb-3\">\n      <div class=\"form-label me-3\">\n        {{ t(\"Color of the QR Code\") }}\n      </div>\n      <VSwatches\n        v-model:model-value=\"color\"\n        class=\"c-hand\"\n        show-fallback\n        fallback-input-type=\"color\"\n        colors=\"text-advanced\"\n        popover-to=\"right\"\n        popover-y=\"bottom\"\n        :data-color=\"color\"\n      />\n    </div>\n    <qrcode-vue\n      :id=\"'test-id'\"\n      :render-as=\"renderQrCode\"\n      :value=\"url\"\n      :size=\"size\"\n      level=\"H\"\n      :foreground=\"color\"\n      class=\"myQrCode\"\n      :margin=\"2\"\n    />\n    <div class=\"d-flex align-items-center my-3\">\n      <FormatSwitch v-model:is-svg=\"isSvg\" class=\"me-3\"/>\n      <button class=\"btn btn-primary\" @click=\"download\">\n        {{ t(\"Download\") }}\n      </button>\n    </div>\n    <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport SnackBar from \"../../misc/SnackBar.vue\";\nimport QrcodeVue from \"qrcode.vue\";\nimport FormatSwitch from \"./FormatSwitch.vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { computed, onBeforeMount, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n    url: { default: \"\", type: String },\n    orgaForColor: { default: undefined, type: String },\n})\n\n//Data \nconst size = ref(1000);\nconst color = ref(\"#000000\");\nconst isSvg = ref(true);\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst saveFetchStore = useSaveFetchStore();\n\n\n//Computed\nconst renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');\n\nonBeforeMount(()=>initDefaultColor())\n\n//Methods\nfunction download(): void {\n  const canvas = document.getElementsByClassName(\"myQrCode\");\n  if (!canvas || canvas.length <=0 || !canvas[0]) {\n    return;\n  }\n  const downloadLink = document.createElement(\"a\");\n  if (isSvg.value) {\n    const svgData = canvas[0].outerHTML;\n    const svgBlob = new Blob([svgData], {type:\"image/svg+xml;charset=utf-8\"});\n    const svgUrl = URL.createObjectURL(svgBlob);\n    downloadLink.href = svgUrl;\n    downloadLink.download = \"qrcode.svg\";\n  }else{\n    downloadLink.download = \"qrcode.png\";\n    downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();\n  }\n  downloadLink.click();\n  (snackBarRef?.value as InstanceType<typeof SnackBar>).open(\n    t(\"Download started\"),\n  );\n}\nasync function initDefaultColor(): Promise<void> {\n  if (undefined === props.orgaForColor) return;\n  const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    color.value = attributes.COLOR as string;\n  }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.myQrCode{\n    height: 200px !important;\n    width: 200px !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/QrCode-CcQR60hB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCode-CcQR60hB.mjs","names":["_hoisted_1","_hoisted_2","_sfc_render","_openBlock","_createElementBlock","_createElementVNode","_sfc_main","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_createVNode","_sfc_main"],"sources":["../src/components/display/sharing/FormatSwitch.vue","../src/components/display/sharing/FormatSwitch.vue","../src/components/display/sharing/QrCode.vue","../src/components/display/sharing/QrCode.vue"],"sourcesContent":["<template>\n    <div class=\"format-switch\">\n      <input \n        id=\"format-switch-checkbox\"\n        :checked=\"isSvg\"\n        class=\"format-switch-checkbox\" \n        type=\"checkbox\" \n        @input=\"changeIsSvg\"/>\n      <label class=\"format-switch-label\" for=\"format-switch-checkbox\">\n        <span class=\"format-switch-label-span\">SVG</span>\n      </label>\n    </div>\n  </template>\n  \n<script setup lang=\"ts\">\n\n//Props \nconst props = defineProps({\n  isSvg: { default: true, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits(['update:isSvg']);\n\n//Methods\nfunction changeIsSvg(){\n  emit('update:isSvg', !props.isSvg)\n}\n</script>\n  <style lang=\"scss\">\n  .octopus-app {\n\n    --format-switch-size:140px;\n    --format-switch-half: calc(var(--format-switch-size) / 2 );\n  \n    .format-switch {\n      background: var(--octopus-secondary);\n      border-radius: 30px;\n      overflow: hidden;\n      width: var(--format-switch-size);\n      text-align: center;\n      color: black;\n      border: 2px solid var(--octopus-secondary);\n      padding-right: var(--format-switch-half);\n      position: relative;\n  \n      &::before {\n        content: \"PNG\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        width: var(--format-switch-half);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        pointer-events: none;\n      }\n  \n    \n      &-checkbox {\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        z-index: 2;\n        margin: 0;\n  \n        & + .format-switch-label {\n          position: relative;\n          padding: 0.5rem 0;\n          display: block;\n          user-select: none;\n          pointer-events: none;\n  \n          &::before {\n            content: \"\";\n            background: white;\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            border-radius: 30px;\n            transform: translateX(var(--format-switch-half));\n            transition: transform 300ms;\n          }\n  \n          .format-switch-label-span {\n            position: relative;\n          }\n        }\n  \n        &:checked + .format-switch-label::before {\n          transform: translateX(0px);\n          transition: transform 300ms linear;\n        }\n      }\n  \n      &:has(input:focus-visible){\n        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;\n      }\n    }\n  }\n  </style>","<template>\n    <div class=\"format-switch\">\n      <input \n        id=\"format-switch-checkbox\"\n        :checked=\"isSvg\"\n        class=\"format-switch-checkbox\" \n        type=\"checkbox\" \n        @input=\"changeIsSvg\"/>\n      <label class=\"format-switch-label\" for=\"format-switch-checkbox\">\n        <span class=\"format-switch-label-span\">SVG</span>\n      </label>\n    </div>\n  </template>\n  \n<script setup lang=\"ts\">\n\n//Props \nconst props = defineProps({\n  isSvg: { default: true, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits(['update:isSvg']);\n\n//Methods\nfunction changeIsSvg(){\n  emit('update:isSvg', !props.isSvg)\n}\n</script>\n  <style lang=\"scss\">\n  .octopus-app {\n\n    --format-switch-size:140px;\n    --format-switch-half: calc(var(--format-switch-size) / 2 );\n  \n    .format-switch {\n      background: var(--octopus-secondary);\n      border-radius: 30px;\n      overflow: hidden;\n      width: var(--format-switch-size);\n      text-align: center;\n      color: black;\n      border: 2px solid var(--octopus-secondary);\n      padding-right: var(--format-switch-half);\n      position: relative;\n  \n      &::before {\n        content: \"PNG\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        width: var(--format-switch-half);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        pointer-events: none;\n      }\n  \n    \n      &-checkbox {\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        z-index: 2;\n        margin: 0;\n  \n        & + .format-switch-label {\n          position: relative;\n          padding: 0.5rem 0;\n          display: block;\n          user-select: none;\n          pointer-events: none;\n  \n          &::before {\n            content: \"\";\n            background: white;\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            border-radius: 30px;\n            transform: translateX(var(--format-switch-half));\n            transition: transform 300ms;\n          }\n  \n          .format-switch-label-span {\n            position: relative;\n          }\n        }\n  \n        &:checked + .format-switch-label::before {\n          transform: translateX(0px);\n          transition: transform 300ms linear;\n        }\n      }\n  \n      &:has(input:focus-visible){\n        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;\n      }\n    }\n  }\n  </style>","<template>\n  <div id=\"test-id\" class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex align-items-center mb-3\">\n      <div class=\"form-label me-3\">\n        {{ t(\"Color of the QR Code\") }}\n      </div>\n      <VSwatches\n        v-model:model-value=\"color\"\n        class=\"c-hand\"\n        show-fallback\n        fallback-input-type=\"color\"\n        colors=\"text-advanced\"\n        popover-to=\"right\"\n        popover-y=\"bottom\"\n        :data-color=\"color\"\n      />\n    </div>\n    <qrcode-vue\n      :render-as=\"renderQrCode\"\n      :value=\"url\"\n      :size=\"size\"\n      level=\"H\"\n      :foreground=\"color\"\n      class=\"myQrCode\"\n      :margin=\"2\"\n    />\n    <div class=\"d-flex align-items-center my-3\">\n      <FormatSwitch v-model:is-svg=\"isSvg\" class=\"me-3\"/>\n      <button class=\"btn btn-primary\" @click=\"download\">\n        {{ t(\"Download\") }}\n      </button>\n    </div>\n    <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport SnackBar from \"../../misc/SnackBar.vue\";\nimport QrcodeVue from \"qrcode.vue\";\nimport FormatSwitch from \"./FormatSwitch.vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { computed, onBeforeMount, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n    url: { default: \"\", type: String },\n    orgaForColor: { default: undefined, type: String },\n})\n\n//Data \nconst size = ref(1000);\nconst color = ref(\"#000000\");\nconst isSvg = ref(true);\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst saveFetchStore = useSaveFetchStore();\n\n\n//Computed\nconst renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');\n\nonBeforeMount(()=>initDefaultColor())\n\n//Methods\nfunction download(): void {\n  const canvas = document.getElementsByClassName(\"myQrCode\");\n  if (!canvas || canvas.length <=0 || !canvas[0]) {\n    return;\n  }\n  const downloadLink = document.createElement(\"a\");\n  if (isSvg.value) {\n    const svgData = canvas[0].outerHTML;\n    const svgBlob = new Blob([svgData], {type:\"image/svg+xml;charset=utf-8\"});\n    const svgUrl = URL.createObjectURL(svgBlob);\n    downloadLink.href = svgUrl;\n    downloadLink.download = \"qrcode.svg\";\n  }else{\n    downloadLink.download = \"qrcode.png\";\n    downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();\n  }\n  downloadLink.click();\n  (snackBarRef?.value as InstanceType<typeof SnackBar>).open(\n    t(\"Download started\"),\n  );\n}\nasync function initDefaultColor(): Promise<void> {\n  if (undefined === props.orgaForColor) return;\n  const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    color.value = attributes.COLOR as string;\n  }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.myQrCode{\n    height: 200px !important;\n    width: 200px !important;\n}\n</style>\n","<template>\n  <div id=\"test-id\" class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex align-items-center mb-3\">\n      <div class=\"form-label me-3\">\n        {{ t(\"Color of the QR Code\") }}\n      </div>\n      <VSwatches\n        v-model:model-value=\"color\"\n        class=\"c-hand\"\n        show-fallback\n        fallback-input-type=\"color\"\n        colors=\"text-advanced\"\n        popover-to=\"right\"\n        popover-y=\"bottom\"\n        :data-color=\"color\"\n      />\n    </div>\n    <qrcode-vue\n      :render-as=\"renderQrCode\"\n      :value=\"url\"\n      :size=\"size\"\n      level=\"H\"\n      :foreground=\"color\"\n      class=\"myQrCode\"\n      :margin=\"2\"\n    />\n    <div class=\"d-flex align-items-center my-3\">\n      <FormatSwitch v-model:is-svg=\"isSvg\" class=\"me-3\"/>\n      <button class=\"btn btn-primary\" @click=\"download\">\n        {{ t(\"Download\") }}\n      </button>\n    </div>\n    <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport SnackBar from \"../../misc/SnackBar.vue\";\nimport QrcodeVue from \"qrcode.vue\";\nimport FormatSwitch from \"./FormatSwitch.vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { computed, onBeforeMount, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n    url: { default: \"\", type: String },\n    orgaForColor: { default: undefined, type: String },\n})\n\n//Data \nconst size = ref(1000);\nconst color = ref(\"#000000\");\nconst isSvg = ref(true);\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst saveFetchStore = useSaveFetchStore();\n\n\n//Computed\nconst renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');\n\nonBeforeMount(()=>initDefaultColor())\n\n//Methods\nfunction download(): void {\n  const canvas = document.getElementsByClassName(\"myQrCode\");\n  if (!canvas || canvas.length <=0 || !canvas[0]) {\n    return;\n  }\n  const downloadLink = document.createElement(\"a\");\n  if (isSvg.value) {\n    const svgData = canvas[0].outerHTML;\n    const svgBlob = new Blob([svgData], {type:\"image/svg+xml;charset=utf-8\"});\n    const svgUrl = URL.createObjectURL(svgBlob);\n    downloadLink.href = svgUrl;\n    downloadLink.download = \"qrcode.svg\";\n  }else{\n    downloadLink.download = \"qrcode.png\";\n    downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();\n  }\n  downloadLink.click();\n  (snackBarRef?.value as InstanceType<typeof SnackBar>).open(\n    t(\"Download started\"),\n  );\n}\nasync function initDefaultColor(): Promise<void> {\n  if (undefined === props.orgaForColor) return;\n  const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    color.value = attributes.COLOR as string;\n  }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.myQrCode{\n    height: 200px !important;\n    width: 200px !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/QrCode-S_eLVZoz.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCode-S_eLVZoz.mjs","names":["_hoisted_1","_hoisted_2","_sfc_render","_openBlock","_createElementBlock","_createElementVNode","_sfc_main","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_createVNode","_sfc_main"],"sources":["../src/components/display/sharing/FormatSwitch.vue","../src/components/display/sharing/FormatSwitch.vue","../src/components/display/sharing/QrCode.vue","../src/components/display/sharing/QrCode.vue"],"sourcesContent":["<template>\n    <div class=\"format-switch\">\n      <input \n        id=\"format-switch-checkbox\"\n        :checked=\"isSvg\"\n        class=\"format-switch-checkbox\" \n        type=\"checkbox\" \n        @input=\"changeIsSvg\"/>\n      <label class=\"format-switch-label\" for=\"format-switch-checkbox\">\n        <span class=\"format-switch-label-span\">SVG</span>\n      </label>\n    </div>\n  </template>\n  \n<script setup lang=\"ts\">\n\n//Props \nconst props = defineProps({\n  isSvg: { default: true, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits(['update:isSvg']);\n\n//Methods\nfunction changeIsSvg(){\n  emit('update:isSvg', !props.isSvg)\n}\n</script>\n  <style lang=\"scss\">\n  .octopus-app {\n\n    --format-switch-size:140px;\n    --format-switch-half: calc(var(--format-switch-size) / 2 );\n  \n    .format-switch {\n      background: var(--octopus-secondary);\n      border-radius: 30px;\n      overflow: hidden;\n      width: var(--format-switch-size);\n      text-align: center;\n      color: black;\n      border: 2px solid var(--octopus-secondary);\n      padding-right: var(--format-switch-half);\n      position: relative;\n  \n      &::before {\n        content: \"PNG\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        width: var(--format-switch-half);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        pointer-events: none;\n      }\n  \n    \n      &-checkbox {\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        z-index: 2;\n        margin: 0;\n  \n        & + .format-switch-label {\n          position: relative;\n          padding: 0.5rem 0;\n          display: block;\n          user-select: none;\n          pointer-events: none;\n  \n          &::before {\n            content: \"\";\n            background: white;\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            border-radius: 30px;\n            transform: translateX(var(--format-switch-half));\n            transition: transform 300ms;\n          }\n  \n          .format-switch-label-span {\n            position: relative;\n          }\n        }\n  \n        &:checked + .format-switch-label::before {\n          transform: translateX(0px);\n          transition: transform 300ms linear;\n        }\n      }\n  \n      &:has(input:focus-visible){\n        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;\n      }\n    }\n  }\n  </style>","<template>\n    <div class=\"format-switch\">\n      <input \n        id=\"format-switch-checkbox\"\n        :checked=\"isSvg\"\n        class=\"format-switch-checkbox\" \n        type=\"checkbox\" \n        @input=\"changeIsSvg\"/>\n      <label class=\"format-switch-label\" for=\"format-switch-checkbox\">\n        <span class=\"format-switch-label-span\">SVG</span>\n      </label>\n    </div>\n  </template>\n  \n<script setup lang=\"ts\">\n\n//Props \nconst props = defineProps({\n  isSvg: { default: true, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits(['update:isSvg']);\n\n//Methods\nfunction changeIsSvg(){\n  emit('update:isSvg', !props.isSvg)\n}\n</script>\n  <style lang=\"scss\">\n  .octopus-app {\n\n    --format-switch-size:140px;\n    --format-switch-half: calc(var(--format-switch-size) / 2 );\n  \n    .format-switch {\n      background: var(--octopus-secondary);\n      border-radius: 30px;\n      overflow: hidden;\n      width: var(--format-switch-size);\n      text-align: center;\n      color: black;\n      border: 2px solid var(--octopus-secondary);\n      padding-right: var(--format-switch-half);\n      position: relative;\n  \n      &::before {\n        content: \"PNG\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        width: var(--format-switch-half);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        pointer-events: none;\n      }\n  \n    \n      &-checkbox {\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        z-index: 2;\n        margin: 0;\n  \n        & + .format-switch-label {\n          position: relative;\n          padding: 0.5rem 0;\n          display: block;\n          user-select: none;\n          pointer-events: none;\n  \n          &::before {\n            content: \"\";\n            background: white;\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            border-radius: 30px;\n            transform: translateX(var(--format-switch-half));\n            transition: transform 300ms;\n          }\n  \n          .format-switch-label-span {\n            position: relative;\n          }\n        }\n  \n        &:checked + .format-switch-label::before {\n          transform: translateX(0px);\n          transition: transform 300ms linear;\n        }\n      }\n  \n      &:has(input:focus-visible){\n        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;\n      }\n    }\n  }\n  </style>","<template>\n    <div :id=\"uid\" class=\"d-flex flex-column align-items-center\">\n        <div class=\"d-flex align-items-center mb-3\">\n            <div class=\"form-label me-3\">\n                {{ t(\"Color of the QR Code\") }}\n            </div>\n            <VSwatches\n                v-model:model-value=\"color\"\n                class=\"c-hand\"\n                show-fallback\n                fallback-input-type=\"color\"\n                colors=\"text-advanced\"\n                popover-to=\"right\"\n                popover-y=\"bottom\"\n                :data-color=\"color\"\n            />\n        </div>\n        <qrcode-vue\n            :render-as=\"renderQrCode\"\n            :value=\"url\"\n            :size=\"size\"\n            level=\"H\"\n            :foreground=\"color\"\n            class=\"myQrCode\"\n            :margin=\"2\"\n        />\n        <div class=\"d-flex align-items-center my-3\">\n            <FormatSwitch v-model:is-svg=\"isSvg\" class=\"me-3\" />\n            <button class=\"btn btn-primary\" @click=\"download\">\n                {{ t(\"Download\") }}\n            </button>\n        </div>\n        <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport SnackBar from \"../../misc/SnackBar.vue\";\nimport QrcodeVue from \"qrcode.vue\";\nimport FormatSwitch from \"./FormatSwitch.vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { computed, onBeforeMount, ref, useId, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n    url: { default: \"\", type: String },\n    orgaForColor: { default: undefined, type: String },\n})\n\n//Data \nconst size = ref(1000);\nconst color = ref(\"#000000\");\nconst isSvg = ref(true);\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst saveFetchStore = useSaveFetchStore();\nconst uid = `qrcode-${useId()}`;\n\n//Computed\nconst renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');\n\nonBeforeMount(()=>initDefaultColor())\n\n//Methods\nfunction download(): void {\n    const canvas = document.getElementById(uid).getElementsByClassName(\"myQrCode\");\n    if (!canvas || canvas.length <=0 || !canvas[0]) {\n        return;\n    }\n    const downloadLink = document.createElement(\"a\");\n    if (isSvg.value) {\n        const svgData = canvas[0].outerHTML;\n        const svgBlob = new Blob([svgData], {type:\"image/svg+xml;charset=utf-8\"});\n        const svgUrl = URL.createObjectURL(svgBlob);\n        downloadLink.href = svgUrl;\n        downloadLink.download = \"qrcode.svg\";\n    }else{\n        downloadLink.download = \"qrcode.png\";\n        downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();\n    }\n    downloadLink.click();\n    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(\n        t(\"Download started\"),\n    );\n}\nasync function initDefaultColor(): Promise<void> {\n    if (undefined === props.orgaForColor) {return;}\n    const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);\n    if (Object.hasOwn(attributes, \"COLOR\")) {\n        color.value = attributes.COLOR as string;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n:deep(.myQrCode) {\n    height: 200px !important;\n    width: 200px !important;\n}\n</style>\n","<template>\n    <div :id=\"uid\" class=\"d-flex flex-column align-items-center\">\n        <div class=\"d-flex align-items-center mb-3\">\n            <div class=\"form-label me-3\">\n                {{ t(\"Color of the QR Code\") }}\n            </div>\n            <VSwatches\n                v-model:model-value=\"color\"\n                class=\"c-hand\"\n                show-fallback\n                fallback-input-type=\"color\"\n                colors=\"text-advanced\"\n                popover-to=\"right\"\n                popover-y=\"bottom\"\n                :data-color=\"color\"\n            />\n        </div>\n        <qrcode-vue\n            :render-as=\"renderQrCode\"\n            :value=\"url\"\n            :size=\"size\"\n            level=\"H\"\n            :foreground=\"color\"\n            class=\"myQrCode\"\n            :margin=\"2\"\n        />\n        <div class=\"d-flex align-items-center my-3\">\n            <FormatSwitch v-model:is-svg=\"isSvg\" class=\"me-3\" />\n            <button class=\"btn btn-primary\" @click=\"download\">\n                {{ t(\"Download\") }}\n            </button>\n        </div>\n        <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport SnackBar from \"../../misc/SnackBar.vue\";\nimport QrcodeVue from \"qrcode.vue\";\nimport FormatSwitch from \"./FormatSwitch.vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { computed, onBeforeMount, ref, useId, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n    url: { default: \"\", type: String },\n    orgaForColor: { default: undefined, type: String },\n})\n\n//Data \nconst size = ref(1000);\nconst color = ref(\"#000000\");\nconst isSvg = ref(true);\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst saveFetchStore = useSaveFetchStore();\nconst uid = `qrcode-${useId()}`;\n\n//Computed\nconst renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');\n\nonBeforeMount(()=>initDefaultColor())\n\n//Methods\nfunction download(): void {\n    const canvas = document.getElementById(uid).getElementsByClassName(\"myQrCode\");\n    if (!canvas || canvas.length <=0 || !canvas[0]) {\n        return;\n    }\n    const downloadLink = document.createElement(\"a\");\n    if (isSvg.value) {\n        const svgData = canvas[0].outerHTML;\n        const svgBlob = new Blob([svgData], {type:\"image/svg+xml;charset=utf-8\"});\n        const svgUrl = URL.createObjectURL(svgBlob);\n        downloadLink.href = svgUrl;\n        downloadLink.download = \"qrcode.svg\";\n    }else{\n        downloadLink.download = \"qrcode.png\";\n        downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();\n    }\n    downloadLink.click();\n    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(\n        t(\"Download started\"),\n    );\n}\nasync function initDefaultColor(): Promise<void> {\n    if (undefined === props.orgaForColor) {return;}\n    const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);\n    if (Object.hasOwn(attributes, \"COLOR\")) {\n        color.value = attributes.COLOR as string;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n:deep(.myQrCode) {\n    height: 200px !important;\n    width: 200px !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/QrCode-XZMMiaX5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCode-XZMMiaX5.mjs","names":["_hoisted_1","_hoisted_2","_sfc_render","_openBlock","_createElementBlock","_createElementVNode","_sfc_main","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_createVNode","_sfc_main"],"sources":["../src/components/display/sharing/FormatSwitch.vue","../src/components/display/sharing/FormatSwitch.vue","../src/components/display/sharing/QrCode.vue","../src/components/display/sharing/QrCode.vue"],"sourcesContent":["<template>\n    <div class=\"format-switch\">\n      <input \n        id=\"format-switch-checkbox\"\n        :checked=\"isSvg\"\n        class=\"format-switch-checkbox\" \n        type=\"checkbox\" \n        @input=\"changeIsSvg\"/>\n      <label class=\"format-switch-label\" for=\"format-switch-checkbox\">\n        <span class=\"format-switch-label-span\">SVG</span>\n      </label>\n    </div>\n  </template>\n  \n<script setup lang=\"ts\">\n\n//Props \nconst props = defineProps({\n  isSvg: { default: true, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits(['update:isSvg']);\n\n//Methods\nfunction changeIsSvg(){\n  emit('update:isSvg', !props.isSvg)\n}\n</script>\n  <style lang=\"scss\">\n  .octopus-app {\n\n    --format-switch-size:140px;\n    --format-switch-half: calc(var(--format-switch-size) / 2 );\n  \n    .format-switch {\n      background: var(--octopus-secondary);\n      border-radius: 30px;\n      overflow: hidden;\n      width: var(--format-switch-size);\n      text-align: center;\n      color: black;\n      border: 2px solid var(--octopus-secondary);\n      padding-right: var(--format-switch-half);\n      position: relative;\n  \n      &::before {\n        content: \"PNG\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        width: var(--format-switch-half);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        pointer-events: none;\n      }\n  \n    \n      &-checkbox {\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        z-index: 2;\n        margin: 0;\n  \n        & + .format-switch-label {\n          position: relative;\n          padding: 0.5rem 0;\n          display: block;\n          user-select: none;\n          pointer-events: none;\n  \n          &::before {\n            content: \"\";\n            background: white;\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            border-radius: 30px;\n            transform: translateX(var(--format-switch-half));\n            transition: transform 300ms;\n          }\n  \n          .format-switch-label-span {\n            position: relative;\n          }\n        }\n  \n        &:checked + .format-switch-label::before {\n          transform: translateX(0px);\n          transition: transform 300ms linear;\n        }\n      }\n  \n      &:has(input:focus-visible){\n        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;\n      }\n    }\n  }\n  </style>","<template>\n    <div class=\"format-switch\">\n      <input \n        id=\"format-switch-checkbox\"\n        :checked=\"isSvg\"\n        class=\"format-switch-checkbox\" \n        type=\"checkbox\" \n        @input=\"changeIsSvg\"/>\n      <label class=\"format-switch-label\" for=\"format-switch-checkbox\">\n        <span class=\"format-switch-label-span\">SVG</span>\n      </label>\n    </div>\n  </template>\n  \n<script setup lang=\"ts\">\n\n//Props \nconst props = defineProps({\n  isSvg: { default: true, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits(['update:isSvg']);\n\n//Methods\nfunction changeIsSvg(){\n  emit('update:isSvg', !props.isSvg)\n}\n</script>\n  <style lang=\"scss\">\n  .octopus-app {\n\n    --format-switch-size:140px;\n    --format-switch-half: calc(var(--format-switch-size) / 2 );\n  \n    .format-switch {\n      background: var(--octopus-secondary);\n      border-radius: 30px;\n      overflow: hidden;\n      width: var(--format-switch-size);\n      text-align: center;\n      color: black;\n      border: 2px solid var(--octopus-secondary);\n      padding-right: var(--format-switch-half);\n      position: relative;\n  \n      &::before {\n        content: \"PNG\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        width: var(--format-switch-half);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        pointer-events: none;\n      }\n  \n    \n      &-checkbox {\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        z-index: 2;\n        margin: 0;\n  \n        & + .format-switch-label {\n          position: relative;\n          padding: 0.5rem 0;\n          display: block;\n          user-select: none;\n          pointer-events: none;\n  \n          &::before {\n            content: \"\";\n            background: white;\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            border-radius: 30px;\n            transform: translateX(var(--format-switch-half));\n            transition: transform 300ms;\n          }\n  \n          .format-switch-label-span {\n            position: relative;\n          }\n        }\n  \n        &:checked + .format-switch-label::before {\n          transform: translateX(0px);\n          transition: transform 300ms linear;\n        }\n      }\n  \n      &:has(input:focus-visible){\n        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;\n      }\n    }\n  }\n  </style>","<template>\n    <div :id=\"uid\" class=\"d-flex flex-column align-items-center\">\n        <div class=\"d-flex align-items-center mb-3\">\n            <div class=\"form-label me-3\">\n                {{ t(\"Color of the QR Code\") }}\n            </div>\n            <VSwatches\n                v-model:model-value=\"color\"\n                class=\"c-hand\"\n                show-fallback\n                fallback-input-type=\"color\"\n                colors=\"text-advanced\"\n                popover-to=\"right\"\n                popover-y=\"bottom\"\n                :data-color=\"color\"\n            />\n        </div>\n        <qrcode-vue\n            :render-as=\"renderQrCode\"\n            :value=\"url\"\n            :size=\"size\"\n            level=\"H\"\n            :foreground=\"color\"\n            class=\"myQrCode\"\n            :margin=\"2\"\n        />\n        <div class=\"d-flex align-items-center my-3\">\n            <FormatSwitch v-model:is-svg=\"isSvg\" class=\"me-3\" />\n            <button class=\"btn btn-primary\" @click=\"download\">\n                {{ t(\"Download\") }}\n            </button>\n        </div>\n        <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport SnackBar from \"../../misc/SnackBar.vue\";\nimport QrcodeVue from \"qrcode.vue\";\nimport FormatSwitch from \"./FormatSwitch.vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { computed, onBeforeMount, ref, useId, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n    url: { default: \"\", type: String },\n    orgaForColor: { default: undefined, type: String },\n})\n\n//Data \nconst size = ref(1000);\nconst color = ref(\"#000000\");\nconst isSvg = ref(true);\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst saveFetchStore = useSaveFetchStore();\nconst uid = `qrcode-${useId()}`;\n\n//Computed\nconst renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');\n\nonBeforeMount(()=>initDefaultColor())\n\n//Methods\nfunction download(): void {\n    const canvas = document.getElementById(uid).getElementsByClassName(\"myQrCode\");\n    if (!canvas || canvas.length <=0 || !canvas[0]) {\n        return;\n    }\n    const downloadLink = document.createElement(\"a\");\n    if (isSvg.value) {\n        const svgData = canvas[0].outerHTML;\n        const svgBlob = new Blob([svgData], {type:\"image/svg+xml;charset=utf-8\"});\n        const svgUrl = URL.createObjectURL(svgBlob);\n        downloadLink.href = svgUrl;\n        downloadLink.download = \"qrcode.svg\";\n    }else{\n        downloadLink.download = \"qrcode.png\";\n        downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();\n    }\n    downloadLink.click();\n    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(\n        t(\"Download started\"),\n    );\n}\nasync function initDefaultColor(): Promise<void> {\n    if (undefined === props.orgaForColor) {return;}\n    const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);\n    if (Object.hasOwn(attributes, \"COLOR\")) {\n        color.value = attributes.COLOR as string;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n:deep(.myQrCode) {\n    height: 200px !important;\n    width: 200px !important;\n}\n</style>\n","<template>\n    <div :id=\"uid\" class=\"d-flex flex-column align-items-center\">\n        <div class=\"d-flex align-items-center mb-3\">\n            <div class=\"form-label me-3\">\n                {{ t(\"Color of the QR Code\") }}\n            </div>\n            <VSwatches\n                v-model:model-value=\"color\"\n                class=\"c-hand\"\n                show-fallback\n                fallback-input-type=\"color\"\n                colors=\"text-advanced\"\n                popover-to=\"right\"\n                popover-y=\"bottom\"\n                :data-color=\"color\"\n            />\n        </div>\n        <qrcode-vue\n            :render-as=\"renderQrCode\"\n            :value=\"url\"\n            :size=\"size\"\n            level=\"H\"\n            :foreground=\"color\"\n            class=\"myQrCode\"\n            :margin=\"2\"\n        />\n        <div class=\"d-flex align-items-center my-3\">\n            <FormatSwitch v-model:is-svg=\"isSvg\" class=\"me-3\" />\n            <button class=\"btn btn-primary\" @click=\"download\">\n                {{ t(\"Download\") }}\n            </button>\n        </div>\n        <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport SnackBar from \"../../misc/SnackBar.vue\";\nimport QrcodeVue from \"qrcode.vue\";\nimport FormatSwitch from \"./FormatSwitch.vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { computed, onBeforeMount, ref, useId, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n    url: { default: \"\", type: String },\n    orgaForColor: { default: undefined, type: String },\n})\n\n//Data \nconst size = ref(1000);\nconst color = ref(\"#000000\");\nconst isSvg = ref(true);\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst saveFetchStore = useSaveFetchStore();\nconst uid = `qrcode-${useId()}`;\n\n//Computed\nconst renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');\n\nonBeforeMount(()=>initDefaultColor())\n\n//Methods\nfunction download(): void {\n    const canvas = document.getElementById(uid).getElementsByClassName(\"myQrCode\");\n    if (!canvas || canvas.length <=0 || !canvas[0]) {\n        return;\n    }\n    const downloadLink = document.createElement(\"a\");\n    if (isSvg.value) {\n        const svgData = canvas[0].outerHTML;\n        const svgBlob = new Blob([svgData], {type:\"image/svg+xml;charset=utf-8\"});\n        const svgUrl = URL.createObjectURL(svgBlob);\n        downloadLink.href = svgUrl;\n        downloadLink.download = \"qrcode.svg\";\n    }else{\n        downloadLink.download = \"qrcode.png\";\n        downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();\n    }\n    downloadLink.click();\n    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(\n        t(\"Download started\"),\n    );\n}\nasync function initDefaultColor(): Promise<void> {\n    if (undefined === props.orgaForColor) {return;}\n    const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);\n    if (Object.hasOwn(attributes, \"COLOR\")) {\n        color.value = attributes.COLOR as string;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n:deep(.myQrCode) {\n    height: 200px !important;\n    width: 200px !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/QrCodeModal-BJOu1pAV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCodeModal-BJOu1pAV.mjs","names":["_openBlock","_createBlock","_withCtx","_createVNode","_createElementVNode","_toDisplayString","_sfc_main"],"sources":["../src/components/misc/modal/QrCodeModal.vue","../src/components/misc/modal/QrCodeModal.vue"],"sourcesContent":["<template>\n  <ClassicModal\n    id-modal=\"qrcode-modal\"\n    :title-modal=\"t('Share QR Code')\"\n    @close=\"closePopup\"\n  >\n    <template #body>\n      <QrCode :url=\"urlPage\" :orga-for-color=\"orgaForColor\" />\n    </template>\n    <template #footer>\n      <button class=\"btn btn-primary m-1\" @click=\"closePopup\">\n        {{ t(\"Close\") }}\n      </button>\n    </template>\n  </ClassicModal>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicModal from \"../modal/ClassicModal.vue\";\nimport QrCode from \"../../display/sharing/QrCode.vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  urlPage: { default: undefined, type: String },\n  orgaForColor: { default: undefined, type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n \n//Composables\nconst { t } = useI18n();\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n","<template>\n  <ClassicModal\n    id-modal=\"qrcode-modal\"\n    :title-modal=\"t('Share QR Code')\"\n    @close=\"closePopup\"\n  >\n    <template #body>\n      <QrCode :url=\"urlPage\" :orga-for-color=\"orgaForColor\" />\n    </template>\n    <template #footer>\n      <button class=\"btn btn-primary m-1\" @click=\"closePopup\">\n        {{ t(\"Close\") }}\n      </button>\n    </template>\n  </ClassicModal>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicModal from \"../modal/ClassicModal.vue\";\nimport QrCode from \"../../display/sharing/QrCode.vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  urlPage: { default: undefined, type: String },\n  orgaForColor: { default: undefined, type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n \n//Composables\nconst { t } = useI18n();\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,OAAO;EAGb,MAAM,EAAE,MAAM,QAAQ;EAGtB,SAAS,aAAmB;GAC1B,KAAK,OAAO;EACd;;;;;;;;;;;;;;;;;;CCpCE,OAAAA,UAAA,GAAAC,YAae,OAAA,iBAAA;EAZb,YAAS;EACR,eAAa,OAAA,EAAC,eAAA;EACd,SAAO,OAAA;;EAEG,MAAIC,cAC2C,CAAxDC,YAAwD,OAAA,WAAA;GAA/C,KAAK,OAAA;GAAU,kBAAgB,OAAA;;EAE/B,QAAMD,cAGN,CAFTE,mBAES,UAAA;GAFD,OAAM;GAAuB,SAAO,OAAA;EACvC,GAAAC,gBAAA,OAAA,EAAC,OAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/QrCodeModal-BjT-0P0w.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCodeModal-BjT-0P0w.mjs","names":["_openBlock","_createBlock","_withCtx","_createVNode","_createElementVNode","_toDisplayString","_sfc_main"],"sources":["../src/components/misc/modal/QrCodeModal.vue","../src/components/misc/modal/QrCodeModal.vue"],"sourcesContent":["<template>\n  <ClassicModal\n    id-modal=\"qrcode-modal\"\n    :title-modal=\"t('Share QR Code')\"\n    @close=\"closePopup\"\n  >\n    <template #body>\n      <QrCode :url=\"urlPage\" :orga-for-color=\"orgaForColor\" />\n    </template>\n    <template #footer>\n      <button class=\"btn btn-primary m-1\" @click=\"closePopup\">\n        {{ t(\"Close\") }}\n      </button>\n    </template>\n  </ClassicModal>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicModal from \"../modal/ClassicModal.vue\";\nimport QrCode from \"../../display/sharing/QrCode.vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  urlPage: { default: undefined, type: String },\n  orgaForColor: { default: undefined, type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n \n//Composables\nconst { t } = useI18n();\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n","<template>\n  <ClassicModal\n    id-modal=\"qrcode-modal\"\n    :title-modal=\"t('Share QR Code')\"\n    @close=\"closePopup\"\n  >\n    <template #body>\n      <QrCode :url=\"urlPage\" :orga-for-color=\"orgaForColor\" />\n    </template>\n    <template #footer>\n      <button class=\"btn btn-primary m-1\" @click=\"closePopup\">\n        {{ t(\"Close\") }}\n      </button>\n    </template>\n  </ClassicModal>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicModal from \"../modal/ClassicModal.vue\";\nimport QrCode from \"../../display/sharing/QrCode.vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  urlPage: { default: undefined, type: String },\n  orgaForColor: { default: undefined, type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n \n//Composables\nconst { t } = useI18n();\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,OAAO;EAGb,MAAM,EAAE,MAAM,QAAQ;EAGtB,SAAS,aAAmB;GAC1B,KAAK,OAAO;EACd;;;;;;;;;;;;;;;;;;CCpCE,OAAAA,UAAA,GAAAC,YAae,OAAA,iBAAA;EAZb,YAAS;EACR,eAAa,OAAA,EAAC,eAAA;EACd,SAAO,OAAA;;EAEG,MAAIC,cAC2C,CAAxDC,YAAwD,OAAA,WAAA;GAA/C,KAAK,OAAA;GAAU,kBAAgB,OAAA;;EAE/B,QAAMD,cAGN,CAFTE,mBAES,UAAA;GAFD,OAAM;GAAuB,SAAO,OAAA;EACvC,GAAAC,gBAAA,OAAA,EAAC,OAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/QrCodeModal-BrabSTzq.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCodeModal-BrabSTzq.mjs","names":["_openBlock","_createBlock","_withCtx","_createVNode","_createElementVNode","_toDisplayString","_sfc_main"],"sources":["../src/components/misc/modal/QrCodeModal.vue","../src/components/misc/modal/QrCodeModal.vue"],"sourcesContent":["<template>\n  <ClassicModal\n    id-modal=\"qrcode-modal\"\n    :title-modal=\"t('Share QR Code')\"\n    @close=\"closePopup\"\n  >\n    <template #body>\n      <QrCode :url=\"urlPage\" :orga-for-color=\"orgaForColor\" />\n    </template>\n    <template #footer>\n      <button class=\"btn btn-primary m-1\" @click=\"closePopup\">\n        {{ t(\"Close\") }}\n      </button>\n    </template>\n  </ClassicModal>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicModal from \"../modal/ClassicModal.vue\";\nimport QrCode from \"../../display/sharing/QrCode.vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  urlPage: { default: undefined, type: String },\n  orgaForColor: { default: undefined, type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n \n//Composables\nconst { t } = useI18n();\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n","<template>\n  <ClassicModal\n    id-modal=\"qrcode-modal\"\n    :title-modal=\"t('Share QR Code')\"\n    @close=\"closePopup\"\n  >\n    <template #body>\n      <QrCode :url=\"urlPage\" :orga-for-color=\"orgaForColor\" />\n    </template>\n    <template #footer>\n      <button class=\"btn btn-primary m-1\" @click=\"closePopup\">\n        {{ t(\"Close\") }}\n      </button>\n    </template>\n  </ClassicModal>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicModal from \"../modal/ClassicModal.vue\";\nimport QrCode from \"../../display/sharing/QrCode.vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  urlPage: { default: undefined, type: String },\n  orgaForColor: { default: undefined, type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n \n//Composables\nconst { t } = useI18n();\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,OAAO;EAGb,MAAM,EAAE,MAAM,QAAQ;EAGtB,SAAS,aAAmB;GAC1B,KAAK,OAAO;EACd;;;;;;;;;;;;;;;;;;CCpCE,OAAAA,UAAA,GAAAC,YAae,OAAA,iBAAA;EAZb,YAAS;EACR,eAAa,OAAA,EAAC,eAAA;EACd,SAAO,OAAA;;EAEG,MAAIC,cAC2C,CAAxDC,YAAwD,OAAA,WAAA;GAA/C,KAAK,OAAA;GAAU,kBAAgB,OAAA;;EAE/B,QAAMD,cAGN,CAFTE,mBAES,UAAA;GAFD,OAAM;GAAuB,SAAO,OAAA;EACvC,GAAAC,gBAAA,OAAA,EAAC,OAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/QrCodeModal-CjvbRYLW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCodeModal-CjvbRYLW.mjs","names":["_openBlock","_createBlock","_withCtx","_createVNode","_createElementVNode","_toDisplayString","_sfc_main"],"sources":["../src/components/misc/modal/QrCodeModal.vue","../src/components/misc/modal/QrCodeModal.vue"],"sourcesContent":["<template>\n  <ClassicModal\n    id-modal=\"qrcode-modal\"\n    :title-modal=\"t('Share QR Code')\"\n    @close=\"closePopup\"\n  >\n    <template #body>\n      <QrCode :url=\"urlPage\" :orga-for-color=\"orgaForColor\" />\n    </template>\n    <template #footer>\n      <button class=\"btn btn-primary m-1\" @click=\"closePopup\">\n        {{ t(\"Close\") }}\n      </button>\n    </template>\n  </ClassicModal>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicModal from \"../modal/ClassicModal.vue\";\nimport QrCode from \"../../display/sharing/QrCode.vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  urlPage: { default: undefined, type: String },\n  orgaForColor: { default: undefined, type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n \n//Composables\nconst { t } = useI18n();\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n","<template>\n  <ClassicModal\n    id-modal=\"qrcode-modal\"\n    :title-modal=\"t('Share QR Code')\"\n    @close=\"closePopup\"\n  >\n    <template #body>\n      <QrCode :url=\"urlPage\" :orga-for-color=\"orgaForColor\" />\n    </template>\n    <template #footer>\n      <button class=\"btn btn-primary m-1\" @click=\"closePopup\">\n        {{ t(\"Close\") }}\n      </button>\n    </template>\n  </ClassicModal>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicModal from \"../modal/ClassicModal.vue\";\nimport QrCode from \"../../display/sharing/QrCode.vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  urlPage: { default: undefined, type: String },\n  orgaForColor: { default: undefined, type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n \n//Composables\nconst { t } = useI18n();\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,OAAO;EAGb,MAAM,EAAE,MAAM,QAAQ;EAGtB,SAAS,aAAmB;GAC1B,KAAK,OAAO;EACd;;;;;;;;;;;;;;;;;;CCpCE,OAAAA,UAAA,GAAAC,YAae,OAAA,iBAAA;EAZb,YAAS;EACR,eAAa,OAAA,EAAC,eAAA;EACd,SAAO,OAAA;;EAEG,MAAIC,cAC2C,CAAxDC,YAAwD,OAAA,WAAA;GAA/C,KAAK,OAAA;GAAU,kBAAgB,OAAA;;EAE/B,QAAMD,cAGN,CAFTE,mBAES,UAAA;GAFD,OAAM;GAAuB,SAAO,OAAA;EACvC,GAAAC,gBAAA,OAAA,EAAC,OAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/{QrCodeModal-DE3juCsN.mjs → QrCodeModal-Dpw_tCQ6.mjs}

@@ -1,5 +1,5 @@
 import { t as e } from "./ClassicModal-Dl2IdzXZ.mjs";
-import { t } from "./QrCode-DuScZ7PD.mjs";
+import { t } from "./QrCode-CCigeTaZ.mjs";
 import { createBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, openBlock as o, toDisplayString as s, unref as c, withCtx as l } from "vue";
 import { useI18n as u } from "vue-i18n";
 //#endregion