{"version":3,"file":"BasicLayout-Ds6aUd8b.js","sources":["../../../ui/src/components/AppBanner.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useStorage } from '@vueuse/core';\nimport { STORAGE_KEY_BANNER } from '~/utilities/constants';\nimport { useSystemStore } from '~/stores/system-store';\nimport IconClose from '~icons/carbon/close';\n\nconst dismissedBanners = useStorage(STORAGE_KEY_BANNER, new Set<string>());\n\nfunction dismissBanner(bannerId: string) {\n dismissedBanners.value.add(bannerId);\n}\n\nfunction isBannerDismissed(bannerId: string) {\n return dismissedBanners.value.has(bannerId);\n}\n\nconst systemStore = useSystemStore();\n</script>\n\n<template>\n <template v-for=\"banner in systemStore.banners\" :key=\"banner.id\">\n <div\n :key=\"banner.id\"\n v-if=\"!isBannerDismissed(banner.id)\"\n id=\"notification-banner\"\n class=\"relative flex shrink-0 items-center justify-center overflow-hidden border-b border-b-black/10\"\n :class=\"banner.level\"\n >\n <div\n class=\"mx-auto px-8 py-2.5 text-center text-base font-semibold italic leading-tight text-new-content-900\"\n >\n {{ banner.message }}\n <a v-if=\"banner.url\" :href=\"banner.url\" class=\"underline\" @click=\"dismissBanner(banner.id)\"\n >Click for details</a\n >\n </div>\n\n <button class=\"absolute right-2 top-1/2 -translate-y-1/2\" @click=\"dismissBanner(banner.id)\">\n <IconClose class=\"text-lg text-white md:text-2xl\" />\n </button>\n </div>\n </template>\n</template>\n\n<style scoped lang=\"postcss\">\n.laptop {\n transform-origin: bottom center;\n position: absolute;\n bottom: 5px;\n font-size: 22px;\n transition-property: transform;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-duration: 200ms;\n}\n\n.info {\n /**\n * https://www.joshwcomeau.com/gradient-generator?colors=63c97b|31a824|63c97b|31a824|63c97b&angle=225&colorMode=hsv&precision=13&easingCurve=0.25|0.75|0.75|0.25\n */\n background-image: linear-gradient(\n 225deg,\n hsl(134deg 49% 59%) 0%,\n hsl(129deg 47% 54%) 6%,\n hsl(125deg 47% 50%) 12%,\n hsl(120deg 54% 45%) 18%,\n hsl(115deg 63% 41%) 24%,\n hsl(118deg 58% 43%) 29%,\n hsl(122deg 51% 47%) 35%,\n hsl(127deg 47% 52%) 41%,\n hsl(132deg 48% 56%) 47%,\n hsl(132deg 48% 56%) 53%,\n hsl(127deg 47% 52%) 59%,\n hsl(122deg 51% 47%) 65%,\n hsl(118deg 58% 43%) 71%,\n hsl(115deg 63% 41%) 76%,\n hsl(120deg 54% 45%) 82%,\n hsl(125deg 47% 50%) 88%,\n hsl(129deg 47% 54%) 94%,\n hsl(134deg 49% 59%) 100%\n );\n\n &:hover {\n .laptop {\n transform: perspective(70px) rotateX(-50deg);\n }\n }\n}\n\n.warning {\n background-image: linear-gradient(\n 225deg,\n hsl(48deg 49% 59%) 0%,\n hsl(51deg 47% 54%) 6%,\n hsl(53deg 47% 50%) 12%,\n hsl(55deg 54% 45%) 18%,\n hsl(58deg 63% 41%) 24%,\n hsl(57deg 58% 43%) 29%,\n hsl(56deg 51% 47%) 35%,\n hsl(55deg 47% 52%) 41%,\n hsl(54deg 48% 56%) 47%,\n hsl(54deg 48% 56%) 53%,\n hsl(55deg 47% 52%) 59%,\n hsl(57deg 51% 47%) 65%,\n hsl(59deg 58% 43%) 71%,\n hsl(60deg 63% 41%) 76%,\n hsl(61deg 54% 45%) 82%,\n hsl(61deg 47% 50%) 88%,\n hsl(61deg 47% 54%) 94%,\n hsl(62deg 49% 59%) 100%\n );\n}\n\n.error {\n background-image: linear-gradient(\n 225deg,\n hsl(0deg 49% 59%) 0%,\n hsl(0deg 47% 54%) 6%,\n hsl(0deg 47% 50%) 12%,\n hsl(0deg 54% 45%) 18%,\n hsl(0deg 63% 41%) 24%,\n hsl(0deg 58% 43%) 29%,\n hsl(0deg 51% 47%) 35%,\n hsl(0deg 47% 52%) 41%,\n hsl(0deg 48% 56%) 47%,\n hsl(0deg 48% 56%) 53%,\n hsl(0deg 47% 52%) 59%,\n hsl(0deg 51% 47%) 65%,\n hsl(0deg 58% 43%) 71%,\n hsl(0deg 63% 41%) 76%,\n hsl(0deg 54% 45%) 82%,\n hsl(0deg 47% 50%) 88%,\n hsl(0deg 47% 54%) 94%,\n hsl(0deg 49% 59%) 100%\n );\n}\n</style>\n"],"names":["dismissedBanners","useStorage","STORAGE_KEY_BANNER","dismissBanner","bannerId","isBannerDismissed","systemStore","useSystemStore"],"mappings":"uVAMA,MAAMA,EAAmBC,EAAWC,EAAoB,IAAI,GAAa,EAEzE,SAASC,EAAcC,EAAkB,CACtBJ,EAAA,MAAM,IAAII,CAAQ,CACrC,CAEA,SAASC,EAAkBD,EAAkB,CACpC,OAAAJ,EAAiB,MAAM,IAAII,CAAQ,CAC5C,CAEA,MAAME,EAAcC"}