project-booster-vue 9.45.1 → 9.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.45.1",
+  "version": "9.46.0",
   "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/carousel/PbCarousel.vue

@@ -99,10 +99,10 @@ export default defineComponent({
 $responsive-breakpoint: 'm';
 
 .pb-carousel {
-  margin: 0 -$mu100 0 0;
+  margin: 0 - $mu100 0 0;
 
   @include set-from-screen($responsive-breakpoint) {
-    margin: 0 -$mu100;
+    margin: 0 - $mu100;
   }
 
   :deep(.pb-carousel__slider.hooper) {

package/src/components/media/PbMedia.vue

@@ -490,7 +490,7 @@ $responsive-breakpoint: 'l';
   }
 
   :deep(.pb-media__sticky-upload-button) {
-    margin: 0 -$mu100;
+    margin: 0 - $mu100;
     width: calc(100% + 2 * #{$mu100});
 
     @include set-from-screen('m') {

package/src/components/mozaic/dialog/MDialog.vue

@@ -281,6 +281,7 @@ $responsive-breakpoint: 'm';
     right: 0;
     top: 0;
     width: 100vw;
+    z-index: 999;
   }
 
   &__container--overlay {

package/src/components/projects/project-hub/PbProjectHub.vue

@@ -1457,7 +1457,7 @@ $appear-duration: 100ms;
         width: calc(100% + 2 * #{$mu050});
 
         @include set-from-screen($responsive-breakpoint) {
-          margin: 0 #{-$mu100};
+          margin: 0 #{- $mu100};
           width: calc(100% + 2 * #{$mu100});
         }
 

package/src/components/projects/projects-list/PbProjectHub.vue

@@ -1453,7 +1453,7 @@ $appear-duration: 100ms;
         width: calc(100% + 2 * #{$mu050});
 
         @include set-from-screen($responsive-breakpoint) {
-          margin: 0 #{-$mu100};
+          margin: 0 #{- $mu100};
           width: calc(100% + 2 * #{$mu100});
         }
 

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/restitution/PbRestitution.vue

@@ -464,7 +464,7 @@ $slide-animation-duration: 0.15s;
   }
 }
 
-@media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio: 0) {
+@media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) {
   /* Safari */
   .pb-restitution {
     display: block !important;

package/src/components/scenario/PbScenario.vue

@@ -844,7 +844,7 @@ $slide-sticky-bottom-animation-delay: $slide-animation-duration + 0.45s;
   }
 }
 
-@media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio: 0) {
+@media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) {
   /* Safari */
   .pb-scenario {
     display: block !important;

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, '');
+};