CSR-1012 | modal open and close functions

src/digital-components/modal/modal.vue

@@ -63,11 +63,10 @@ export default {
     data() {
         return {
             myModal: null,
-        }        
+        };
     },
     mounted() {
         this.myModal = new Modal(document.getElementById(this.cmsWidgetName));
-        
     },
     computed: {
         ModalHeadline() {

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -13,14 +13,13 @@
                 :text="this.serviceZipDisplayText"
                 href="#!"
                 @click-event="openZipCodeModal"
-                :data-bs-target="getModalId"
                 aria-label="Modal window" />
         </div>
     </div>
     <modal
         ref="zipCodeInputModal"
         :cmsWidgetName="this.modalWidgetName"
-        :onShownCallback="onModalOpen"
+        :onModalOpenedCallback="onModalOpen"
         :footerButtonCallback="setZip">
         <div class="ps-4 pe-4 pb-4">
             <textboxQuestion
@@ -63,7 +62,6 @@ import textboxQuestion from "@/digital-components/textbox-question/textbox-quest
 import { defineRule } from "vee-validate";
 import { required, regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-import { isNoUnitNumericStyleProp } from "@vue/shared";
 
 // Define Validation Rules
 defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
@@ -89,7 +87,7 @@ export default {
     },
     methods: {
         openZipCodeModal() {
-            this.$refs.zipCodeInputModal.myModal.show();
+            this.$refs.zipCodeInputModal.openModal();
         },
         getZipFromStore() {
             return this.$store.getters.order.serviceLocation.zipCode;
@@ -149,9 +147,6 @@ export default {
         },
     },
     computed: {
-        getModalId() {
-            return "#" + this.modalWidgetName;
-        },
         questionText() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },