@saooti/octopus-sdk 42.0.4 → 42.0.5

package/dist/usePresentationItem-BLUjp4Le.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePresentationItem-BLUjp4Le.mjs","names":[],"sources":["../src/components/layouts/PresentationItem.vue","../src/components/layouts/PresentationItem.vue","../src/components/composable/usePresentationItem.ts"],"sourcesContent":["<!--\n  Component to display an element with its description\n-->\n<template>\n    <article\n        class=\"classic-element-container item-presentation-container mt-3\"\n        :class=\"vertical ? 'vertical-item' : ''\"\n    >\n        <router-link\n            :to=\"route\"\n            class=\"d-flex-column flex-grow-1 text-dark\"\n            :class=\"vertical ? 'flex-column' : ''\"\n        >\n            <div\n                class=\"img-box\"\n                :class=\"vertical ? 'img-box-bigger' : ''\"\n            >\n                <img\n                    v-lazy=\"useProxyImageUrl(imageUrl, tailleImage)\"\n                    :width=\"tailleImage\"\n                    :height=\"tailleImage\"\n                    aria-hidden=\"true\"\n                    :alt=\"name\"\n                    :title=\"name\"\n                >\n\n                <div class=\"tags\">\n                    <span\n                        v-for=\"tag in tags\"\n                        :key=\"tag\"\n                    >\n                        {{ tag }}\n                    </span>\n                </div>\n\n                <slot name=\"after-image\" />\n            </div>\n      \n            <div\n                class=\"classic-element-text pb-0\"\n                :class=\"{ 'pt-1': vertical }\"\n            >\n                <div class=\"element-name mb-2 basic-line-clamp\">\n                    {{ name }}\n                </div>\n                <div\n                    v-if=\"!isPhone && (description || additionalInfo)\"\n                    ref=\"descriptionItemContainer\"\n                    class=\"element-description htms-wysiwyg-content mt-0\"\n                >\n                    <div v-if=\"additionalInfo\" class=\"mb-2\">\n                        <div\n                            v-for=\"info, index in additionalInfo\"\n                            :key=\"index\"\n                            class=\"text-secondary\"\n                        >\n                            {{ info }}\n                        </div>\n                    </div>\n                    <!-- eslint-disable vue/no-v-html -->\n                    <div\n                        v-if=\"description\"\n                        ref=\"descriptionItem\"\n                        v-html=\"urlify(description || '')\"\n                    />\n                    <!-- eslint-enable -->\n                </div>\n            </div>\n        </router-link>\n    </article>\n</template>\n\n<script setup lang=\"ts\">\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport displayHelper from \"../../helper/displayHelper\";\nimport { nextTick, useTemplateRef, watch, computed } from \"vue\";\nimport { RouteLocationRaw } from \"vue-router\";\n\n//Props \nconst props = defineProps<{\n    /** The route to which to redirect when clicking on element */\n    route: RouteLocationRaw|string;\n    /** The URL to the image */\n    imageUrl: string;\n    /** The name of the element */\n    name: string;\n    /** Tags associated with the element (rubriques, themes, etc) */\n    tags?: Array<string>;\n    /** Additional info displayed below name */\n    additionalInfo?: Array<string>;\n    /** The description of the element */\n    description?: string;\n    /** When true display the card vertically */\n    vertical?: boolean;\n}>();\n\n//Data\nconst descriptionItemRef = useTemplateRef('descriptionItem');\nconst descriptionItemContainerRef = useTemplateRef('descriptionItemContainer');\n\n\n//Composables\nconst { isPhone } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\n\n// Computed\n// Calcul de la taille de l'image\nconst tailleImage = computed(() => {\n    // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures\n    if (props.vertical) {\n        return '396';\n    } else if (isPhone.value) {\n        return '246';\n    } else {\n        return '250';\n    }\n});\n\n//Watch\nwatch(isPhone, async () => {\n    nextTick(() => {\n        if (!props.description || isPhone.value) {\n            return;\n        }\n        const itemDesc = descriptionItemRef?.value as HTMLElement;\n        const itemDescContainer = descriptionItemContainerRef?.value as HTMLElement;\n        if (\n            itemDesc &&\n            itemDescContainer &&\n            itemDesc.clientHeight > itemDescContainer.clientHeight\n        ) {\n            itemDescContainer.classList.add(\"after-element-description\");\n        }\n    });\n}, { immediate: true });\n\nfunction urlify(text:string|undefined){\n    return displayHelper.urlify(text);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app {\n    .item-presentation-container {\n        @media (width <= 960px) {\n            width: 250px !important;\n            margin-right: 0.5rem;\n        }\n\n        .element-description {\n            height: 0;\n            flex-grow: 1;\n            max-height: unset;\n\n            p:first-child {\n                // Prevent unecessary space before first paragraph\n                margin-top: 0 !important;\n            }\n        }\n    }\n\n    .classic-element-container.vertical-item {\n        flex-grow: 0;\n        width: 400px;\n        flex-shrink: 0;\n    }\n\n    .img-box {\n        // Make it relative so that absolute elements associated with the image\n        // are positioned within the image box\n        position: relative;\n\n        @media (width <= 960px) {\n            height: calc(var(--octopus-image-size) - 4);\n        }\n    }\n\n    .img-box-bigger {\n        // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures\n        width: 396px;\n        height: 396px;\n    }\n\n    .tags {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n\n        display: flex;\n        gap: 10px;\n        flex-wrap: wrap;\n\n        > span {\n            background-color: white;\n            padding: .25em .75em;\n            font-size: 14px;\n            font-weight: bold;\n            color: var(--octopus-primary);\n            border-radius: var(--octopus-border-radius);\n            border: 1px solid color-mix(in lch, var(--octopus-primary), transparent 60%);\n\n            // Limit width\n            max-width: 200px;\n            overflow: hidden;\n            white-space: nowrap;\n            text-overflow: ellipsis;\n        }\n    }\n}\n</style>\n","<!--\n  Component to display an element with its description\n-->\n<template>\n    <article\n        class=\"classic-element-container item-presentation-container mt-3\"\n        :class=\"vertical ? 'vertical-item' : ''\"\n    >\n        <router-link\n            :to=\"route\"\n            class=\"d-flex-column flex-grow-1 text-dark\"\n            :class=\"vertical ? 'flex-column' : ''\"\n        >\n            <div\n                class=\"img-box\"\n                :class=\"vertical ? 'img-box-bigger' : ''\"\n            >\n                <img\n                    v-lazy=\"useProxyImageUrl(imageUrl, tailleImage)\"\n                    :width=\"tailleImage\"\n                    :height=\"tailleImage\"\n                    aria-hidden=\"true\"\n                    :alt=\"name\"\n                    :title=\"name\"\n                >\n\n                <div class=\"tags\">\n                    <span\n                        v-for=\"tag in tags\"\n                        :key=\"tag\"\n                    >\n                        {{ tag }}\n                    </span>\n                </div>\n\n                <slot name=\"after-image\" />\n            </div>\n      \n            <div\n                class=\"classic-element-text pb-0\"\n                :class=\"{ 'pt-1': vertical }\"\n            >\n                <div class=\"element-name mb-2 basic-line-clamp\">\n                    {{ name }}\n                </div>\n                <div\n                    v-if=\"!isPhone && (description || additionalInfo)\"\n                    ref=\"descriptionItemContainer\"\n                    class=\"element-description htms-wysiwyg-content mt-0\"\n                >\n                    <div v-if=\"additionalInfo\" class=\"mb-2\">\n                        <div\n                            v-for=\"info, index in additionalInfo\"\n                            :key=\"index\"\n                            class=\"text-secondary\"\n                        >\n                            {{ info }}\n                        </div>\n                    </div>\n                    <!-- eslint-disable vue/no-v-html -->\n                    <div\n                        v-if=\"description\"\n                        ref=\"descriptionItem\"\n                        v-html=\"urlify(description || '')\"\n                    />\n                    <!-- eslint-enable -->\n                </div>\n            </div>\n        </router-link>\n    </article>\n</template>\n\n<script setup lang=\"ts\">\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport displayHelper from \"../../helper/displayHelper\";\nimport { nextTick, useTemplateRef, watch, computed } from \"vue\";\nimport { RouteLocationRaw } from \"vue-router\";\n\n//Props \nconst props = defineProps<{\n    /** The route to which to redirect when clicking on element */\n    route: RouteLocationRaw|string;\n    /** The URL to the image */\n    imageUrl: string;\n    /** The name of the element */\n    name: string;\n    /** Tags associated with the element (rubriques, themes, etc) */\n    tags?: Array<string>;\n    /** Additional info displayed below name */\n    additionalInfo?: Array<string>;\n    /** The description of the element */\n    description?: string;\n    /** When true display the card vertically */\n    vertical?: boolean;\n}>();\n\n//Data\nconst descriptionItemRef = useTemplateRef('descriptionItem');\nconst descriptionItemContainerRef = useTemplateRef('descriptionItemContainer');\n\n\n//Composables\nconst { isPhone } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\n\n// Computed\n// Calcul de la taille de l'image\nconst tailleImage = computed(() => {\n    // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures\n    if (props.vertical) {\n        return '396';\n    } else if (isPhone.value) {\n        return '246';\n    } else {\n        return '250';\n    }\n});\n\n//Watch\nwatch(isPhone, async () => {\n    nextTick(() => {\n        if (!props.description || isPhone.value) {\n            return;\n        }\n        const itemDesc = descriptionItemRef?.value as HTMLElement;\n        const itemDescContainer = descriptionItemContainerRef?.value as HTMLElement;\n        if (\n            itemDesc &&\n            itemDescContainer &&\n            itemDesc.clientHeight > itemDescContainer.clientHeight\n        ) {\n            itemDescContainer.classList.add(\"after-element-description\");\n        }\n    });\n}, { immediate: true });\n\nfunction urlify(text:string|undefined){\n    return displayHelper.urlify(text);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app {\n    .item-presentation-container {\n        @media (width <= 960px) {\n            width: 250px !important;\n            margin-right: 0.5rem;\n        }\n\n        .element-description {\n            height: 0;\n            flex-grow: 1;\n            max-height: unset;\n\n            p:first-child {\n                // Prevent unecessary space before first paragraph\n                margin-top: 0 !important;\n            }\n        }\n    }\n\n    .classic-element-container.vertical-item {\n        flex-grow: 0;\n        width: 400px;\n        flex-shrink: 0;\n    }\n\n    .img-box {\n        // Make it relative so that absolute elements associated with the image\n        // are positioned within the image box\n        position: relative;\n\n        @media (width <= 960px) {\n            height: calc(var(--octopus-image-size) - 4);\n        }\n    }\n\n    .img-box-bigger {\n        // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures\n        width: 396px;\n        height: 396px;\n    }\n\n    .tags {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n\n        display: flex;\n        gap: 10px;\n        flex-wrap: wrap;\n\n        > span {\n            background-color: white;\n            padding: .25em .75em;\n            font-size: 14px;\n            font-weight: bold;\n            color: var(--octopus-primary);\n            border-radius: var(--octopus-border-radius);\n            border: 1px solid color-mix(in lch, var(--octopus-primary), transparent 60%);\n\n            // Limit width\n            max-width: 200px;\n            overflow: hidden;\n            white-space: nowrap;\n            text-overflow: ellipsis;\n        }\n    }\n}\n</style>\n","import { Emission } from \"@/stores/class/general/emission\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"../../stores/class/general/podcast\";\nimport { rubriquesApi } from \"../../api\";\nimport { useDayjs } from \"./useDayjs\";\nimport { unique } from \"@/helper/arrayHelper\";\n\nexport const usePresentationItem = () => {\n    const generalStore = useGeneralStore();\n    const { formatDate } = useDayjs();\n\n    function iabTags(emission: Emission): Array<string> {\n        return generalStore.storedCategories\n            .filter(cat => emission.iabIds.includes(cat.id))\n            .map(cat => cat.name);\n    }\n\n    async function rubriqueTags(element: Podcast|Emission, filterRubriquageId?: number): Promise<Array<string>> {\n        const rubriqueIds: Array<number> = [];\n        if (element.rubriqueIds) {\n            rubriqueIds.push(...element.rubriqueIds);\n        }\n        if ('emission' in element && element.emission.rubriqueIds) {\n            rubriqueIds.push(...element.emission.rubriqueIds);\n        }\n        const uniqueRubriqueIds = rubriqueIds.filter(unique);\n        const promises = uniqueRubriqueIds.map(rubriquesApi.getCachedRubrique);\n        const rubriques = await Promise.all(promises);\n\n        if (filterRubriquageId) {\n            return rubriques.filter(r => r.rubriquageId === filterRubriquageId).map(r => r.name);\n        } else {\n            return rubriques.map(r => r.name);\n        }\n    }\n    \n    async function tagsFor(element: Podcast|Emission): Promise<Array<string>|undefined> {\n        const type = state.presentationItems.tags;\n        let tags: Array<string>|undefined = undefined;\n        if (type === 'iab') {\n            const emission = 'emission' in element ? element.emission : element;\n            tags = iabTags(emission);\n        } else if (type === 'rubrique') {\n            tags = await rubriqueTags(element, state.presentationItems.tagsRubriquageId);\n        }\n\n        if (tags && state.presentationItems.tagsLimit) {\n            return tags.slice(0, state.presentationItems.tagsLimit);\n        }\n\n        return tags;\n    }\n\n    async function additionalInfoFor(element: Podcast|Emission): Promise<Array<string>|undefined> {\n        const prop = state.presentationItems.additionalInfo;\n        const restrictiveRubriquageId = state.presentationItems.restrictiveRubriquageId;\n        if (!prop?.length) {\n            return undefined;\n        }\n\n        const podcast = 'emission' in element ? element : null;\n        const emission = podcast?.emission ?? element as Emission;\n\n        const result = await Promise.all(prop.map(async property => {\n            if (property === 'date') {\n                if (podcast?.pubDate) {\n                    return formatDate(podcast.pubDate);\n                } else {\n                    return null;\n                }\n            } else if (property === 'productor') {\n                return emission.orga.name;\n            } else if (property === 'restrictive-rubrique' && restrictiveRubriquageId !== undefined) {\n                const rubriques = await rubriqueTags(element, restrictiveRubriquageId);\n                return rubriques.join(', ');\n            }\n            return null;\n        }));\n\n        return result.filter(p => p !== null);\n    }\n\n    return { tagsFor, additionalInfoFor };\n};\n"],"mappings":"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"}

package/dist/usePresentationItem-C28KKH4P.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePresentationItem-C28KKH4P.mjs","names":[],"sources":["../src/components/layouts/PresentationItem.vue","../src/components/layouts/PresentationItem.vue","../src/components/composable/usePresentationItem.ts"],"sourcesContent":["<!--\n  Component to display an element with its description\n-->\n<template>\n    <article\n        class=\"classic-element-container item-presentation-container mt-3\"\n        :class=\"vertical ? 'vertical-item' : ''\"\n    >\n        <router-link\n            :to=\"route\"\n            class=\"d-flex-column flex-grow-1 text-dark\"\n            :class=\"vertical ? 'flex-column' : ''\"\n        >\n            <div\n                class=\"img-box\"\n                :class=\"vertical ? 'img-box-bigger' : ''\"\n            >\n                <img\n                    v-lazy=\"useProxyImageUrl(imageUrl, tailleImage)\"\n                    :width=\"tailleImage\"\n                    :height=\"tailleImage\"\n                    aria-hidden=\"true\"\n                    :alt=\"name\"\n                    :title=\"name\"\n                >\n\n                <div class=\"tags\">\n                    <span\n                        v-for=\"tag in tags\"\n                        :key=\"tag\"\n                    >\n                        {{ tag }}\n                    </span>\n                </div>\n\n                <slot name=\"after-image\" />\n            </div>\n      \n            <div\n                class=\"classic-element-text pb-0\"\n                :class=\"{ 'pt-1': vertical }\"\n            >\n                <div class=\"element-name mb-2 basic-line-clamp\">\n                    {{ name }}\n                </div>\n                <div\n                    v-if=\"!isPhone && (description || additionalInfo)\"\n                    ref=\"descriptionItemContainer\"\n                    class=\"element-description htms-wysiwyg-content mt-0\"\n                >\n                    <div v-if=\"additionalInfo\" class=\"mb-2\">\n                        <div\n                            v-for=\"info, index in additionalInfo\"\n                            :key=\"index\"\n                            class=\"text-secondary\"\n                        >\n                            {{ info }}\n                        </div>\n                    </div>\n                    <!-- eslint-disable vue/no-v-html -->\n                    <div\n                        v-if=\"description\"\n                        ref=\"descriptionItem\"\n                        v-html=\"urlify(description || '')\"\n                    />\n                    <!-- eslint-enable -->\n                </div>\n            </div>\n        </router-link>\n    </article>\n</template>\n\n<script setup lang=\"ts\">\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport displayHelper from \"../../helper/displayHelper\";\nimport { nextTick, useTemplateRef, watch, computed } from \"vue\";\nimport { RouteLocationRaw } from \"vue-router\";\n\n//Props \nconst props = defineProps<{\n    /** The route to which to redirect when clicking on element */\n    route: RouteLocationRaw|string;\n    /** The URL to the image */\n    imageUrl: string;\n    /** The name of the element */\n    name: string;\n    /** Tags associated with the element (rubriques, themes, etc) */\n    tags?: Array<string>;\n    /** Additional info displayed below name */\n    additionalInfo?: Array<string>;\n    /** The description of the element */\n    description?: string;\n    /** When true display the card vertically */\n    vertical?: boolean;\n}>();\n\n//Data\nconst descriptionItemRef = useTemplateRef('descriptionItem');\nconst descriptionItemContainerRef = useTemplateRef('descriptionItemContainer');\n\n\n//Composables\nconst { isPhone } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\n\n// Computed\n// Calcul de la taille de l'image\nconst tailleImage = computed(() => {\n    // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures\n    if (props.vertical) {\n        return '396';\n    } else if (isPhone.value) {\n        return '246';\n    } else {\n        return '250';\n    }\n});\n\n//Watch\nwatch(isPhone, async () => {\n    nextTick(() => {\n        if (!props.description || isPhone.value) {\n            return;\n        }\n        const itemDesc = descriptionItemRef?.value as HTMLElement;\n        const itemDescContainer = descriptionItemContainerRef?.value as HTMLElement;\n        if (\n            itemDesc &&\n            itemDescContainer &&\n            itemDesc.clientHeight > itemDescContainer.clientHeight\n        ) {\n            itemDescContainer.classList.add(\"after-element-description\");\n        }\n    });\n}, { immediate: true });\n\nfunction urlify(text:string|undefined){\n    return displayHelper.urlify(text);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app {\n    .item-presentation-container {\n        @media (width <= 960px) {\n            width: 250px !important;\n            margin-right: 0.5rem;\n        }\n\n        .element-description {\n            height: 0;\n            flex-grow: 1;\n            max-height: unset;\n\n            p:first-child {\n                // Prevent unecessary space before first paragraph\n                margin-top: 0 !important;\n            }\n        }\n    }\n\n    .classic-element-container.vertical-item {\n        flex-grow: 0;\n        width: 400px;\n        flex-shrink: 0;\n    }\n\n    .img-box {\n        // Make it relative so that absolute elements associated with the image\n        // are positioned within the image box\n        position: relative;\n\n        @media (width <= 960px) {\n            height: calc(var(--octopus-image-size) - 4);\n        }\n    }\n\n    .img-box-bigger {\n        // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures\n        width: 396px;\n        height: 396px;\n    }\n\n    .tags {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n\n        display: flex;\n        gap: 10px;\n        flex-wrap: wrap;\n\n        > span {\n            background-color: white;\n            padding: .25em .75em;\n            font-size: 14px;\n            font-weight: bold;\n            color: var(--octopus-primary);\n            border-radius: var(--octopus-border-radius);\n            border: 1px solid color-mix(in lch, var(--octopus-primary), transparent 60%);\n\n            // Limit width\n            max-width: 200px;\n            overflow: hidden;\n            white-space: nowrap;\n            text-overflow: ellipsis;\n        }\n    }\n}\n</style>\n","<!--\n  Component to display an element with its description\n-->\n<template>\n    <article\n        class=\"classic-element-container item-presentation-container mt-3\"\n        :class=\"vertical ? 'vertical-item' : ''\"\n    >\n        <router-link\n            :to=\"route\"\n            class=\"d-flex-column flex-grow-1 text-dark\"\n            :class=\"vertical ? 'flex-column' : ''\"\n        >\n            <div\n                class=\"img-box\"\n                :class=\"vertical ? 'img-box-bigger' : ''\"\n            >\n                <img\n                    v-lazy=\"useProxyImageUrl(imageUrl, tailleImage)\"\n                    :width=\"tailleImage\"\n                    :height=\"tailleImage\"\n                    aria-hidden=\"true\"\n                    :alt=\"name\"\n                    :title=\"name\"\n                >\n\n                <div class=\"tags\">\n                    <span\n                        v-for=\"tag in tags\"\n                        :key=\"tag\"\n                    >\n                        {{ tag }}\n                    </span>\n                </div>\n\n                <slot name=\"after-image\" />\n            </div>\n      \n            <div\n                class=\"classic-element-text pb-0\"\n                :class=\"{ 'pt-1': vertical }\"\n            >\n                <div class=\"element-name mb-2 basic-line-clamp\">\n                    {{ name }}\n                </div>\n                <div\n                    v-if=\"!isPhone && (description || additionalInfo)\"\n                    ref=\"descriptionItemContainer\"\n                    class=\"element-description htms-wysiwyg-content mt-0\"\n                >\n                    <div v-if=\"additionalInfo\" class=\"mb-2\">\n                        <div\n                            v-for=\"info, index in additionalInfo\"\n                            :key=\"index\"\n                            class=\"text-secondary\"\n                        >\n                            {{ info }}\n                        </div>\n                    </div>\n                    <!-- eslint-disable vue/no-v-html -->\n                    <div\n                        v-if=\"description\"\n                        ref=\"descriptionItem\"\n                        v-html=\"urlify(description || '')\"\n                    />\n                    <!-- eslint-enable -->\n                </div>\n            </div>\n        </router-link>\n    </article>\n</template>\n\n<script setup lang=\"ts\">\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport displayHelper from \"../../helper/displayHelper\";\nimport { nextTick, useTemplateRef, watch, computed } from \"vue\";\nimport { RouteLocationRaw } from \"vue-router\";\n\n//Props \nconst props = defineProps<{\n    /** The route to which to redirect when clicking on element */\n    route: RouteLocationRaw|string;\n    /** The URL to the image */\n    imageUrl: string;\n    /** The name of the element */\n    name: string;\n    /** Tags associated with the element (rubriques, themes, etc) */\n    tags?: Array<string>;\n    /** Additional info displayed below name */\n    additionalInfo?: Array<string>;\n    /** The description of the element */\n    description?: string;\n    /** When true display the card vertically */\n    vertical?: boolean;\n}>();\n\n//Data\nconst descriptionItemRef = useTemplateRef('descriptionItem');\nconst descriptionItemContainerRef = useTemplateRef('descriptionItemContainer');\n\n\n//Composables\nconst { isPhone } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\n\n// Computed\n// Calcul de la taille de l'image\nconst tailleImage = computed(() => {\n    // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures\n    if (props.vertical) {\n        return '396';\n    } else if (isPhone.value) {\n        return '246';\n    } else {\n        return '250';\n    }\n});\n\n//Watch\nwatch(isPhone, async () => {\n    nextTick(() => {\n        if (!props.description || isPhone.value) {\n            return;\n        }\n        const itemDesc = descriptionItemRef?.value as HTMLElement;\n        const itemDescContainer = descriptionItemContainerRef?.value as HTMLElement;\n        if (\n            itemDesc &&\n            itemDescContainer &&\n            itemDesc.clientHeight > itemDescContainer.clientHeight\n        ) {\n            itemDescContainer.classList.add(\"after-element-description\");\n        }\n    });\n}, { immediate: true });\n\nfunction urlify(text:string|undefined){\n    return displayHelper.urlify(text);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app {\n    .item-presentation-container {\n        @media (width <= 960px) {\n            width: 250px !important;\n            margin-right: 0.5rem;\n        }\n\n        .element-description {\n            height: 0;\n            flex-grow: 1;\n            max-height: unset;\n\n            p:first-child {\n                // Prevent unecessary space before first paragraph\n                margin-top: 0 !important;\n            }\n        }\n    }\n\n    .classic-element-container.vertical-item {\n        flex-grow: 0;\n        width: 400px;\n        flex-shrink: 0;\n    }\n\n    .img-box {\n        // Make it relative so that absolute elements associated with the image\n        // are positioned within the image box\n        position: relative;\n\n        @media (width <= 960px) {\n            height: calc(var(--octopus-image-size) - 4);\n        }\n    }\n\n    .img-box-bigger {\n        // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures\n        width: 396px;\n        height: 396px;\n    }\n\n    .tags {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n\n        display: flex;\n        gap: 10px;\n        flex-wrap: wrap;\n\n        > span {\n            background-color: white;\n            padding: .25em .75em;\n            font-size: 14px;\n            font-weight: bold;\n            color: var(--octopus-primary);\n            border-radius: var(--octopus-border-radius);\n            border: 1px solid color-mix(in lch, var(--octopus-primary), transparent 60%);\n\n            // Limit width\n            max-width: 200px;\n            overflow: hidden;\n            white-space: nowrap;\n            text-overflow: ellipsis;\n        }\n    }\n}\n</style>\n","import { Emission } from \"@/stores/class/general/emission\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"../../stores/class/general/podcast\";\nimport { rubriquesApi } from \"../../api\";\nimport { useDayjs } from \"./useDayjs\";\nimport { unique } from \"@/helper/arrayHelper\";\n\nexport const usePresentationItem = () => {\n    const generalStore = useGeneralStore();\n    const { formatDate } = useDayjs();\n\n    function iabTags(emission: Emission): Array<string> {\n        return generalStore.storedCategories\n            .filter(cat => emission.iabIds.includes(cat.id))\n            .map(cat => cat.name);\n    }\n\n    async function rubriqueTags(element: Podcast|Emission, filterRubriquageId?: number): Promise<Array<string>> {\n        const rubriqueIds: Array<number> = [];\n        if (element.rubriqueIds) {\n            rubriqueIds.push(...element.rubriqueIds);\n        }\n        if ('emission' in element && element.emission.rubriqueIds) {\n            rubriqueIds.push(...element.emission.rubriqueIds);\n        }\n        const uniqueRubriqueIds = rubriqueIds.filter(unique);\n        const promises = uniqueRubriqueIds.map(rubriquesApi.getCachedRubrique);\n        const rubriques = await Promise.all(promises);\n\n        if (filterRubriquageId) {\n            return rubriques.filter(r => r.rubriquageId === filterRubriquageId).map(r => r.name);\n        } else {\n            return rubriques.map(r => r.name);\n        }\n    }\n    \n    async function tagsFor(element: Podcast|Emission): Promise<Array<string>|undefined> {\n        const type = state.presentationItems.tags;\n        let tags: Array<string>|undefined = undefined;\n        if (type === 'iab') {\n            const emission = 'emission' in element ? element.emission : element;\n            tags = iabTags(emission);\n        } else if (type === 'rubrique') {\n            tags = await rubriqueTags(element, state.presentationItems.tagsRubriquageId);\n        }\n\n        if (tags && state.presentationItems.tagsLimit) {\n            return tags.slice(0, state.presentationItems.tagsLimit);\n        }\n\n        return tags;\n    }\n\n    async function additionalInfoFor(element: Podcast|Emission): Promise<Array<string>|undefined> {\n        const prop = state.presentationItems.additionalInfo;\n        const restrictiveRubriquageId = state.presentationItems.restrictiveRubriquageId;\n        if (!prop?.length) {\n            return undefined;\n        }\n\n        const podcast = 'emission' in element ? element : null;\n        const emission = podcast?.emission ?? element as Emission;\n\n        const result = await Promise.all(prop.map(async property => {\n            if (property === 'date') {\n                if (podcast?.pubDate) {\n                    return formatDate(podcast.pubDate);\n                } else {\n                    return null;\n                }\n            } else if (property === 'productor') {\n                return emission.orga.name;\n            } else if (property === 'restrictive-rubrique' && restrictiveRubriquageId !== undefined) {\n                const rubriques = await rubriqueTags(element, restrictiveRubriquageId);\n                return rubriques.join(', ');\n            }\n            return null;\n        }));\n\n        return result.filter(p => p !== null);\n    }\n\n    return { tagsFor, additionalInfoFor };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgFA,MAAM,QAAQ;EAkBd,MAAM,qBAAqB,eAAe,iBAAiB;EAC3D,MAAM,8BAA8B,eAAe,0BAA0B;EAI7E,MAAM,EAAE,YAAY,eAAe;EACnC,MAAM,EAAE,qBAAqB,cAAc;EAI3C,MAAM,cAAc,eAAe;GAE/B,IAAI,MAAM,UACN,OAAO;QACJ,IAAI,QAAQ,OACf,OAAO;QAEP,OAAO;EAEf,CAAC;EAGD,MAAM,SAAS,YAAY;GACvB,eAAe;IACX,IAAI,CAAC,MAAM,eAAe,QAAQ,OAC9B;IAEJ,MAAM,WAAW,oBAAoB;IACrC,MAAM,oBAAoB,6BAA6B;IACvD,IACI,YACA,qBACA,SAAS,eAAe,kBAAkB,cAE1C,kBAAkB,UAAU,IAAI,2BAA2B;GAEnE,CAAC;EACL,GAAG,EAAE,WAAW,KAAK,CAAC;EAEtB,SAAS,OAAO,MAAsB;GAClC,OAAO,sBAAc,OAAO,IAAI;EACpC;;;;uBAvII,mBAiEU,WAAA,EAhEN,OAAK,eAAA,CAAC,8DACE,QAAA,WAAQ,kBAAA,EAAA,CAAA,EAAA,GAAA,CAEhB,YA4Dc,wBAAA;IA3DT,IAAI,QAAA;IACL,OAAK,eAAA,CAAC,uCACE,QAAA,WAAQ,gBAAA,EAAA,CAAA;;2BAyBV,CAvBN,mBAuBM,OAAA,EAtBF,OAAK,eAAA,CAAC,WACE,QAAA,WAAQ,mBAAA,EAAA,CAAA,EAAA,GAAA;oBAEhB,mBAOC,OAAA;MALI,OAAO,YAAA;MACP,QAAQ,YAAA;MACT,eAAY;MACX,KAAK,QAAA;MACL,OAAO,QAAA;iDALA,MAAA,gBAAA,EAAiB,QAAA,UAAU,YAAA,KAAW,CAAA,CAAA,CAAA;KAQlD,mBAOM,OAPN,YAOM,EAAA,UAAA,IAAA,GANF,mBAKO,UAAA,MAAA,WAJW,QAAA,OAAP,QAAG;0BADd,mBAKO,QAAA,EAHF,KAAK,IAAG,GAAA,gBAEN,GAAG,GAAA,CAAA;;KAId,WAA2B,KAAA,QAAA,eAAA,CAAA,GAAA,KAAA,GAAA,IAAA;WAG/B,mBA6BM,OAAA,EA5BF,OAAK,eAAA,CAAC,6BAA2B,EAAA,QACf,QAAA,SAAQ,CAAA,CAAA,EAAA,GAAA,CAE1B,mBAEM,OAFN,YAEM,gBADC,QAAA,IAAI,GAAA,CAAA,GAAA,CAGA,MAAA,OAAA,MAAY,QAAA,eAAe,QAAA,mBAAA,UAAA,GADtC,mBAqBM,OArBN,YAqBM,CAhBS,QAAA,kBAAA,UAAA,GAAX,mBAQM,OARN,YAQM,EAAA,UAAA,IAAA,GAPF,mBAMM,UAAA,MAAA,WALoB,QAAA,iBAAf,MAAM,UAAK;yBADtB,mBAMM,OAAA;MAJD,KAAK;MACN,OAAM;wBAEH,IAAI,GAAA,CAAA;iDAKL,QAAA,eAAA,UAAA,GADV,mBAIE,OAAA;;KAFE,KAAI;KACJ,WAAQ,OAAO,QAAA,eAAW,EAAA;;;;;;;;;AEvDlD,IAAa,4BAA4B;CACrC,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,eAAe,SAAS;CAEhC,SAAS,QAAQ,UAAmC;EAChD,OAAO,aAAa,iBACf,QAAO,QAAO,SAAS,OAAO,SAAS,IAAI,EAAE,CAAC,EAC9C,KAAI,QAAO,IAAI,IAAI;CAC5B;CAEA,eAAe,aAAa,SAA2B,oBAAqD;EACxG,MAAM,cAA6B,CAAC;EACpC,IAAI,QAAQ,aACR,YAAY,KAAK,GAAG,QAAQ,WAAW;EAE3C,IAAI,cAAc,WAAW,QAAQ,SAAS,aAC1C,YAAY,KAAK,GAAG,QAAQ,SAAS,WAAW;EAGpD,MAAM,WADoB,YAAY,OAAO,MAC5B,EAAkB,IAAI,aAAa,iBAAiB;EACrE,MAAM,YAAY,MAAM,QAAQ,IAAI,QAAQ;EAE5C,IAAI,oBACA,OAAO,UAAU,QAAO,MAAK,EAAE,iBAAiB,kBAAkB,EAAE,KAAI,MAAK,EAAE,IAAI;OAEnF,OAAO,UAAU,KAAI,MAAK,EAAE,IAAI;CAExC;CAEA,eAAe,QAAQ,SAA6D;EAChF,MAAM,OAAO,MAAM,kBAAkB;EACrC,IAAI,OAAgC,KAAA;EACpC,IAAI,SAAS,OAET,OAAO,QADU,cAAc,UAAU,QAAQ,WAAW,OACrC;OACpB,IAAI,SAAS,YAChB,OAAO,MAAM,aAAa,SAAS,MAAM,kBAAkB,gBAAgB;EAG/E,IAAI,QAAQ,MAAM,kBAAkB,WAChC,OAAO,KAAK,MAAM,GAAG,MAAM,kBAAkB,SAAS;EAG1D,OAAO;CACX;CAEA,eAAe,kBAAkB,SAA6D;EAC1F,MAAM,OAAO,MAAM,kBAAkB;EACrC,MAAM,0BAA0B,MAAM,kBAAkB;EACxD,IAAI,CAAC,MAAM,QACP;EAGJ,MAAM,UAAU,cAAc,UAAU,UAAU;EAClD,MAAM,WAAW,SAAS,YAAY;EAkBtC,QAAO,MAhBc,QAAQ,IAAI,KAAK,IAAI,OAAM,aAAY;GACxD,IAAI,aAAa,QACb,IAAI,SAAS,SACT,OAAO,WAAW,QAAQ,OAAO;QAEjC,OAAO;QAER,IAAI,aAAa,aACpB,OAAO,SAAS,KAAK;QAClB,IAAI,aAAa,0BAA0B,4BAA4B,KAAA,GAE1E,QAAO,MADiB,aAAa,SAAS,uBAAuB,GACpD,KAAK,IAAI;GAE9B,OAAO;EACX,CAAC,CAAC,GAEY,QAAO,MAAK,MAAM,IAAI;CACxC;CAEA,OAAO;EAAE;EAAS;CAAkB;AACxC"}

