Move functionality to intercept-overlay

src/fmg-components/insurance-nav-bar/insurance-nav-bar.vue

@@ -28,6 +28,7 @@
                     isPrimary
                     :buttonText="overrideButtonText || buttonText"
                     loaderColor="white"
+                    loaderPosition="center"
                     :class="isForwardActionDisabled && 'form-test-invalid'"
                     :aria-disabled="isForwardActionDisabled"
                     :isDisabled="isForwardActionDisabled"
@@ -68,10 +69,6 @@ export default {
             customButtontext: "",
         };
     },
-
-    unmounted() {
-        document.onkeydown = null;
-    },
     computed: {
         backLink() {
             return (
@@ -91,15 +88,8 @@ export default {
         },
         removeLoader() {
             this.$refs.buttonMain.removeLoader();
-            document.onkeydown = function (e) {
-                return true;
-            };
         },
         buttonClick() {
-            //prevent keyboard input after button click
-            document.onkeydown = function (e) {
-                return false;
-            };
             // check session expired and initSession to recreate cookies
             if (analyticsMixin.methods.sessionExpired()) {
                 this.routeReturnUser();

src/fmg-components/nav-bar/nav-bar.vue

@@ -16,6 +16,7 @@
                     isPrimary
                     :buttonText="overrideButtonText || buttonText"
                     loaderColor="white"
+                    loaderPosition="center"
                     :class="isForwardActionDisabled && 'form-test-invalid'"
                     :aria-disabled="isForwardActionDisabled"
                     :isDisabled="isForwardActionDisabled"
@@ -69,9 +70,6 @@ export default {
         };
     },
 
-    unmounted() {
-        document.onkeydown = null;
-    },
     computed: {
         backLink() {
             return (
@@ -91,15 +89,8 @@ export default {
         },
         removeLoader() {
             this.$refs.buttonMain.removeLoader();
-            document.onkeydown = function (e) {
-                return true;
-            };
         },
         buttonClick() {
-            //prevent keyboard input after button click
-            document.onkeydown = function (e) {
-                return false;
-            };
             // check session expired and initSession to recreate cookies
             if (analyticsMixin.methods.sessionExpired()) {
                 this.routeReturnUser();

src/ux-components/button-main/button-main.vue

@@ -12,7 +12,8 @@
         <loader
             class="ms-2"
             v-if="isLoaderDisplayed && !suppressLoader"
-            v-bind:class="[this.loaderColor, this.loaderPosition]" />
+            :loaderColor="loaderColor"
+            :loaderPosition="loaderPosition" />
     </button>
 </template>
 
@@ -48,7 +49,7 @@ export default {
             );
             if (!this.isDisabled) {
                 if (!this.suppressLoader) this.isLoaderDisplayed = true;
-                this.$emit("click-event");
+                //this.$emit("click-event");
             }
         },
         resetButtonStyle() {
@@ -64,6 +65,7 @@ export default {
 <style lang="scss">
 .btn {
     font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+    
     &.btn-primary {
         position: relative;
         background: $red;

src/ux-components/intercept-overlay/intercept-overlay.vue

@@ -1,5 +1,8 @@
 <template>
-    <div class="intercept-overlay" aria-hidden="true" @keydown.capture="blockKey"></div>
+    <div
+        class="intercept-overlay"
+        @keydown.capture="blockKey"
+        @click="captureClick"></div>
 </template>
 
 <script>
@@ -16,6 +19,10 @@ export default {
             event.preventDefault();
             event.stopImmediatePropagation();
         },
+        captureClick(event) {
+            event.preventDefault();
+            event.stopPropagation();
+        },
     },
 };
 </script>

src/ux-components/loader/loader.vue

@@ -1,17 +1,15 @@
 <template>
+    <interceptOverlay v-if="!allowPageInteraction" />
     <div
         class="loader"
         role="alert"
         aria-label="Loading new page"
-        @click="captureClick"
+        v-bind:class="[this.loaderColor, this.loaderPosition]"></div>
-        v-bind:class="[
-            this.loaderColor,
-            this.loaderPosition,
-            this.allowPageInteraction ? 'allow-ui-interaction' : '',
-        ]"></div>
 </template>
 
 <script>
+import interceptOverlay from "../intercept-overlay/intercept-overlay.vue";
+
 export default {
     name: "loader",
     /* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
@@ -31,12 +29,9 @@ export default {
             default: false,
         },
     },
-    methods: {
+    methods: {},
-        captureClick(event) {
+    components: {
-            if (!this.allowPageInteraction) {
+        interceptOverlay,
-                event.stopPropagation();
-            }
-        },
     },
 };
 </script>
@@ -46,18 +41,6 @@ export default {
     display: flex;
     pointer-events: all;
 
-    //Open an overlay to prevent page interaction
-    &:before {
-        content: "";
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background-color: transparent;
-        z-index: 9999;
-        cursor: default;
-    }
     //Spinner basics
     &:after {
         content: "";
@@ -101,9 +84,5 @@ export default {
     &.black:after {
         background-color: $black;
     }
-    &.allow-ui-interaction::before {
-        //no-block to enable clicking on certain buttons with loaders while the loader is actives
-        pointer-events: none;
-    }
 }
 </style>