{"version":3,"file":"ClassicAlert-dYigdfoZ.mjs","names":[],"sources":["../src/components/misc/ClassicAlert.vue","../src/components/misc/ClassicAlert.vue"],"sourcesContent":["<!--\n    Simple component to display a message to the user.\n    Usage:\n        <ClassicAlert type='info'>This is an information</ClassicAlert>\n        <ClassicAlert type='success'>Your changes have been saved</ClassicAlert>\n        <ClassicAlert type='warning'>Some data will be lost</ClassicAlert>\n        <ClassicAlert type='error'>An error occured while saving</ClassicAlert>\n-->\n<template>\n    <div\n        class=\"p-2 pe-4 rounded d-flex alert\"\n        :class=\"cardClass\"\n        :role=\"type === 'error' || type === 'warning' ? 'alert' : 'status'\"\n        :aria-live=\"type === 'error' || type === 'warning' ? 'assertive' : 'polite'\"\n        aria-atomic=\"true\"\n    >\n        <span aria-hidden=\"true\">\n            <slot name=\"icon\">\n                <!-- The icon -->\n                <component\n                    :is=\"iconComponent\"\n                    v-if=\"!noIcon\"\n                    class=\"icon\"\n                    :size=\"text ? 22 : 30\"\n                />\n            </slot>\n        </span>\n\n        <!-- Main content -->\n        <span class=\"ms-2 content\">\n            <strong v-if=\"title\">\n                {{ title }}\n                <br>\n            </strong>\n\n            <slot />\n        </span>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nimport Alert from 'vue-material-design-icons/Alert.vue';\nimport CheckCircle from 'vue-material-design-icons/CheckCircle.vue';\nimport CloseCircle from 'vue-material-design-icons/CloseCircle.vue';\nimport Information from 'vue-material-design-icons/Information.vue';\n\nconst { type, title = undefined, text } = defineProps<{\n    /** Disables the icon when true */\n    noIcon?: boolean;\n    /** An optional title for the alert */\n    title?: string;\n    /** The type of message */\n    type: 'info'|'success'|'warning'|'error';\n    /** Use a simpler display */\n    text?: boolean;\n}>();\n\n/** The class applied to the alert */\nconst cardClass = computed((): Array<string> => {\n    const classes = ['alert-' + type];\n    if (text === true) {\n        classes.push('text-alert');\n    } else {\n        classes.push('my-2');\n    }\n    return classes;\n});\n\nconst iconComponent = computed(() => {\n    if (type === 'info') {\n        return Information;\n    } else if (type === 'success') {\n        return CheckCircle;\n    } else if (type === 'warning') {\n        return Alert;\n    } else if (type === 'error') {\n        return CloseCircle;\n    } else {\n        return null;\n    }\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.alert {\n    &:not(.text-alert) {\n        border: 1px solid;\n        border-left: 8px solid;\n    }\n\n    .icon {\n        align-items: start !important;\n    }\n\n    .content {\n        display: flex;\n        flex-direction: column;\n        align-self: center;\n\n        &:deep(p) {\n            margin: 0 !important;\n            &:not(:first-child) {\n                margin-top: 8px !important;\n            }\n        }\n    }\n\n    $types: (\n        'success': hsl(from var(--octopus-primary) h s 45),\n        'info': var(--octopus-primary),\n        'warning': var(--octopus-warning),\n        'error': var(--octopus-danger),\n    );\n\n    @each $type, $color in $types {\n        &-#{$type} {\n            &:not(.text-alert) {\n                background-color: hsl(from #{$color} h s 95) !important;\n                border-color: #{$color} !important;\n            }\n            &.text-alert {\n                color: #{$color} !important;\n            }\n            .icon {\n                color: #{$color};\n            }\n        }\n    }\n}\n</style>\n","<!--\n    Simple component to display a message to the user.\n    Usage:\n        <ClassicAlert type='info'>This is an information</ClassicAlert>\n        <ClassicAlert type='success'>Your changes have been saved</ClassicAlert>\n        <ClassicAlert type='warning'>Some data will be lost</ClassicAlert>\n        <ClassicAlert type='error'>An error occured while saving</ClassicAlert>\n-->\n<template>\n    <div\n        class=\"p-2 pe-4 rounded d-flex alert\"\n        :class=\"cardClass\"\n        :role=\"type === 'error' || type === 'warning' ? 'alert' : 'status'\"\n        :aria-live=\"type === 'error' || type === 'warning' ? 'assertive' : 'polite'\"\n        aria-atomic=\"true\"\n    >\n        <span aria-hidden=\"true\">\n            <slot name=\"icon\">\n                <!-- The icon -->\n                <component\n                    :is=\"iconComponent\"\n                    v-if=\"!noIcon\"\n                    class=\"icon\"\n                    :size=\"text ? 22 : 30\"\n                />\n            </slot>\n        </span>\n\n        <!-- Main content -->\n        <span class=\"ms-2 content\">\n            <strong v-if=\"title\">\n                {{ title }}\n                <br>\n            </strong>\n\n            <slot />\n        </span>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nimport Alert from 'vue-material-design-icons/Alert.vue';\nimport CheckCircle from 'vue-material-design-icons/CheckCircle.vue';\nimport CloseCircle from 'vue-material-design-icons/CloseCircle.vue';\nimport Information from 'vue-material-design-icons/Information.vue';\n\nconst { type, title = undefined, text } = defineProps<{\n    /** Disables the icon when true */\n    noIcon?: boolean;\n    /** An optional title for the alert */\n    title?: string;\n    /** The type of message */\n    type: 'info'|'success'|'warning'|'error';\n    /** Use a simpler display */\n    text?: boolean;\n}>();\n\n/** The class applied to the alert */\nconst cardClass = computed((): Array<string> => {\n    const classes = ['alert-' + type];\n    if (text === true) {\n        classes.push('text-alert');\n    } else {\n        classes.push('my-2');\n    }\n    return classes;\n});\n\nconst iconComponent = computed(() => {\n    if (type === 'info') {\n        return Information;\n    } else if (type === 'success') {\n        return CheckCircle;\n    } else if (type === 'warning') {\n        return Alert;\n    } else if (type === 'error') {\n        return CloseCircle;\n    } else {\n        return null;\n    }\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.alert {\n    &:not(.text-alert) {\n        border: 1px solid;\n        border-left: 8px solid;\n    }\n\n    .icon {\n        align-items: start !important;\n    }\n\n    .content {\n        display: flex;\n        flex-direction: column;\n        align-self: center;\n\n        &:deep(p) {\n            margin: 0 !important;\n            &:not(:first-child) {\n                margin-top: 8px !important;\n            }\n        }\n    }\n\n    $types: (\n        'success': hsl(from var(--octopus-primary) h s 45),\n        'info': var(--octopus-primary),\n        'warning': var(--octopus-warning),\n        'error': var(--octopus-danger),\n    );\n\n    @each $type, $color in $types {\n        &-#{$type} {\n            &:not(.text-alert) {\n                background-color: hsl(from #{$color} h s 95) !important;\n                border-color: #{$color} !important;\n            }\n            &.text-alert {\n                color: #{$color} !important;\n            }\n            .icon {\n                color: #{$color};\n            }\n        }\n    }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4DkB,eAA8B;IAC5C,MAAM,UAAU,CAAC,WAAW,QAAA,IAAI;IAChC,IAAI,QAAA,SAAS,MACT,QAAQ,KAAK,YAAY;SAEzB,QAAQ,KAAK,MAAM;IAEvB,OAAO;GACX,CAAA;kBAEsB,eAAe;IACjC,IAAI,QAAA,SAAS,QACT,OAAO;SACJ,IAAI,QAAA,SAAS,WAChB,OAAO;SACJ,IAAI,QAAA,SAAS,WAChB,OAAO;SACJ,IAAI,QAAA,SAAS,SAChB,OAAO;SAEP,OAAO;GAEf,CAAA;;;;;;;;;;;;;mBClEc,eAAY,OAAM;mBAalB,OAAM,eAAc;;;qBApB9B,mBA4BM,OAAA;EA3BF,OAAK,eAAA,CAAC,iCACE,OAAA,SAAS,CAAA;EAChB,MAAM,OAAA,SAAI,WAAgB,OAAA,SAAI,YAAA,UAAA;EAC9B,aAAW,OAAA,SAAI,WAAgB,OAAA,SAAI,YAAA,cAAA;EACpC,eAAY;;EAEZ,mBAUO,QAVP,YAUO,CATH,WAQO,KAAA,QAAA,QAAA,CAAA,SAAA,CAPH,mBAAA,YAAA,GAAA,CAGW,OAAA,UAAA,UAAA,GAFX,YAKE,wBAJO,OAAA,aAAa,GAAA;;GAElB,OAAM;GACL,MAAM,OAAA,OAAI,KAAA;;EAKvB,mBAAA,gBAAA;EACA,mBAOO,QAPP,YAOO,CANW,OAAA,SAAA,UAAA,GAAd,mBAGS,UAAA,YAAA,CAAA,gBAAA,gBAFF,OAAA,KAAK,IAAG,KACX,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,mBAAI,MAAA,MAAA,MAAA,EAAA,EAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,GAGR,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA"}