package/dist/usePresentationItem-rJkFlZFu.mjs

@@ -0,0 +1,144 @@
+import { E as state, a as rubriquesApi, m as unique } from "./classicApi-BKNiWOG4.mjs";
+import { t as useResizePhone } from "./useResizePhone-CpfFUmfV.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { t as displayHelper_default } from "./displayHelper-CpXshNzz.mjs";
+import { t as useImageProxy } from "./useImageProxy-B2vNJKgd.mjs";
+import { t as useGeneralStore } from "./GeneralStore-CUlq_NjO.mjs";
+import { t as useDayjs } from "./useDayjs-BqojyoqU.mjs";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, resolveDirective, toDisplayString, unref, useTemplateRef, watch, withCtx, withDirectives } from "vue";
+//#region src/components/layouts/PresentationItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"width",
+	"height",
+	"alt",
+	"title"
+];
+var _hoisted_2 = { class: "tags" };
+var _hoisted_3 = { class: "element-name mb-2 basic-line-clamp" };
+var _hoisted_4 = {
+	key: 0,
+	ref: "descriptionItemContainer",
+	class: "element-description htms-wysiwyg-content mt-0"
+};
+var _hoisted_5 = {
+	key: 0,
+	class: "mb-2"
+};
+var _hoisted_6 = ["innerHTML"];
+//#endregion
+//#region src/components/layouts/PresentationItem.vue
+var PresentationItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "PresentationItem",
+	props: {
+		route: {},
+		imageUrl: {},
+		name: {},
+		tags: {},
+		additionalInfo: {},
+		description: {},
+		vertical: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const descriptionItemRef = useTemplateRef("descriptionItem");
+		const descriptionItemContainerRef = useTemplateRef("descriptionItemContainer");
+		const { isPhone } = useResizePhone();
+		const { useProxyImageUrl } = useImageProxy();
+		const tailleImage = computed(() => {
+			if (props.vertical) return "396";
+			else if (isPhone.value) return "246";
+			else return "250";
+		});
+		watch(isPhone, async () => {
+			nextTick(() => {
+				if (!props.description || isPhone.value) return;
+				const itemDesc = descriptionItemRef?.value;
+				const itemDescContainer = descriptionItemContainerRef?.value;
+				if (itemDesc && itemDescContainer && itemDesc.clientHeight > itemDescContainer.clientHeight) itemDescContainer.classList.add("after-element-description");
+			});
+		}, { immediate: true });
+		function urlify(text) {
+			return displayHelper_default.urlify(text);
+		}
+		return (_ctx, _cache) => {
+			const _component_router_link = resolveComponent("router-link");
+			const _directive_lazy = resolveDirective("lazy");
+			return openBlock(), createElementBlock("article", { class: normalizeClass(["classic-element-container item-presentation-container mt-3", __props.vertical ? "vertical-item" : ""]) }, [createVNode(_component_router_link, {
+				to: __props.route,
+				class: normalizeClass(["d-flex-column flex-grow-1 text-dark", __props.vertical ? "flex-column" : ""])
+			}, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["img-box", __props.vertical ? "img-box-bigger" : ""]) }, [
+					withDirectives(createElementVNode("img", {
+						width: tailleImage.value,
+						height: tailleImage.value,
+						"aria-hidden": "true",
+						alt: __props.name,
+						title: __props.name
+					}, null, 8, _hoisted_1), [[_directive_lazy, unref(useProxyImageUrl)(__props.imageUrl, tailleImage.value)]]),
+					createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.tags, (tag) => {
+						return openBlock(), createElementBlock("span", { key: tag }, toDisplayString(tag), 1);
+					}), 128))]),
+					renderSlot(_ctx.$slots, "after-image", {}, void 0, true)
+				], 2), createElementVNode("div", { class: normalizeClass(["classic-element-text pb-0", { "pt-1": __props.vertical }]) }, [createElementVNode("div", _hoisted_3, toDisplayString(__props.name), 1), !unref(isPhone) && (__props.description || __props.additionalInfo) ? (openBlock(), createElementBlock("div", _hoisted_4, [__props.additionalInfo ? (openBlock(), createElementBlock("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.additionalInfo, (info, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: index,
+						class: "text-secondary"
+					}, toDisplayString(info), 1);
+				}), 128))])) : createCommentVNode("", true), __props.description ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					ref: "descriptionItem",
+					innerHTML: urlify(__props.description || "")
+				}, null, 8, _hoisted_6)) : createCommentVNode("", true)], 512)) : createCommentVNode("", true)], 2)]),
+				_: 3
+			}, 8, ["to", "class"])], 2);
+		};
+	}
+}), [["__scopeId", "data-v-9e52d398"]]);
+//#endregion
+//#region src/components/composable/usePresentationItem.ts
+var usePresentationItem = () => {
+	const generalStore = useGeneralStore();
+	const { formatDate } = useDayjs();
+	function iabTags(emission) {
+		return generalStore.storedCategories.filter((cat) => emission.iabIds.includes(cat.id)).map((cat) => cat.name);
+	}
+	async function rubriqueTags(element, filterRubriquageId) {
+		const rubriqueIds = [];
+		if (element.rubriqueIds) rubriqueIds.push(...element.rubriqueIds);
+		if ("emission" in element && element.emission.rubriqueIds) rubriqueIds.push(...element.emission.rubriqueIds);
+		const promises = rubriqueIds.filter(unique).map(rubriquesApi.getCachedRubrique);
+		const rubriques = await Promise.all(promises);
+		if (filterRubriquageId) return rubriques.filter((r) => r.rubriquageId === filterRubriquageId).map((r) => r.name);
+		else return rubriques.map((r) => r.name);
+	}
+	async function tagsFor(element) {
+		const type = state.presentationItems.tags;
+		let tags = void 0;
+		if (type === "iab") tags = iabTags("emission" in element ? element.emission : element);
+		else if (type === "rubrique") tags = await rubriqueTags(element, state.presentationItems.tagsRubriquageId);
+		if (tags && state.presentationItems.tagsLimit) return tags.slice(0, state.presentationItems.tagsLimit);
+		return tags;
+	}
+	async function additionalInfoFor(element) {
+		const prop = state.presentationItems.additionalInfo;
+		const restrictiveRubriquageId = state.presentationItems.restrictiveRubriquageId;
+		if (!prop?.length) return;
+		const podcast = "emission" in element ? element : null;
+		const emission = podcast?.emission ?? element;
+		return (await Promise.all(prop.map(async (property) => {
+			if (property === "date") if (podcast?.pubDate) return formatDate(podcast.pubDate);
+			else return null;
+			else if (property === "productor") return emission.orga.name;
+			else if (property === "restrictive-rubrique" && restrictiveRubriquageId !== void 0) return (await rubriqueTags(element, restrictiveRubriquageId)).join(", ");
+			return null;
+		}))).filter((p) => p !== null);
+	}
+	return {
+		tagsFor,
+		additionalInfoFor
+	};
+};
+//#endregion
+export { PresentationItem_default as n, usePresentationItem as t };
+
+//# sourceMappingURL=usePresentationItem-rJkFlZFu.mjs.map

