{"version":3,"file":"ClassicBigChip-BegQ2tNr.mjs","names":[],"sources":["../src/components/misc/ClassicBigChip.vue","../src/components/misc/ClassicBigChip.vue"],"sourcesContent":["<template>\n    <div class=\"big-chip\">\n        <div class=\"title\">\n            <b>{{ title }}</b>\n            <ActionButton\n                v-if=\"removeable\"\n                action=\"delete\"\n                :confirm-modal=\"confirmModal\"\n                @click=\"emit('remove')\"\n            />\n        </div>\n            \n        <p>{{ content }}</p>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ActionButton } from '../buttons';\nimport { ConfirmModalData } from '../buttons/ActionButton.vue';\n\ndefineProps<{\n    /** The title of the chip */\n    title: string;\n    /** The content of the chip */\n    content: string;\n    /** When true, displays an action button for removing this chip */\n    removeable?: boolean;\n    /** When removeable, allow for a confirmation modal to be shown */\n    confirmModal?: ConfirmModalData;\n}>();\n\nconst emit = defineEmits<{\n    /** Called when the remove button is clicked */\n    (e: 'remove'): void;\n}>();\n</script>\n\n<style scoped lang=\"scss\">\n.big-chip {\n    display: flex;\n    flex-direction: column;\n    border-radius: 3px;\n    background-color: var(--octopus-secondary);\n    border: 1px solid var(--octopus-primary);\n    padding: 8px 16px;\n    margin: 4px;\n    width: 335px;\n    height: 80px;\n\n    .title {\n        display: flex;\n        justify-content: space-between;\n\n        b {\n            white-space: nowrap;\n            overflow-x: hidden;\n            text-overflow: ellipsis;\n            height: 1rem;\n\n            &:hover {\n                background-color: var(--octopus-secondary);\n                overflow-x: unset;\n                z-index: 1;\n            }\n        }\n\n        // Limit style to buttons directly in title (to not affect the modal)\n        & > div > :deep(button) {\n            margin-top: -6px;\n            padding: 0;\n        }\n    }\n\n    p {\n        margin: 0;\n        overflow: hidden;\n        &:hover {\n            background-color: var(--octopus-secondary);\n            overflow: unset;\n            z-index: 1;\n        }\n    }\n}\n</style>\n","<template>\n    <div class=\"big-chip\">\n        <div class=\"title\">\n            <b>{{ title }}</b>\n            <ActionButton\n                v-if=\"removeable\"\n                action=\"delete\"\n                :confirm-modal=\"confirmModal\"\n                @click=\"emit('remove')\"\n            />\n        </div>\n            \n        <p>{{ content }}</p>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ActionButton } from '../buttons';\nimport { ConfirmModalData } from '../buttons/ActionButton.vue';\n\ndefineProps<{\n    /** The title of the chip */\n    title: string;\n    /** The content of the chip */\n    content: string;\n    /** When true, displays an action button for removing this chip */\n    removeable?: boolean;\n    /** When removeable, allow for a confirmation modal to be shown */\n    confirmModal?: ConfirmModalData;\n}>();\n\nconst emit = defineEmits<{\n    /** Called when the remove button is clicked */\n    (e: 'remove'): void;\n}>();\n</script>\n\n<style scoped lang=\"scss\">\n.big-chip {\n    display: flex;\n    flex-direction: column;\n    border-radius: 3px;\n    background-color: var(--octopus-secondary);\n    border: 1px solid var(--octopus-primary);\n    padding: 8px 16px;\n    margin: 4px;\n    width: 335px;\n    height: 80px;\n\n    .title {\n        display: flex;\n        justify-content: space-between;\n\n        b {\n            white-space: nowrap;\n            overflow-x: hidden;\n            text-overflow: ellipsis;\n            height: 1rem;\n\n            &:hover {\n                background-color: var(--octopus-secondary);\n                overflow-x: unset;\n                z-index: 1;\n            }\n        }\n\n        // Limit style to buttons directly in title (to not affect the modal)\n        & > div > :deep(button) {\n            margin-top: -6px;\n            padding: 0;\n        }\n    }\n\n    p {\n        margin: 0;\n        overflow: hidden;\n        &:hover {\n            background-color: var(--octopus-secondary);\n            overflow: unset;\n            z-index: 1;\n        }\n    }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBCCS,OAAM,WAAU;mBACZ,OAAM,QAAO;;qBADtB,mBAYM,OAZN,YAYM,CAXF,mBAQM,OARN,YAQM,CAPF,mBAAkB,KAAA,MAAA,gBAAZ,OAAA,KAAK,GAAA,CAAA,GAED,OAAA,cAAA,UAAA,GADV,YAKE,OAAA,iBAAA;;EAHE,QAAO;EACN,iBAAe,OAAA;EACf,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,KAAI,QAAA;uEAIpB,mBAAoB,KAAA,MAAA,gBAAd,OAAA,OAAO,GAAA,CAAA,CAAA,CAAA"}