project-booster-vue 9.45.2 → 9.46.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.45.2",
+  "version": "9.46.1",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/cards/PbCard.vue

@@ -9,6 +9,7 @@
     :role="!buttonLabel ? 'button' : 'article'"
     :style="`min-height: ${cardMinHeight}; border-color:${borderTop ? borderTop : null}`"
     @click="handleCardClick"
+    :data-cerberus="sanitizeCerberusAttribut('PB-CARD', answerCode)"
   >
     <m-flex
       class="pb-card__container"
@@ -119,6 +120,7 @@ import PbCardSelectionIndicator from './decorators/PbCardSelectionIndicator.vue'
 import PbCardTypeIndicator from './decorators/PbCardTypeIndicator.vue';
 import { M_FLEX_VALIDATOR } from '../mozaic/flex/MFlex.vue';
 import MLink from '../mozaic/link/MLink.vue';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 export const PB_CARD_VALIDATOR = {
   cardMinRatio: ['auto', '16x9', '3x2', '4x3', '1x1', '3x4', '2x3'],
@@ -316,6 +318,13 @@ export default defineComponent({
       type: String,
       default: null,
     },
+    /**
+     * Get the answer code
+     */
+    answerCode: {
+      type: String,
+      default: null,
+    },
   },
 
   computed: {
@@ -350,6 +359,7 @@ export default defineComponent({
        */
       this.$emit('button-click', { label: this.buttonLabel });
     },
+    sanitizeCerberusAttribut,
   },
 });
 </script>

package/src/components/question/PbQuestion.vue

@@ -71,6 +71,7 @@
                 <component
                   :is="payload.viewModel.answersComponent"
                   v-if="payload.viewModel.answersComponent !== 'MButton'"
+                  :answer-code="answer.code"
                   class="pb-question__answer__component"
                   :border-top="answer?.viewModel?.borderColor || null"
                   :image="decorate(answers, runtimeOptions, answer?.viewModel?.image, payload.defaultDecoratorValue)"

package/src/components/warning-message/PbWarningMessage.vue

@@ -67,6 +67,7 @@
           v-for="action in payload.callToActions"
           :key="action.label"
           @click="callAction(action.action)"
+          :data-cerberus="sanitizeCerberusAttribut('PB-WARNING-BUTTON', action.action.code)"
         />
       </m-flex>
     </div>
@@ -109,6 +110,7 @@ import SVGInjector from 'svg-injector';
 import { WarningMessagePayloadAction } from '@/types/pb/WarningMessage';
 import { DialogContent } from './dialogContent';
 import { string } from 'yup';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 const WARNING_ICON =
@@ -233,6 +235,7 @@ export default defineComponent({
       displayDialogHelp,
       handleHelpDialog,
       dialogHelpContent,
+      sanitizeCerberusAttribut,
     };
   },
 });

package/src/services/sanitize.ts

@@ -0,0 +1,28 @@
+/**
+ * Sanitize cerberus data attribut
+ * @param field
+ * @param type
+ * @returns
+ */
+export const sanitizeCerberusAttribut = (field: string, type: string) => {
+  if (type) {
+    type = slugifyTypeAttribut(type);
+    return field.toUpperCase() + '--' + type.toUpperCase();
+  } else {
+    return field;
+  }
+};
+
+/**
+ * Slugify type of attribut
+ * @param type
+ * @returns
+ */
+export const slugifyTypeAttribut = (type: string) => {
+  return type
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+};