package/dist/usePresentationItem-rJkFlZFu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePresentationItem-rJkFlZFu.mjs","names":[],"sources":["../src/components/layouts/PresentationItem.vue","../src/components/layouts/PresentationItem.vue","../src/components/composable/usePresentationItem.ts"],"sourcesContent":["<!--\n  Component to display an element with its description\n-->\n<template>\n    <article\n        class=\"classic-element-container item-presentation-container mt-3\"\n        :class=\"vertical ? 'vertical-item' : ''\"\n    >\n        <router-link\n            :to=\"route\"\n            class=\"d-flex-column flex-grow-1 text-dark\"\n            :class=\"vertical ? 'flex-column' : ''\"\n        >\n            <div\n                class=\"img-box\"\n                :class=\"vertical ? 'img-box-bigger' : ''\"\n            >\n                <img\n                    v-lazy=\"useProxyImageUrl(imageUrl, tailleImage)\"\n                    :width=\"tailleImage\"\n                    :height=\"tailleImage\"\n                    aria-hidden=\"true\"\n                    :alt=\"name\"\n                    :title=\"name\"\n                >\n\n                <div class=\"tags\">\n                    <span\n                        v-for=\"tag in tags\"\n                        :key=\"tag\"\n                    >\n                        {{ tag }}\n                    </span>\n                </div>\n\n                <slot name=\"after-image\" />\n            </div>\n      \n            <div\n                class=\"classic-element-text pb-0\"\n                :class=\"{ 'pt-1': vertical }\"\n            >\n                <div class=\"element-name mb-2 basic-line-clamp\">\n                    {{ name }}\n                </div>\n                <div\n                    v-if=\"!isPhone && (description || additionalInfo)\"\n                    ref=\"descriptionItemContainer\"\n                    class=\"element-description htms-wysiwyg-content mt-0\"\n                >\n                    <div v-if=\"additionalInfo\" class=\"mb-2\">\n                        <div\n                            v-for=\"info, index in additionalInfo\"\n                            :key=\"index\"\n                            class=\"text-secondary\"\n                        >\n                            {{ info }}\n                        </div>\n                    </div>\n                    <!-- eslint-disable vue/no-v-html -->\n                    <div\n                        v-if=\"description\"\n                        ref=\"descriptionItem\"\n                        v-html=\"urlify(description || '')\"\n                    />\n                    <!-- eslint-enable -->\n                </div>\n            </div>\n        </router-link>\n    </article>\n</template>\n\n<script setup lang=\"ts\">\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport displayHelper from \"../../helper/displayHelper\";\nimport { nextTick, useTemplateRef, watch, computed } from \"vue\";\nimport { RouteLocationRaw } from \"vue-router\";\n\n//Props \nconst props = defineProps<{\n    /** The route to which to redirect when clicking on element */\n    route: RouteLocationRaw|string;\n    /** The URL to the image */\n    imageUrl: string;\n    /** The name of the element */\n    name: string;\n    /** Tags associated with the element (rubriques, themes, etc) */\n    tags?: Array<string>;\n    /** Additional info displayed below name */\n    additionalInfo?: Array<string>;\n    /** The description of the element */\n    description?: string;\n    /** When true display the card vertically */\n    vertical?: boolean;\n}>();\n\n//Data\nconst descriptionItemRef = useTemplateRef('descriptionItem');\nconst descriptionItemContainerRef = useTemplateRef('descriptionItemContainer');\n\n\n//Composables\nconst { isPhone } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\n\n// Computed\n// Calcul de la taille de l'image\nconst tailleImage = computed(() => {\n    // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures\n    if (props.vertical) {\n        return '396';\n    } else if (isPhone.value) {\n        return '246';\n    } else {\n        return '250';\n    }\n});\n\n//Watch\nwatch(isPhone, async () => {\n    nextTick(() => {\n        if (!props.description || isPhone.value) {\n            return;\n        }\n        const itemDesc = descriptionItemRef?.value as HTMLElement;\n        const itemDescContainer = descriptionItemContainerRef?.value as HTMLElement;\n        if (\n            itemDesc &&\n            itemDescContainer &&\n            itemDesc.clientHeight > itemDescContainer.clientHeight\n        ) {\n            itemDescContainer.classList.add(\"after-element-description\");\n        }\n    });\n}, { immediate: true });\n\nfunction urlify(text:string|undefined){\n    return displayHelper.urlify(text);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app {\n    .item-presentation-container {\n        @media (width <= 960px) {\n            width: 250px !important;\n            margin-right: 0.5rem;\n        }\n\n        .element-description {\n            height: 0;\n            flex-grow: 1;\n            max-height: unset;\n\n            p:first-child {\n                // Prevent unecessary space before first paragraph\n                margin-top: 0 !important;\n            }\n        }\n    }\n\n    .classic-element-container.vertical-item {\n        flex-grow: 0;\n        width: 400px;\n        flex-shrink: 0;\n    }\n\n    .img-box {\n        // Make it relative so that absolute elements associated with the image\n        // are positioned within the image box\n        position: relative;\n\n        @media (width <= 960px) {\n            height: calc(var(--octopus-image-size) - 4);\n        }\n    }\n\n    .img-box-bigger {\n        // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures\n        width: 396px;\n        height: 396px;\n    }\n\n    .tags {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n\n        display: flex;\n        gap: 10px;\n        flex-wrap: wrap;\n\n        > span {\n            background-color: white;\n            padding: .25em .75em;\n            font-size: 14px;\n            font-weight: bold;\n            color: var(--octopus-primary);\n            border-radius: var(--octopus-border-radius);\n            border: 1px solid color-mix(in lch, var(--octopus-primary), transparent 60%);\n\n            // Limit width\n            max-width: 200px;\n            overflow: hidden;\n            white-space: nowrap;\n            text-overflow: ellipsis;\n        }\n    }\n}\n</style>\n","<!--\n  Component to display an element with its description\n-->\n<template>\n    <article\n        class=\"classic-element-container item-presentation-container mt-3\"\n        :class=\"vertical ? 'vertical-item' : ''\"\n    >\n        <router-link\n            :to=\"route\"\n            class=\"d-flex-column flex-grow-1 text-dark\"\n            :class=\"vertical ? 'flex-column' : ''\"\n        >\n            <div\n                class=\"img-box\"\n                :class=\"vertical ? 'img-box-bigger' : ''\"\n            >\n                <img\n                    v-lazy=\"useProxyImageUrl(imageUrl, tailleImage)\"\n                    :width=\"tailleImage\"\n                    :height=\"tailleImage\"\n                    aria-hidden=\"true\"\n                    :alt=\"name\"\n                    :title=\"name\"\n                >\n\n                <div class=\"tags\">\n                    <span\n                        v-for=\"tag in tags\"\n                        :key=\"tag\"\n                    >\n                        {{ tag }}\n                    </span>\n                </div>\n\n                <slot name=\"after-image\" />\n            </div>\n      \n            <div\n                class=\"classic-element-text pb-0\"\n                :class=\"{ 'pt-1': vertical }\"\n            >\n                <div class=\"element-name mb-2 basic-line-clamp\">\n                    {{ name }}\n                </div>\n                <div\n                    v-if=\"!isPhone && (description || additionalInfo)\"\n                    ref=\"descriptionItemContainer\"\n                    class=\"element-description htms-wysiwyg-content mt-0\"\n                >\n                    <div v-if=\"additionalInfo\" class=\"mb-2\">\n                        <div\n                            v-for=\"info, index in additionalInfo\"\n                            :key=\"index\"\n                            class=\"text-secondary\"\n                        >\n                            {{ info }}\n                        </div>\n                    </div>\n                    <!-- eslint-disable vue/no-v-html -->\n                    <div\n                        v-if=\"description\"\n                        ref=\"descriptionItem\"\n                        v-html=\"urlify(description || '')\"\n                    />\n                    <!-- eslint-enable -->\n                </div>\n            </div>\n        </router-link>\n    </article>\n</template>\n\n<script setup lang=\"ts\">\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport displayHelper from \"../../helper/displayHelper\";\nimport { nextTick, useTemplateRef, watch, computed } from \"vue\";\nimport { RouteLocationRaw } from \"vue-router\";\n\n//Props \nconst props = defineProps<{\n    /** The route to which to redirect when clicking on element */\n    route: RouteLocationRaw|string;\n    /** The URL to the image */\n    imageUrl: string;\n    /** The name of the element */\n    name: string;\n    /** Tags associated with the element (rubriques, themes, etc) */\n    tags?: Array<string>;\n    /** Additional info displayed below name */\n    additionalInfo?: Array<string>;\n    /** The description of the element */\n    description?: string;\n    /** When true display the card vertically */\n    vertical?: boolean;\n}>();\n\n//Data\nconst descriptionItemRef = useTemplateRef('descriptionItem');\nconst descriptionItemContainerRef = useTemplateRef('descriptionItemContainer');\n\n\n//Composables\nconst { isPhone } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\n\n// Computed\n// Calcul de la taille de l'image\nconst tailleImage = computed(() => {\n    // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures\n    if (props.vertical) {\n        return '396';\n    } else if (isPhone.value) {\n        return '246';\n    } else {\n        return '250';\n    }\n});\n\n//Watch\nwatch(isPhone, async () => {\n    nextTick(() => {\n        if (!props.description || isPhone.value) {\n            return;\n        }\n        const itemDesc = descriptionItemRef?.value as HTMLElement;\n        const itemDescContainer = descriptionItemContainerRef?.value as HTMLElement;\n        if (\n            itemDesc &&\n            itemDescContainer &&\n            itemDesc.clientHeight > itemDescContainer.clientHeight\n        ) {\n            itemDescContainer.classList.add(\"after-element-description\");\n        }\n    });\n}, { immediate: true });\n\nfunction urlify(text:string|undefined){\n    return displayHelper.urlify(text);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app {\n    .item-presentation-container {\n        @media (width <= 960px) {\n            width: 250px !important;\n            margin-right: 0.5rem;\n        }\n\n        .element-description {\n            height: 0;\n            flex-grow: 1;\n            max-height: unset;\n\n            p:first-child {\n                // Prevent unecessary space before first paragraph\n                margin-top: 0 !important;\n            }\n        }\n    }\n\n    .classic-element-container.vertical-item {\n        flex-grow: 0;\n        width: 400px;\n        flex-shrink: 0;\n    }\n\n    .img-box {\n        // Make it relative so that absolute elements associated with the image\n        // are positioned within the image box\n        position: relative;\n\n        @media (width <= 960px) {\n            height: calc(var(--octopus-image-size) - 4);\n        }\n    }\n\n    .img-box-bigger {\n        // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures\n        width: 396px;\n        height: 396px;\n    }\n\n    .tags {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n\n        display: flex;\n        gap: 10px;\n        flex-wrap: wrap;\n\n        > span {\n            background-color: white;\n            padding: .25em .75em;\n            font-size: 14px;\n            font-weight: bold;\n            color: var(--octopus-primary);\n            border-radius: var(--octopus-border-radius);\n            border: 1px solid color-mix(in lch, var(--octopus-primary), transparent 60%);\n\n            // Limit width\n            max-width: 200px;\n            overflow: hidden;\n            white-space: nowrap;\n            text-overflow: ellipsis;\n        }\n    }\n}\n</style>\n","import { Emission } from \"@/stores/class/general/emission\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"../../stores/class/general/podcast\";\nimport { rubriquesApi } from \"../../api\";\nimport { useDayjs } from \"./useDayjs\";\nimport { unique } from \"@/helper/arrayHelper\";\n\nexport const usePresentationItem = () => {\n    const generalStore = useGeneralStore();\n    const { formatDate } = useDayjs();\n\n    function iabTags(emission: Emission): Array<string> {\n        return generalStore.storedCategories\n            .filter(cat => emission.iabIds.includes(cat.id))\n            .map(cat => cat.name);\n    }\n\n    async function rubriqueTags(element: Podcast|Emission, filterRubriquageId?: number): Promise<Array<string>> {\n        const rubriqueIds: Array<number> = [];\n        if (element.rubriqueIds) {\n            rubriqueIds.push(...element.rubriqueIds);\n        }\n        if ('emission' in element && element.emission.rubriqueIds) {\n            rubriqueIds.push(...element.emission.rubriqueIds);\n        }\n        const uniqueRubriqueIds = rubriqueIds.filter(unique);\n        const promises = uniqueRubriqueIds.map(rubriquesApi.getCachedRubrique);\n        const rubriques = await Promise.all(promises);\n\n        if (filterRubriquageId) {\n            return rubriques.filter(r => r.rubriquageId === filterRubriquageId).map(r => r.name);\n        } else {\n            return rubriques.map(r => r.name);\n        }\n    }\n    \n    async function tagsFor(element: Podcast|Emission): Promise<Array<string>|undefined> {\n        const type = state.presentationItems.tags;\n        let tags: Array<string>|undefined = undefined;\n        if (type === 'iab') {\n            const emission = 'emission' in element ? element.emission : element;\n            tags = iabTags(emission);\n        } else if (type === 'rubrique') {\n            tags = await rubriqueTags(element, state.presentationItems.tagsRubriquageId);\n        }\n\n        if (tags && state.presentationItems.tagsLimit) {\n            return tags.slice(0, state.presentationItems.tagsLimit);\n        }\n\n        return tags;\n    }\n\n    async function additionalInfoFor(element: Podcast|Emission): Promise<Array<string>|undefined> {\n        const prop = state.presentationItems.additionalInfo;\n        const restrictiveRubriquageId = state.presentationItems.restrictiveRubriquageId;\n        if (!prop?.length) {\n            return undefined;\n        }\n\n        const podcast = 'emission' in element ? element : null;\n        const emission = podcast?.emission ?? element as Emission;\n\n        const result = await Promise.all(prop.map(async property => {\n            if (property === 'date') {\n                if (podcast?.pubDate) {\n                    return formatDate(podcast.pubDate);\n                } else {\n                    return null;\n                }\n            } else if (property === 'productor') {\n                return emission.orga.name;\n            } else if (property === 'restrictive-rubrique' && restrictiveRubriquageId !== undefined) {\n                const rubriques = await rubriqueTags(element, restrictiveRubriquageId);\n                return rubriques.join(', ');\n            }\n            return null;\n        }));\n\n        return result.filter(p => p !== null);\n    }\n\n    return { tagsFor, additionalInfoFor };\n};\n"],"mappings":"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"}

