{"version":3,"file":"ClassicHelpButton-B6jXpEKT.mjs","names":[],"sources":["../src/components/misc/ClassicHelpButton.vue","../src/components/misc/ClassicHelpButton.vue"],"sourcesContent":["<!--\n    A simple component to display a help button that shows its message when\n    hovered.\n\n    Usage: \n        <ClassicHelpButton>This is my help message</ClassicHelpButton>\n-->\n<template>\n    <button\n        :id=\"computedId\"\n        class=\"btn-transparent\"\n    >\n        <!-- Button icon -->\n        <HelpCircleIcon :fill-color=\"color\" :size=\"iconSize\" />\n\n        <!-- Tooltip -->\n        <ClassicPopover\n            :target=\"computedId\"\n            popover-class=\"help-popover\"\n            :relative-class=\"inModal ? 'octopus-modal' : relativeClass\"\n        >\n            <div class=\"content\">\n                <slot />\n            </div>\n        </ClassicPopover>\n    </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from 'vue';\n\nimport HelpCircleIcon from \"vue-material-design-icons/HelpCircle.vue\";\nimport ClassicPopover from './ClassicPopover.vue';\n\nconst { colored, small } = defineProps<{\n    colored?: boolean;\n    /** Automatically sets relative class to octopus-modal */\n    inModal?: boolean;\n    /** Make the popover relative (userful when in page-element) */\n    relativeClass?: string;\n    /** Make the icon smaller if true *(default: false)* */\n    small?: boolean;\n}>();\n\n/** The color to use for the icon */\nconst color = computed(() => {\n    if (colored) {\n        return \"var(--octopus-primary-darker)\";\n    } else {\n        return \"black\";\n    }\n});\n\n/** The internal ID for the elements */\nconst computedId = computed(() => {\n    return 'popover-' + getCurrentInstance()?.uid;\n});\n\n/** The size of the icon, according to the props */\nconst iconSize = computed(() => {\n    if (small) {\n        return 24;\n    } else {\n        return 30;\n    }\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.content {\n    font: revert;\n    font-size: 18px !important;\n    text-align: start;\n}\n\n.help-popover {\n    background-color: var(--octopus-secondary-lighter);\n    max-width: 60%;\n}\n</style>\n","<!--\n    A simple component to display a help button that shows its message when\n    hovered.\n\n    Usage: \n        <ClassicHelpButton>This is my help message</ClassicHelpButton>\n-->\n<template>\n    <button\n        :id=\"computedId\"\n        class=\"btn-transparent\"\n    >\n        <!-- Button icon -->\n        <HelpCircleIcon :fill-color=\"color\" :size=\"iconSize\" />\n\n        <!-- Tooltip -->\n        <ClassicPopover\n            :target=\"computedId\"\n            popover-class=\"help-popover\"\n            :relative-class=\"inModal ? 'octopus-modal' : relativeClass\"\n        >\n            <div class=\"content\">\n                <slot />\n            </div>\n        </ClassicPopover>\n    </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from 'vue';\n\nimport HelpCircleIcon from \"vue-material-design-icons/HelpCircle.vue\";\nimport ClassicPopover from './ClassicPopover.vue';\n\nconst { colored, small } = defineProps<{\n    colored?: boolean;\n    /** Automatically sets relative class to octopus-modal */\n    inModal?: boolean;\n    /** Make the popover relative (userful when in page-element) */\n    relativeClass?: string;\n    /** Make the icon smaller if true *(default: false)* */\n    small?: boolean;\n}>();\n\n/** The color to use for the icon */\nconst color = computed(() => {\n    if (colored) {\n        return \"var(--octopus-primary-darker)\";\n    } else {\n        return \"black\";\n    }\n});\n\n/** The internal ID for the elements */\nconst computedId = computed(() => {\n    return 'popover-' + getCurrentInstance()?.uid;\n});\n\n/** The size of the icon, according to the props */\nconst iconSize = computed(() => {\n    if (small) {\n        return 24;\n    } else {\n        return 30;\n    }\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.content {\n    font: revert;\n    font-size: 18px !important;\n    text-align: start;\n}\n\n.help-popover {\n    background-color: var(--octopus-secondary-lighter);\n    max-width: 60%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA6Cc,eAAe;IACzB,IAAI,QAAA,SACA,OAAO;SAEP,OAAO;GAEf,CAAA;eAGmB,eAAe;IAC9B,OAAO,aAAa,mBAAmB,GAAG;GAC9C,CAAA;aAGiB,eAAe;IAC5B,IAAI,QAAA,OACA,OAAO;SAEP,OAAO;GAEf,CAAA;;;;;;;;;;;;;;;mBC5CiB,OAAM,UAAS;;qBAb5B,mBAiBS,UAAA;EAhBJ,IAAI,OAAA;EACL,OAAM;;EAEN,mBAAA,eAAA;EACA,YAAuD,OAAA,mBAAA;GAAtC,cAAY,OAAA;GAAQ,MAAM,OAAA;;EAE3C,mBAAA,WAAA;EACA,YAQiB,OAAA,mBAAA;GAPZ,QAAQ,OAAA;GACT,iBAAc;GACb,kBAAgB,OAAA,UAAO,kBAAqB,OAAA;;0BAIvC,CAFN,mBAEM,OAFN,YAEM,CADF,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA,CAAA,CAAA"}