Move phone-number-format logic to phonenumber-question.

src/digital-components/phonenumber-question/phonenumber-question.vue

@@ -1,40 +1,14 @@
 <template>
     <div
-        class="phonenumber-question d-flex flex-column"
-        :class="[
-            (errors && errors.length) || hasError ? 'has-error' : '',
-            hideInput ? 'hide-input' : '',
-        ]">
+        class="phonenumber-question d-flex flex-column" >
         <textboxQuestion
-            maxLength="12"
+            type="tel"
+            :max-length="12"
             v-model="selectedValue"
             :isRequired="isRequired"
-            :validationRules="validationRules"
-            pattern="[0-9\-]+"
+            :validationRules="validationRuleForTextBoxQuestion"
             :keyDownHandler="onKeyDown"
-            cmsWidgetName="phoneNumberQuestionWidget"
-         />
-        <!-- <label for="phone-number" class="mb-1 fw-bold" v-html="phoneNumberQuestionWidget"></label>
-        <input
-            class="form-control"
-            id="phone-number"
-            name="phone-number"
-            v-model="phoneNumber"
-            @input="formatPhoneNumber"
-            @change="handleChange"
-            @blur="handleChange"
-            :maxlength="phoneNumberMaxLength"
-            pattern="[0-9\-]+"
-            :aria-required="isRequired"
-            :validationRules="validationRules" /> -->
-        <div v-show="errorMessage" class="row my-1 form-test-error">
-            <span
-                class="d-inline-flex small mt-0"
-                role="alert"
-                :class="[centerErrorMessage ? 'center-error-message' : '']"
-                >{{ errorMessage }}</span
-            >
-        </div>
+            cmsWidgetName="phoneNumberQuestionWidget" />
     </div>
 </template>
 
@@ -98,11 +72,6 @@ export default {
             errors,
         };
     },
-    data() {
-        return {
-            phoneNumberMaxLength: 12,
-        };
-    },
     computed: {
         phoneNumberQuestionWidget() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
@@ -116,6 +85,13 @@ export default {
                 this.$emit("update:modelValue", formattedNumber);
             },
         },
+        validationRuleForTextBoxQuestion() {
+            if (!this.validationRules || this.validationRules.length === 0) {
+                return "phone-number-format";
+            } else {
+                return this.validationRules + "|phone-number-format";
+            }
+        },
     },
     methods: {
         formatPhoneNumber(value) {
@@ -134,11 +110,14 @@ export default {
             return formattedNumber;
         },
         onKeyDown(event) {
-            if (this.selectedValue.length === 0 && event.key === "1") {
+            if (
+                (this.selectedValue.length === 0 && event.key === "1") ||
+                (event.keyCode >= 65 && event.keyCode <= 90)
+            ) {
                 event.preventDefault();
             }
             this.formatPhoneNumber(event.target.value + event.key);
-        }
+        },
     },
     watch: {
         async value(newValue) {
@@ -149,8 +128,8 @@ export default {
         },
     },
     components: {
-        textboxQuestion
-    }
+        textboxQuestion,
+    },
 };
 </script>
 

src/digital-components/textbox-question/textbox-question.vue

@@ -45,7 +45,7 @@
                 @blur="handleChange"
                 :maxlength="maxLength ? maxLength : '999'"
                 @focus="$emit('focus', $event.target.value)"
-                @keydown="keyDownHandler"/>
+                @keydown="keyDownHandler" />
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
             <template v-if="includeImageQuestion">
                 <template v-if="!isDisabled">

src/layouts/customer-details/customer-details.vue

@@ -27,10 +27,8 @@
                 class="mb-4"
                 cmsWidgetName="phoneNumberQuestionWidget"
                 v-model="phoneNumber"
-                inputId="phone"
                 isRequired
-                maxLength="12"
-                validationRules="phone-number-required|phone-number-format" />
+                 />
             <textareaQuestion
                 class="mb-4"
                 v-model="techNotes"