107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
<template>
|
|
<modal
|
|
:ref="ModalName"
|
|
:modalId="ModalName"
|
|
:footerButtonText="ModalCloseButtonText"
|
|
@footerButtonEvent="footerButtonClick">
|
|
<img
|
|
:src="ModalImage"
|
|
class="mw-100 d-flex"
|
|
alt="" />
|
|
<h5
|
|
class="header-text"
|
|
:class="cssModalHeadlineClass"
|
|
v-html="ModalHeadline"></h5>
|
|
<p
|
|
class="fw-bold subheader-text"
|
|
v-html="ModalSubheadertext"></p>
|
|
<p
|
|
class="mb-0"
|
|
v-html="ModalBodyText"></p>
|
|
<p
|
|
v-if="ModalSubBodyText"
|
|
class="my-4 caption modal-sub-body"
|
|
v-html="ModalSubBodyText"></p>
|
|
<slot></slot>
|
|
</modal>
|
|
</template>
|
|
|
|
<script>
|
|
import modal from '@/digital-components/modal/modal.vue';
|
|
|
|
export default {
|
|
name: 'content-group-modal',
|
|
components: {
|
|
modal
|
|
},
|
|
props: {
|
|
cmsWidgetName: String,
|
|
cssModalHeadlineClass: String
|
|
},
|
|
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();
|
|
},
|
|
|
|
footerButtonClick() {
|
|
this.$refs[this.ModalName].closeModal();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.modal {
|
|
&.modal-component {
|
|
.modal-dialog {
|
|
.modal-content {
|
|
.modal-body {
|
|
.header-text {
|
|
margin-top: 2rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.modal-sub-body {
|
|
color: $gray-600;
|
|
}
|
|
ul {
|
|
margin-bottom: 0;
|
|
}
|
|
p {
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
h5 {
|
|
&.text-center {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|