npm - @saooti/octopus-sdk - Versions diffs - 42.1.1 → 42.1.2 - Mend

@saooti/octopus-sdk 42.1.1 → 42.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1169) hide show

package/dist/TopBar-Ct9XAxTS.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TopBar-Ct9XAxTS.mjs","names":[],"sources":["../src/components/misc/RightsScopeSelector.vue","../src/components/misc/RightsScopeSelector.vue","../src/components/misc/RightsScopeMenu.vue","../src/components/misc/RightsScopeMenu.vue","../src/components/misc/TopBarMainContent.vue","../src/components/misc/TopBarMainContent.vue","../src/components/misc/TopBar.vue","../src/components/misc/TopBar.vue"],"sourcesContent":["<template>\n <div\n v-if=\"subOrganisations.length > 0\"\n class=\"d-flex flex-column ms-4\"\n >\n <span class=\"label mb-1\">\n {{ t('RightsScopeSelector - Title', { rubriquage: rubriquage?.title}) }}\n </span>\n <div class=\"d-flex value\">\n <button\n type=\"button\"\n class=\"btn-transparent d-flex align-items-center\"\n aria-controls=\"suborga-list-menu\"\n :aria-expanded=\"open\"\n @click=\"$emit('change')\"\n >\n <span\n v-if=\"selectedSubOrganisation\"\n class=\"me-2 selected\"\n >\n {{ selectedSubOrganisation.name }}\n </span>\n <span v-else class=\"me-2\">\n {{ t('RightsScopeSelector - No filter') }}\n </span>\n <SwapIcon class=\"icon\" />\n </button>\n <button\n v-if=\"selectedSubOrganisation\"\n type=\"button\"\n class=\"btn-transparent\"\n @click=\"unselectSubOrganisation\"\n >\n <ClearIcon\n class=\"icon\"\n :title=\"t('RightsScopeSelector - Clear filter')\"\n />\n </button>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { ref, toRef, watch } from \"vue\";\nimport { useSubOrganisations } from \"../composable/useSubOrganisations\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { rubriquesApi } from \"@/api\";\n\nimport SwapIcon from \"vue-material-design-icons/SwapHorizontalCircleOutline.vue\";\nimport ClearIcon from \"vue-material-design-icons/CloseCircleOutline.vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Composables\nconst { t } = useI18n();\nconst authStore = useAuthStore();\nconst authOrgaId = toRef(authStore, 'authOrgaId');\nconst rubriquage = ref<Rubriquage|null>(null);\nconst {\n selectedSubOrganisation,\n subOrganisations,\n unselectSubOrganisation\n} = useSubOrganisations(authOrgaId);\n\ndefineProps<{\n /** Whether the sub organisation menu controlled by this selector is open */\n open?: boolean;\n}>();\n\ndefineEmits<{\n (e: 'change'): void;\n}>();\n\nwatch(authOrgaId, async () => {\n rubriquage.value = await rubriquesApi.findRestrictiveRubriquage(authOrgaId.value);\n}, { immediate: true });\n</script>\n\n<style scoped lang=\"scss\">\n#header-scope-selector:deep(.octopus-select-field) {\n background: transparent;\n border-color: rgba(255, 255, 255, 0.1);\n margin-left: 200px;\n\n .octopus-select-value {\n color: var(--octopus-secondary);\n font-weight: bold;\n align-content: center;\n }\n\n input {\n color: white;\n }\n\n button {\n color: rgba(255, 255, 255, 0.3);\n }\n}\n\n.value {\n color: var(--octopus-secondary);\n font-weight: bold;\n align-content: center;\n align-items: center;\n\n button {\n color: inherit;\n font-weight: inherit;\n text-align: start;\n padding: 0;\n }\n\n span:not(.selected):not(.icon) {\n opacity: .5;\n transition: opacity .5s;\n\n &:hover {\n opacity: .7;\n }\n }\n}\n\n.label {\n color: rgba(255, 255, 255, 0.3);\n font-weight: 600;\n font-style: italic;\n font-size: 14px;\n white-space: nowrap;\n overflow-y: visible;\n}\n\n.icon {\n opacity: .7;\n transition: opacity .5s;\n\n &:hover {\n opacity: 1;\n }\n}\n</style>\n","<template>\n <div\n v-if=\"subOrganisations.length > 0\"\n class=\"d-flex flex-column ms-4\"\n >\n <span class=\"label mb-1\">\n {{ t('RightsScopeSelector - Title', { rubriquage: rubriquage?.title}) }}\n </span>\n <div class=\"d-flex value\">\n <button\n type=\"button\"\n class=\"btn-transparent d-flex align-items-center\"\n aria-controls=\"suborga-list-menu\"\n :aria-expanded=\"open\"\n @click=\"$emit('change')\"\n >\n <span\n v-if=\"selectedSubOrganisation\"\n class=\"me-2 selected\"\n >\n {{ selectedSubOrganisation.name }}\n </span>\n <span v-else class=\"me-2\">\n {{ t('RightsScopeSelector - No filter') }}\n </span>\n <SwapIcon class=\"icon\" />\n </button>\n <button\n v-if=\"selectedSubOrganisation\"\n type=\"button\"\n class=\"btn-transparent\"\n @click=\"unselectSubOrganisation\"\n >\n <ClearIcon\n class=\"icon\"\n :title=\"t('RightsScopeSelector - Clear filter')\"\n />\n </button>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { ref, toRef, watch } from \"vue\";\nimport { useSubOrganisations } from \"../composable/useSubOrganisations\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { rubriquesApi } from \"@/api\";\n\nimport SwapIcon from \"vue-material-design-icons/SwapHorizontalCircleOutline.vue\";\nimport ClearIcon from \"vue-material-design-icons/CloseCircleOutline.vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Composables\nconst { t } = useI18n();\nconst authStore = useAuthStore();\nconst authOrgaId = toRef(authStore, 'authOrgaId');\nconst rubriquage = ref<Rubriquage|null>(null);\nconst {\n selectedSubOrganisation,\n subOrganisations,\n unselectSubOrganisation\n} = useSubOrganisations(authOrgaId);\n\ndefineProps<{\n /** Whether the sub organisation menu controlled by this selector is open */\n open?: boolean;\n}>();\n\ndefineEmits<{\n (e: 'change'): void;\n}>();\n\nwatch(authOrgaId, async () => {\n rubriquage.value = await rubriquesApi.findRestrictiveRubriquage(authOrgaId.value);\n}, { immediate: true });\n</script>\n\n<style scoped lang=\"scss\">\n#header-scope-selector:deep(.octopus-select-field) {\n background: transparent;\n border-color: rgba(255, 255, 255, 0.1);\n margin-left: 200px;\n\n .octopus-select-value {\n color: var(--octopus-secondary);\n font-weight: bold;\n align-content: center;\n }\n\n input {\n color: white;\n }\n\n button {\n color: rgba(255, 255, 255, 0.3);\n }\n}\n\n.value {\n color: var(--octopus-secondary);\n font-weight: bold;\n align-content: center;\n align-items: center;\n\n button {\n color: inherit;\n font-weight: inherit;\n text-align: start;\n padding: 0;\n }\n\n span:not(.selected):not(.icon) {\n opacity: .5;\n transition: opacity .5s;\n\n &:hover {\n opacity: .7;\n }\n }\n}\n\n.label {\n color: rgba(255, 255, 255, 0.3);\n font-weight: 600;\n font-style: italic;\n font-size: 14px;\n white-space: nowrap;\n overflow-y: visible;\n}\n\n.icon {\n opacity: .7;\n transition: opacity .5s;\n\n &:hover {\n opacity: 1;\n }\n}\n</style>\n","<template>\n <div\n id=\"suborga-list-menu\"\n ref=\"menuNav\"\n role=\"dialog\"\n aria-labelledby=\"suborga-list-menu-title\"\n :class=\"{ shown: open }\"\n :inert=\"!open\"\n >\n <button\n type=\"button\"\n class=\"btn-transparent close-btn\"\n @click=\"close\"\n >\n <CloseIcon :title=\"t('Close')\" />\n </button>\n\n <div class=\"search\">\n <h3 id=\"suborga-list-menu-title\">\n {{ t('RightsScopeMenu - Title') }}\n </h3>\n <ClassicInputText\n v-model:text-init=\"search\"\n :placeholder=\"t('RightsScopeMenu - Search')\"\n can-be-null\n />\n </div>\n\n <div v-if=\"showFirstList\" class=\"suborga-list mb-4\">\n <h4>{{ t('RightsScopeMenu - First list - Title') }}</h4>\n <span\n v-for=\"suborga in userSubOrgas\"\n :key=\"suborga.id\"\n class=\"suborga\"\n @click=\"select(suborga)\"\n >\n {{ suborga.name }}\n </span>\n </div>\n\n <div class=\"suborga-list\">\n <h4>{{ secondListTitle }}</h4>\n\n <div v-if=\"showLetters\" class=\"letters mt-2\">\n <button\n v-for=\"letter in 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'\"\n :key=\"letter\"\n type=\"button\"\n class=\"letter\"\n :title=\"subOrgaByLetter.has(letter) ? undefined : t('RightsScopeMenu - Letters - No sub orga for letter')\"\n :disabled=\"!subOrgaByLetter.has(letter)\"\n @click=\"scrollToLetter(letter)\"\n >\n {{ letter }}\n </button>\n </div>\n\n <div\n v-for=\"[letter, suborgaForLetter] in subOrgaByLetter\"\n :key=\"'suborgas-' + letter\"\n >\n <div\n :id=\"'suborga-letter-' + letter\"\n class=\"letter\"\n tabindex=\"-1\"\n >\n {{ letter }}\n </div>\n <span\n v-for=\"suborga in suborgaForLetter\"\n :key=\"suborga.id\"\n class=\"suborga\"\n @click=\"select(suborga)\"\n >\n {{ suborga.name }}\n </span>\n </div>\n </div>\n\n <p role=\"status\" class=\"text-indic px-3\">\n <template v-if=\"noResult\">\n {{ t('RightsScopeMenu - No result') }}\n </template>\n </p>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent, nextTick, onUnmounted, ref, toRef, useTemplateRef, watch } from 'vue';\nimport { getClassicInputText, useAuthStore } from '@saooti/octopus-sdk'; \nimport { SubOrganisation, useSubOrganisations } from '../composable/useSubOrganisations';\nimport { useI18n } from 'vue-i18n';\nimport CloseIcon from 'vue-material-design-icons/Close.vue';\n\nconst ClassicInputText = defineAsyncComponent(getClassicInputText);\n\nconst { t } = useI18n();\n\n///////////////////////////////\n// Menu\n///////////////////////////////\nconst props = defineProps<{\n open?: boolean;\n}>();\n\nconst emit = defineEmits<{\n (e: 'update:open', open: boolean): void;\n}>();\n\nconst menuNav = useTemplateRef('menuNav');\nlet previousFocus: HTMLElement | null = null;\n\nwatch(() => props.open, async open => {\n if (open) {\n previousFocus = document.activeElement as HTMLElement | null;\n setTimeout(() => document.addEventListener('click', openOnClick), 200);\n document.addEventListener('keydown', closeOnEscape);\n // Wait for the menu to no longer be inert before focusing\n await nextTick();\n menuNav.value?.querySelector('input')?.focus();\n } else {\n removeListeners();\n // Only give focus back if it would otherwise be lost (inside the\n // closed menu, or on body), to avoid stealing it after a click\n // elsewhere\n const active = document.activeElement;\n if (active === document.body || menuNav.value?.contains(active)) {\n previousFocus?.focus();\n }\n }\n});\n\nonUnmounted(removeListeners);\n\nfunction removeListeners(): void {\n document.removeEventListener('click', openOnClick);\n document.removeEventListener('keydown', closeOnEscape);\n}\n\nfunction close(): void {\n emit('update:open', false);\n}\n\nfunction openOnClick(event: MouseEvent) {\n const menu = menuNav.value;\n if (props.open && event.target && !menu?.contains(event.target as Node)) {\n close();\n }\n}\n\nfunction closeOnEscape(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n close();\n }\n}\n\nfunction prefersReducedMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n///////////////////////////////\n// Display list\n///////////////////////////////\nconst search = ref('');\nconst authStore = useAuthStore();\nconst { subOrganisations, selectSubOrganisation } = useSubOrganisations(toRef(authStore, 'authOrgaId'));\n\nfunction normalize(str: string): string {\n // Separate accented character in letter/diacritic, then remove the\n // diacritic\n return str.toUpperCase().normalize(\"NFD\").replace(/\\p{Diacritic}/gu, '');\n}\n\nconst normalizedSearch = computed((): string => {\n return normalize(search.value);\n});\n\nconst userSubOrgas = computed((): Array<SubOrganisation> => {\n const userScope = authStore.userScope;\n return subOrganisations.value\n .filter(sub => sub.name.includes(normalizedSearch.value))\n .filter(sub => userScope.includes(sub.id));\n});\n\nconst showFirstList = computed((): boolean => {\n return userSubOrgas.value.length > 0;\n});\n\nconst secondListTitle = computed((): string => {\n const userScope = authStore.userScope;\n if (userScope.length === 0) {\n return t('RightsScopeMenu - Second list - Title unscoped');\n } else {\n return t('RightsScopeMenu - Second list - Title scoped');\n }\n});\n\nconst showLetters = computed((): boolean => {\n return subOrganisations.value.length > 10;\n});\n\nconst subOrgaByLetter = computed((): Map<string, Array<SubOrganisation>> => {\n const data: Map<string, Array<SubOrganisation>> = new Map();\n\n const filtered = subOrganisations.value\n .filter(sub => sub.name.includes(normalizedSearch.value))\n .filter(sub => !userSubOrgas.value.includes(sub));\n\n if (showLetters.value) {\n filtered.forEach((sub: SubOrganisation) => {\n const firstLetter = sub.name[0];\n if (data.has(firstLetter)) {\n const present = data.get(firstLetter);\n present!.push(sub);\n } else {\n data.set(firstLetter, [sub]);\n }\n });\n } else {\n data.set(null, filtered);\n }\n\n data.values().forEach(ary => ary.sort((a, b) => a.name.localeCompare(b.name)));\n\n return data;\n});\n\nconst noResult = computed((): boolean => {\n return !showFirstList.value\n && [...subOrgaByLetter.value.values()].every(ary => ary.length === 0);\n});\n\nfunction scrollToLetter(letter: string): void {\n if (!subOrgaByLetter.value.has(letter)) {\n return;\n }\n const container = menuNav.value;\n const target: HTMLElement | null | undefined = container?.querySelector(`#suborga-letter-${letter}`);\n if (container && target) {\n container.scrollTo({\n top: target.offsetTop,\n behavior: prefersReducedMotion() ? 'auto' : 'smooth'\n });\n target.focus({ preventScroll: true });\n }\n}\n\n///////////////////////////////\n// Sub orga selection\n///////////////////////////////\nfunction select(org: SubOrganisation): void {\n selectSubOrganisation(org);\n emit('update:open', false);\n}\n</script>\n\n<style scoped lang=\"scss\">\n#suborga-list-menu-btn {\n transition: rotate 0.3s ease-out;\n \n &.active {\n rotate: 90deg;\n }\n}\n\n#suborga-list-menu {\n z-index: 100;\n \n --width: 30dvw;\n\n // Positioning\n position: fixed;\n left: 0;\n top: 0;\n width: var(--width);\n height: 100dvh;\n\n // Margins\n padding: 1.5em 0;\n\n // Overflow\n overflow-y: auto;\n\n // Style\n background-color: white;\n //border-radius: 0 var(--octopus-border-radius);\n border-right: 2px solid var(--octopus-primary);\n\n // Animation\n @media (prefers-reduced-motion: no-preference) {\n transition: left 0.6s ease-out;\n }\n\n &.shown {\n left: 0;\n }\n\n &:not(.shown) {\n left: calc(var(--width) * -1);\n }\n\n @media(width <= 960px) {\n --width: 100dvw;\n }\n}\n\n.close-btn {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n\nh4 {\n margin-left: 10px;\n color: var(--octopus-primary);\n}\n\n.letter {\n color: var(--pm-accent);\n font-weight: bold;\n font-size: 1em;\n background-color: oklch(from var(--pm-accent) l c h / 15%);\n}\n\n.search {\n padding: 0 1rem;\n\n h3 {\n color: var(--pm-accent);\n text-align: center;\n }\n}\n\n.letters {\n display: grid;\n grid-template-columns: repeat(9, 28px);\n width: fit-content;\n margin: auto;\n\n .letter {\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n color: black;\n margin: 7px 0 8px;\n width: 24px;\n height: 24px;\n border-radius: 8px;\n font-size: 12px;\n padding: 0 !important;\n cursor: pointer;\n\n &:disabled {\n background-color: #EBF3FE;\n cursor: not-allowed;\n }\n }\n}\n\n.suborga-list {\n .letter {\n padding: 0.1rem 1rem;\n color: var(--octopus-primary);\n }\n\n .suborga {\n display: block;\n padding: 0.5rem 1.4rem;\n cursor: pointer;\n\n &:not(:last-child) {\n border-bottom: 1px solid var(--octopus-primary-really-transparent);\n }\n }\n}\n</style>\n","<template>\n <div\n id=\"suborga-list-menu\"\n ref=\"menuNav\"\n role=\"dialog\"\n aria-labelledby=\"suborga-list-menu-title\"\n :class=\"{ shown: open }\"\n :inert=\"!open\"\n >\n <button\n type=\"button\"\n class=\"btn-transparent close-btn\"\n @click=\"close\"\n >\n <CloseIcon :title=\"t('Close')\" />\n </button>\n\n <div class=\"search\">\n <h3 id=\"suborga-list-menu-title\">\n {{ t('RightsScopeMenu - Title') }}\n </h3>\n <ClassicInputText\n v-model:text-init=\"search\"\n :placeholder=\"t('RightsScopeMenu - Search')\"\n can-be-null\n />\n </div>\n\n <div v-if=\"showFirstList\" class=\"suborga-list mb-4\">\n <h4>{{ t('RightsScopeMenu - First list - Title') }}</h4>\n <span\n v-for=\"suborga in userSubOrgas\"\n :key=\"suborga.id\"\n class=\"suborga\"\n @click=\"select(suborga)\"\n >\n {{ suborga.name }}\n </span>\n </div>\n\n <div class=\"suborga-list\">\n <h4>{{ secondListTitle }}</h4>\n\n <div v-if=\"showLetters\" class=\"letters mt-2\">\n <button\n v-for=\"letter in 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'\"\n :key=\"letter\"\n type=\"button\"\n class=\"letter\"\n :title=\"subOrgaByLetter.has(letter) ? undefined : t('RightsScopeMenu - Letters - No sub orga for letter')\"\n :disabled=\"!subOrgaByLetter.has(letter)\"\n @click=\"scrollToLetter(letter)\"\n >\n {{ letter }}\n </button>\n </div>\n\n <div\n v-for=\"[letter, suborgaForLetter] in subOrgaByLetter\"\n :key=\"'suborgas-' + letter\"\n >\n <div\n :id=\"'suborga-letter-' + letter\"\n class=\"letter\"\n tabindex=\"-1\"\n >\n {{ letter }}\n </div>\n <span\n v-for=\"suborga in suborgaForLetter\"\n :key=\"suborga.id\"\n class=\"suborga\"\n @click=\"select(suborga)\"\n >\n {{ suborga.name }}\n </span>\n </div>\n </div>\n\n <p role=\"status\" class=\"text-indic px-3\">\n <template v-if=\"noResult\">\n {{ t('RightsScopeMenu - No result') }}\n </template>\n </p>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent, nextTick, onUnmounted, ref, toRef, useTemplateRef, watch } from 'vue';\nimport { getClassicInputText, useAuthStore } from '@saooti/octopus-sdk'; \nimport { SubOrganisation, useSubOrganisations } from '../composable/useSubOrganisations';\nimport { useI18n } from 'vue-i18n';\nimport CloseIcon from 'vue-material-design-icons/Close.vue';\n\nconst ClassicInputText = defineAsyncComponent(getClassicInputText);\n\nconst { t } = useI18n();\n\n///////////////////////////////\n// Menu\n///////////////////////////////\nconst props = defineProps<{\n open?: boolean;\n}>();\n\nconst emit = defineEmits<{\n (e: 'update:open', open: boolean): void;\n}>();\n\nconst menuNav = useTemplateRef('menuNav');\nlet previousFocus: HTMLElement | null = null;\n\nwatch(() => props.open, async open => {\n if (open) {\n previousFocus = document.activeElement as HTMLElement | null;\n setTimeout(() => document.addEventListener('click', openOnClick), 200);\n document.addEventListener('keydown', closeOnEscape);\n // Wait for the menu to no longer be inert before focusing\n await nextTick();\n menuNav.value?.querySelector('input')?.focus();\n } else {\n removeListeners();\n // Only give focus back if it would otherwise be lost (inside the\n // closed menu, or on body), to avoid stealing it after a click\n // elsewhere\n const active = document.activeElement;\n if (active === document.body || menuNav.value?.contains(active)) {\n previousFocus?.focus();\n }\n }\n});\n\nonUnmounted(removeListeners);\n\nfunction removeListeners(): void {\n document.removeEventListener('click', openOnClick);\n document.removeEventListener('keydown', closeOnEscape);\n}\n\nfunction close(): void {\n emit('update:open', false);\n}\n\nfunction openOnClick(event: MouseEvent) {\n const menu = menuNav.value;\n if (props.open && event.target && !menu?.contains(event.target as Node)) {\n close();\n }\n}\n\nfunction closeOnEscape(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n close();\n }\n}\n\nfunction prefersReducedMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n///////////////////////////////\n// Display list\n///////////////////////////////\nconst search = ref('');\nconst authStore = useAuthStore();\nconst { subOrganisations, selectSubOrganisation } = useSubOrganisations(toRef(authStore, 'authOrgaId'));\n\nfunction normalize(str: string): string {\n // Separate accented character in letter/diacritic, then remove the\n // diacritic\n return str.toUpperCase().normalize(\"NFD\").replace(/\\p{Diacritic}/gu, '');\n}\n\nconst normalizedSearch = computed((): string => {\n return normalize(search.value);\n});\n\nconst userSubOrgas = computed((): Array<SubOrganisation> => {\n const userScope = authStore.userScope;\n return subOrganisations.value\n .filter(sub => sub.name.includes(normalizedSearch.value))\n .filter(sub => userScope.includes(sub.id));\n});\n\nconst showFirstList = computed((): boolean => {\n return userSubOrgas.value.length > 0;\n});\n\nconst secondListTitle = computed((): string => {\n const userScope = authStore.userScope;\n if (userScope.length === 0) {\n return t('RightsScopeMenu - Second list - Title unscoped');\n } else {\n return t('RightsScopeMenu - Second list - Title scoped');\n }\n});\n\nconst showLetters = computed((): boolean => {\n return subOrganisations.value.length > 10;\n});\n\nconst subOrgaByLetter = computed((): Map<string, Array<SubOrganisation>> => {\n const data: Map<string, Array<SubOrganisation>> = new Map();\n\n const filtered = subOrganisations.value\n .filter(sub => sub.name.includes(normalizedSearch.value))\n .filter(sub => !userSubOrgas.value.includes(sub));\n\n if (showLetters.value) {\n filtered.forEach((sub: SubOrganisation) => {\n const firstLetter = sub.name[0];\n if (data.has(firstLetter)) {\n const present = data.get(firstLetter);\n present!.push(sub);\n } else {\n data.set(firstLetter, [sub]);\n }\n });\n } else {\n data.set(null, filtered);\n }\n\n data.values().forEach(ary => ary.sort((a, b) => a.name.localeCompare(b.name)));\n\n return data;\n});\n\nconst noResult = computed((): boolean => {\n return !showFirstList.value\n && [...subOrgaByLetter.value.values()].every(ary => ary.length === 0);\n});\n\nfunction scrollToLetter(letter: string): void {\n if (!subOrgaByLetter.value.has(letter)) {\n return;\n }\n const container = menuNav.value;\n const target: HTMLElement | null | undefined = container?.querySelector(`#suborga-letter-${letter}`);\n if (container && target) {\n container.scrollTo({\n top: target.offsetTop,\n behavior: prefersReducedMotion() ? 'auto' : 'smooth'\n });\n target.focus({ preventScroll: true });\n }\n}\n\n///////////////////////////////\n// Sub orga selection\n///////////////////////////////\nfunction select(org: SubOrganisation): void {\n selectSubOrganisation(org);\n emit('update:open', false);\n}\n</script>\n\n<style scoped lang=\"scss\">\n#suborga-list-menu-btn {\n transition: rotate 0.3s ease-out;\n \n &.active {\n rotate: 90deg;\n }\n}\n\n#suborga-list-menu {\n z-index: 100;\n \n --width: 30dvw;\n\n // Positioning\n position: fixed;\n left: 0;\n top: 0;\n width: var(--width);\n height: 100dvh;\n\n // Margins\n padding: 1.5em 0;\n\n // Overflow\n overflow-y: auto;\n\n // Style\n background-color: white;\n //border-radius: 0 var(--octopus-border-radius);\n border-right: 2px solid var(--octopus-primary);\n\n // Animation\n @media (prefers-reduced-motion: no-preference) {\n transition: left 0.6s ease-out;\n }\n\n &.shown {\n left: 0;\n }\n\n &:not(.shown) {\n left: calc(var(--width) * -1);\n }\n\n @media(width <= 960px) {\n --width: 100dvw;\n }\n}\n\n.close-btn {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n\nh4 {\n margin-left: 10px;\n color: var(--octopus-primary);\n}\n\n.letter {\n color: var(--pm-accent);\n font-weight: bold;\n font-size: 1em;\n background-color: oklch(from var(--pm-accent) l c h / 15%);\n}\n\n.search {\n padding: 0 1rem;\n\n h3 {\n color: var(--pm-accent);\n text-align: center;\n }\n}\n\n.letters {\n display: grid;\n grid-template-columns: repeat(9, 28px);\n width: fit-content;\n margin: auto;\n\n .letter {\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n color: black;\n margin: 7px 0 8px;\n width: 24px;\n height: 24px;\n border-radius: 8px;\n font-size: 12px;\n padding: 0 !important;\n cursor: pointer;\n\n &:disabled {\n background-color: #EBF3FE;\n cursor: not-allowed;\n }\n }\n}\n\n.suborga-list {\n .letter {\n padding: 0.1rem 1rem;\n color: var(--octopus-primary);\n }\n\n .suborga {\n display: block;\n padding: 0.5rem 1.4rem;\n cursor: pointer;\n\n &:not(:last-child) {\n border-bottom: 1px solid var(--octopus-primary-really-transparent);\n }\n }\n}\n</style>\n","<template>\n <div class=\"top-bar-grid header-content\" :class=\"{ scrolled: titleIsDisplayed }\">\n <div class=\"d-flex align-items-center\">\n \n <router-link\n class=\"top-bar-logo d-block\"\n :to=\"{\n name: 'home',\n query: getQueriesRouter('home'),\n }\"\n :title=\"t('Home')\"\n >\n <img\n v-if=\"!filterStore.filterOrgaId || '' === imgUrl\"\n :src=\"logoUrl\"\n aria-hidden=\"true\"\n alt=\"\"\n width=\"140\"\n height=\"50\"\n title=\"Logo\"\n :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n >\n <img\n v-else\n :src=\"useProxyImageUrl(imgUrl, '', '80')\"\n aria-hidden=\"true\"\n alt=\"\"\n class=\"client-logo\"\n title=\"Logo\"\n :class=\"generalStore.platformEducation ? 'education-logo' : ''\"\n >\n </router-link>\n\n <RightsScopeMenu v-model:open=\"menuOpen\" />\n <RightsScopeSelector\n class=\"ms-4\"\n :open=\"menuOpen\"\n @change=\"menuOpen = true\"\n />\n </div>\n\n <h1 v-if=\"titleIsDisplayed\" class=\"text-truncate m-0 align-self-center\">\n {{ titleDisplay }}\n </h1>\n\n \n <div\n class=\"d-flex right-section\"\n :class=\"[\n inContentDisplayPage || isPhone\n ? 'flex-row-reverse align-items-center'\n : 'flex-column align-items-end',\n ]\"\n >\n \n <template v-if=\"filterStore.filterOrgaId && '' !== imgUrl\">\n <img\n v-if=\"authStore.isGarRole\"\n :src=\"logoUrl\"\n aria-hidden=\"true\"\n alt=\"\"\n width=\"100\"\n height=\"29\"\n class=\"ms-2\"\n title=\"Logo\"\n :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n >\n <a\n v-else\n href=\"https://www.saooti.com/\"\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n :title=\"t('New window', {text: 'Saooti'})\"\n >\n <img\n :src=\"logoUrl\"\n aria-hidden=\"true\"\n alt=\"\"\n title=\"Saooti\"\n width=\"100\"\n height=\"29\"\n class=\"ms-2\"\n :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n >\n </a>\n </template>\n\n <div role=\"navigation\" class=\"d-flex align-items-center justify-content-end flex-grow-1\">\n <nav :aria-label=\"t('Site menu')\">\n <ul class=\"d-flex\">\n <template v-for=\"link in routerLinkArray\" :key=\"link.routeName\">\n <li v-if=\"link.condition\" class=\"li-style-none\">\n <router-link\n v-show=\"!isPhone\"\n :to=\"{\n name: link.routeName,\n query: getQueriesRouter(link.routeName),\n }\"\n class=\"link-hover py-2 px-3\"\n >\n {{ link.title }}\n </router-link>\n </li>\n </template>\n </ul>\n </nav>\n <button\n v-show=\"!isPhone && !inContentDisplayPage\"\n id=\"more-dropdown\"\n :title=\"t('More')\"\n class=\"d-flex-column flex-nowrap align-items-center btn-transparent py-2 px-3 text-white\"\n >\n <span class=\"link-hover\">\n {{ t(\"More\") }}\n </span>\n <ChevronDownIcon />\n </button>\n <ClassicPopover\n target=\"more-dropdown\"\n :only-click=\"true\"\n :is-fixed=\"true\"\n :left-pos=\"true\"\n :is-top-layer=\"true\"\n >\n <nav class=\"d-flex flex-column\" :aria-label=\"t('Site menu')\">\n <ul class=\"p-0 m-0\">\n <template v-for=\"link in routerLinkInsideArray\" :key=\"link.routeName\">\n <li\n v-if=\"link.condition\"\n class=\"li-style-none\"\n >\n <router-link\n :to=\"{\n name: link.routeName,\n query: getQueriesRouter(link.routeName),\n }\"\n class=\"p-1 octopus-dropdown-item\"\n >\n {{ link.title }}\n </router-link>\n </li>\n </template>\n </ul>\n </nav>\n </ClassicPopover>\n\n <MobileMenu\n :is-education=\"generalStore.platformEducation\"\n :show=\"mobileMenuDisplay\"\n :not-podcast-and-emission=\"inContentDisplayPage && !scrolled\"\n />\n <HomeDropdown\n :is-education=\"generalStore.platformEducation\"\n :mobile-menu-display=\"mobileMenuDisplay\"\n v-bind=\"options?.homeDropdown\"\n />\n <router-link\n v-show=\"!isPhone && !inContentDisplayPage\"\n :title=\"t('Search')\"\n :to=\"{\n name: 'podcasts',\n }\"\n class=\"btn admin-button m-1 text-blue-octopus\"\n role=\"search\"\n >\n <MagnifyIcon :size=\"30\" />\n </router-link>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport MagnifyIcon from \"vue-material-design-icons/Magnify.vue\";\nimport { useRubriquesFilterComputed } from \"../composable/route/useRubriquesFilterComputed\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport HomeDropdown, { type HomeDropdownProps } from \"./HomeDropdown.vue\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport { useFilterStore } from \"../../stores/FilterStore\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport ClassicPopover from \"../misc/ClassicPopover.vue\";\nimport { defineAsyncComponent, computed, ref } from \"vue\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { useI18n } from \"vue-i18n\";\nimport RightsScopeSelector from \"./RightsScopeSelector.vue\";\nimport RightsScopeMenu from \"./RightsScopeMenu.vue\"; \nconst MobileMenu = defineAsyncComponent(() => import(\"./MobileMenu.vue\"));\n\nexport interface TopBarMainContentOptions {\n homeDropdown?: HomeDropdownProps;\n}\n\nexport interface TopBarMainContentProps {\n isPhone?: boolean;\n titleDisplay?: string;\n scrolled?: boolean;\n};\n\n//Props \nconst props = defineProps<TopBarMainContentProps & {\n /** Props for subcomponents */\n options?: TopBarMainContentOptions;\n}>();\n\n\n//Composables\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { rubriqueQueryParam } = useRubriquesFilterComputed();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\nconst filterStore = useFilterStore();\n\nconst menuOpen = ref(false);\n\n//Computed\nconst mobileMenuDisplay = computed(() => props.isPhone || inContentDisplayPage.value);\nconst titleIsDisplayed = computed(() => inContentDisplayPage.value && props.scrolled && !props.isPhone);\nconst inContentDisplayPage = computed(() => 0 !== props.titleDisplay.length);\nconst routerLinkArray = computed(() => [{\n title: t(\"Radio & Live\"),\n routeName: \"lives\",\n condition:\n !inContentDisplayPage.value &&\n (state.generalParameters.isLiveTab as boolean) &&\n ((filterStore.filterOrgaId && filterStore.filterLive) || !filterStore.filterOrgaId),\n}, {\n title: t(\"Podcasts\"),\n routeName: \"podcasts\",\n condition:\n !inContentDisplayPage.value ||\n (inContentDisplayPage.value && !props.scrolled),\n}, {\n title: t(\"Emissions\"),\n routeName: \"emissions\",\n condition:\n !inContentDisplayPage.value ||\n (inContentDisplayPage.value && !props.scrolled),\n}]);\n\nconst routerLinkInsideArray = computed(() =>{\n return [\n {\n title: t(\"Speakers\"),\n routeName: \"participants\",\n condition: true,\n },\n {\n title: t(\"Playlists\"),\n routeName: \"playlists\",\n condition: true,\n },\n {\n title: t(\"Productors\"),\n routeName: \"productors\",\n condition:\n !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || generalStore.platformEducation),\n },\n ];\n});\nconst logoUrl = computed(() =>{\n if (generalStore.platformEducation) {\n return \"/img/logo_education_white.svg\";\n }\n return props.isPhone\n ? \"/img/logo_octopus_bubble.svg\"\n : \"/img/logo_saooti_play_white.svg\";\n});\nconst imgUrl = computed(() =>{\n if (!filterStore.filterImgUrl?.includes(\"emptypodcast\")){\n return `${filterStore.filterImgUrl}`;\n }\n return \"\";\n});\n \n//Methods\nfunction getQueriesRouter(routeName: string) {\n if (\"podcasts\" !== routeName && \"emissions\" !== routeName && \"home\" !== routeName) {\n return { productor: filterStore.filterOrgaId };\n }\n return {\n productor: filterStore.filterOrgaId,\n iabId: filterStore.filterIab?.id,\n rubriquesId: rubriqueQueryParam.value,\n };\n}\n</script>\n\n<style scoped lang=\"scss\">\n.top-bar-grid {\n display: grid;\n grid-template-columns: 1fr 5fr;\n padding: 0 1rem 0 0.5rem;\n\n &.scrolled {\n grid-template-columns: 1fr 2fr 1fr;\n }\n\n @media (width <= 450px) {\n padding: 0 0.5rem;\n }\n\n .link-hover {\n color: white;\n font-weight: bold;\n font-size: 0.93rem;\n text-decoration: underline;\n text-decoration-color: transparent;\n transition: text-decoration-color 250ms;\n text-underline-offset: 8px;\n\n &.link-hover:hover,\n &.link-hover.router-link-exact-active.router-link-active {\n color: white;\n text-decoration-color: white;\n }\n }\n\n .client-logo {\n border-radius: var(--octopus-border-radius);\n }\n\n .top-bar-logo img {\n max-width: 140px !important;\n max-height: 4rem;\n height: 4rem;\n\n &.education-logo {\n height: auto;\n }\n\n @media (width <= 650px) {\n max-height: 2rem;\n }\n }\n\n .octopus-logo {\n @media (width <= 960px) {\n max-width: 30px !important;\n }\n }\n}\n\n.right-section {\n padding-top: 0.5rem;\n}\n</style>\n","<template>\n <div class=\"top-bar-grid header-content\" :class=\"{ scrolled: titleIsDisplayed }\">\n <div class=\"d-flex align-items-center\">\n \n <router-link\n class=\"top-bar-logo d-block\"\n :to=\"{\n name: 'home',\n query: getQueriesRouter('home'),\n }\"\n :title=\"t('Home')\"\n >\n <img\n v-if=\"!filterStore.filterOrgaId || '' === imgUrl\"\n :src=\"logoUrl\"\n aria-hidden=\"true\"\n alt=\"\"\n width=\"140\"\n height=\"50\"\n title=\"Logo\"\n :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n >\n <img\n v-else\n :src=\"useProxyImageUrl(imgUrl, '', '80')\"\n aria-hidden=\"true\"\n alt=\"\"\n class=\"client-logo\"\n title=\"Logo\"\n :class=\"generalStore.platformEducation ? 'education-logo' : ''\"\n >\n </router-link>\n\n <RightsScopeMenu v-model:open=\"menuOpen\" />\n <RightsScopeSelector\n class=\"ms-4\"\n :open=\"menuOpen\"\n @change=\"menuOpen = true\"\n />\n </div>\n\n <h1 v-if=\"titleIsDisplayed\" class=\"text-truncate m-0 align-self-center\">\n {{ titleDisplay }}\n </h1>\n\n \n <div\n class=\"d-flex right-section\"\n :class=\"[\n inContentDisplayPage || isPhone\n ? 'flex-row-reverse align-items-center'\n : 'flex-column align-items-end',\n ]\"\n >\n \n <template v-if=\"filterStore.filterOrgaId && '' !== imgUrl\">\n <img\n v-if=\"authStore.isGarRole\"\n :src=\"logoUrl\"\n aria-hidden=\"true\"\n alt=\"\"\n width=\"100\"\n height=\"29\"\n class=\"ms-2\"\n title=\"Logo\"\n :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n >\n <a\n v-else\n href=\"https://www.saooti.com/\"\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n :title=\"t('New window', {text: 'Saooti'})\"\n >\n <img\n :src=\"logoUrl\"\n aria-hidden=\"true\"\n alt=\"\"\n title=\"Saooti\"\n width=\"100\"\n height=\"29\"\n class=\"ms-2\"\n :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n >\n </a>\n </template>\n\n <div role=\"navigation\" class=\"d-flex align-items-center justify-content-end flex-grow-1\">\n <nav :aria-label=\"t('Site menu')\">\n <ul class=\"d-flex\">\n <template v-for=\"link in routerLinkArray\" :key=\"link.routeName\">\n <li v-if=\"link.condition\" class=\"li-style-none\">\n <router-link\n v-show=\"!isPhone\"\n :to=\"{\n name: link.routeName,\n query: getQueriesRouter(link.routeName),\n }\"\n class=\"link-hover py-2 px-3\"\n >\n {{ link.title }}\n </router-link>\n </li>\n </template>\n </ul>\n </nav>\n <button\n v-show=\"!isPhone && !inContentDisplayPage\"\n id=\"more-dropdown\"\n :title=\"t('More')\"\n class=\"d-flex-column flex-nowrap align-items-center btn-transparent py-2 px-3 text-white\"\n >\n <span class=\"link-hover\">\n {{ t(\"More\") }}\n </span>\n <ChevronDownIcon />\n </button>\n <ClassicPopover\n target=\"more-dropdown\"\n :only-click=\"true\"\n :is-fixed=\"true\"\n :left-pos=\"true\"\n :is-top-layer=\"true\"\n >\n <nav class=\"d-flex flex-column\" :aria-label=\"t('Site menu')\">\n <ul class=\"p-0 m-0\">\n <template v-for=\"link in routerLinkInsideArray\" :key=\"link.routeName\">\n <li\n v-if=\"link.condition\"\n class=\"li-style-none\"\n >\n <router-link\n :to=\"{\n name: link.routeName,\n query: getQueriesRouter(link.routeName),\n }\"\n class=\"p-1 octopus-dropdown-item\"\n >\n {{ link.title }}\n </router-link>\n </li>\n </template>\n </ul>\n </nav>\n </ClassicPopover>\n\n <MobileMenu\n :is-education=\"generalStore.platformEducation\"\n :show=\"mobileMenuDisplay\"\n :not-podcast-and-emission=\"inContentDisplayPage && !scrolled\"\n />\n <HomeDropdown\n :is-education=\"generalStore.platformEducation\"\n :mobile-menu-display=\"mobileMenuDisplay\"\n v-bind=\"options?.homeDropdown\"\n />\n <router-link\n v-show=\"!isPhone && !inContentDisplayPage\"\n :title=\"t('Search')\"\n :to=\"{\n name: 'podcasts',\n }\"\n class=\"btn admin-button m-1 text-blue-octopus\"\n role=\"search\"\n >\n <MagnifyIcon :size=\"30\" />\n </router-link>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport MagnifyIcon from \"vue-material-design-icons/Magnify.vue\";\nimport { useRubriquesFilterComputed } from \"../composable/route/useRubriquesFilterComputed\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport HomeDropdown, { type HomeDropdownProps } from \"./HomeDropdown.vue\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport { useFilterStore } from \"../../stores/FilterStore\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport ClassicPopover from \"../misc/ClassicPopover.vue\";\nimport { defineAsyncComponent, computed, ref } from \"vue\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { useI18n } from \"vue-i18n\";\nimport RightsScopeSelector from \"./RightsScopeSelector.vue\";\nimport RightsScopeMenu from \"./RightsScopeMenu.vue\"; \nconst MobileMenu = defineAsyncComponent(() => import(\"./MobileMenu.vue\"));\n\nexport interface TopBarMainContentOptions {\n homeDropdown?: HomeDropdownProps;\n}\n\nexport interface TopBarMainContentProps {\n isPhone?: boolean;\n titleDisplay?: string;\n scrolled?: boolean;\n};\n\n//Props \nconst props = defineProps<TopBarMainContentProps & {\n /** Props for subcomponents */\n options?: TopBarMainContentOptions;\n}>();\n\n\n//Composables\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { rubriqueQueryParam } = useRubriquesFilterComputed();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\nconst filterStore = useFilterStore();\n\nconst menuOpen = ref(false);\n\n//Computed\nconst mobileMenuDisplay = computed(() => props.isPhone || inContentDisplayPage.value);\nconst titleIsDisplayed = computed(() => inContentDisplayPage.value && props.scrolled && !props.isPhone);\nconst inContentDisplayPage = computed(() => 0 !== props.titleDisplay.length);\nconst routerLinkArray = computed(() => [{\n title: t(\"Radio & Live\"),\n routeName: \"lives\",\n condition:\n !inContentDisplayPage.value &&\n (state.generalParameters.isLiveTab as boolean) &&\n ((filterStore.filterOrgaId && filterStore.filterLive) || !filterStore.filterOrgaId),\n}, {\n title: t(\"Podcasts\"),\n routeName: \"podcasts\",\n condition:\n !inContentDisplayPage.value ||\n (inContentDisplayPage.value && !props.scrolled),\n}, {\n title: t(\"Emissions\"),\n routeName: \"emissions\",\n condition:\n !inContentDisplayPage.value ||\n (inContentDisplayPage.value && !props.scrolled),\n}]);\n\nconst routerLinkInsideArray = computed(() =>{\n return [\n {\n title: t(\"Speakers\"),\n routeName: \"participants\",\n condition: true,\n },\n {\n title: t(\"Playlists\"),\n routeName: \"playlists\",\n condition: true,\n },\n {\n title: t(\"Productors\"),\n routeName: \"productors\",\n condition:\n !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || generalStore.platformEducation),\n },\n ];\n});\nconst logoUrl = computed(() =>{\n if (generalStore.platformEducation) {\n return \"/img/logo_education_white.svg\";\n }\n return props.isPhone\n ? \"/img/logo_octopus_bubble.svg\"\n : \"/img/logo_saooti_play_white.svg\";\n});\nconst imgUrl = computed(() =>{\n if (!filterStore.filterImgUrl?.includes(\"emptypodcast\")){\n return `${filterStore.filterImgUrl}`;\n }\n return \"\";\n});\n \n//Methods\nfunction getQueriesRouter(routeName: string) {\n if (\"podcasts\" !== routeName && \"emissions\" !== routeName && \"home\" !== routeName) {\n return { productor: filterStore.filterOrgaId };\n }\n return {\n productor: filterStore.filterOrgaId,\n iabId: filterStore.filterIab?.id,\n rubriquesId: rubriqueQueryParam.value,\n };\n}\n</script>\n\n<style scoped lang=\"scss\">\n.top-bar-grid {\n display: grid;\n grid-template-columns: 1fr 5fr;\n padding: 0 1rem 0 0.5rem;\n\n &.scrolled {\n grid-template-columns: 1fr 2fr 1fr;\n }\n\n @media (width <= 450px) {\n padding: 0 0.5rem;\n }\n\n .link-hover {\n color: white;\n font-weight: bold;\n font-size: 0.93rem;\n text-decoration: underline;\n text-decoration-color: transparent;\n transition: text-decoration-color 250ms;\n text-underline-offset: 8px;\n\n &.link-hover:hover,\n &.link-hover.router-link-exact-active.router-link-active {\n color: white;\n text-decoration-color: white;\n }\n }\n\n .client-logo {\n border-radius: var(--octopus-border-radius);\n }\n\n .top-bar-logo img {\n max-width: 140px !important;\n max-height: 4rem;\n height: 4rem;\n\n &.education-logo {\n height: auto;\n }\n\n @media (width <= 650px) {\n max-height: 2rem;\n }\n }\n\n .octopus-logo {\n @media (width <= 960px) {\n max-width: 30px !important;\n }\n }\n}\n\n.right-section {\n padding-top: 0.5rem;\n}\n</style>\n","<template>\n <header\n role=\"banner\"\n class=\"header-saooti-play\"\n :style=\"headerBackgroundImage\"\n :class=\"[generalStore.contentToDisplay ? 'header-img-bg':'bg-gradient', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']\"\n >\n <TopBarMainContent\n :is-phone=\"isPhone\"\n :scrolled=\"scrolled\"\n :title-display=\"titleToDisplay\"\n style=\"height: var(--header-size);\"\n :class=\"headerBackgroundImage.length ? 'header-opacity':''\"\n :options=\"options?.topBarMainContent\"\n />\n </header>\n\n <div\n v-if=\"generalStore.contentToDisplay\"\n class=\"header-content-bg\"\n :style=\"headerBackgroundImage\"\n :class=\"{ scrolled: scrolled, 'header-force-blur':needToBlur }\"\n >\n <div class=\"header-additional-content header-content\">\n <h1 v-if=\"!scrolled\" class=\"text-truncate\">\n {{ titleToDisplay }}\n </h1>\n <SubscribeButtons\n v-if=\"!authStore.isGarRole && content\"\n v-show=\"!scrolled\"\n :content=\"content\"\n :window-width=\"windowWidth\"\n />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport TopBarMainContent, { type TopBarMainContentOptions } from \"./TopBarMainContent.vue\";\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { Canal } from \"@/stores/class/radio/canal\";\nimport axios from \"axios\";\nconst SubscribeButtons = defineAsyncComponent(\n () => import(\"../display/sharing/SubscribeButtons.vue\"),\n);\n\ndefineProps<{\n options?: {\n topBarMainContent?: TopBarMainContentOptions\n }\n}>();\n\n//Data \nconst scrolled = ref(false);\nconst oldScrollY = ref(0);\nconst minScroll = ref(0);\nconst headerBackgroundImage = ref(\"\");\nconst needToBlur = ref(false);\n\n\n//Composables\nconst { isPhone, windowWidth } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\n\n//Computed\nconst titleToDisplay = computed(() => {\n if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n return (generalStore.contentToDisplay as Podcast).emission.name;\n }\n if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n return (generalStore.contentToDisplay as Playlist).title;\n }\n if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n return (generalStore.contentToDisplay as Emission).name;\n }\n if ((generalStore.contentToDisplay as Canal)?.id) {\n return (generalStore.contentToDisplay as Canal).name;\n }\n return \"\";\n});\n\n/** The element displayed by the subscribe buttons */\nconst content = computed(() => {\n if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n return (generalStore.contentToDisplay as Podcast).emission;\n }\n if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n return generalStore.contentToDisplay as Emission;\n }\n if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n return generalStore.contentToDisplay as Playlist;\n }\n return null;\n});\n\n//Watch\nwatch(()=>generalStore.contentToDisplay, async () => {\n if(!generalStore.contentToDisplay){\n headerBackgroundImage.value = \"\";\n needToBlur.value = false;\n return;\n }\n const widthAsked = window.innerWidth > 960 ? \"1600\":\"1000\";\n const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl, widthAsked, undefined, true);\n try {\n const result = await axios.get(proxyUrl);\n headerBackgroundImage.value = `background-image: url('${result.data}');`;\n needToBlur.value = result.data === generalStore.contentToDisplay.imageUrl;\n } catch {\n if (generalStore.contentToDisplay.imageUrl) {\n const url = encodeURI(generalStore.contentToDisplay.imageUrl);\n headerBackgroundImage.value = `background-image: url('${url}');`;\n needToBlur.value = true;\n } else {\n headerBackgroundImage.value = '';\n }\n }\n}, {deep: true, immediate: true});\n\n\nonMounted(()=>{\n window.addEventListener(\"scroll\", handleScroll);\n})\nonBeforeUnmount(() => {\n window.removeEventListener(\"scroll\", handleScroll);\n})\n\n\n//Methods\nfunction handleScroll(): void {\n if (\n window.scrollY - oldScrollY.value > 0 &&\n window.scrollY > 1 &&\n document.body.offsetHeight - window.innerHeight > 40\n ) {\n if (!scrolled.value) {\n scrolled.value = true;\n minScroll.value = 0;\n }\n } else if (\n window.scrollY - oldScrollY.value < 0 &&\n window.scrollY < 1 &&\n minScroll.value > 20\n ) {\n scrolled.value = false;\n minScroll.value = 0;\n }\n oldScrollY.value = window.scrollY;\n if (minScroll.value < window.scrollY) {\n minScroll.value = window.scrollY;\n }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n --header-size: 5rem;\n --header-additional-content-size: 22rem;\n @media (width <= 650px) {\n --header-size: 3.5rem;\n }\n @media (width <= 550px) {\n --header-additional-content-size: 13rem;\n }\n .header-saooti-play{\n z-index: 11;\n position: sticky;\n top: 0;\n background-color: black;\n &.header-img-bg{\n background-position: center -20vw;\n background-repeat: no-repeat;\n background-size: cover;\n }\n &.bg-gradient, &.scrolled{\n box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; \n }\n }\n .header-content-bg{\n background-position: center calc(calc(var(--header-size) * -1) - 20vw);\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n display: flex;\n background-color: black;\n transition: height 0.7s;\n height: calc(var(--header-additional-content-size) - var(--header-size));\n @starting-style {\n height: 0rem;\n }\n &.scrolled {\n height: 0rem;\n }\n }\n .header-additional-content{\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n width: 100%;\n }\n .header-additional-content, .header-opacity{\n background: oklch(0 0 0 / 0.5);\n }\n .header-force-blur .header-additional-content, .header-force-blur .header-opacity{\n backdrop-filter: blur(8px);\n }\n .header-content{\n *:focus-visible {\n box-shadow: 0 0 10px 1px white !important;\n }\n h1 {\n color: white !important;\n font-size: 1.8rem;\n margin: 2rem 5rem;\n @media (width <= 550px) {\n font-size: 1rem;\n margin: 1rem 0.5rem 0.5rem;\n }\n }\n .admin-button:hover,\n .share-btn:hover {\n background: white;\n }\n }\n}\n</style>\n","<template>\n <header\n role=\"banner\"\n class=\"header-saooti-play\"\n :style=\"headerBackgroundImage\"\n :class=\"[generalStore.contentToDisplay ? 'header-img-bg':'bg-gradient', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']\"\n >\n <TopBarMainContent\n :is-phone=\"isPhone\"\n :scrolled=\"scrolled\"\n :title-display=\"titleToDisplay\"\n style=\"height: var(--header-size);\"\n :class=\"headerBackgroundImage.length ? 'header-opacity':''\"\n :options=\"options?.topBarMainContent\"\n />\n </header>\n\n <div\n v-if=\"generalStore.contentToDisplay\"\n class=\"header-content-bg\"\n :style=\"headerBackgroundImage\"\n :class=\"{ scrolled: scrolled, 'header-force-blur':needToBlur }\"\n >\n <div class=\"header-additional-content header-content\">\n <h1 v-if=\"!scrolled\" class=\"text-truncate\">\n {{ titleToDisplay }}\n </h1>\n <SubscribeButtons\n v-if=\"!authStore.isGarRole && content\"\n v-show=\"!scrolled\"\n :content=\"content\"\n :window-width=\"windowWidth\"\n />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport TopBarMainContent, { type TopBarMainContentOptions } from \"./TopBarMainContent.vue\";\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { Canal } from \"@/stores/class/radio/canal\";\nimport axios from \"axios\";\nconst SubscribeButtons = defineAsyncComponent(\n () => import(\"../display/sharing/SubscribeButtons.vue\"),\n);\n\ndefineProps<{\n options?: {\n topBarMainContent?: TopBarMainContentOptions\n }\n}>();\n\n//Data \nconst scrolled = ref(false);\nconst oldScrollY = ref(0);\nconst minScroll = ref(0);\nconst headerBackgroundImage = ref(\"\");\nconst needToBlur = ref(false);\n\n\n//Composables\nconst { isPhone, windowWidth } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\n\n//Computed\nconst titleToDisplay = computed(() => {\n if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n return (generalStore.contentToDisplay as Podcast).emission.name;\n }\n if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n return (generalStore.contentToDisplay as Playlist).title;\n }\n if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n return (generalStore.contentToDisplay as Emission).name;\n }\n if ((generalStore.contentToDisplay as Canal)?.id) {\n return (generalStore.contentToDisplay as Canal).name;\n }\n return \"\";\n});\n\n/** The element displayed by the subscribe buttons */\nconst content = computed(() => {\n if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n return (generalStore.contentToDisplay as Podcast).emission;\n }\n if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n return generalStore.contentToDisplay as Emission;\n }\n if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n return generalStore.contentToDisplay as Playlist;\n }\n return null;\n});\n\n//Watch\nwatch(()=>generalStore.contentToDisplay, async () => {\n if(!generalStore.contentToDisplay){\n headerBackgroundImage.value = \"\";\n needToBlur.value = false;\n return;\n }\n const widthAsked = window.innerWidth > 960 ? \"1600\":\"1000\";\n const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl, widthAsked, undefined, true);\n try {\n const result = await axios.get(proxyUrl);\n headerBackgroundImage.value = `background-image: url('${result.data}');`;\n needToBlur.value = result.data === generalStore.contentToDisplay.imageUrl;\n } catch {\n if (generalStore.contentToDisplay.imageUrl) {\n const url = encodeURI(generalStore.contentToDisplay.imageUrl);\n headerBackgroundImage.value = `background-image: url('${url}');`;\n needToBlur.value = true;\n } else {\n headerBackgroundImage.value = '';\n }\n }\n}, {deep: true, immediate: true});\n\n\nonMounted(()=>{\n window.addEventListener(\"scroll\", handleScroll);\n})\nonBeforeUnmount(() => {\n window.removeEventListener(\"scroll\", handleScroll);\n})\n\n\n//Methods\nfunction handleScroll(): void {\n if (\n window.scrollY - oldScrollY.value > 0 &&\n window.scrollY > 1 &&\n document.body.offsetHeight - window.innerHeight > 40\n ) {\n if (!scrolled.value) {\n scrolled.value = true;\n minScroll.value = 0;\n }\n } else if (\n window.scrollY - oldScrollY.value < 0 &&\n window.scrollY < 1 &&\n minScroll.value > 20\n ) {\n scrolled.value = false;\n minScroll.value = 0;\n }\n oldScrollY.value = window.scrollY;\n if (minScroll.value < window.scrollY) {\n minScroll.value = window.scrollY;\n }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n --header-size: 5rem;\n --header-additional-content-size: 22rem;\n @media (width <= 650px) {\n --header-size: 3.5rem;\n }\n @media (width <= 550px) {\n --header-additional-content-size: 13rem;\n }\n .header-saooti-play{\n z-index: 11;\n position: sticky;\n top: 0;\n background-color: black;\n &.header-img-bg{\n background-position: center -20vw;\n background-repeat: no-repeat;\n background-size: cover;\n }\n &.bg-gradient, &.scrolled{\n box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; \n }\n }\n .header-content-bg{\n background-position: center calc(calc(var(--header-size) * -1) - 20vw);\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n display: flex;\n background-color: black;\n transition: height 0.7s;\n height: calc(var(--header-additional-content-size) - var(--header-size));\n @starting-style {\n height: 0rem;\n }\n &.scrolled {\n height: 0rem;\n }\n }\n .header-additional-content{\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n width: 100%;\n }\n .header-additional-content, .header-opacity{\n background: oklch(0 0 0 / 0.5);\n }\n .header-force-blur .header-additional-content, .header-force-blur .header-opacity{\n backdrop-filter: blur(8px);\n }\n .header-content{\n *:focus-visible {\n box-shadow: 0 0 10px 1px white !important;\n }\n h1 {\n color: white !important;\n font-size: 1.8rem;\n margin: 2rem 5rem;\n @media (width <= 550px) {\n font-size: 1rem;\n margin: 1rem 0.5rem 0.5rem;\n }\n }\n .admin-button:hover,\n .share-btn:hover {\n background: white;\n }\n }\n}\n</style>\n"],"mappings":"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"}

