{"version":3,"file":"PodcastmakerHeader-CLPAECC5.mjs","names":[],"sources":["../src/components/display/podcastmaker/PodcastmakerHeader.vue","../src/components/display/podcastmaker/PodcastmakerHeader.vue"],"sourcesContent":["<template>\n    <div class=\"page-element-title-container\">\n        <div class=\"page-element-title\">\n            <h1>{{ pageTitle }}</h1>\n        </div>\n        <div class=\"page-element-bg\" :style=\"backgroundDisplay\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from \"vue\";\nimport { useImageProxy } from \"../../composable/useImageProxy\";\n\n//Props \nconst props = defineProps({\n    pageTitle: { default: undefined, type: String },\n    imgUrl: { default: undefined, type: String },\n})\n\nonMounted(() => {\n    const elt = document.querySelector('.page-element-title-container');\n\n    // Retrieve header\n    const header = document.getElementsByTagName('header');\n    if (header.length) {\n        // Get header height\n        const height = (header[0] as HTMLElement).offsetHeight;\n        // Update PM header position according to header height\n        elt.style.setProperty('--top', height + 'px');\n    }\n});\n\n//Composables\nconst { useProxyImageUrl } = useImageProxy();\n\n//Computed\nconst backgroundDisplay = computed(() => {\n    if (!props.imgUrl) {\n        return \"\";\n    }\n    return `background-image: url('${useProxyImageUrl(\n        props.imgUrl,\n        \"250\",\n    )}');`;\n});\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n    .page-element.page-element-podcastmaker {\n        margin-top: 11rem;\n    }\n\n    .page-element-title-container {\n        --top: 0;\n\n        background: black;\n        position: absolute;\n        right: 0;\n        left: 0;\n        top: var(--top);\n\n        .page-element-bg {\n            height: 15rem;\n            opacity: 0.5;\n            filter: blur(8px);\n            background-position: center;\n            background-repeat: no-repeat;\n            background-size: cover;\n        }\n\n        .page-element-title {\n            position: absolute;\n            inset: 0;\n            z-index: 2;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n\n            h1 {\n                color: white !important;\n                font-size: 2rem;\n            }\n        }\n    }\n}\n</style>\n","<template>\n    <div class=\"page-element-title-container\">\n        <div class=\"page-element-title\">\n            <h1>{{ pageTitle }}</h1>\n        </div>\n        <div class=\"page-element-bg\" :style=\"backgroundDisplay\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from \"vue\";\nimport { useImageProxy } from \"../../composable/useImageProxy\";\n\n//Props \nconst props = defineProps({\n    pageTitle: { default: undefined, type: String },\n    imgUrl: { default: undefined, type: String },\n})\n\nonMounted(() => {\n    const elt = document.querySelector('.page-element-title-container');\n\n    // Retrieve header\n    const header = document.getElementsByTagName('header');\n    if (header.length) {\n        // Get header height\n        const height = (header[0] as HTMLElement).offsetHeight;\n        // Update PM header position according to header height\n        elt.style.setProperty('--top', height + 'px');\n    }\n});\n\n//Composables\nconst { useProxyImageUrl } = useImageProxy();\n\n//Computed\nconst backgroundDisplay = computed(() => {\n    if (!props.imgUrl) {\n        return \"\";\n    }\n    return `background-image: url('${useProxyImageUrl(\n        props.imgUrl,\n        \"250\",\n    )}');`;\n});\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n    .page-element.page-element-podcastmaker {\n        margin-top: 11rem;\n    }\n\n    .page-element-title-container {\n        --top: 0;\n\n        background: black;\n        position: absolute;\n        right: 0;\n        left: 0;\n        top: var(--top);\n\n        .page-element-bg {\n            height: 15rem;\n            opacity: 0.5;\n            filter: blur(8px);\n            background-position: center;\n            background-repeat: no-repeat;\n            background-size: cover;\n        }\n\n        .page-element-title {\n            position: absolute;\n            inset: 0;\n            z-index: 2;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n\n            h1 {\n                color: white !important;\n                font-size: 2rem;\n            }\n        }\n    }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EAKd,gBAAgB;GACZ,MAAM,MAAM,SAAS,cAAc,+BAA+B;GAGlE,MAAM,SAAS,SAAS,qBAAqB,QAAQ;GACrD,IAAI,OAAO,QAAQ;IAEf,MAAM,SAAU,OAAO,GAAmB;IAE1C,IAAI,MAAM,YAAY,SAAS,SAAS,IAAI;GAChD;EACJ,CAAC;EAGD,MAAM,EAAE,qBAAqB,cAAc;;;;sBAGjB,eAAe;IACrC,IAAI,CAAC,MAAM,QACP,OAAO;IAEX,OAAO,0BAA0B,iBAC7B,MAAM,QACN,KACJ,EAAE;GACN,CAAA;;;;;;;;;;;mBC3CS,OAAM,+BAA8B;mBAChC,OAAM,qBAAoB;;qBADnC,mBAKM,OALN,YAKM,CAJF,mBAEM,OAFN,YAEM,CADF,mBAAwB,MAAA,MAAA,gBAAjB,OAAA,SAAS,GAAA,CAAA,CAAA,CAAA,GAEpB,mBAA0D,OAAA;EAArD,OAAM;EAAmB,OAAK,eAAE,OAAA,iBAAiB"}