97 lines
2.6 KiB
Vue
97 lines
2.6 KiB
Vue
<template>
|
|
<modal
|
|
:ref="ModalName"
|
|
:modalId="ModalName"
|
|
:footerButtonText="ModalCloseButtonText"
|
|
@footer-button-event="footerButtonClick">
|
|
<img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
|
|
<h5 class="mb-4" v-html="ModalHeadline"></h5>
|
|
<p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
|
|
<p class="mb-0" v-html="ModalBodyText"></p>
|
|
<p
|
|
class="my-4 caption modal-sub-body"
|
|
v-if="ModalSubBodyText"
|
|
v-html="ModalSubBodyText"></p>
|
|
<slot></slot>
|
|
</modal>
|
|
</template>
|
|
|
|
<script>
|
|
import modal from "@/digital-components/modal/modal";
|
|
|
|
export default {
|
|
name: "content-group-modal",
|
|
props: {
|
|
cmsWidgetName: String,
|
|
footerButtonActionName: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
},
|
|
computed: {
|
|
ModalName() {
|
|
return this.cmsWidgetName;
|
|
},
|
|
ModalHeadline() {
|
|
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
|
},
|
|
ModalSubheadertext() {
|
|
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
|
|
},
|
|
ModalBodyText() {
|
|
return this.getCmsContent(this.cmsWidgetName, "BodyText");
|
|
},
|
|
ModalSubBodyText() {
|
|
return this.getCmsContent(this.cmsWidgetName, "BodyText2");
|
|
},
|
|
ModalImage() {
|
|
return this.getCmsContent(this.cmsWidgetName, "Image");
|
|
},
|
|
ModalCloseButtonText() {
|
|
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
|
},
|
|
},
|
|
methods: {
|
|
openModal() {
|
|
this.$refs[this.ModalName].openModal();
|
|
},
|
|
closeModal() {
|
|
this.$refs[this.ModalName].closeModal();
|
|
},
|
|
footerButtonClick() {
|
|
if (this.footerButtonActionName) {
|
|
this.$emit(this.footerButtonActionName, this.ModalName);
|
|
} else {
|
|
this.closeModal();
|
|
}
|
|
},
|
|
},
|
|
components: {
|
|
modal,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.modal {
|
|
&.modal-component {
|
|
.modal-dialog {
|
|
.modal-content {
|
|
.modal-body {
|
|
.modal-sub-body {
|
|
color: $gray-600;
|
|
}
|
|
ul {
|
|
margin-bottom: 0;
|
|
}
|
|
p {
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|