{"version":3,"file":"ArticleCard.a38d952a.js","sources":["../../../node_modules/@heroicons/vue/solid/esm/DocumentIcon.js","../../../resources/js/Icons/Small/ArchiveIcon.vue","../../../resources/js/Icons/Small/ShareIcon.vue","../../../resources/js/Components/Articles/ArticleCard.vue"],"sourcesContent":["import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\"\n  }, [\n    _createVNode(\"path\", {\n      \"fill-rule\": \"evenodd\",\n      d: \"M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z\",\n      \"clip-rule\": \"evenodd\"\n    })\n  ]))\n}","<template>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path d=\"M4 3a2 2 0 100 4h12a2 2 0 100-4H4z\" />\n        <path fill-rule=\"evenodd\" d=\"M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z\" clip-rule=\"evenodd\" />\n    </svg>\n</template>\n\n<script>\nexport default {\n    name: \"ArchiveIcon\"\n}\n</script>\n\n<style scoped>\n\n</style>\n","<template>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path d=\"M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z\" />\n    </svg>\n</template>\n\n<script>\nexport default {\n    name: \"ShareIcon\"\n}\n</script>\n\n<style scoped>\n\n</style>\n","<template>\n    <article\n        class=\"border rounded relative bg-white mb-4 shadow flex flex-col duration-300 transition-all overflow-hidden\"\n        :class=\"{\n            'border-gray-200': !article.is_pinned,\n            'border-yellow-500': article.is_pinned,\n            'flex-col md:flex-row': fullWidth,\n            'group hover:border-primary hover:shadow-xl': type !== 'div',\n        }\"\n    >\n        <div v-if=\"publishedToday\"\n             class=\"absolute z-20 left-0 top-0 py-1 px-8 bg-primary text-white text-xs shadow-xl -rotate-45 origin-top-right -translate-x-1/2 -translate-y-full\">\n            LATEST\n        </div>\n\n        <component :is=\"componentType\"\n            :href=\"href ? href : route('articles.show', {article: article.slug})\"\n            class=\"relative flex flex-col items-start py-3 px-4 duration-300 transition-colors flex-1 w-full\"\n            :class=\"{\n                'flex-col md:flex-row': fullWidth\n            }\"\n        >\n            <figure\n                class=\"rounded overflow-hidden m-0 flex-none relative w-full\"\n                :class=\"{\n                    'md:w-36': fullWidth,\n                }\"\n            >\n                <div\n                    class=\"absolute left-0 right-0 top-0 bottom-0 bg-black bg-opacity-50 z-10 flex justify-center\n                        items-center text-white duration-500 transition-all opacity-0 group-hover:opacity-100\"\n                >\n                    <span class=\"transform duration-500 -translate-y-20 group-hover:translate-y-0 px-3 py-1 rounded bg-primary text-sm\">\n                        <slot name=\"read-more-label\">\n                            READ MORE\n                        </slot>\n                    </span>\n                </div>\n                <img :src=\"article.cover_image_url\" class=\"block w-full transform group-hover:scale-125 duration-500\" :alt=\"article.title\" />\n            </figure>\n            <div\n                class=\"w-full mt-2 ml-0 flex-1 flex flex-col\"\n                :class=\"{\n                    'md:ml-3': fullWidth,\n                }\"\n            >\n                <div\n                    class=\"w-full justify-between items-start mb-2\"\n                    :class=\"{\n                        'md:flex': fullWidth,\n                    }\"\n                >\n                    <div\n                        class=\"text-sm text-gray-500 w-full mb-2\"\n                        :class=\"{\n                            'lg:flex lg:space-x-2': fullWidth,\n                        }\"\n                    >\n                        <div class=\"font-bold\">\n                            {{ article.presentable.published_at }}\n                        </div>\n                        <div v-if=\"article.pending_publish\" class=\"flex items-center space-x-1\">\n                            <Tooltip>\n                                <template #trigger>\n                                    <ClockIcon class=\"w-4 text-yellow-500\" />\n\n                                </template>\n                                Will be published automatically\n                            </Tooltip>\n                        </div>\n                        <div class=\"border-r border-gray-200 mx-2\" />\n                        <div class=\"opacity-70\">{{ article.category.title }}</div>\n                    </div>\n                    <div\n                        class=\"flex-initial flex text-xs text-gray-400 divide-x divide-gray-300 items-start\"\n                        :class=\"{\n                            'md:justify-end md:mt-0': fullWidth,\n                        }\"\n                    >\n                        <div\n                            class=\"px-2 whitespace-nowrap flex space-x-2 pl-0\"\n                            :class=\"{\n                                'md:pl-2': fullWidth,\n                            }\"\n                        >\n                            <span class=\"text-primary font-bold\">{{ article.images_count }}</span>\n                            <span class=\"flex space-x-1\">\n                                <PhotographIcon class=\"w-4 h-full\" />\n                                <span\n                                    class=\"hidden\"\n                                    :class=\"{\n                                        'lg:block': fullWidth,\n                                    }\"\n                                >IMAGES</span>\n                            </span>\n                        </div>\n                        <div class=\"px-2 whitespace-nowrap flex space-x-2\">\n                            <span class=\"text-primary font-bold\">{{ article.videos_count }}</span>\n                            <span class=\"flex space-x-1\">\n                                <VideoCameraIcon class=\"w-4 h-full\" />\n                                <span\n                                    class=\"hidden\"\n                                    :class=\"{\n                                        'lg:block': fullWidth,\n                                    }\"\n                                >VIDEOS</span>\n                            </span>\n                        </div>\n                        <div class=\"px-2 pr-0 whitespace-nowrap flex space-x-2\">\n                            <span class=\"text-primary font-bold\">{{ article.documents_count }}</span>\n                            <span class=\"flex space-x-1\">\n                                <DocumentIcon class=\"w-4 h-full\" />\n                                <span\n                                    class=\"hidden\"\n                                    :class=\"{\n                                        'lg:block': fullWidth,\n                                    }\"\n                                >DOCUMENTS</span>\n                            </span>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"text-primary\">{{ article.organisation.title }}</div>\n                <div class=\"flex flex-col flex-1\">\n                    <h2 class=\"font-bold text-lg mb-1 flex-initial\">{{ article.title }}</h2>\n                    <div\n                        class=\"relative flex-1 min-h-[2.6rem]\"\n                    >\n                        <div class=\"absolute left-0 right-0 top-0 bottom-0 text-sm opacity-50 overflow-hidden\" v-html=\"article.synopsis\">\n                        </div>\n                        <div\n                            class=\"absolute left-0 right-0 bottom-0 h-10 bg-gradient-to-t from-[#ffff] to-[#fff0]\"\n                        />\n                    </div>\n                </div>\n            </div>\n\n        </component>\n        <div\n            class=\"py-3 px-4 justify-between w-full bg-white z-10 relative\"\n            :class=\"{\n                'md:flex md:flex-col md:border-l md:border-gray-300 md:w-40': fullWidth,\n            }\"\n        >\n            <div class=\"w-2/3 mx-auto\" v-if=\"rating\">\n                <StarRating\n                    v-if=\"article.average_rating > 0 || alwaysShowRating\"\n                    :stacked=\"true\"\n                    :max=\"5\"\n                    :count=\"article.ratings_count\"\n                    :rating=\"article.average_rating\"\n                />\n            </div>\n            <div\n                class=\"mt-3 text-sm flex space-x-2 justify-center\"\n                :class=\"{\n                    'md:block md:space-x-0': fullWidth,\n                }\"\n            >\n                <template v-if=\"$slots.buttons || buttons\">\n                    <slot name=\"buttons\">\n                        <div\n                            class=\"flex space-x-2\"\n                            :class=\"{\n                                'md:flex-col md:space-x-0': fullWidth,\n                                'flex-row space-x-2': !fullWidth,\n                            }\"\n                        >\n                            <ToolbarButton\n                                type=\"a\"\n                                :href=\"route('profile.switcher', [article.organisation.uuid])\"\n                                :single=\"true\"\n                                class=\"mb-2 w-full\"\n                            >\n                                <span class=\"flex w-full items-center space-x-2\">\n                                    <GlobeAltIcon class=\"w-5\" />\n                                    <span class=\"hidden md:inline-block\" v-if=\"fullWidth\">\n                                        Profile\n                                    </span>\n                                </span>\n                            </ToolbarButton>\n                            <ToolbarButton\n                                type=\"link\"\n                                href=\"#\"\n                                :single=\"true\"\n                                class=\"mb-2 w-full\"\n                                @click.prevent=\"downloadPresspack\"\n                            >\n                                <span class=\"flex w-full items-center space-x-2\">\n                                    <span class=\"flex-initial\">\n                                        <Spinner class=\"w-4\" v-if=\"preparingDownload\" />\n                                        <ArchiveIcon class=\"w-4\" v-else />\n                                    </span>\n                                    <span class=\"hidden md:inline-block\" v-if=\"fullWidth\">\n                                        Presspack\n                                    </span>\n                                </span>\n                            </ToolbarButton>\n                            <ToolbarButton\n                                type=\"button\"\n                                href=\"#\"\n                                class=\"mb-2 w-full\"\n                                :single=\"true\"\n                                @click.prevent=\"$emit('share', article)\"\n                            >\n                                <span class=\"flex w-full items-center space-x-2\">\n                                    <ShareIcon class=\"w-4\" />\n                                    <span class=\"hidden md:inline-block\" v-if=\"fullWidth\">\n                                        Share\n                                    </span>\n                                </span>\n                            </ToolbarButton>\n                        </div>\n                    </slot>\n                </template>\n            </div>\n        </div>\n    </article>\n</template>\n\n<script setup>\nimport ToolbarButton from \"@/Components/Buttons/ToolbarButton.vue\";\nimport ArchiveIcon from \"@/Icons/Small/ArchiveIcon.vue\";\nimport ShareIcon from \"@/Icons/Small/ShareIcon.vue\";\nimport StarRating from \"@/Components/StarRating.vue\";\nimport {route} from \"@/Scripts/Routing/Router.js\";\nimport {Link, usePage} from \"@inertiajs/inertia-vue3\";\nimport {\n    ClockIcon,\n    DocumentIcon,\n    GlobeAltIcon,\n    PhotographIcon,\n    VideoCameraIcon,\n} from \"@heroicons/vue/solid\";\nimport Tooltip from \"@/Components/Tooltip.vue\";\nimport {computed, ref, watch} from \"vue\";\nimport {Inertia} from \"@inertiajs/inertia\";\nimport Spinner from \"@/Components/Spinner.vue\";\n\nconst emits = defineEmits(['share']);\nconst props = defineProps({\n    alwaysShowRating: Boolean,\n    showLatestTag: {\n        type: Boolean,\n        default: true,\n    },\n    trashed: Boolean,\n    href: String,\n    tags: Array,\n    buttons: {\n        type: Boolean,\n        default: true,\n    },\n    fullWidth: Boolean,\n    article: Object,\n    type: {\n        type: String,\n        default: 'link',\n        validator: (value) => {\n            return ['link', 'button', 'a', 'div'].indexOf(value) !== -1;\n        }\n    },\n    rating: {\n        type: Boolean,\n        default: true,\n    },\n});\n\nconst componentType = computed(() => {\n    if (props.type === 'link') {\n        return Link;\n    }\n\n    return props.type;\n})\n\nconst publishedToday = computed(() => {\n    if (! props.showLatestTag) {\n        return false;\n    }\n\n    return props.article.published_today;\n})\n\nconst preparingDownload = ref(false);\nconst downloadAvailable = ref(null);\n\nconst downloadPresspack = () => {\n    preparingDownload.value = true;\n    Echo.private('notifications.' + usePage().props.value.user.id).listen('.presspack.download.ready', (e) => {\n        preparingDownload.value = false;\n        downloadAvailable.value = e;\n    })\n    Inertia.post(route('presspacks.download.generate', [props.article.uuid]), {\n        preserveState: true,\n    });\n};\n\nwatch(downloadAvailable, () => {\n    if (downloadAvailable.value.action) {\n        window.location.href = downloadAvailable.value.action;\n    }\n});\n\n</script>\n\n<style scoped>\n\n</style>\n"],"names":["render","_ctx","_cache","_openBlock","_createBlock","_createVNode","_sfc_main","_createElementVNode","_hoisted_2","_hoisted_3","_createElementBlock","_hoisted_1","_hoisted_4","componentType","computed","props","Link","publishedToday","preparingDownload","ref","downloadAvailable","downloadPresspack","usePage","e","Inertia","route","watch"],"mappings":"wpBAEe,SAASA,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAU,EAAIC,EAAa,MAAO,CACxC,MAAO,6BACP,QAAS,YACT,KAAM,eACN,cAAe,MACnB,EAAK,CACDC,EAAa,OAAQ,CACnB,YAAa,UACb,EAAG,sGACH,YAAa,SACnB,CAAK,CACL,CAAG,CACH,CCPA,MAAKC,EAAU,CACX,KAAM,aACV,KATS,MAAM,6BAA6B,QAAQ,YAAY,KAAK,kBAC7DC,EAA+C,OAAA,CAAzC,EAAE,sCAAoC,KAAA,EAAA,IAC5CA,EAA2I,OAAA,CAArI,YAAU,UAAU,EAAE,yFAAyF,YAAU,uBAD/HC,EACAC,2BAFJ,OAAAN,EAAA,EAAAO,EAGM,MAHNC,EAGMC,CAAA,4BCGV,MAAKN,EAAU,CACX,KAAM,WACV,KARS,MAAM,6BAA6B,QAAQ,YAAY,KAAK,kBAC7DC,EAAmK,OAAA,CAA7J,EAAE,0JAAwJ,KAAA,EAAA,KAAhKC,2BADJ,OAAAL,EAAA,EAAAO,EAEM,MAFNC,EAEMF,CAAA,w5DCyQJI,EAAgBC,EAAS,IACvBC,EAAM,OAAS,OACRC,EAGJD,EAAM,IAChB,EAEKE,EAAiBH,EAAS,IACtBC,EAAM,cAILA,EAAM,QAAQ,gBAHV,EAId,EAEKG,EAAoBC,EAAI,EAAK,EAC7BC,EAAoBD,EAAI,IAAI,EAE5BE,EAAoB,IAAM,CAC5BH,EAAkB,MAAQ,GAC1B,KAAK,QAAQ,iBAAmBI,EAAO,EAAG,MAAM,MAAM,KAAK,EAAE,EAAE,OAAO,4BAA8BC,GAAM,CACtGL,EAAkB,MAAQ,GAC1BE,EAAkB,MAAQG,CAClC,CAAK,EACDC,UAAQ,KAAKC,EAAM,+BAAgC,CAACV,EAAM,QAAQ,IAAI,CAAC,EAAG,CACtE,cAAe,EACvB,CAAK,CACL,EAEA,OAAAW,EAAMN,EAAmB,IAAM,CACvBA,EAAkB,MAAM,SACxB,OAAO,SAAS,KAAOA,EAAkB,MAAM,OAEvD,CAAC"}