project-booster-vue 9.58.0 → 9.59.1

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "project-booster-vue",
-  "version": "9.58.0",
+  "version": "9.59.1",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",
     "kozikaza-tokens-build": "env PB_THEME=kozikaza mozaic-tokens-build",
-    "check-types": "vue-tsc --noemit",
+    "check-types": "vue-tsc --noEmit",
     "eslint": "eslint",
-    "lint:js": "yarn eslint && npm run check-types",
+    "lint:js": "yarn eslint && yarn run check-types",
     "lint:js:fix": "vue-cli-service lint --fix -- ./",
     "lint:style": "stylelint '**/*.vue' '**/*.scss'",
     "lint:style:fix": "stylelint '**/*.vue' '**/*.scss' --fix",

package/src/components/cards/PbCardsList.vue

@@ -22,6 +22,7 @@
             :button-label="card.viewModel.buttonLabel"
             @button-click="handleAnswerButtonClick"
             @card-click="handleCardClick(card)"
+            :data-cerberus="sanitizeCerberusAttribut('PB-CARD', card.code)"
           />
         </div>
       </m-flexy-col>
@@ -35,6 +36,7 @@ import PbCard from '../cards/PbCard.vue';
 import MContainer from '../mozaic/grid/MContainer.vue';
 import MFlexy from '../mozaic/grid/MFlexy.vue';
 import MFlexyCol from '../mozaic/grid/MFlexyCol.vue';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 export default defineComponent({
   name: 'PbCardsList',
@@ -81,6 +83,7 @@ export default defineComponent({
        */
       this.$emit('card-click', card);
     },
+    sanitizeCerberusAttribut,
   },
 });
 </script>

package/src/components/question/amount-input/PbAmountInput.vue

@@ -10,6 +10,7 @@
             !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
         @click.once="$emit('go-back')"
+        :data-cerberus="sanitizeCerberusAttribut('PB-AMOUNT-INPUT', 'LESS')"
       />
     </m-flex>
     <form
@@ -28,6 +29,7 @@
             ref="pbAmountInputTextInput"
             class="pb-amount-input__text-input"
             :placeholder="computedPayload.viewModel.placeholder"
+            :data-cerberus="sanitizeCerberusAttribut('PB-AMOUNT-INPUT', 'INPUT')"
             v-model="amount"
           />
           <div class="pb-amount-input__currency">
@@ -41,6 +43,7 @@
             width="full"
             size="l"
             @click="handleFormSubmit"
+            :data-cerberus="sanitizeCerberusAttribut('PB-AMOUNT-INPUT', 'MORE')"
           />
         </m-flex>
       </m-flex>
@@ -64,6 +67,7 @@ import DEFAULT_PAYLOAD from './default-payload.json';
 import { AmountInputPayload } from '@/components/question/amount-input/AmountInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -197,6 +201,7 @@ export default defineComponent({
       amount,
       computedPayload,
       handleFormSubmit,
+      sanitizeCerberusAttribut,
     };
   },
 });

package/src/components/question/city-search/PbCitySearch.vue

@@ -56,6 +56,7 @@
                 :tabindex="index + 2"
                 @click="selectSuggestion(suggestion)"
                 @keyup.enter="selectSuggestion(suggestion)"
+                :data-cerberus="sanitizeCerberusAttribut('PB-CITY-SEARCH', 'SUGGESTION_' + suggestion.id)"
               >
                 {{ formatSuggestion(suggestion) }}
               </div>
@@ -76,6 +77,7 @@
             @input="handleSearchKeywordChange"
             @focus="handleSearchKeywordFocus"
             @keypress="handleSearchKeywordKeypress($event)"
+            :data-cerberus="sanitizeCerberusAttribut('PB-CITY-SEARCH', 'INPUT')"
             tabindex="1"
           />
         </m-flex>
@@ -94,6 +96,7 @@
           width="full"
           size="l"
           @click="handleFormValidation"
+          :data-cerberus="sanitizeCerberusAttribut('PB-CITY-SEARCH', 'VALIDATE')"
         />
       </m-flex>
     </div>
@@ -115,6 +118,7 @@ import DEFAULT_PAYLOAD from './default-payload.json';
 import { DebouncedFunc } from 'lodash-es';
 import { decorate } from '@/services/decorate';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -405,6 +409,7 @@ export default defineComponent({
         event.preventDefault();
       }
     },
+    sanitizeCerberusAttribut,
   },
 });
 </script>

package/src/components/question/dimensions-input/PbDimensionsInput.vue