package/dist/TopBar-sSswTZjE.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TopBar-sSswTZjE.mjs","names":[],"sources":["../src/components/misc/RightsScopeSelector.vue","../src/components/misc/RightsScopeSelector.vue","../src/components/misc/RightsScopeMenu.vue","../src/components/misc/RightsScopeMenu.vue","../src/components/misc/TopBarMainContent.vue","../src/components/misc/TopBarMainContent.vue","../src/components/misc/TopBar.vue","../src/components/misc/TopBar.vue"],"sourcesContent":["<template>\n <div\n v-if=\"subOrganisations.length > 0\"\n class=\"d-flex flex-column ms-4\"\n >\n <span class=\"label mb-1\">\n {{ t('RightsScopeSelector - Title', { rubriquage: rubriquage?.title}) }}\n </span>\n <div class=\"d-flex value\">\n <button\n type=\"button\"\n class=\"btn-transparent d-flex align-items-center\"\n aria-controls=\"suborga-list-menu\"\n :aria-expanded=\"open\"\n @click=\"$emit('change')\"\n >\n <span\n v-if=\"selectedSubOrganisation\"\n class=\"me-2 selected\"\n >\n {{ selectedSubOrganisation.name }}\n </span>\n <span v-else class=\"me-2\">\n {{ t('RightsScopeSelector - No filter') }}\n </span>\n <SwapIcon class=\"icon\" />\n </button>\n <button\n v-if=\"selectedSubOrganisation\"\n type=\"button\"\n class=\"btn-transparent\"\n @click=\"unselectSubOrganisation\"\n >\n <ClearIcon\n class=\"icon\"\n :title=\"t('RightsScopeSelector - Clear filter')\"\n />\n </button>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { ref, toRef, watch } from \"vue\";\nimport { useSubOrganisations } from \"../composable/useSubOrganisations\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { rubriquesApi } from \"@/api\";\n\nimport SwapIcon from \"vue-material-design-icons/SwapHorizontalCircleOutline.vue\";\nimport ClearIcon from \"vue-material-design-icons/CloseCircleOutline.vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Composables\nconst { t } = useI18n();\nconst authStore = useAuthStore();\nconst authOrgaId = toRef(authStore, 'authOrgaId');\nconst rubriquage = ref<Rubriquage|null>(null);\nconst {\n selectedSubOrganisation,\n subOrganisations,\n unselectSubOrganisation\n} = useSubOrganisations(authOrgaId);\n\ndefineProps<{\n /** Whether the sub organisation menu controlled by this selector is open */\n open?: boolean;\n}>();\n\ndefineEmits<{\n (e: 'change'): void;\n}>();\n\nwatch(authOrgaId, async () => {\n rubriquage.value = await rubriquesApi.findRestrictiveRubriquage(authOrgaId.value);\n}, { immediate: true });\n</script>\n\n<style scoped lang=\"scss\">\n#header-scope-selector:deep(.octopus-select-field) {\n background: transparent;\n border-color: rgba(255, 255, 255, 0.1);\n margin-left: 200px;\n\n .octopus-select-value {\n color: var(--octopus-secondary);\n font-weight: bold;\n align-content: center;\n }\n\n input {\n color: white;\n }\n\n button {\n color: rgba(255, 255, 255, 0.3);\n }\n}\n\n.value {\n color: var(--octopus-secondary);\n font-weight: bold;\n align-content: center;\n align-items: center;\n\n button {\n color: inherit;\n font-weight: inherit;\n text-align: start;\n padding: 0;\n }\n\n span:not(.selected):not(.icon) {\n opacity: .5;\n transition: opacity .5s;\n\n &:hover {\n opacity: .7;\n }\n }\n}\n\n.label {\n color: rgba(255, 255, 255, 0.3);\n font-weight: 600;\n font-style: italic;\n font-size: 14px;\n white-space: nowrap;\n overflow-y: visible;\n}\n\n.icon {\n opacity: .7;\n transition: opacity .5s;\n\n &:hover {\n opacity: 1;\n }\n}\n</style>\n","<template>\n <div\n v-if=\"subOrganisations.length > 0\"\n class=\"d-flex flex-column ms-4\"\n >\n <span class=\"label mb-1\">\n {{ t('RightsScopeSelector - Title', { rubriquage: rubriquage?.title}) }}\n </span>\n <div class=\"d-flex value\">\n <button\n type=\"button\"\n class=\"btn-transparent d-flex align-items-center\"\n aria-controls=\"suborga-list-menu\"\n :aria-expanded=\"open\"\n @click=\"$emit('change')\"\n >\n <span\n v-if=\"selectedSubOrganisation\"\n class=\"me-2 selected\"\n >\n {{ selectedSubOrganisation.name }}\n </span>\n <span v-else class=\"me-2\">\n {{ t('RightsScopeSelector - No filter') }}\n </span>\n <SwapIcon class=\"icon\" />\n </button>\n <button\n v-if=\"selectedSubOrganisation\"\n type=\"button\"\n class=\"btn-transparent\"\n @click=\"unselectSubOrganisation\"\n >\n <ClearIcon\n class=\"icon\"\n :title=\"t('RightsScopeSelector - Clear filter')\"\n />\n </button>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { ref, toRef, watch } from \"vue\";\nimport { useSubOrganisations } from \"../composable/useSubOrganisations\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { rubriquesApi } from \"@/api\";\n\nimport SwapIcon from \"vue-material-design-icons/SwapHorizontalCircleOutline.vue\";\nimport ClearIcon from \"vue-material-design-icons/CloseCircleOutline.vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Composables\nconst { t } = useI18n();\nconst authStore = useAuthStore();\nconst authOrgaId = toRef(authStore, 'authOrgaId');\nconst rubriquage = ref<Rubriquage|null>(null);\nconst {\n selectedSubOrganisation,\n subOrganisations,\n unselectSubOrganisation\n} = useSubOrganisations(authOrgaId);\n\ndefineProps<{\n /** Whether the sub organisation menu controlled by this selector is open */\n open?: boolean;\n}>();\n\ndefineEmits<{\n (e: 'change'): void;\n}>();\n\nwatch(authOrgaId, async () => {\n rubriquage.value = await rubriquesApi.findRestrictiveRubriquage(authOrgaId.value);\n}, { immediate: true });\n</script>\n\n<style scoped lang=\"scss\">\n#header-scope-selector:deep(.octopus-select-field) {\n background: transparent;\n border-color: rgba(255, 255, 255, 0.1);\n margin-left: 200px;\n\n .octopus-select-value {\n color: var(--octopus-secondary);\n font-weight: bold;\n align-content: center;\n }\n\n input {\n color: white;\n }\n\n button {\n color: rgba(255, 255, 255, 0.3);\n }\n}\n\n.value {\n color: var(--octopus-secondary);\n font-weight: bold;\n align-content: center;\n align-items: center;\n\n button {\n color: inherit;\n font-weight: inherit;\n text-align: start;\n padding: 0;\n }\n\n span:not(.selected):not(.icon) {\n opacity: .5;\n transition: opacity .5s;\n\n &:hover {\n opacity: .7;\n }\n }\n}\n\n.label {\n color: rgba(255, 255, 255, 0.3);\n font-weight: 600;\n font-style: italic;\n font-size: 14px;\n white-space: nowrap;\n overflow-y: visible;\n}\n\n.icon {\n opacity: .7;\n transition: opacity .5s;\n\n &:hover {\n opacity: 1;\n }\n}\n</style>\n","<template>\n <div\n id=\"suborga-list-menu\"\n ref=\"menuNav\"\n role=\"dialog\"\n aria-labelledby=\"suborga-list-menu-title\"\n :class=\"{ shown: open }\"\n :inert=\"!open\"\n >\n <button\n type=\"button\"\n class=\"btn-transparent close-btn\"\n @click=\"close\"\n >\n <CloseIcon :title=\"t('Close')\" />\n </button>\n\n <div class=\"search\">\n <h3 id=\"suborga-list-menu-title\">\n {{ t('RightsScopeMenu - Title') }}\n </h3>\n <ClassicInputText\n v-model:text-init=\"search\"\n :placeholder=\"t('RightsScopeMenu - Search')\"\n can-be-null\n />\n </div>\n\n <div v-if=\"showFirstList\" class=\"suborga-list mb-4\">\n <h4>{{ t('RightsScopeMenu - First list - Title') }}</h4>\n <span\n v-for=\"suborga in userSubOrgas\"\n :key=\"suborga.id\"\n class=\"suborga\"\n @click=\"select(suborga)\"\n >\n {{ suborga.name }}\n </span>\n </div>\n\n <div class=\"suborga-list\">\n <h4>{{ secondListTitle }}</h4>\n\n <div v-if=\"showLetters\" class=\"letters mt-2\">\n <button\n v-for=\"letter in 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'\"\n :key=\"letter\"\n type=\"button\"\n class=\"letter\"\n :title=\"subOrgaByLetter.has(letter) ? undefined : t('RightsScopeMenu - Letters - No sub orga for letter')\"\n :disabled=\"!subOrgaByLetter.has(letter)\"\n @click=\"scrollToLetter(letter)\"\n >\n {{ letter }}\n </button>\n </div>\n\n <div\n v-for=\"[letter, suborgaForLetter] in subOrgaByLetter\"\n :key=\"'suborgas-' + letter\"\n >\n <div\n :id=\"'suborga-letter-' + letter\"\n class=\"letter\"\n tabindex=\"-1\"\n >\n {{ letter }}\n </div>\n <span\n v-for=\"suborga in suborgaForLetter\"\n :key=\"suborga.id\"\n class=\"suborga\"\n @click=\"select(suborga)\"\n >\n {{ suborga.name }}\n </span>\n </div>\n </div>\n\n <p role=\"status\" class=\"text-indic px-3\">\n <template v-if=\"noResult\">\n {{ t('RightsScopeMenu - No result') }}\n </template>\n </p>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent, nextTick, onUnmounted, ref, toRef, useTemplateRef, watch } from 'vue';\nimport { getClassicInputText, useAuthStore } from '@saooti/octopus-sdk'; \nimport { SubOrganisation, useSubOrganisations } from '../composable/useSubOrganisations';\nimport { useI18n } from 'vue-i18n';\nimport CloseIcon from 'vue-material-design-icons/Close.vue';\n\nconst ClassicInputText = defineAsyncComponent(getClassicInputText);\n\nconst { t } = useI18n();\n\n///////////////////////////////\n// Menu\n///////////////////////////////\nconst props = defineProps<{\n open?: boolean;\n}>();\n\nconst emit = defineEmits<{\n (e: 'update:open', open: boolean): void;\n}>();\n\nconst menuNav = useTemplateRef('menuNav');\nlet previousFocus: HTMLElement | null = null;\n\nwatch(() => props.open, async open => {\n if (open) {\n previousFocus = document.activeElement as HTMLElement | null;\n setTimeout(() => document.addEventListener('click', openOnClick), 200);\n document.addEventListener('keydown', closeOnEscape);\n // Wait for the menu to no longer be inert before focusing\n await nextTick();\n menuNav.value?.querySelector('input')?.focus();\n } else {\n removeListeners();\n // Only give focus back if it would otherwise be lost (inside the\n // closed menu, or on body), to avoid stealing it after a click\n // elsewhere\n const active = document.activeElement;\n if (active === document.body || menuNav.value?.contains(active)) {\n previousFocus?.focus();\n }\n }\n});\n\nonUnmounted(removeListeners);\n\nfunction removeListeners(): void {\n document.removeEventListener('click', openOnClick);\n document.removeEventListener('keydown', closeOnEscape);\n}\n\nfunction close(): void {\n emit('update:open', false);\n}\n\nfunction openOnClick(event: MouseEvent) {\n const menu = menuNav.value;\n if (props.open && event.target && !menu?.contains(event.target as Node)) {\n close();\n }\n}\n\nfunction closeOnEscape(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n close();\n }\n}\n\nfunction prefersReducedMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n///////////////////////////////\n// Display list\n///////////////////////////////\nconst search = ref('');\nconst authStore = useAuthStore();\nconst { subOrganisations, selectSubOrganisation } = useSubOrganisations(toRef(authStore, 'authOrgaId'));\n\nfunction normalize(str: string): string {\n // Separate accented character in letter/diacritic, then remove the\n // diacritic\n return str.toUpperCase().normalize(\"NFD\").replace(/\\p{Diacritic}/gu, '');\n}\n\nconst normalizedSearch = computed((): string => {\n return normalize(search.value);\n});\n\nconst userSubOrgas = computed((): Array<SubOrganisation> => {\n const userScope = authStore.userScope;\n return subOrganisations.value\n .filter(sub => sub.name.includes(normalizedSearch.value))\n .filter(sub => userScope.includes(sub.id));\n});\n\nconst showFirstList = computed((): boolean => {\n return userSubOrgas.value.length > 0;\n});\n\nconst secondListTitle = computed((): string => {\n const userScope = authStore.userScope;\n if (userScope.length === 0) {\n return t('RightsScopeMenu - Second list - Title unscoped');\n } else {\n return t('RightsScopeMenu - Second list - Title scoped');\n }\n});\n\nconst showLetters = computed((): boolean => {\n return subOrganisations.value.length > 10;\n});\n\nconst subOrgaByLetter = computed((): Map<string, Array<SubOrganisation>> => {\n const data: Map<string, Array<SubOrganisation>> = new Map();\n\n const filtered = subOrganisations.value\n .filter(sub => sub.name.includes(normalizedSearch.value))\n .filter(sub => !userSubOrgas.value.includes(sub));\n\n if (showLetters.value) {\n filtered.forEach((sub: SubOrganisation) => {\n const firstLetter = sub.name[0];\n if (data.has(firstLetter)) {\n const present = data.get(firstLetter);\n present!.push(sub);\n } else {\n data.set(firstLetter, [sub]);\n }\n });\n } else {\n data.set(null, filtered);\n }\n\n data.values().forEach(ary => ary.sort((a, b) => a.name.localeCompare(b.name)));\n\n return data;\n});\n\nconst noResult = computed((): boolean => {\n return !showFirstList.value\n && [...subOrgaByLetter.value.values()].every(ary => ary.length === 0);\n});\n\nfunction scrollToLetter(letter: string): void {\n if (!subOrgaByLetter.value.has(letter)) {\n return;\n }\n const container = menuNav.value;\n const target: HTMLElement | null | undefined = container?.querySelector(`#suborga-letter-${letter}`);\n if (container && target) {\n container.scrollTo({\n top: target.offsetTop,\n behavior: prefersReducedMotion() ? 'auto' : 'smooth'\n });\n target.focus({ preventScroll: true });\n }\n}\n\n///////////////////////////////\n// Sub orga selection\n///////////////////////////////\nfunction select(org: SubOrganisation): void {\n selectSubOrganisation(org);\n emit('update:open', false);\n}\n</script>\n\n<style scoped lang=\"scss\">\n#suborga-list-menu-btn {\n transition: rotate 0.3s ease-out;\n \n &.active {\n rotate: 90deg;\n }\n}\n\n#suborga-list-menu {\n z-index: 100;\n \n --width: 30dvw;\n\n // Positioning\n position: fixed;\n left: 0;\n top: 0;\n width: var(--width);\n height: 100dvh;\n\n // Margins\n padding: 1.5em 0;\n\n // Overflow\n overflow-y: auto;\n\n // Style\n background-color: white;\n //border-radius: 0 var(--octopus-border-radius);\n border-right: 2px solid var(--octopus-primary);\n\n // Animation\n @media (prefers-reduced-motion: no-preference) {\n transition: left 0.6s ease-out;\n }\n\n &.shown {\n left: 0;\n }\n\n &:not(.shown) {\n left: calc(var(--width) * -1);\n }\n\n @media(width <= 960px) {\n --width: 100dvw;\n }\n}\n\n.close-btn {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n\nh4 {\n margin-left: 10px;\n color: var(--octopus-primary);\n}\n\n.letter {\n color: var(--pm-accent);\n font-weight: bold;\n font-size: 1em;\n background-color: oklch(from var(--pm-accent) l c h / 15%);\n}\n\n.search {\n padding: 0 1rem;\n\n h3 {\n color: var(--pm-accent);\n text-align: center;\n }\n}\n\n.letters {\n display: grid;\n grid-template-columns: repeat(9, 28px);\n width: fit-content;\n margin: auto;\n\n .letter {\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n color: black;\n margin: 7px 0 8px;\n width: 24px;\n height: 24px;\n border-radius: 8px;\n font-size: 12px;\n padding: 0 !important;\n cursor: pointer;\n\n &:disabled {\n background-color: #EBF3FE;\n cursor: not-allowed;\n }\n }\n}\n\n.suborga-list {\n .letter {\n padding: 0.1rem 1rem;\n color: var(--octopus-primary);\n }\n\n .suborga {\n display: block;\n padding: 0.5rem 1.4rem;\n cursor: pointer;\n\n &:not(:last-child) {\n border-bottom: 1px solid var(--octopus-primary-really-transparent);\n }\n }\n}\n</style>\n","<template>\n <div\n id=\"suborga-list-menu\"\n ref=\"menuNav\"\n role=\"dialog\"\n aria-labelledby=\"suborga-list-menu-title\"\n :class=\"{ shown: open }\"\n :inert=\"!open\"\n >\n <button\n type=\"button\"\n class=\"btn-transparent close-btn\"\n @click=\"close\"\n >\n <CloseIcon :title=\"t('Close')\" />\n </button>\n\n <div class=\"search\">\n <h3 id=\"suborga-list-menu-title\">\n {{ t('RightsScopeMenu - Title') }}\n </h3>\n <ClassicInputText\n v-model:text-init=\"search\"\n :placeholder=\"t('RightsScopeMenu - Search')\"\n can-be-null\n />\n </div>\n\n <div v-if=\"showFirstList\" class=\"suborga-list mb-4\">\n <h4>{{ t('RightsScopeMenu - First list - Title') }}</h4>\n <span\n v-for=\"suborga in userSubOrgas\"\n :key=\"suborga.id\"\n class=\"suborga\"\n @click=\"select(suborga)\"\n >\n {{ suborga.name }}\n </span>\n </div>\n\n <div class=\"suborga-list\">\n <h4>{{ secondListTitle }}</h4>\n\n <div v-if=\"showLetters\" class=\"letters mt-2\">\n <button\n v-for=\"letter in 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'\"\n :key=\"letter\"\n type=\"button\"\n class=\"letter\"\n :title=\"subOrgaByLetter.has(letter) ? undefined : t('RightsScopeMenu - Letters - No sub orga for letter')\"\n :disabled=\"!subOrgaByLetter.has(letter)\"\n @click=\"scrollToLetter(letter)\"\n >\n {{ letter }}\n </button>\n </div>\n\n <div\n v-for=\"[letter, suborgaForLetter] in subOrgaByLetter\"\n :key=\"'suborgas-' + letter\"\n >\n <div\n :id=\"'suborga-letter-' + letter\"\n class=\"letter\"\n tabindex=\"-1\"\n >\n {{ letter }}\n </div>\n <span\n v-for=\"suborga in suborgaForLetter\"\n :key=\"suborga.id\"\n class=\"suborga\"\n @click=\"select(suborga)\"\n >\n {{ suborga.name }}\n </span>\n </div>\n </div>\n\n <p role=\"status\" class=\"text-indic px-3\">\n <template v-if=\"noResult\">\n {{ t('RightsScopeMenu - No result') }}\n </template>\n </p>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent, nextTick, onUnmounted, ref, toRef, useTemplateRef, watch } from 'vue';\nimport { getClassicInputText, useAuthStore } from '@saooti/octopus-sdk'; \nimport { SubOrganisation, useSubOrganisations } from '../composable/useSubOrganisations';\nimport { useI18n } from 'vue-i18n';\nimport CloseIcon from 'vue-material-design-icons/Close.vue';\n\nconst ClassicInputText = defineAsyncComponent(getClassicInputText);\n\nconst { t } = useI18n();\n\n///////////////////////////////\n// Menu\n///////////////////////////////\nconst props = defineProps<{\n open?: boolean;\n}>();\n\nconst emit = defineEmits<{\n (e: 'update:open', open: boolean): void;\n}>();\n\nconst menuNav = useTemplateRef('menuNav');\nlet previousFocus: HTMLElement | null = null;\n\nwatch(() => props.open, async open => {\n if (open) {\n previousFocus = document.activeElement as HTMLElement | null;\n setTimeout(() => document.addEventListener('click', openOnClick), 200);\n document.addEventListener('keydown', closeOnEscape);\n // Wait for the menu to no longer be inert before focusing\n await nextTick();\n menuNav.value?.querySelector('input')?.focus();\n } else {\n removeListeners();\n // Only give focus back if it would otherwise be lost (inside the\n // closed menu, or on body), to avoid stealing it after a click\n // elsewhere\n const active = document.activeElement;\n if (active === document.body || menuNav.value?.contains(active)) {\n previousFocus?.focus();\n }\n }\n});\n\nonUnmounted(removeListeners);\n\nfunction removeListeners(): void {\n document.removeEventListener('click', openOnClick);\n document.removeEventListener('keydown', closeOnEscape);\n}\n\nfunction close(): void {\n emit('update:open', false);\n}\n\nfunction openOnClick(event: MouseEvent) {\n const menu = menuNav.value;\n if (props.open && event.target && !menu?.contains(event.target as Node)) {\n close();\n }\n}\n\nfunction closeOnEscape(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n close();\n }\n}\n\nfunction prefersReducedMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n///////////////////////////////\n// Display list\n///////////////////////////////\nconst search = ref('');\nconst authStore = useAuthStore();\nconst { subOrganisations, selectSubOrganisation } = useSubOrganisations(toRef(authStore, 'authOrgaId'));\n\nfunction normalize(str: string): string {\n // Separate accented character in letter/diacritic, then remove the\n // diacritic\n return str.toUpperCase().normalize(\"NFD\").replace(/\\p{Diacritic}/gu, '');\n}\n\nconst normalizedSearch = computed((): string => {\n return normalize(search.value);\n});\n\nconst userSubOrgas = computed((): Array<SubOrganisation> => {\n const userScope = authStore.userScope;\n return subOrganisations.value\n .filter(sub => sub.name.includes(normalizedSearch.value))\n .filter(sub => userScope.includes(sub.id));\n});\n\nconst showFirstList = computed((): boolean => {\n return userSubOrgas.value.length > 0;\n});\n\nconst secondListTitle = computed((): string => {\n const userScope = authStore.userScope;\n if (userScope.length === 0) {\n return t('RightsScopeMenu - Second list - Title unscoped');\n } else {\n return t('RightsScopeMenu - Second list - Title scoped');\n }\n});\n\nconst showLetters = computed((): boolean => {\n return subOrganisations.value.length > 10;\n});\n\nconst subOrgaByLetter = computed((): Map<string, Array<SubOrganisation>> => {\n const data: Map<string, Array<SubOrganisation>> = new Map();\n\n const filtered = subOrganisations.value\n .filter(sub => sub.name.includes(normalizedSearch.value))\n .filter(sub => !userSubOrgas.value.includes(sub));\n\n if (showLetters.value) {\n filtered.forEach((sub: SubOrganisation) => {\n const firstLetter = sub.name[0];\n if (data.has(firstLetter)) {\n const present = data.get(firstLetter);\n present!.push(sub);\n } else {\n data.set(firstLetter, [sub]);\n }\n });\n } else {\n data.set(null, filtered);\n }\n\n data.values().forEach(ary => ary.sort((a, b) => a.name.localeCompare(b.name)));\n\n return data;\n});\n\nconst noResult = computed((): boolean => {\n return !showFirstList.value\n && [...subOrgaByLetter.value.values()].every(ary => ary.length === 0);\n});\n\nfunction scrollToLetter(letter: string): void {\n if (!subOrgaByLetter.value.has(letter)) {\n return;\n }\n const container = menuNav.value;\n const target: HTMLElement | null | undefined = container?.querySelector(`#suborga-letter-${letter}`);\n if (container && target) {\n container.scrollTo({\n top: target.offsetTop,\n behavior: prefersReducedMotion() ? 'auto' : 'smooth'\n });\n target.focus({ preventScroll: true });\n }\n}\n\n///////////////////////////////\n// Sub orga selection\n///////////////////////////////\nfunction select(org: SubOrganisation): void {\n selectSubOrganisation(org);\n emit('update:open', false);\n}\n</script>\n\n<style scoped lang=\"scss\">\n#suborga-list-menu-btn {\n transition: rotate 0.3s ease-out;\n \n &.active {\n rotate: 90deg;\n }\n}\n\n#suborga-list-menu {\n z-index: 100;\n \n --width: 30dvw;\n\n // Positioning\n position: fixed;\n left: 0;\n top: 0;\n width: var(--width);\n height: 100dvh;\n\n // Margins\n padding: 1.5em 0;\n\n // Overflow\n overflow-y: auto;\n\n // Style\n background-color: white;\n //border-radius: 0 var(--octopus-border-radius);\n border-right: 2px solid var(--octopus-primary);\n\n // Animation\n @media (prefers-reduced-motion: no-preference) {\n transition: left 0.6s ease-out;\n }\n\n &.shown {\n left: 0;\n }\n\n &:not(.shown) {\n left: calc(var(--width) * -1);\n }\n\n @media(width <= 960px) {\n --width: 100dvw;\n }\n}\n\n.close-btn {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n\nh4 {\n margin-left: 10px;\n color: var(--octopus-primary);\n}\n\n.letter {\n color: var(--pm-accent);\n font-weight: bold;\n font-size: 1em;\n background-color: oklch(from var(--pm-accent) l c h / 15%);\n}\n\n.search {\n padding: 0 1rem;\n\n h3 {\n color: var(--pm-accent);\n text-align: center;\n }\n}\n\n.letters {\n display: grid;\n grid-template-columns: repeat(9, 28px);\n width: fit-content;\n margin: auto;\n\n .letter {\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n color: black;\n margin: 7px 0 8px;\n width: 24px;\n height: 24px;\n border-radius: 8px;\n font-size: 12px;\n padding: 0 !important;\n cursor: pointer;\n\n &:disabled {\n background-color: #EBF3FE;\n cursor: not-allowed;\n }\n }\n}\n\n.suborga-list {\n .letter {\n padding: 0.1rem 1rem;\n color: var(--octopus-primary);\n }\n\n .suborga {\n display: block;\n padding: 0.5rem 1.4rem;\n cursor: pointer;\n\n &:not(:last-child) {\n border-bottom: 1px solid var(--octopus-primary-really-transparent);\n }\n }\n}\n</style>\n","<template>\n <div class=\"top-bar-grid header-content\" :class=\"{ scrolled: titleIsDisplayed }\">\n <div class=\"d-flex align-items-center\">\n \n <router-link\n class=\"top-bar-logo d-block\"\n :to=\"{\n name: 'home',\n query: getQueriesRouter('home'),\n }\"\n :title=\"t('Home')\"\n >\n <img\n v-if=\"!filterStore.filterOrgaId || '' === imgUrl\"\n :src=\"logoUrl\"\n aria-hidden=\"true\"\n alt=\"\"\n width=\"140\"\n height=\"50\"\n title=\"Logo\"\n :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n >\n <img\n v-else\n :src=\"useProxyImageUrl(imgUrl, '', '80')\"\n aria-hidden=\"true\"\n alt=\"\"\n class=\"client-logo\"\n title=\"Logo\"\n :class=\"generalStore.platformEducation ? 'education-logo' : ''\"\n >\n </router-link>\n\n <RightsScopeMenu v-model:open=\"menuOpen\" />\n <RightsScopeSelector\n class=\"ms-4\"\n :open=\"menuOpen\"\n @change=\"menuOpen = true\"\n />\n </div>\n\n <h1 v-if=\"titleIsDisplayed\" class=\"text-truncate m-0 align-self-center\">\n {{ titleDisplay }}\n </h1>\n\n \n <div\n class=\"d-flex right-section\"\n :class=\"[\n inContentDisplayPage || isPhone\n ? 'flex-row-reverse align-items-center'\n : 'flex-column align-items-end',\n ]\"\n >\n \n <template v-if=\"filterStore.filterOrgaId && '' !== imgUrl\">\n <img\n v-if=\"authStore.isGarRole\"\n :src=\"logoUrl\"\n aria-hidden=\"true\"\n alt=\"\"\n width=\"100\"\n height=\"29\"\n class=\"ms-2\"\n title=\"Logo\"\n :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n >\n <a\n v-else\n href=\"https://www.saooti.com/\"\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n :title=\"t('New window', {text: 'Saooti'})\"\n >\n <img\n :src=\"logoUrl\"\n aria-hidden=\"true\"\n alt=\"\"\n title=\"Saooti\"\n width=\"100\"\n height=\"29\"\n class=\"ms-2\"\n :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n >\n </a>\n </template>\n\n <div role=\"navigation\" class=\"d-flex align-items-center justify-content-end flex-grow-1\">\n <nav :aria-label=\"t('Site menu')\">\n <ul class=\"d-flex\">\n <template v-for=\"link in routerLinkArray\" :key=\"link.routeName\">\n <li v-if=\"link.condition\" class=\"li-style-none\">\n <router-link\n v-show=\"!isPhone\"\n :to=\"{\n name: link.routeName,\n query: getQueriesRouter(link.routeName),\n }\"\n class=\"link-hover py-2 px-3\"\n >\n {{ link.title }}\n </router-link>\n </li>\n </template>\n </ul>\n </nav>\n <button\n v-show=\"!isPhone && !inContentDisplayPage\"\n id=\"more-dropdown\"\n :title=\"t('More')\"\n class=\"d-flex-column flex-nowrap align-items-center btn-transparent py-2 px-3 text-white\"\n >\n <span class=\"link-hover\">\n {{ t(\"More\") }}\n </span>\n <ChevronDownIcon />\n </button>\n <ClassicPopover\n target=\"more-dropdown\"\n :only-click=\"true\"\n :is-fixed=\"true\"\n :left-pos=\"true\"\n :is-top-layer=\"true\"\n >\n <nav class=\"d-flex flex-column\" :aria-label=\"t('Site menu')\">\n <ul class=\"p-0 m-0\">\n <template v-for=\"link in routerLinkInsideArray\" :key=\"link.routeName\">\n <li\n v-if=\"link.condition\"\n class=\"li-style-none\"\n >\n <router-link\n :to=\"{\n name: link.routeName,\n query: getQueriesRouter(link.routeName),\n }\"\n class=\"p-1 octopus-dropdown-item\"\n >\n {{ link.title }}\n </router-link>\n </li>\n </template>\n </ul>\n </nav>\n </ClassicPopover>\n\n <MobileMenu\n :is-education=\"generalStore.platformEducation\"\n :show=\"mobileMenuDisplay\"\n :not-podcast-and-emission=\"inContentDisplayPage && !scrolled\"\n />\n <HomeDropdown\n :is-education=\"generalStore.platformEducation\"\n :mobile-menu-display=\"mobileMenuDisplay\"\n v-bind=\"options?.homeDropdown\"\n />\n <router-link\n v-show=\"!isPhone && !inContentDisplayPage\"\n :title=\"t('Search')\"\n :to=\"{\n name: 'podcasts',\n }\"\n class=\"btn admin-button m-1 text-blue-octopus\"\n role=\"search\"\n >\n <MagnifyIcon :size=\"30\" />\n </router-link>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport MagnifyIcon from \"vue-material-design-icons/Magnify.vue\";\nimport { useRubriquesFilterComputed } from \"../composable/route/useRubriquesFilterComputed\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport HomeDropdown, { type HomeDropdownProps } from \"./HomeDropdown.vue\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport { useFilterStore } from \"../../stores/FilterStore\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport ClassicPopover from \"../misc/ClassicPopover.vue\";\nimport { defineAsyncComponent, computed, ref } from \"vue\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { useI18n } from \"vue-i18n\";\nimport RightsScopeSelector from \"./RightsScopeSelector.vue\";\nimport RightsScopeMenu from \"./RightsScopeMenu.vue\"; \nconst MobileMenu = defineAsyncComponent(() => import(\"./MobileMenu.vue\"));\n\nexport interface TopBarMainContentOptions {\n homeDropdown?: HomeDropdownProps;\n}\n\nexport interface TopBarMainContentProps {\n isPhone?: boolean;\n titleDisplay?: string;\n scrolled?: boolean;\n};\n\n//Props \nconst props = defineProps<TopBarMainContentProps & {\n /** Props for subcomponents */\n options?: TopBarMainContentOptions;\n}>();\n\n\n//Composables\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { rubriqueQueryParam } = useRubriquesFilterComputed();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\nconst filterStore = useFilterStore();\n\nconst menuOpen = ref(false);\n\n//Computed\nconst mobileMenuDisplay = computed(() => props.isPhone || inContentDisplayPage.value);\nconst titleIsDisplayed = computed(() => inContentDisplayPage.value && props.scrolled && !props.isPhone);\nconst inContentDisplayPage = computed(() => 0 !== props.titleDisplay.length);\nconst routerLinkArray = computed(() => [{\n title: t(\"Radio & Live\"),\n routeName: \"lives\",\n condition:\n !inContentDisplayPage.value &&\n (state.generalParameters.isLiveTab as boolean) &&\n ((filterStore.filterOrgaId && filterStore.filterLive) || !filterStore.filterOrgaId),\n}, {\n title: t(\"Podcasts\"),\n routeName: \"podcasts\",\n condition:\n !inContentDisplayPage.value ||\n (inContentDisplayPage.value && !props.scrolled),\n}, {\n title: t(\"Emissions\"),\n routeName: \"emissions\",\n condition:\n !inContentDisplayPage.value ||\n (inContentDisplayPage.value && !props.scrolled),\n}]);\n\nconst routerLinkInsideArray = computed(() =>{\n return [\n {\n title: t(\"Speakers\"),\n routeName: \"participants\",\n condition: true,\n },\n {\n title: t(\"Playlists\"),\n routeName: \"playlists\",\n condition: true,\n },\n {\n title: t(\"Productors\"),\n routeName: \"productors\",\n condition:\n !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || generalStore.platformEducation),\n },\n ];\n});\nconst logoUrl = computed(() =>{\n if (generalStore.platformEducation) {\n return \"/img/logo_education_white.svg\";\n }\n return props.isPhone\n ? \"/img/logo_octopus_bubble.svg\"\n : \"/img/logo_saooti_play_white.svg\";\n});\nconst imgUrl = computed(() =>{\n if (!filterStore.filterImgUrl?.includes(\"emptypodcast\")){\n return `${filterStore.filterImgUrl}`;\n }\n return \"\";\n});\n \n//Methods\nfunction getQueriesRouter(routeName: string) {\n if (\"podcasts\" !== routeName && \"emissions\" !== routeName && \"home\" !== routeName) {\n return { productor: filterStore.filterOrgaId };\n }\n return {\n productor: filterStore.filterOrgaId,\n iabId: filterStore.filterIab?.id,\n rubriquesId: rubriqueQueryParam.value,\n };\n}\n</script>\n\n<style scoped lang=\"scss\">\n.top-bar-grid {\n display: grid;\n grid-template-columns: 1fr 5fr;\n padding: 0 1rem 0 0.5rem;\n\n &.scrolled {\n grid-template-columns: 1fr 2fr 1fr;\n }\n\n @media (width <= 450px) {\n padding: 0 0.5rem;\n }\n\n .link-hover {\n color: white;\n font-weight: bold;\n font-size: 0.93rem;\n text-decoration: underline;\n text-decoration-color: transparent;\n transition: text-decoration-color 250ms;\n text-underline-offset: 8px;\n\n &.link-hover:hover,\n &.link-hover.router-link-exact-active.router-link-active {\n color: white;\n text-decoration-color: white;\n }\n }\n\n .client-logo {\n border-radius: var(--octopus-border-radius);\n }\n\n .top-bar-logo img {\n max-width: 140px !important;\n max-height: 4rem;\n height: 4rem;\n\n &.education-logo {\n height: auto;\n }\n\n @media (width <= 650px) {\n max-height: 2rem;\n }\n }\n\n .octopus-logo {\n @media (width <= 960px) {\n max-width: 30px !important;\n }\n }\n}\n\n.right-section {\n padding-top: 0.5rem;\n}\n</style>\n","<template>\n <div class=\"top-bar-grid header-content\" :class=\"{ scrolled: titleIsDisplayed }\">\n <div class=\"d-flex align-items-center\">\n \n <router-link\n class=\"top-bar-logo d-block\"\n :to=\"{\n name: 'home',\n query: getQueriesRouter('home'),\n }\"\n :title=\"t('Home')\"\n >\n <img\n v-if=\"!filterStore.filterOrgaId || '' === imgUrl\"\n :src=\"logoUrl\"\n aria-hidden=\"true\"\n alt=\"\"\n width=\"140\"\n height=\"50\"\n title=\"Logo\"\n :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n >\n <img\n v-else\n :src=\"useProxyImageUrl(imgUrl, '', '80')\"\n aria-hidden=\"true\"\n alt=\"\"\n class=\"client-logo\"\n title=\"Logo\"\n :class=\"generalStore.platformEducation ? 'education-logo' : ''\"\n >\n </router-link>\n\n <RightsScopeMenu v-model:open=\"menuOpen\" />\n <RightsScopeSelector\n class=\"ms-4\"\n :open=\"menuOpen\"\n @change=\"menuOpen = true\"\n />\n </div>\n\n <h1 v-if=\"titleIsDisplayed\" class=\"text-truncate m-0 align-self-center\">\n {{ titleDisplay }}\n </h1>\n\n \n <div\n class=\"d-flex right-section\"\n :class=\"[\n inContentDisplayPage || isPhone\n ? 'flex-row-reverse align-items-center'\n : 'flex-column align-items-end',\n ]\"\n >\n \n <template v-if=\"filterStore.filterOrgaId && '' !== imgUrl\">\n <img\n v-if=\"authStore.isGarRole\"\n :src=\"logoUrl\"\n aria-hidden=\"true\"\n alt=\"\"\n width=\"100\"\n height=\"29\"\n class=\"ms-2\"\n title=\"Logo\"\n :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n >\n <a\n v-else\n href=\"https://www.saooti.com/\"\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n :title=\"t('New window', {text: 'Saooti'})\"\n >\n <img\n :src=\"logoUrl\"\n aria-hidden=\"true\"\n alt=\"\"\n title=\"Saooti\"\n width=\"100\"\n height=\"29\"\n class=\"ms-2\"\n :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n >\n </a>\n </template>\n\n <div role=\"navigation\" class=\"d-flex align-items-center justify-content-end flex-grow-1\">\n <nav :aria-label=\"t('Site menu')\">\n <ul class=\"d-flex\">\n <template v-for=\"link in routerLinkArray\" :key=\"link.routeName\">\n <li v-if=\"link.condition\" class=\"li-style-none\">\n <router-link\n v-show=\"!isPhone\"\n :to=\"{\n name: link.routeName,\n query: getQueriesRouter(link.routeName),\n }\"\n class=\"link-hover py-2 px-3\"\n >\n {{ link.title }}\n </router-link>\n </li>\n </template>\n </ul>\n </nav>\n <button\n v-show=\"!isPhone && !inContentDisplayPage\"\n id=\"more-dropdown\"\n :title=\"t('More')\"\n class=\"d-flex-column flex-nowrap align-items-center btn-transparent py-2 px-3 text-white\"\n >\n <span class=\"link-hover\">\n {{ t(\"More\") }}\n </span>\n <ChevronDownIcon />\n </button>\n <ClassicPopover\n target=\"more-dropdown\"\n :only-click=\"true\"\n :is-fixed=\"true\"\n :left-pos=\"true\"\n :is-top-layer=\"true\"\n >\n <nav class=\"d-flex flex-column\" :aria-label=\"t('Site menu')\">\n <ul class=\"p-0 m-0\">\n <template v-for=\"link in routerLinkInsideArray\" :key=\"link.routeName\">\n <li\n v-if=\"link.condition\"\n class=\"li-style-none\"\n >\n <router-link\n :to=\"{\n name: link.routeName,\n query: getQueriesRouter(link.routeName),\n }\"\n class=\"p-1 octopus-dropdown-item\"\n >\n {{ link.title }}\n </router-link>\n </li>\n </template>\n </ul>\n </nav>\n </ClassicPopover>\n\n <MobileMenu\n :is-education=\"generalStore.platformEducation\"\n :show=\"mobileMenuDisplay\"\n :not-podcast-and-emission=\"inContentDisplayPage && !scrolled\"\n />\n <HomeDropdown\n :is-education=\"generalStore.platformEducation\"\n :mobile-menu-display=\"mobileMenuDisplay\"\n v-bind=\"options?.homeDropdown\"\n />\n <router-link\n v-show=\"!isPhone && !inContentDisplayPage\"\n :title=\"t('Search')\"\n :to=\"{\n name: 'podcasts',\n }\"\n class=\"btn admin-button m-1 text-blue-octopus\"\n role=\"search\"\n >\n <MagnifyIcon :size=\"30\" />\n </router-link>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport MagnifyIcon from \"vue-material-design-icons/Magnify.vue\";\nimport { useRubriquesFilterComputed } from \"../composable/route/useRubriquesFilterComputed\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport HomeDropdown, { type HomeDropdownProps } from \"./HomeDropdown.vue\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport { useFilterStore } from \"../../stores/FilterStore\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport ClassicPopover from \"../misc/ClassicPopover.vue\";\nimport { defineAsyncComponent, computed, ref } from \"vue\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { useI18n } from \"vue-i18n\";\nimport RightsScopeSelector from \"./RightsScopeSelector.vue\";\nimport RightsScopeMenu from \"./RightsScopeMenu.vue\"; \nconst MobileMenu = defineAsyncComponent(() => import(\"./MobileMenu.vue\"));\n\nexport interface TopBarMainContentOptions {\n homeDropdown?: HomeDropdownProps;\n}\n\nexport interface TopBarMainContentProps {\n isPhone?: boolean;\n titleDisplay?: string;\n scrolled?: boolean;\n};\n\n//Props \nconst props = defineProps<TopBarMainContentProps & {\n /** Props for subcomponents */\n options?: TopBarMainContentOptions;\n}>();\n\n\n//Composables\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { rubriqueQueryParam } = useRubriquesFilterComputed();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\nconst filterStore = useFilterStore();\n\nconst menuOpen = ref(false);\n\n//Computed\nconst mobileMenuDisplay = computed(() => props.isPhone || inContentDisplayPage.value);\nconst titleIsDisplayed = computed(() => inContentDisplayPage.value && props.scrolled && !props.isPhone);\nconst inContentDisplayPage = computed(() => 0 !== props.titleDisplay.length);\nconst routerLinkArray = computed(() => [{\n title: t(\"Radio & Live\"),\n routeName: \"lives\",\n condition:\n !inContentDisplayPage.value &&\n (state.generalParameters.isLiveTab as boolean) &&\n ((filterStore.filterOrgaId && filterStore.filterLive) || !filterStore.filterOrgaId),\n}, {\n title: t(\"Podcasts\"),\n routeName: \"podcasts\",\n condition:\n !inContentDisplayPage.value ||\n (inContentDisplayPage.value && !props.scrolled),\n}, {\n title: t(\"Emissions\"),\n routeName: \"emissions\",\n condition:\n !inContentDisplayPage.value ||\n (inContentDisplayPage.value && !props.scrolled),\n}]);\n\nconst routerLinkInsideArray = computed(() =>{\n return [\n {\n title: t(\"Speakers\"),\n routeName: \"participants\",\n condition: true,\n },\n {\n title: t(\"Playlists\"),\n routeName: \"playlists\",\n condition: true,\n },\n {\n title: t(\"Productors\"),\n routeName: \"productors\",\n condition:\n !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || generalStore.platformEducation),\n },\n ];\n});\nconst logoUrl = computed(() =>{\n if (generalStore.platformEducation) {\n return \"/img/logo_education_white.svg\";\n }\n return props.isPhone\n ? \"/img/logo_octopus_bubble.svg\"\n : \"/img/logo_saooti_play_white.svg\";\n});\nconst imgUrl = computed(() =>{\n if (!filterStore.filterImgUrl?.includes(\"emptypodcast\")){\n return `${filterStore.filterImgUrl}`;\n }\n return \"\";\n});\n \n//Methods\nfunction getQueriesRouter(routeName: string) {\n if (\"podcasts\" !== routeName && \"emissions\" !== routeName && \"home\" !== routeName) {\n return { productor: filterStore.filterOrgaId };\n }\n return {\n productor: filterStore.filterOrgaId,\n iabId: filterStore.filterIab?.id,\n rubriquesId: rubriqueQueryParam.value,\n };\n}\n</script>\n\n<style scoped lang=\"scss\">\n.top-bar-grid {\n display: grid;\n grid-template-columns: 1fr 5fr;\n padding: 0 1rem 0 0.5rem;\n\n &.scrolled {\n grid-template-columns: 1fr 2fr 1fr;\n }\n\n @media (width <= 450px) {\n padding: 0 0.5rem;\n }\n\n .link-hover {\n color: white;\n font-weight: bold;\n font-size: 0.93rem;\n text-decoration: underline;\n text-decoration-color: transparent;\n transition: text-decoration-color 250ms;\n text-underline-offset: 8px;\n\n &.link-hover:hover,\n &.link-hover.router-link-exact-active.router-link-active {\n color: white;\n text-decoration-color: white;\n }\n }\n\n .client-logo {\n border-radius: var(--octopus-border-radius);\n }\n\n .top-bar-logo img {\n max-width: 140px !important;\n max-height: 4rem;\n height: 4rem;\n\n &.education-logo {\n height: auto;\n }\n\n @media (width <= 650px) {\n max-height: 2rem;\n }\n }\n\n .octopus-logo {\n @media (width <= 960px) {\n max-width: 30px !important;\n }\n }\n}\n\n.right-section {\n padding-top: 0.5rem;\n}\n</style>\n","<template>\n <header\n role=\"banner\"\n class=\"header-saooti-play\"\n :style=\"headerBackgroundImage\"\n :class=\"[generalStore.contentToDisplay ? 'header-img-bg':'bg-gradient', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']\"\n >\n <TopBarMainContent\n :is-phone=\"isPhone\"\n :scrolled=\"scrolled\"\n :title-display=\"titleToDisplay\"\n style=\"height: var(--header-size);\"\n :class=\"headerBackgroundImage.length ? 'header-opacity':''\"\n :options=\"options?.topBarMainContent\"\n />\n </header>\n\n <div\n v-if=\"generalStore.contentToDisplay\"\n class=\"header-content-bg\"\n :style=\"headerBackgroundImage\"\n :class=\"{ scrolled: scrolled, 'header-force-blur':needToBlur }\"\n >\n <div class=\"header-additional-content header-content\">\n <h1 v-if=\"!scrolled\" class=\"text-truncate\">\n {{ titleToDisplay }}\n </h1>\n <SubscribeButtons\n v-if=\"!authStore.isGarRole && content\"\n v-show=\"!scrolled\"\n :content=\"content\"\n :window-width=\"windowWidth\"\n />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport TopBarMainContent, { type TopBarMainContentOptions } from \"./TopBarMainContent.vue\";\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { Canal } from \"@/stores/class/radio/canal\";\nimport axios from \"axios\";\nconst SubscribeButtons = defineAsyncComponent(\n () => import(\"../display/sharing/SubscribeButtons.vue\"),\n);\n\ndefineProps<{\n options?: {\n topBarMainContent?: TopBarMainContentOptions\n }\n}>();\n\n//Data \nconst scrolled = ref(false);\nconst oldScrollY = ref(0);\nconst minScroll = ref(0);\nconst headerBackgroundImage = ref(\"\");\nconst needToBlur = ref(false);\n\n\n//Composables\nconst { isPhone, windowWidth } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\n\n//Computed\nconst titleToDisplay = computed(() => {\n if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n return (generalStore.contentToDisplay as Podcast).emission.name;\n }\n if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n return (generalStore.contentToDisplay as Playlist).title;\n }\n if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n return (generalStore.contentToDisplay as Emission).name;\n }\n if ((generalStore.contentToDisplay as Canal)?.id) {\n return (generalStore.contentToDisplay as Canal).name;\n }\n return \"\";\n});\n\n/** The element displayed by the subscribe buttons */\nconst content = computed(() => {\n if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n return (generalStore.contentToDisplay as Podcast).emission;\n }\n if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n return generalStore.contentToDisplay as Emission;\n }\n if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n return generalStore.contentToDisplay as Playlist;\n }\n return null;\n});\n\n//Watch\nwatch(()=>generalStore.contentToDisplay, async () => {\n if(!generalStore.contentToDisplay){\n headerBackgroundImage.value = \"\";\n needToBlur.value = false;\n return;\n }\n const widthAsked = window.innerWidth > 960 ? \"1600\":\"1000\";\n const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl, widthAsked, undefined, true);\n try {\n const result = await axios.get(proxyUrl);\n headerBackgroundImage.value = `background-image: url('${result.data}');`;\n needToBlur.value = result.data === generalStore.contentToDisplay.imageUrl;\n } catch {\n if (generalStore.contentToDisplay.imageUrl) {\n const url = encodeURI(generalStore.contentToDisplay.imageUrl);\n headerBackgroundImage.value = `background-image: url('${url}');`;\n needToBlur.value = true;\n } else {\n headerBackgroundImage.value = '';\n }\n }\n}, {deep: true, immediate: true});\n\n\nonMounted(()=>{\n window.addEventListener(\"scroll\", handleScroll);\n})\nonBeforeUnmount(() => {\n window.removeEventListener(\"scroll\", handleScroll);\n})\n\n\n//Methods\nfunction handleScroll(): void {\n if (\n window.scrollY - oldScrollY.value > 0 &&\n window.scrollY > 1 &&\n document.body.offsetHeight - window.innerHeight > 40\n ) {\n if (!scrolled.value) {\n scrolled.value = true;\n minScroll.value = 0;\n }\n } else if (\n window.scrollY - oldScrollY.value < 0 &&\n window.scrollY < 1 &&\n minScroll.value > 20\n ) {\n scrolled.value = false;\n minScroll.value = 0;\n }\n oldScrollY.value = window.scrollY;\n if (minScroll.value < window.scrollY) {\n minScroll.value = window.scrollY;\n }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n --header-size: 5rem;\n --header-additional-content-size: 22rem;\n @media (width <= 650px) {\n --header-size: 3.5rem;\n }\n @media (width <= 550px) {\n --header-additional-content-size: 13rem;\n }\n .header-saooti-play{\n z-index: 11;\n position: sticky;\n top: 0;\n background-color: black;\n &.header-img-bg{\n background-position: center -20vw;\n background-repeat: no-repeat;\n background-size: cover;\n }\n &.bg-gradient, &.scrolled{\n box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; \n }\n }\n .header-content-bg{\n background-position: center calc(calc(var(--header-size) * -1) - 20vw);\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n display: flex;\n background-color: black;\n transition: height 0.7s;\n height: calc(var(--header-additional-content-size) - var(--header-size));\n @starting-style {\n height: 0rem;\n }\n &.scrolled {\n height: 0rem;\n }\n }\n .header-additional-content{\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n width: 100%;\n }\n .header-additional-content, .header-opacity{\n background: oklch(0 0 0 / 0.5);\n }\n .header-force-blur .header-additional-content, .header-force-blur .header-opacity{\n backdrop-filter: blur(8px);\n }\n .header-content{\n *:focus-visible {\n box-shadow: 0 0 10px 1px white !important;\n }\n h1 {\n color: white !important;\n font-size: 1.8rem;\n margin: 2rem 5rem;\n @media (width <= 550px) {\n font-size: 1rem;\n margin: 1rem 0.5rem 0.5rem;\n }\n }\n .admin-button:hover,\n .share-btn:hover {\n background: white;\n }\n }\n}\n</style>\n","<template>\n <header\n role=\"banner\"\n class=\"header-saooti-play\"\n :style=\"headerBackgroundImage\"\n :class=\"[generalStore.contentToDisplay ? 'header-img-bg':'bg-gradient', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']\"\n >\n <TopBarMainContent\n :is-phone=\"isPhone\"\n :scrolled=\"scrolled\"\n :title-display=\"titleToDisplay\"\n style=\"height: var(--header-size);\"\n :class=\"headerBackgroundImage.length ? 'header-opacity':''\"\n :options=\"options?.topBarMainContent\"\n />\n </header>\n\n <div\n v-if=\"generalStore.contentToDisplay\"\n class=\"header-content-bg\"\n :style=\"headerBackgroundImage\"\n :class=\"{ scrolled: scrolled, 'header-force-blur':needToBlur }\"\n >\n <div class=\"header-additional-content header-content\">\n <h1 v-if=\"!scrolled\" class=\"text-truncate\">\n {{ titleToDisplay }}\n </h1>\n <SubscribeButtons\n v-if=\"!authStore.isGarRole && content\"\n v-show=\"!scrolled\"\n :content=\"content\"\n :window-width=\"windowWidth\"\n />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport TopBarMainContent, { type TopBarMainContentOptions } from \"./TopBarMainContent.vue\";\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { Canal } from \"@/stores/class/radio/canal\";\nimport axios from \"axios\";\nconst SubscribeButtons = defineAsyncComponent(\n () => import(\"../display/sharing/SubscribeButtons.vue\"),\n);\n\ndefineProps<{\n options?: {\n topBarMainContent?: TopBarMainContentOptions\n }\n}>();\n\n//Data \nconst scrolled = ref(false);\nconst oldScrollY = ref(0);\nconst minScroll = ref(0);\nconst headerBackgroundImage = ref(\"\");\nconst needToBlur = ref(false);\n\n\n//Composables\nconst { isPhone, windowWidth } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\n\n//Computed\nconst titleToDisplay = computed(() => {\n if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n return (generalStore.contentToDisplay as Podcast).emission.name;\n }\n if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n return (generalStore.contentToDisplay as Playlist).title;\n }\n if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n return (generalStore.contentToDisplay as Emission).name;\n }\n if ((generalStore.contentToDisplay as Canal)?.id) {\n return (generalStore.contentToDisplay as Canal).name;\n }\n return \"\";\n});\n\n/** The element displayed by the subscribe buttons */\nconst content = computed(() => {\n if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n return (generalStore.contentToDisplay as Podcast).emission;\n }\n if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n return generalStore.contentToDisplay as Emission;\n }\n if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n return generalStore.contentToDisplay as Playlist;\n }\n return null;\n});\n\n//Watch\nwatch(()=>generalStore.contentToDisplay, async () => {\n if(!generalStore.contentToDisplay){\n headerBackgroundImage.value = \"\";\n needToBlur.value = false;\n return;\n }\n const widthAsked = window.innerWidth > 960 ? \"1600\":\"1000\";\n const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl, widthAsked, undefined, true);\n try {\n const result = await axios.get(proxyUrl);\n headerBackgroundImage.value = `background-image: url('${result.data}');`;\n needToBlur.value = result.data === generalStore.contentToDisplay.imageUrl;\n } catch {\n if (generalStore.contentToDisplay.imageUrl) {\n const url = encodeURI(generalStore.contentToDisplay.imageUrl);\n headerBackgroundImage.value = `background-image: url('${url}');`;\n needToBlur.value = true;\n } else {\n headerBackgroundImage.value = '';\n }\n }\n}, {deep: true, immediate: true});\n\n\nonMounted(()=>{\n window.addEventListener(\"scroll\", handleScroll);\n})\nonBeforeUnmount(() => {\n window.removeEventListener(\"scroll\", handleScroll);\n})\n\n\n//Methods\nfunction handleScroll(): void {\n if (\n window.scrollY - oldScrollY.value > 0 &&\n window.scrollY > 1 &&\n document.body.offsetHeight - window.innerHeight > 40\n ) {\n if (!scrolled.value) {\n scrolled.value = true;\n minScroll.value = 0;\n }\n } else if (\n window.scrollY - oldScrollY.value < 0 &&\n window.scrollY < 1 &&\n minScroll.value > 20\n ) {\n scrolled.value = false;\n minScroll.value = 0;\n }\n oldScrollY.value = window.scrollY;\n if (minScroll.value < window.scrollY) {\n minScroll.value = window.scrollY;\n }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n --header-size: 5rem;\n --header-additional-content-size: 22rem;\n @media (width <= 650px) {\n --header-size: 3.5rem;\n }\n @media (width <= 550px) {\n --header-additional-content-size: 13rem;\n }\n .header-saooti-play{\n z-index: 11;\n position: sticky;\n top: 0;\n background-color: black;\n &.header-img-bg{\n background-position: center -20vw;\n background-repeat: no-repeat;\n background-size: cover;\n }\n &.bg-gradient, &.scrolled{\n box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; \n }\n }\n .header-content-bg{\n background-position: center calc(calc(var(--header-size) * -1) - 20vw);\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n display: flex;\n background-color: black;\n transition: height 0.7s;\n height: calc(var(--header-additional-content-size) - var(--header-size));\n @starting-style {\n height: 0rem;\n }\n &.scrolled {\n height: 0rem;\n }\n }\n .header-additional-content{\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n width: 100%;\n }\n .header-additional-content, .header-opacity{\n background: oklch(0 0 0 / 0.5);\n }\n .header-force-blur .header-additional-content, .header-force-blur .header-opacity{\n backdrop-filter: blur(8px);\n }\n .header-content{\n *:focus-visible {\n box-shadow: 0 0 10px 1px white !important;\n }\n h1 {\n color: white !important;\n font-size: 1.8rem;\n margin: 2rem 5rem;\n @media (width <= 550px) {\n font-size: 1rem;\n margin: 1rem 0.5rem 0.5rem;\n }\n }\n .admin-button:hover,\n .share-btn:hover {\n background: white;\n }\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDA,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,YAAY,eAAa;EAC/B,MAAM,aAAa,MAAM,WAAW,YAAY;EAChD,MAAM,aAAa,IAAqB,IAAI;EAC5C,MAAM,EACF,yBACA,kBACA,4BACA,oBAAoB,UAAU;EAWlC,MAAM,YAAY,YAAY;GAC1B,WAAW,QAAQ,MAAM,aAAa,0BAA0B,WAAW,KAAK;EACpF,GAAG,EAAE,WAAW,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;CCxEd,OAAM;;qBAEA,OAAM,aAAY;qBAGnB,OAAM,eAAc;;;;CAUb,OAAM;;;;CAIG,OAAM;;;QApBrB,OAAA,iBAAiB,SAAM,KAAA,UAAA,GADjC,mBAsCM,OAtCN,cAsCM,CAlCF,mBAEO,QAFP,cAEO,gBADA,OAAA,EAAC,+BAAA,EAAA,YAA8C,OAAA,YAAY,MAAK,CAAA,CAAA,GAAA,CAAA,GAEvE,mBA8BM,OA9BN,cA8BM,CA7BF,mBAiBS,UAAA;EAhBL,MAAK;EACL,OAAM;EACN,iBAAc;EACb,iBAAe,OAAA;EACf,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,MAAK,QAAA;KAGH,OAAA,2BAAA,UAAA,GADV,mBAKO,QALP,cAKO,gBADA,OAAA,wBAAwB,IAAI,GAAA,CAAA,MAAA,UAAA,GAEnC,mBAEO,QAFP,cAEO,gBADA,OAAA,EAAC,iCAAA,CAAA,GAAA,CAAA,IAER,YAAyB,OAAA,aAAA,EAAf,OAAM,OAAM,CAAA,CAAA,GAAA,GAAA,YAAA,GAGhB,OAAA,2BAAA,UAAA,GADV,mBAUS,UAAA;;EARL,MAAK;EACL,OAAM;EACL,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,OAAA,2BAAA,OAAA,wBAAA,GAAA,IAAA;KAER,YAGE,OAAA,cAAA;EAFE,OAAM;EACL,OAAO,OAAA,EAAC,oCAAA;;;;;;;;;;;;;;;;;;;EC2D7B,MAAM,mBAAmB,qBAAqB,mBAAmB;EAEjE,MAAM,EAAE,MAAM,QAAQ;EAKtB,MAAM,QAAQ;EAId,MAAM,OAAO;EAIb,MAAM,UAAU,eAAe,SAAS;EACxC,IAAI,gBAAoC;EAExC,YAAY,MAAM,MAAM,OAAM,SAAQ;GAClC,IAAI,MAAM;IACN,gBAAgB,SAAS;IACzB,iBAAiB,SAAS,iBAAiB,SAAS,WAAW,GAAG,GAAG;IACrE,SAAS,iBAAiB,WAAW,aAAa;IAElD,MAAM,SAAS;IACf,QAAQ,OAAO,cAAc,OAAO,GAAG,MAAM;GACjD,OAAO;IACH,gBAAgB;IAIhB,MAAM,SAAS,SAAS;IACxB,IAAI,WAAW,SAAS,QAAQ,QAAQ,OAAO,SAAS,MAAM,GAC1D,eAAe,MAAM;GAE7B;EACJ,CAAC;EAED,YAAY,eAAe;EAE3B,SAAS,kBAAwB;GAC7B,SAAS,oBAAoB,SAAS,WAAW;GACjD,SAAS,oBAAoB,WAAW,aAAa;EACzD;EAEA,SAAS,QAAc;GACnB,KAAK,eAAe,KAAK;EAC7B;EAEA,SAAS,YAAY,OAAmB;GACpC,MAAM,OAAO,QAAQ;GACrB,IAAI,MAAM,QAAQ,MAAM,UAAU,CAAC,MAAM,SAAS,MAAM,MAAc,GAClE,MAAM;EAEd;EAEA,SAAS,cAAc,OAA4B;GAC/C,IAAI,MAAM,QAAQ,UACd,MAAM;EAEd;EAEA,SAAS,uBAAgC;GACrC,OAAO,OAAO,WAAW,kCAAkC,EAAE;EACjE;EAKA,MAAM,SAAS,IAAI,EAAE;EACrB,MAAM,YAAY,aAAa;EAC/B,MAAM,EAAE,kBAAkB,0BAA0B,oBAAoB,MAAM,WAAW,YAAY,CAAC;EAEtG,SAAS,UAAU,KAAqB;GAGpC,OAAO,IAAI,YAAY,EAAE,UAAU,KAAK,EAAE,QAAQ,mBAAmB,EAAE;EAC3E;EAEA,MAAM,mBAAmB,eAAuB;GAC5C,OAAO,UAAU,OAAO,KAAK;EACjC,CAAC;EAED,MAAM,eAAe,eAAuC;GACxD,MAAM,YAAY,UAAU;GAC5B,OAAO,iBAAiB,MACnB,QAAO,QAAO,IAAI,KAAK,SAAS,iBAAiB,KAAK,CAAC,EACvD,QAAO,QAAO,UAAU,SAAS,IAAI,EAAE,CAAC;EACjD,CAAC;EAED,MAAM,gBAAgB,eAAwB;GAC1C,OAAO,aAAa,MAAM,SAAS;EACvC,CAAC;EAED,MAAM,kBAAkB,eAAuB;GAE3C,IADkB,UAAU,UACd,WAAW,GACrB,OAAO,EAAE,gDAAgD;QAEzD,OAAO,EAAE,8CAA8C;EAE/D,CAAC;EAED,MAAM,cAAc,eAAwB;GACxC,OAAO,iBAAiB,MAAM,SAAS;EAC3C,CAAC;EAED,MAAM,kBAAkB,eAAoD;GACxE,MAAM,uBAA4C,IAAI,IAAI;GAE1D,MAAM,WAAW,iBAAiB,MAC7B,QAAO,QAAO,IAAI,KAAK,SAAS,iBAAiB,KAAK,CAAC,EACvD,QAAO,QAAO,CAAC,aAAa,MAAM,SAAS,GAAG,CAAC;GAEpD,IAAI,YAAY,OACZ,SAAS,SAAS,QAAyB;IACvC,MAAM,cAAc,IAAI,KAAK;IAC7B,IAAI,KAAK,IAAI,WAAW,GAEpB,KADqB,IAAI,WACzB,EAAS,KAAK,GAAG;SAEjB,KAAK,IAAI,aAAa,CAAC,GAAG,CAAC;GAEnC,CAAC;QAED,KAAK,IAAI,MAAM,QAAQ;GAG3B,KAAK,OAAO,EAAE,SAAQ,QAAO,IAAI,MAAM,GAAG,MAAM,EAAE,KAAK,cAAc,EAAE,IAAI,CAAC,CAAC;GAE7E,OAAO;EACX,CAAC;EAED,MAAM,WAAW,eAAwB;GACrC,OAAO,CAAC,cAAc,SACf,CAAC,GAAG,gBAAgB,MAAM,OAAO,CAAC,EAAE,OAAM,QAAO,IAAI,WAAW,CAAC;EAC5E,CAAC;EAED,SAAS,eAAe,QAAsB;GAC1C,IAAI,CAAC,gBAAgB,MAAM,IAAI,MAAM,GACjC;GAEJ,MAAM,YAAY,QAAQ;GAC1B,MAAM,SAAyC,WAAW,cAAc,mBAAmB,QAAQ;GACnG,IAAI,aAAa,QAAQ;IACrB,UAAU,SAAS;KACf,KAAK,OAAO;KACZ,UAAU,qBAAqB,IAAI,SAAS;IAChD,CAAC;IACD,OAAO,MAAM,EAAE,eAAe,KAAK,CAAC;GACxC;EACJ;EAKA,SAAS,OAAO,KAA4B;GACxC,sBAAsB,GAAG;GACzB,KAAK,eAAe,KAAK;EAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBC5Oa,OAAM,SAAQ;qBACX,IAAG,0BAAyB;;;CAUV,OAAM;;;qBAY3B,OAAM,eAAc;;;CAGG,OAAM;;;;;;;;;;CAoC/B,MAAK;CAAS,OAAM;;;qBA9E3B,mBAmFM,OAAA;EAlFF,IAAG;EACH,KAAI;EACJ,MAAK;EACL,mBAAgB;EACf,OAAK,eAAA,EAAA,OAAW,OAAA,KAAI,CAAA;EACpB,OAAK,CAAG,OAAA;;EAET,mBAMS,UAAA;GALL,MAAK;GACL,OAAM;GACL,SAAO,OAAA;MAER,YAAiC,OAAA,cAAA,EAArB,OAAO,OAAA,EAAC,OAAA,EAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EAGxB,mBASM,OATN,cASM,CARF,mBAEK,MAFL,cAEK,gBADE,OAAA,EAAC,yBAAA,CAAA,GAAA,CAAA,GAER,YAIE,OAAA,qBAAA;GAHU,aAAW,OAAA;8DAAA,OAAA,SAAM;GACxB,aAAa,OAAA,EAAC,0BAAA;GACf,eAAA;;EAIG,OAAA,iBAAA,UAAA,GAAX,mBAUM,OAVN,cAUM,CATF,mBAAwD,MAAA,MAAA,gBAAjD,OAAA,EAAC,sCAAA,CAAA,GAAA,CAAA,IAAA,UAAA,IAAA,GACR,mBAOO,UAAA,MAAA,WANe,OAAA,eAAX,YAAO;uBADlB,mBAOO,QAAA;IALF,KAAK,QAAQ;IACd,OAAM;IACL,UAAK,WAAE,OAAA,OAAO,OAAO;sBAEnB,QAAQ,IAAI,GAAA,GAAA,YAAA;;EAIvB,mBAqCM,OArCN,cAqCM;GApCF,mBAA8B,MAAA,MAAA,gBAAvB,OAAA,eAAe,GAAA,CAAA;GAEX,OAAA,eAAA,UAAA,GAAX,mBAYM,OAZN,cAYM,EAAA,UAAA,GAXF,mBAUS,UAAA,MAAA,WATY,+BAAV,WAAM;WADjB,mBAUS,UAAA;KARJ,KAAK;KACN,MAAK;KACL,OAAM;KACL,OAAO,OAAA,gBAAgB,IAAI,MAAM,IAAI,KAAA,IAAY,OAAA,EAAC,oDAAA;KAClD,UAAQ,CAAG,OAAA,gBAAgB,IAAI,MAAM;KACrC,UAAK,WAAE,OAAA,eAAe,MAAM;uBAE1B,MAAM,GAAA,GAAA,YAAA;;qBAIjB,mBAmBM,UAAA,MAAA,WAlBmC,OAAA,kBAAe,CAA5C,QAAQ,sBAAgB;wBADpC,mBAmBM,OAAA,EAjBD,KAAG,cAAgB,OAAA,GAAA,CAEpB,mBAMM,OAAA;KALD,IAAE,oBAAsB;KACzB,OAAM;KACN,UAAS;uBAEN,MAAM,GAAA,GAAA,YAAA,IAAA,UAAA,IAAA,GAEb,mBAOO,UAAA,MAAA,WANe,mBAAX,YAAO;yBADlB,mBAOO,QAAA;MALF,KAAK,QAAQ;MACd,OAAM;MACL,UAAK,WAAE,OAAA,OAAO,OAAO;wBAEnB,QAAQ,IAAI,GAAA,GAAA,aAAA;;;;EAK3B,mBAII,KAJJ,eAII,CAHgB,OAAA,YAAA,UAAA,GAAhB,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBADJ,OAAA,EAAC,6BAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EC0GpB,MAAM,aAAa,2BAA2B,OAAO,4BAAmB;EAaxE,MAAM,QAAQ;EAOd,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,EAAE,qBAAqB,cAAc;EAC3C,MAAM,EAAE,uBAAuB,2BAA2B;EAC1D,MAAM,YAAY,eAAa;EAC/B,MAAM,eAAe,gBAAgB;EACrC,MAAM,cAAc,eAAe;EAEnC,MAAM,WAAW,IAAI,KAAK;EAG1B,MAAM,oBAAoB,eAAe,MAAM,WAAW,qBAAqB,KAAK;EACpF,MAAM,mBAAmB,eAAe,qBAAqB,SAAS,MAAM,YAAY,CAAC,MAAM,OAAO;EACtG,MAAM,uBAAuB,eAAe,MAAM,MAAM,aAAa,MAAM;EAC3E,MAAM,kBAAkB,eAAe;GAAC;IACpC,OAAO,EAAE,cAAc;IACvB,WAAW;IACX,WACI,CAAC,qBAAqB,SACrB,MAAM,kBAAkB,cACvB,YAAY,gBAAgB,YAAY,cAAe,CAAC,YAAY;GAC9E;GAAG;IACC,OAAO,EAAE,UAAU;IACnB,WAAW;IACX,WACI,CAAC,qBAAqB,SACrB,qBAAqB,SAAS,CAAC,MAAM;GAC9C;GAAG;IACC,OAAO,EAAE,WAAW;IACpB,WAAW;IACX,WACI,CAAC,qBAAqB,SACrB,qBAAqB,SAAS,CAAC,MAAM;GAC9C;EAAC,CAAC;EAEF,MAAM,wBAAwB,eAAc;GACxC,OAAO;IACH;KACI,OAAO,EAAE,UAAU;KACnB,WAAW;KACX,WAAW;IACf;IACA;KACI,OAAO,EAAE,WAAW;KACpB,WAAW;KACX,WAAW;IACf;IACA;KACI,OAAO,EAAE,YAAY;KACrB,WAAW;KACX,WACI,CAAC,MAAM,kBAAkB,iBAAiB,CAAC,YAAY,gBAAgB,aAAa;IAC5F;GACJ;EACJ,CAAC;EACD,MAAM,UAAU,eAAc;GAC1B,IAAI,aAAa,mBACb,OAAO;GAEX,OAAO,MAAM,UACP,iCACA;EACV,CAAC;EACD,MAAM,SAAS,eAAc;GACzB,IAAI,CAAC,YAAY,cAAc,SAAS,cAAc,GAClD,OAAO,GAAG,YAAY;GAE1B,OAAO;EACX,CAAC;EAGD,SAAS,iBAAiB,WAAmB;GACzC,IAAI,eAAe,aAAa,gBAAgB,aAAc,WAAW,WACrE,OAAO,EAAE,WAAW,YAAY,aAAa;GAEjD,OAAO;IACH,WAAW,YAAY;IACvB,OAAO,YAAY,WAAW;IAC9B,aAAa,mBAAmB;GACpC;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBC5Ra,OAAM,4BAA2B;;;;;CAuCV,OAAM;;;;;;CA8CzB,MAAK;CAAa,OAAM;;;oBAEjB,OAAM,SAAQ;;;CAEgB,OAAM;;;oBAqBlC,OAAM,aAAY;;oBAahB,OAAM,UAAS;;;CAIP,OAAM;;;;qBAhItC,mBAwKM,OAAA,EAxKD,OAAK,eAAA,CAAC,+BAA6B,EAAA,UAAqB,OAAA,iBAAgB,CAAA,CAAA,EAAA,GAAA;EACzE,mBAqCM,OArCN,cAqCM;GApCF,mBAAA,oBAAA;GACA,YA2Bc,wBAAA;IA1BV,OAAM;IACL,IAAE;;YAAiE,OAAA,iBAAgB,MAAA;;IAInF,OAAO,OAAA,EAAC,MAAA;;2BAWR,CAAA,CARU,OAAA,YAAY,gBAAY,OAAW,OAAA,UAAA,UAAA,GAD9C,mBASC,OAAA;;KAPI,KAAK,OAAA;KACN,eAAY;KACZ,KAAI;KACJ,OAAM;KACN,QAAO;KACP,OAAM;KACL,OAAK,eAAE,OAAA,aAAa,oBAAiB,mBAAA,cAAA;gDAE1C,mBAQC,OAAA;;KANI,KAAK,OAAA,iBAAiB,OAAA,QAAM,IAAA,IAAA;KAC7B,eAAY;KACZ,KAAI;KACJ,OAAK,eAAA,CAAC,eAEE,OAAA,aAAa,oBAAiB,mBAAA,EAAA,CAAA;KADtC,OAAM;;;;GAKd,YAA2C,OAAA,oBAAA;IAAlB,MAAM,OAAA;2DAAA,OAAA,WAAQ;;GACvC,YAIE,OAAA,wBAAA;IAHE,OAAM;IACL,MAAM,OAAA;IACN,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,WAAQ;;;EAIf,OAAA,oBAAA,UAAA,GAAV,mBAEK,MAFL,YAEK,gBADE,OAAA,YAAY,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA;EAGnB,mBAAA,iBAAA;EACA,mBA0HM,OAAA,EAzHF,OAAK,eAAA,CAAC,wBAAsB,CACF,OAAA,wBAAwB,OAAA,UAAA,wCAAA,6BAAA,CAAA,CAAA,EAAA,GAAA;GAMlD,mBAAA,qBAAA;GACgB,OAAA,YAAY,gBAAY,OAAW,OAAA,UAAA,UAAA,GAAnD,mBA8BW,UAAA,EAAA,KAAA,EAAA,GAAA,CA5BG,OAAA,UAAU,aAAA,UAAA,GADpB,mBAUC,OAAA;;IARI,KAAK,OAAA;IACN,eAAY;IACZ,KAAI;IACJ,OAAM;IACN,QAAO;IACP,OAAK,eAAA,CAAC,QAEE,OAAA,aAAa,oBAAiB,mBAAA,cAAA,CAAA;IADtC,OAAM;6CAGV,mBAiBI,KAAA;;IAfA,MAAK;IACL,QAAO;IACP,KAAI;IACH,OAAO,OAAA,EAAC,cAAA,EAAA,MAAA,SAAA,CAAA;OAET,mBASC,OAAA;IARI,KAAK,OAAA;IACN,eAAY;IACZ,KAAI;IACJ,OAAM;IACN,OAAM;IACN,QAAO;IACP,OAAK,eAAA,CAAC,QACE,OAAA,aAAa,oBAAiB,mBAAA,cAAA,CAAA;;GAKlD,mBAgFM,OAhFN,YAgFM;IA/EF,mBAiBM,OAAA,EAjBA,cAAY,OAAA,EAAC,WAAA,EAAA,GAAA,CACf,mBAeK,MAfL,aAeK,EAAA,UAAA,IAAA,GAdD,mBAaW,UAAA,MAAA,WAbc,OAAA,kBAAR,SAAI;6DAA2B,KAAK,UAAA,GAAA,CACvC,KAAK,aAAA,UAAA,GAAf,mBAWK,MAXL,aAWK,CAAA,eAVD,YASc,wBAAA;MAPT,IAAE;aAAkD,KAAK;cAA0D,OAAA,iBAAiB,KAAK,SAAS;;MAInJ,OAAM;;6BAEU,CAAA,gBAAA,gBAAb,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA;;iCAPJ,OAAA,OAAO,CAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,GAAA,EAAA;;mBAapC,mBAUS,UAAA;KARL,IAAG;KACF,OAAO,OAAA,EAAC,MAAA;KACT,OAAM;QAEN,mBAEO,QAFP,aAEO,gBADA,OAAA,EAAC,MAAA,CAAA,GAAA,CAAA,GAER,YAAmB,OAAA,kBAAA,CAAA,GAAA,GAAA,WAAA,GAAA,CAAA,CAAA,OAAA,CARV,OAAA,WAAO,CAAK,OAAA,oBAAoB,CAAA,CAAA;IAU7C,YA2BiB,OAAA,mBAAA;KA1Bb,QAAO;KACN,cAAY;KACZ,YAAU;KACV,YAAU;KACV,gBAAc;;4BAqBT,CAnBN,mBAmBM,OAAA;MAnBD,OAAM;MAAsB,cAAY,OAAA,EAAC,WAAA;SAC1C,mBAiBK,MAjBL,aAiBK,EAAA,UAAA,IAAA,GAhBD,mBAeW,UAAA,MAAA,WAfc,OAAA,wBAAR,SAAI;8DAAiC,KAAK,UAAA,GAAA,CAE7C,KAAK,aAAA,UAAA,GADf,mBAaK,MAbL,aAaK,CATD,YAQc,wBAAA;OAPT,IAAE;cAAsD,KAAK;eAA8D,OAAA,iBAAiB,KAAK,SAAS;;OAI3J,OAAM;;8BAEU,CAAA,gBAAA,gBAAb,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;;IAQrC,YAIE,OAAA,eAAA;KAHG,gBAAc,OAAA,aAAa;KAC3B,MAAM,OAAA;KACN,4BAA0B,OAAA,wBAAoB,CAAK,OAAA;;;;;;IAExD,YAIE,OAAA,iBAJF,WAIE;KAHG,gBAAc,OAAA,aAAa;KAC3B,uBAAqB,OAAA;OACd,OAAA,SAAS,YAAY,GAAA,MAAA,IAAA,CAAA,gBAAA,qBAAA,CAAA;mBAEjC,YAUc,wBAAA;KART,OAAO,OAAA,EAAC,QAAA;KACR,IAAI,EAAA,MAAA,WAAA;KAGL,OAAM;KACN,MAAK;;4BAEqB,CAA1B,YAA0B,OAAA,gBAAA,EAAZ,MAAM,GAAE,CAAA,CAAA,CAAA;;gCARb,OAAA,WAAO,CAAK,OAAA,oBAAoB,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;EC5G7D,MAAM,mBAAmB,2BACjB,OAAO,mCAAA,MAAA,MAAA,EAAA,CAAA,CACf;EASA,MAAM,WAAW,IAAI,KAAK;EAC1B,MAAM,aAAa,IAAI,CAAC;EACxB,MAAM,YAAY,IAAI,CAAC;EACvB,MAAM,wBAAwB,IAAI,EAAE;EACpC,MAAM,aAAa,IAAI,KAAK;EAI5B,MAAM,EAAE,SAAS,gBAAgB,eAAe;EAChD,MAAM,EAAE,qBAAqB,cAAc;EAC3C,MAAM,YAAY,eAAa;EAC/B,MAAM,eAAe,gBAAgB;EAGrC,MAAM,iBAAiB,eAAe;GACpC,IAAK,aAAa,kBAA8B,WAC9C,OAAQ,aAAa,iBAA6B,SAAS;GAE7D,IAAK,aAAa,kBAA+B,YAC/C,OAAQ,aAAa,iBAA8B;GAErD,IAAK,aAAa,kBAA+B,YAC/C,OAAQ,aAAa,iBAA8B;GAErD,IAAK,aAAa,kBAA4B,IAC5C,OAAQ,aAAa,iBAA2B;GAElD,OAAO;EACT,CAAC;;EAGD,MAAM,UAAU,eAAe;GAC7B,IAAK,aAAa,kBAA8B,WAC9C,OAAQ,aAAa,iBAA6B;GAEpD,IAAK,aAAa,kBAA+B,YAC/C,OAAO,aAAa;GAEtB,IAAK,aAAa,kBAA+B,YAC/C,OAAO,aAAa;GAEtB,OAAO;EACT,CAAC;EAGD,YAAU,aAAa,kBAAkB,YAAY;GACnD,IAAG,CAAC,aAAa,kBAAiB;IAChC,sBAAsB,QAAQ;IAC9B,WAAW,QAAQ;IACnB;GACF;GACA,MAAM,aAAa,OAAO,aAAa,MAAM,SAAO;GACpD,MAAM,WAAW,iBAAiB,aAAa,iBAAiB,UAAU,YAAY,KAAA,GAAW,IAAI;GACrG,IAAI;IACF,MAAM,SAAS,MAAM,MAAM,IAAI,QAAQ;IACvC,sBAAsB,QAAQ,0BAA0B,OAAO,KAAK;IACpE,WAAW,QAAQ,OAAO,SAAS,aAAa,iBAAiB;GACnE,QAAQ;IACN,IAAI,aAAa,iBAAiB,UAAU;KAE1C,sBAAsB,QAAQ,0BADlB,UAAU,aAAa,iBAAiB,QACI,EAAI;KAC5D,WAAW,QAAQ;IACrB,OACE,sBAAsB,QAAQ;GAElC;EACF,GAAG;GAAC,MAAM;GAAM,WAAW;EAAI,CAAC;EAGhC,gBAAc;GACZ,OAAO,iBAAiB,UAAU,YAAY;EAChD,CAAC;EACD,sBAAsB;GACpB,OAAO,oBAAoB,UAAU,YAAY;EACnD,CAAC;EAID,SAAS,eAAqB;GAC5B,IACE,OAAO,UAAU,WAAW,QAAQ,KACpC,OAAO,UAAU,KACjB,SAAS,KAAK,eAAe,OAAO,cAAc;QAE9C,CAAC,SAAS,OAAO;KACnB,SAAS,QAAQ;KACjB,UAAU,QAAQ;IACpB;UACK,IACL,OAAO,UAAU,WAAW,QAAS,KACrC,OAAO,UAAU,KACjB,UAAU,QAAQ,IAClB;IACA,SAAS,QAAQ;IACjB,UAAU,QAAQ;GACpB;GACA,WAAW,QAAS,OAAO;GAC3B,IAAI,UAAU,QAAQ,OAAO,SAC3B,UAAU,QAAQ,OAAO;EAE7B;;;;;;;;;;;;;;;;;;;;;;;;;;;mBCzIS,OAAM,2CAA0C;;;CAC9B,OAAM;;;yDAvB/B,mBAcS,UAAA;EAbP,MAAK;EACL,OAAK,eAAA,CAAC,sBAAoB;GAEjB,OAAA,aAAa,mBAAgB,kBAAA;GAAkC,OAAA,WAAQ,aAAA;GAAiB,OAAA,aAAU,sBAAA;EAAA,CAAA,CAAA;EAD1G,OAAK,eAAE,OAAA,qBAAqB;KAG7B,YAOE,OAAA,sBAAA;EANC,YAAU,OAAA;EACV,UAAU,OAAA;EACV,iBAAe,OAAA;EAChB,OAAA,EAAA,UAAA,qBAAA;EACC,OAAK,eAAE,OAAA,sBAAsB,SAAM,mBAAA,EAAA;EACnC,SAAS,OAAA,SAAS;;;;;;;UAKf,OAAA,aAAa,oBAAA,UAAA,GADrB,mBAiBM,OAAA;;EAfJ,OAAK,eAAA,CAAC,qBAAmB;GAAA,UAEL,OAAA;GAAQ,qBAAsB,OAAA;EAAU,CAAA,CAAA;EAD3D,OAAK,eAAE,OAAA,qBAAqB;KAG7B,mBAUM,OAVN,YAUM,CAAA,CATO,OAAA,YAAA,UAAA,GAAX,mBAEK,MAFL,YAEK,gBADA,OAAA,cAAc,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,GAAA,CAGV,OAAA,UAAU,aAAa,OAAA,UAAA,gBAAA,UAAA,GADhC,YAKE,OAAA,qBAAA;;EAFC,SAAS,OAAA;EACT,gBAAc,OAAA;sDAFN,OAAA,QAAQ,CAAA,CAAA,IAAA,mBAAA,QAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,GAAA,EAAA"}