package/dist/useResizePhone-CpfFUmfV.mjs

@@ -0,0 +1,37 @@
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+//#region src/helper/debounceHelper.ts
+function debounce(func, timeout) {
+	let timer;
+	return (...args) => {
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			func(...args);
+		}, timeout);
+	};
+}
+//#endregion
+//#region src/components/composable/useResizePhone.ts
+var useResizePhone = () => {
+	const windowWidth = ref(0);
+	const debounceResizeEvent = ref(void 0);
+	const isPhone = computed(() => windowWidth.value < 960);
+	function handleResize() {
+		windowWidth.value = window.innerWidth;
+	}
+	onMounted(() => {
+		debounceResizeEvent.value = debounce(handleResize, 500);
+		window.addEventListener("resize", debounceResizeEvent.value);
+		handleResize();
+	});
+	onBeforeUnmount(() => {
+		window.removeEventListener("resize", debounceResizeEvent.value);
+	});
+	return {
+		isPhone,
+		windowWidth
+	};
+};
+//#endregion
+export { debounce as n, useResizePhone as t };
+
+//# sourceMappingURL=useResizePhone-CpfFUmfV.mjs.map

package/dist/useResizePhone-CpfFUmfV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizePhone-CpfFUmfV.mjs","names":[],"sources":["../src/helper/debounceHelper.ts","../src/components/composable/useResizePhone.ts"],"sourcesContent":["export default function debounce<Params extends any[]>(\n  func: (...args: Params) => any,\n  timeout: number,\n): (...args: Params) => void {\n  let timer: ReturnType<typeof setTimeout>;\n  return (...args: Params) => {\n    clearTimeout(timer)\n    timer = setTimeout(() => {\n      func(...args)\n    }, timeout)\n  }\n}","import debounce from '../../helper/debounceHelper';\nimport {computed, onBeforeUnmount, onMounted, Ref, ref} from 'vue';\nexport const useResizePhone = ()=>{\n\tconst windowWidth = ref(0);\n  const debounceResizeEvent : Ref<undefined|((...args: any[]) => void)> =ref(undefined);\n\n  const isPhone = computed(() => windowWidth.value < 960);\n\n  function handleResize() {\n    windowWidth.value = window.innerWidth;\n  }\n  onMounted(() => {\n    debounceResizeEvent.value = debounce(handleResize, 500);\n    window.addEventListener('resize', debounceResizeEvent.value);\n    handleResize();\n  })\n  \n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', debounceResizeEvent.value);\n  })\n\n\treturn {\n    isPhone,\n\t\twindowWidth,\n\t}\n}\n\n"],"mappings":";;AAAA,SAAwB,SACtB,MACA,SAC2B;CAC3B,IAAI;CACJ,QAAQ,GAAG,SAAiB;EAC1B,aAAa,KAAK;EAClB,QAAQ,iBAAiB;GACvB,KAAK,GAAG,IAAI;EACd,GAAG,OAAO;CACZ;AACF;;;ACTA,IAAa,uBAAqB;CACjC,MAAM,cAAc,IAAI,CAAC;CACxB,MAAM,sBAAiE,IAAI,KAAA,CAAS;CAEpF,MAAM,UAAU,eAAe,YAAY,QAAQ,GAAG;CAEtD,SAAS,eAAe;EACtB,YAAY,QAAQ,OAAO;CAC7B;CACA,gBAAgB;EACd,oBAAoB,QAAQ,SAAS,cAAc,GAAG;EACtD,OAAO,iBAAiB,UAAU,oBAAoB,KAAK;EAC3D,aAAa;CACf,CAAC;CAED,sBAAsB;EACpB,OAAO,oBAAoB,UAAU,oBAAoB,KAAK;CAChE,CAAC;CAEF,OAAO;EACJ;EACF;CACD;AACD"}

package/dist/useRights-JVTbEOUh.mjs

@@ -0,0 +1,276 @@
+import { i as useAuthStore } from "./classicApi-BKNiWOG4.mjs";
+//#region src/components/composable/useRights.ts
+var ActionRight = /* @__PURE__ */ function(ActionRight) {
+	/** User can perform the action */
+	ActionRight["Allowed"] = "allowed";
+	/** User lacks the required role */
+	ActionRight["DeniedNoRight"] = "no_right";
+	/** User has a restricted role but does not own the resource **/
+	ActionRight["DeniedNotOwner"] = "not_owner";
+	/** User is scoped to specific rubriques */
+	ActionRight["DeniedInsufficientScope"] = "no_scope";
+	return ActionRight;
+}({});
+/**
+* Generates boolean shortcut functions from a set of `getRightXxx` functions.
+*
+* Convention: `get${Action}Right(…args) → ActionRight`
+*         becomes `can${Action}(…args) → boolean`
+*
+* The generated function returns true when the underlying getRightXxx returns
+* ActionRight.Allowed, and false otherwise. This means callers that only need
+* a simple yes/no answer can use canXxx(), while callers that need the specific
+* denial reason (DeniedNoRight vs DeniedNotOwner) can call getRightXxx() directly.
+*
+* Only synchronous functions should be passed here; async rights functions must
+* be wrapped manually.
+*/
+function deriveCanFunctions(fns) {
+	const result = {};
+	for (const key of Object.keys(fns)) if (key.startsWith("get") && key.endsWith("Right")) {
+		const canKey = `can${key.slice(3, -5)}`;
+		result[canKey] = (...args) => fns[key](...args) === "allowed";
+	}
+	return result;
+}
+/**
+* Composable to manage rights.
+* Based on AuthStore, but converts roles to easily usable tests for various
+* actions.
+*/
+var useRights = () => {
+	const authStore = useAuthStore();
+	function roleContainsAny(...roles) {
+		return authStore.authRole.findIndex((r) => roles.includes(r)) > -1;
+	}
+	function hasSufficientScope(elementRubriques = [], parentRubriques = []) {
+		const ids = elementRubriques.concat(parentRubriques);
+		const scope = authStore.userScope;
+		if (scope.length === 0) return true;
+		for (const id of scope) if (ids.includes(id)) return true;
+		return false;
+	}
+	function getCreateEmissionRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION", "RESTRICTED_PRODUCTION") ? "allowed" : "no_right";
+	}
+	function getEditEmissionRight(emission) {
+		if (!hasSufficientScope(emission.rubriqueIds)) return "no_scope";
+		if (!emission.emissionId && getCreateEmissionRight() === "allowed" || roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION")) return "allowed";
+		if (roleContainsAny("RESTRICTED_PRODUCTION")) return emission.createdByUserId === authStore.authProfile?.userId ? "allowed" : "not_owner";
+		return "no_right";
+	}
+	function getDeleteEmissionRight(emission) {
+		if (roleContainsAny("ADMIN", "ORGANISATION")) return "allowed";
+		else if (roleContainsAny("PRODUCTION", "RESTRICTED_PRODUCTION")) return hasSufficientScope(emission.rubriqueIds) ? "allowed" : "no_scope";
+		else return "no_right";
+	}
+	function getEditCommentsConfigEmissionRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION") ? "allowed" : "no_right";
+	}
+	function getCreatePodcastRight(emission) {
+		if (roleContainsAny("ADMIN", "ORGANISATION")) return "allowed";
+		else if (roleContainsAny("PRODUCTION", "PODCAST_CRUD", "RESTRICTED_PRODUCTION", "RESTRICTED_ANIMATION")) return !emission || hasSufficientScope(emission.rubriqueIds) ? "allowed" : "no_scope";
+		else return "no_right";
+	}
+	function getDuplicatePodcastRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION", "RESTRICTED_PRODUCTION") ? "allowed" : "no_right";
+	}
+	function getEditPodcastRight(podcast) {
+		if (!hasSufficientScope(podcast.rubriqueIds, podcast.emission.rubriqueIds)) return "no_scope";
+		if (roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION")) return "allowed";
+		if (roleContainsAny("RESTRICTED_PRODUCTION", "RESTRICTED_ANIMATION")) return podcast.createdByUserId === authStore.authProfile?.userId ? "allowed" : "not_owner";
+		if (roleContainsAny("PODCAST_CRUD")) return podcast.valid === false && podcast.publisher?.userId === authStore.authProfile?.userId ? "allowed" : "not_owner";
+		return "no_right";
+	}
+	function getDeletePodcastRight(podcast) {
+		return getEditPodcastRight(podcast);
+	}
+	function getValidatePodcastRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION", "PODCAST_VALIDATION") ? "allowed" : "no_right";
+	}
+	function getEditCommentsConfigPodcastRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION") ? "allowed" : "no_right";
+	}
+	function getCreatePlaylistRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PLAYLISTS") ? "allowed" : "no_right";
+	}
+	function getEditPlaylistRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PLAYLISTS") ? "allowed" : "no_right";
+	}
+	function getDeletePlaylistRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PLAYLISTS") ? "allowed" : "no_right";
+	}
+	function getCreateParticipantRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION", "RESTRICTED_PRODUCTION") ? "allowed" : "no_right";
+	}
+	async function getParticipantEditRight(participantId) {
+		return !participantId || roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION", "RESTRICTED_PRODUCTION") ? "allowed" : "no_right";
+	}
+	async function canEditParticipant(participantId) {
+		return await getParticipantEditRight(participantId) === "allowed";
+	}
+	async function canDeleteParticipant(participantId) {
+		return await getParticipantEditRight(participantId) === "allowed";
+	}
+	function getCreateRubriquesRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "EDITION") ? "allowed" : "no_right";
+	}
+	function getEditRubriquesRight(_element) {
+		return getCreateRubriquesRight();
+	}
+	function getCreateAggregatorRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION") ? "allowed" : "no_right";
+	}
+	function getEditAggregatorRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION") ? "allowed" : "no_right";
+	}
+	function getDeleteAggregatorRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION") ? "allowed" : "no_right";
+	}
+	function getCreateCartouchierRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION", "RADIO", "ANIMATION", "PODCAST_CRUD", "RESTRICTED_PRODUCTION", "RESTRICTED_ANIMATION") ? "allowed" : "no_right";
+	}
+	function getEditCartouchierRight(element) {
+		if (roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION", "RADIO", "ANIMATION")) return "allowed";
+		if (roleContainsAny("RESTRICTED_PRODUCTION", "RESTRICTED_ANIMATION", "PODCAST_CRUD")) return element.ownerId !== void 0 && element.ownerId !== null && element.ownerId === authStore.authProfile?.userId ? "allowed" : "not_owner";
+		return "no_right";
+	}
+	function getDeleteCartouchierRight(element) {
+		return getEditCartouchierRight(element);
+	}
+	function getCreatePlaylistMediaRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION", "RADIO", "ANIMATION", "PODCAST_CRUD", "RESTRICTED_PRODUCTION", "RESTRICTED_ANIMATION") ? "allowed" : "no_right";
+	}
+	function getEditPlaylistMediaRight(element) {
+		if (roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION", "RADIO", "ANIMATION")) return "allowed";
+		if (roleContainsAny("RESTRICTED_PRODUCTION", "RESTRICTED_ANIMATION", "PODCAST_CRUD")) return element.ownerId !== void 0 && element.ownerId !== null && element.ownerId === authStore.authProfile?.userId ? "allowed" : "not_owner";
+		return "no_right";
+	}
+	function getDeletePlaylistMediaRight(element) {
+		return getEditPlaylistMediaRight(element);
+	}
+	function getCreateMediaRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION", "RADIO", "ANIMATION", "PODCAST_CRUD", "RESTRICTED_PRODUCTION", "RESTRICTED_ANIMATION") ? "allowed" : "no_right";
+	}
+	function getEditMediaRight(element) {
+		if (roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION", "RADIO", "ANIMATION")) return "allowed";
+		if (roleContainsAny("RESTRICTED_PRODUCTION", "RESTRICTED_ANIMATION", "PODCAST_CRUD")) return element.ownerId !== void 0 && element.ownerId !== null && element.ownerId === authStore.authProfile?.userId ? "allowed" : "not_owner";
+		return "no_right";
+	}
+	function getDeleteMediaRight(element) {
+		return getEditMediaRight(element);
+	}
+	function getCreateMixRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "RADIO") ? "allowed" : "no_right";
+	}
+	function getEditMixRight(_element) {
+		return getCreateMixRight();
+	}
+	function getDeleteMixRight(element) {
+		return getEditMixRight(element);
+	}
+	function getEditTranscriptRight(podcast) {
+		if (!hasSufficientScope(podcast.rubriqueIds, podcast.emission.rubriqueIds)) return "no_scope";
+		if (roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION")) return "allowed";
+		if (roleContainsAny("RESTRICTED_PRODUCTION", "PODCAST_CRUD")) return podcast.createdByUserId === authStore.authProfile?.userId ? "allowed" : "not_owner";
+		return "no_right";
+	}
+	function getEditTranscriptVisibilityRight(podcast) {
+		if (!hasSufficientScope(podcast.rubriqueIds, podcast.emission.rubriqueIds)) return "no_scope";
+		return roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION") ? "allowed" : "no_right";
+	}
+	function getEditTranslationRight(podcast) {
+		return getEditTranscriptRight(podcast);
+	}
+	function getAccessRecordingRight(conference, isLive) {
+		if (isLive) return roleContainsAny("LIVE") ? "allowed" : "no_right";
+		else return roleContainsAny("ANIMATION", "RESTRICTED_ANIMATION") ? "allowed" : "no_right";
+	}
+	function getEditCodeInsertPlayerRight() {
+		return roleContainsAny("ADMIN", "ORGANISATION") ? "allowed" : "no_right";
+	}
+	function getEditChapteringRight(podcast) {
+		return getEditPodcastRight(podcast);
+	}
+	function getCreatePromoVideoRight(podcast) {
+		if (!hasSufficientScope(podcast.rubriqueIds, podcast.emission.rubriqueIds)) return "no_scope";
+		else if (roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION")) return "allowed";
+		else return "no_right";
+	}
+	function getEditPromoVideoRight(podcast) {
+		return getCreatePromoVideoRight(podcast);
+	}
+	function getDeletePromoVideoRight(podcast) {
+		return getCreatePromoVideoRight(podcast);
+	}
+	function canSeeHistory() {
+		return roleContainsAny("ADMIN", "ORGANISATION");
+	}
+	function isRestrictedProduction() {
+		return roleContainsAny("RESTRICTED_PRODUCTION") && !roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION");
+	}
+	const rightFns = {
+		getCreateEmissionRight,
+		getEditEmissionRight,
+		getDeleteEmissionRight,
+		getEditCommentsConfigEmissionRight,
+		getCreatePodcastRight,
+		getDuplicatePodcastRight,
+		getEditPodcastRight,
+		getDeletePodcastRight,
+		getValidatePodcastRight,
+		getEditCommentsConfigPodcastRight,
+		getCreatePlaylistRight,
+		getEditPlaylistRight,
+		getDeletePlaylistRight,
+		getCreateParticipantRight,
+		getCreateRubriquesRight,
+		getEditRubriquesRight,
+		getCreateAggregatorRight,
+		getEditAggregatorRight,
+		getDeleteAggregatorRight,
+		getCreateCartouchierRight,
+		getEditCartouchierRight,
+		getDeleteCartouchierRight,
+		getCreatePlaylistMediaRight,
+		getEditPlaylistMediaRight,
+		getDeletePlaylistMediaRight,
+		getCreateMediaRight,
+		getEditMediaRight,
+		getDeleteMediaRight,
+		getCreateMixRight,
+		getEditMixRight,
+		getDeleteMixRight,
+		getEditTranscriptRight,
+		getEditTranscriptVisibilityRight,
+		getEditTranslationRight,
+		getAccessRecordingRight,
+		getEditCodeInsertPlayerRight,
+		getEditChapteringRight,
+		getCreatePromoVideoRight,
+		getEditPromoVideoRight,
+		getDeletePromoVideoRight
+	};
+	const canFns = deriveCanFunctions(rightFns);
+	function canReadRSSRules() {
+		return roleContainsAny("ADMIN", "ORGANISATION", "PRODUCTION");
+	}
+	function canEditRSSRules() {
+		return canReadRSSRules();
+	}
+	return {
+		...rightFns,
+		...canFns,
+		getParticipantEditRight,
+		canEditParticipant,
+		canDeleteParticipant,
+		canReadRSSRules,
+		canEditRSSRules,
+		canSeeHistory,
+		isRestrictedProduction
+	};
+};
+//#endregion
+export { useRights as n, ActionRight as t };
+
+//# sourceMappingURL=useRights-JVTbEOUh.mjs.map