@@ -40,6 +40,7 @@
               class="pb-dimensions-input__text-input"
               :placeholder="computedPayload.viewModel.lengthPlaceholder"
               v-model="length"
+              :data-cerberus="sanitizeCerberusAttribut('PB-DIMENSION', 'LENGTH')"
             />
             <div class="pb-dimensions-input__unit">
               <span>m</span>
@@ -56,6 +57,7 @@
               class="pb-dimensions-input__text-input"
               :placeholder="computedPayload.viewModel.widthPlaceholder"
               v-model="width"
+              :data-cerberus="sanitizeCerberusAttribut('PB-DIMENSION', 'WIDTH')"
             />
             <div class="pb-dimensions-input__unit">
               <span>m</span>
@@ -69,6 +71,7 @@
             width="full"
             size="l"
             @click="handleFormSubmit"
+            :data-cerberus="sanitizeCerberusAttribut('PB-DIMENSION', 'SUBMIT')"
           />
           <m-link
             v-if="payload.skippable"
@@ -102,6 +105,7 @@ import { ref } from 'vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { DimensionsInputPayload } from '@/components/question/dimensions-input/DimensionsInput';
 import { decorate } from '@/services/decorate';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -279,6 +283,7 @@ export default defineComponent({
       pbDimensionsInputLengthInput,
       handleFormSubmit,
       skipQuestion,
+      sanitizeCerberusAttribut,
     };
   },
 });

package/src/components/question/incremental-amount-input/PbIncrementalAmountInput.vue

@@ -45,6 +45,7 @@
           :valuemax="computedPayload.viewModel.maxValue"
           @input="handleQuantitySelector"
           :integerOnly="true"
+          :data-cerberus="sanitizeCerberusAttribut('PB-INCREMENTAL-AMOUNT', 'SELECTOR')"
         />
       </m-flex>
 
@@ -55,6 +56,7 @@
           width="full"
           size="l"
           type="submit"
+          :data-cerberus="sanitizeCerberusAttribut('PB-INCREMENTAL-AMOUNT', 'INPUT')"
         />
       </m-flex>
     </form>
@@ -75,6 +77,7 @@ import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
 import MQuantitySelector from '../../mozaic/quantityselector/MQuantitySelector.vue';
 import { IncrementalAmountPayload } from '@/components/question/incremental-amount-input/IncrementalAmount';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -213,6 +216,7 @@ export default defineComponent({
       quantitySelector,
       handleQuantitySelector,
       subtitle,
+      sanitizeCerberusAttribut,
     };
   },
 });

package/src/components/question/name-input/PbNameInput.vue

@@ -23,6 +23,7 @@
           ref="pbNameInputTextInput"
           :placeholder="computedPayload.viewModel.placeholder"
           v-model="name"
+          :data-cerberus="sanitizeCerberusAttribut('PB-NAME-INPUT', 'INPUT')"
         />
         <m-flex v-if="runtimeOptions.displayOptin" class="pb-name-input__optin">
           <m-toggle class="pb-name-input__optin-toggle" size="s" v-model="optin" />
@@ -37,6 +38,7 @@
             width="full"
             size="l"
             @click="handleFormSubmit"
+            :data-cerberus="sanitizeCerberusAttribut('PB-NAME-INPUT', 'BUTTON')"
           />
         </m-flex>
       </m-flex>
@@ -61,6 +63,7 @@ import DEFAULT_PAYLOAD from './default-payload.json';
 import { NameInputPayload } from '@/components/question/name-input/NameInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -230,6 +233,7 @@ export default defineComponent({
       optin,
       computedPayload,
       handleFormSubmit,
+      sanitizeCerberusAttribut,
     };
   },
 });

package/src/components/rework/alert/MPbAlert.vue

@@ -34,6 +34,7 @@
           @click="callAction(button.nextStep)"
           :theme="button.theme"
           style="margin-left: 1rem"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-ALERT', button.label)"
         />
       </div>
     </div>
@@ -43,6 +44,8 @@
 <script lang="ts" setup>
 import { MNotification, MButton, MCard } from '@mozaic-ds/vue-3';
 import { PayloadAction } from '../types/genericPayload';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
