{"version":3,"file":"RightsIndicator-Rq7o-1Gh.mjs","names":[],"sources":["../src/components/display/RightsIndicator.vue","../src/components/display/RightsIndicator.vue"],"sourcesContent":["<template>\n    <div\n        v-if=\"displayIndicator\"\n        :class=\"{ inline: inline }\"\n        title=\"\"\n    >\n        <RightsWrapper\n            v-if=\"!text\"\n            v-slot=\"{ id }\"\n            v-bind=\"props\"\n        >\n            <Icon\n                :id=\"id\"\n                class=\"rights-indicator-icon\"\n                :class=\"{ invisible: hasAccess }\"\n                aria-hidden=\"true\"\n                fill-color=\"var(--octopus-primary)\"\n                :size=\"inline ? 20 : 24\"\n            />\n        </RightsWrapper>\n        <div aria-live=\"polite\" aria-atomic=\"true\">\n            <ClassicAlert\n                v-if=\"text && !hasAccess\"\n                type=\"info\"\n            >\n                <template #icon>\n                    <Icon\n                        aria-hidden=\"true\"\n                        fill-color=\"var(--octopus-primary)\"\n                    />\n                </template>\n                {{ message }}\n            </ClassicAlert>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicAlert from '../misc/ClassicAlert.vue';\nimport Icons from '@/components/icons'; \nimport RightsWrapper from './RightsWrapper.vue'; \nimport { RightsProps, useRightsIndicator } from '../composable/useRightsIndicator';\n\nconst Icon = Icons.RightsIndicator;\n\ntype PropsBase = RightsProps & {\n    /** Display reason as text instead of only tooltip */\n    text?: boolean;\n    /** Use inline instead of block */\n    inline?: boolean;\n}\n\nconst props = defineProps<PropsBase>();\n\nconst { displayIndicator, hasAccess, message } = useRightsIndicator(props);\n</script>\n\n<style scoped lang=\"scss\">\ndiv.inline {\n    display: inline;\n    // Properly align text with it\n    vertical-align: top;\n}\n\n.inline div {\n    display: inline;\n}\n\n.inline .rights-indicator-icon {\n    display: inline-flex;\n    // Propertly align content\n    position: relative;\n    bottom: -4px;\n    // Ensure it doesn't take place in the text\n    height: 1px;\n}\n\n.inline .invisible {\n    display: none;\n}\n\n/** Helper class to keep the data accessible for screen readers */\n.rights-visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n}\n</style>\n","<template>\n    <div\n        v-if=\"displayIndicator\"\n        :class=\"{ inline: inline }\"\n        title=\"\"\n    >\n        <RightsWrapper\n            v-if=\"!text\"\n            v-slot=\"{ id }\"\n            v-bind=\"props\"\n        >\n            <Icon\n                :id=\"id\"\n                class=\"rights-indicator-icon\"\n                :class=\"{ invisible: hasAccess }\"\n                aria-hidden=\"true\"\n                fill-color=\"var(--octopus-primary)\"\n                :size=\"inline ? 20 : 24\"\n            />\n        </RightsWrapper>\n        <div aria-live=\"polite\" aria-atomic=\"true\">\n            <ClassicAlert\n                v-if=\"text && !hasAccess\"\n                type=\"info\"\n            >\n                <template #icon>\n                    <Icon\n                        aria-hidden=\"true\"\n                        fill-color=\"var(--octopus-primary)\"\n                    />\n                </template>\n                {{ message }}\n            </ClassicAlert>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicAlert from '../misc/ClassicAlert.vue';\nimport Icons from '@/components/icons'; \nimport RightsWrapper from './RightsWrapper.vue'; \nimport { RightsProps, useRightsIndicator } from '../composable/useRightsIndicator';\n\nconst Icon = Icons.RightsIndicator;\n\ntype PropsBase = RightsProps & {\n    /** Display reason as text instead of only tooltip */\n    text?: boolean;\n    /** Use inline instead of block */\n    inline?: boolean;\n}\n\nconst props = defineProps<PropsBase>();\n\nconst { displayIndicator, hasAccess, message } = useRightsIndicator(props);\n</script>\n\n<style scoped lang=\"scss\">\ndiv.inline {\n    display: inline;\n    // Properly align text with it\n    vertical-align: top;\n}\n\n.inline div {\n    display: inline;\n}\n\n.inline .rights-indicator-icon {\n    display: inline-flex;\n    // Propertly align content\n    position: relative;\n    bottom: -4px;\n    // Ensure it doesn't take place in the text\n    height: 1px;\n}\n\n.inline .invisible {\n    display: none;\n}\n\n/** Helper class to keep the data accessible for screen readers */\n.rights-visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,OAAO,cAAM;EASnB,MAAM,QAAQ;EAEd,MAAM,EAAE,kBAAkB,WAAW,YAAY,mBAAmB,KAAK;;;;;;;;;;;;;;;;;;;;;CClC5D,aAAU;CAAS,eAAY;;;QAlB9B,OAAA,oBAAA,UAAA,GADV,mBAiCM,OAAA;;EA/BD,OAAK,eAAA,EAAA,QAAY,OAAA,OAAM,CAAA;EACxB,OAAM;MAGK,OAAA,QAAA,UAAA,GADX,YAagB,OAAA,kBAAA,eAAA,WAAA,EAAA,KAAA,EAAA,GAVJ,OAAA,KAAK,CAAA,GAAA;oBASX,EAVQ,SAAE,CAGZ,YAOE,OAAA,SAAA;GANO;GACL,OAAK,eAAA,CAAC,yBAAuB,EAAA,WACR,OAAA,UAAS,CAAA,CAAA;GAC9B,eAAY;GACZ,cAAW;GACV,MAAM,OAAA,SAAM,KAAA;;;;;;;6CAGrB,mBAaM,OAbN,YAaM,CAXQ,OAAA,QAAI,CAAK,OAAA,aAAA,UAAA,GADnB,YAWe,OAAA,iBAAA;;EATX,MAAK;;EAEM,MAAI,cAIT,CAHF,YAGE,OAAA,SAAA;GAFE,eAAY;GACZ,cAAW;;yBAGnB,CAAA,gBADW,MACX,gBAAG,OAAA,OAAO,GAAA,CAAA,CAAA,CAAA"}