Merge remote-tracking branch 'origin/develop' into develop

src/common-components/button-question/button-question.vue

@@ -11,7 +11,7 @@
               :is="buttonType" 
               v-for="answer in answers" 
               :key="answer.Name ? answer.Name : answer"
-              @isChecked="handleCheckedChanged"
+              @isCheckedChanged="handleCheckedChanged"
               :buttonID="answer.Name ? answer.Name : answer"
               :value="answer.Name ? answer.Name : answer"
               :buttonLabel="answer.Text ? answer.Text : answer"
@@ -108,13 +108,14 @@ export default {
     if(Array.isArray(this.answers) && this.answers.length === 1) {
       this.modelValueAnswers.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
       this.$emit("update:modelValue", this.modelValueAnswers);
-    };
+    }
   },
   methods: {
     handleCheckedChanged(val) {
       // Add or remove item to array of data to emit
       val.isChecked ? this.modelValueAnswers.push(val.buttonId) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(val.buttonId), 1);
-      this.$emit("update:modelValue", this.modelValueAnswers.length ? this.modelValueAnswers : undefined);
+      const answersToEmit = this.modelValueAnswers.length ? this.modelValueAnswers : undefined;
+      this.$emit("update:modelValue", answersToEmit);
     },
   },
   components: {

src/common-components/funnel-footer/funnel-footer.vue

@@ -65,6 +65,9 @@ export default {
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize);
     })
+    setTimeout(function(){ // Give it a moment to set the date
+      document.getElementById('years').innerHTML += new Date().getFullYear();
+    }, 100);
   },
   beforeUnmount() {
     window.removeEventListener('resize', this.onResize);
@@ -75,7 +78,4 @@ export default {
     }
   }
 };
-setTimeout(function(){ // Give it a moment to set the date
-  document.getElementById('years').innerHTML += new Date().getFullYear();
-}, 100);
 </script>

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -69,7 +69,7 @@ export default {
       type: String,
       default: "",
     },
-    modelValue: false,
+    modelValue: [Array, String],
   },
   data() {
     return {
@@ -77,6 +77,9 @@ export default {
       checkValue: Boolean,
     };
   },
+  created(){
+    this.checkValue = this.modelValue ? this.modelValue.includes(this.buttonID) : false;
+  },
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
@@ -90,7 +93,7 @@ export default {
   },
   watch: {
     checkValue(){
-      this.$emit('isChecked', {isChecked: this.checkValue, buttonId: this.buttonID});
+      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
     }
   },
   components: {

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

@@ -95,7 +95,7 @@ export default {
   },
   watch: {
     checkValue(){
-      this.$emit('isChecked', {isChecked: this.checkValue, buttonId: this.buttonID});
+      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
     }
   },
   components: {

src/ux-components/list-card/list-card.vue

@@ -1,32 +1,32 @@
 <template>
   <div :class="'col' + colLength">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" 
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100"
-    :class="isWide ? 'horizontal' : ''" 
+    :class="isWide ? 'horizontal' : ''"
-    @mouseup="handleChange(value)" 
+    @mouseup="handleChange(value)"
     @keyup.space="handleChange(value)">
-      <input 
+      <input
-        :type="isMultiSelect ? 'checkbox' : 'radio'" 
+        :type="isMultiSelect ? 'checkbox' : 'radio'"
-        :id="buttonID" 
+        :id="buttonID"
-        :name="groupName" 
+        :name="groupName"
-        :value="buttonID" 
+        :value="buttonID"
-        :aria-required="isRequired" 
+        :aria-required="isRequired"
-        :data-focus-target="groupName" 
+        :data-focus-target="groupName"
         v-model="checkValue"
        />
-      <label 
+      <label
-        :for="buttonID" 
+        :for="buttonID"
-        class="d-flex w-100 align-items-center px-2 h-100" 
+        class="d-flex w-100 align-items-center px-2 h-100"
         :class="getLabelClasses" tabindex="-1"
       >
-        <img 
+        <img
-          :id="buttonImageId" 
+          :id="buttonImageId"
-          :class="!isWide ? 'order-1' : 'ms-auto order-3'" 
+          :class="!isWide ? 'order-1' : 'ms-auto order-3'"
-          :src="buttonImage" 
+          :src="buttonImage"
           :alt="altText"
          />
-        <p 
+        <p
-          v-if="!isWide" 
+          v-if="!isWide"
-          class="small order-3" 
+          class="small order-3"
           :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
         >
           {{buttonLabel}}
@@ -78,7 +78,7 @@ export default {
     }
   },
   created(){
-    this.checkValue = this.modelValue.includes(this.buttonID);
+    this.checkValue = this.modelValue ? this.modelValue.includes(this.buttonID) : false;
   },
   computed: {
     getLabelClasses() {
@@ -95,7 +95,7 @@ export default {
   },
   watch: {
     checkValue(){
-      this.$emit('isChecked', {isChecked: this.checkValue, buttonId: this.buttonID});
+      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
     }
   },
   setup(props) {