+
 const emit = defineEmits(['go-back', 'step-completed']);
 
 const props = defineProps({

package/src/components/rework/exit-options/MPbExitOptions.vue

@@ -37,6 +37,7 @@
           :label="payload.viewModel.backButton.label"
           :theme="payload.viewModel.backButton.theme"
           @click="callAction(payload.viewModel.backButton.nextStep)"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', payload.viewModel.backButton.label)"
         />
       </div>
 
@@ -44,7 +45,11 @@
         v-if="isValidCondition(condition.conditions) && !payload.viewModel.nextStep"
         class="m-pb-exit-options__buttons__button"
       >
-        <m-button :label="condition.viewModel.nextStep.label" :href="condition.viewModel.nextStep.link" />
+        <m-button
+          :label="condition.viewModel.nextStep.label"
+          :href="condition.viewModel.nextStep.link"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', condition.viewModel.nextStep.label)"
+        />
       </div>
     </div>
 
@@ -55,11 +60,16 @@
           :label="payload.viewModel.backButton.label"
           :theme="payload.viewModel.backButton.theme"
           @click="callAction(payload.viewModel.backButton.nextStep)"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', payload.viewModel.backButton.label)"
         />
       </div>
 
       <div class="m-pb-exit-options__buttons__button">
-        <m-button :label="payload.viewModel.nextStep.label" @click="callAction(payload.viewModel.nextStep)" />
+        <m-button
+          :label="payload.viewModel.nextStep.label"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', 'NEXT')"
+          @click="callAction(payload.viewModel.nextStep)"
+        />
       </div>
     </div>
   </div>
@@ -70,6 +80,7 @@ import { MButton } from '@mozaic-ds/vue-3';
 import { PropType, ref } from 'vue';
 import { PayloadAction } from '../types/genericPayload';
 import { areConditionsValid } from '../../../services/scenarioConditionals';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 
 const emit = defineEmits(['go-back', 'step-completed']);

package/src/components/rework/question/city-search/MPbCitySearch.vue

@@ -53,6 +53,7 @@
                 :tabindex="index + 2"
                 @click="selectSuggestion(suggestion)"
                 @keyup.enter="selectSuggestion(suggestion)"
+                :data-cerberus="sanitizeCerberusAttribut('MPB-CITY-SEARCH', 'CITY-' + suggestion.id)"
               >
                 {{ formatSuggestion(suggestion) }}
               </div>
@@ -73,6 +74,7 @@
             @input="handleSearchKeywordChange"
             @focus="handleSearchKeywordFocus"
             tabindex="1"
+            :data-cerberus="sanitizeCerberusAttribut('MPB-CITY-SEARCH', 'INPUT')"
           />
         </m-flex>
       </div>
@@ -89,6 +91,7 @@
           :label="computedPayload.viewModel.actionLabel"
           size="l"
           @click="handleFormValidation"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-CITY-SEARCH', 'BUTTON')"
         />
       </m-flex>
     </div>
@@ -106,6 +109,7 @@ import MFlex from '../../../mozaic/flex/MFlex.vue';
 import MButton from '../../../mozaic/buttons/MButton.vue';
 import MLink from '../../../mozaic/link/MLink.vue';
 import MTextInput from '../../../mozaic/text-input/MTextInput.vue';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { DebouncedFunc } from 'lodash-es';
 import { decorate } from '@/services/decorate';
@@ -394,6 +398,7 @@ export default defineComponent({
     selectedCityToKeyword(): string {
       return this.selectedCity?.postalCode + ' ' + this.selectedCity?.name + ', ' + this.selectedCity?.region;
     },
+    sanitizeCerberusAttribut,
   },
 });
 </script>

package/src/components/rework/question/name-input/MPbNameInput.vue

@@ -23,6 +23,7 @@
           ref="pbNameInputTextInput"
           :placeholder="computedPayload.viewModel.placeholder"
           v-model="name"
+          :data-cerberus="sanitizeCerberusAttribut('MPB-NAME-INPUT', 'INPUT')"
         />
         <m-flex v-if="runtimeOptions.displayOptin" class="pb-name-input__optin">
           <m-toggle class="pb-name-input__optin-toggle" size="s" v-model="optin" />
@@ -37,6 +38,7 @@
             width="full"
             size="l"
             @click="handleFormSubmit"
+            :data-cerberus="sanitizeCerberusAttribut('MPB-NAME-INPUT', 'SUBMIT')"
           />
         </m-flex>
       </m-flex>
@@ -61,6 +63,7 @@ import DEFAULT_PAYLOAD from './default-payload.json';
 import { NameInputPayload } from '@/components/question/name-input/NameInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -230,6 +233,7 @@ export default defineComponent({
       optin,
       computedPayload,
       handleFormSubmit,
+      sanitizeCerberusAttribut,
     };
   },
 });