project-booster-vue 9.44.10 → 9.44.12

package/package.json

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

package/src/components/cards/PbCard.vue

@@ -335,12 +335,12 @@ export default defineComponent({
       this.$emit('link-click');
     },
     handleCardClick() {
-      this.cardLink ? window.open(this.cardLink, '_blank') : '';
+      this.cardLink ? window.open(this.cardLink, '_self') : '';
       !this.buttonLabel && !this.linkLabel ? this.$emit('card-click') : '';
     },
     handleButtonLinkClicked(href: string) {
       this.handleButtonClicked();
-      window.open(href, '_blank');
+      window.open(href, '_self');
     },
     handleButtonClicked() {
       /**

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

@@ -1,35 +1,37 @@
 <template>
-  <transition name="m-dialog__slide-bottom">
-    <m-flex
-      v-if="showDialog"
-      class="m-dialog__container"
-      :class="{ 'm-dialog__container--overlay': !hideOverlay }"
-      align-items="center"
-      justify-content="center"
-      :aria-hidden="showDialog"
-      :style="`height: ${componentHeight};`"
-    >
-      <m-flex class="m-dialog" direction="column" :style="dialogStyle">
-        <div class="m-dialog__header" :class="{ 'm-dialog__header--padding-right': !hideCross }">
-          <!-- @slot Dialog header slot -->
-          <slot name="header" />
-        </div>
-        <div class="m-dialog__body-top" :style="`opacity: ${bodyShadowTopOpacity}`" />
-        <div ref="pbDialogBody" class="m-dialog__body" @scroll="handleScroll">
-          <!-- @slot Dialog body slot -->
-          <slot name="body" />
-        </div>
-        <div class="m-dialog__body-bottom" :style="`opacity: ${bodyShadowBottomOpacity}`" />
-        <div class="m-dialog__footer">
-          <!-- @slot Dialog footer slot -->
-          <slot name="footer" />
-        </div>
-        <div v-if="!hideCross" class="m-dialog__close" @click="hide()">
-          <m-icon :icon="CROSS_ICON" size="m" color="grey-500" />
-        </div>
+  <div>
+    <transition name="m-dialog__slide-bottom">
+      <m-flex
+        v-if="showDialog"
+        class="m-dialog__container"
+        align-items="center"
+        justify-content="center"
+        :aria-hidden="showDialog"
+        :style="`height: ${componentHeight};`"
+      >
+        <div class="m-dialog__container m-dialog__container--overlay" @click.prevent="hide()"></div>
+        <m-flex class="m-dialog" direction="column" :style="dialogStyle">
+          <div class="m-dialog__header" :class="{ 'm-dialog__header--padding-right': !hideCross }">
+            <!-- @slot Dialog header slot -->
+            <slot name="header" />
+          </div>
+          <div class="m-dialog__body-top" :style="`opacity: ${bodyShadowTopOpacity}`" />
+          <div ref="pbDialogBody" class="m-dialog__body" @scroll="handleScroll">
+            <!-- @slot Dialog body slot -->
+            <slot name="body" />
+          </div>
+          <div class="m-dialog__body-bottom" :style="`opacity: ${bodyShadowBottomOpacity}`" />
+          <div class="m-dialog__footer">
+            <!-- @slot Dialog footer slot -->
+            <slot name="footer" />
+          </div>
+          <div v-if="!hideCross" class="m-dialog__close" @click="hide()">
+            <m-icon :icon="CROSS_ICON" size="m" color="grey-500" />
+          </div>
+        </m-flex>
       </m-flex>
-    </m-flex>
-  </transition>
+    </transition>
+  </div>
 </template>
 
 <script lang="ts">
@@ -248,6 +250,7 @@ $responsive-breakpoint: 'm';
   max-height: 100%;
   overflow: hidden;
   position: relative;
+  z-index: 999;
 
   @include set-from-screen('m') {
     max-height: 50vh;
@@ -278,7 +281,6 @@ $responsive-breakpoint: 'm';
     right: 0;
     top: 0;
     width: 100vw;
-    z-index: 100;
   }
 
   &__container--overlay {

package/src/components/progression-price/PbProgressionPrice.vue

@@ -4,9 +4,7 @@
       <div class="pb-progression-block__title">
         {{ title }}
       </div>
-      <div v-if="subtitle" class="pb-progression-block__subtitle">
-        {{ subtitle }}
-      </div>
+      <div v-if="subtitle" class="pb-progression-block__subtitle" v-html="subtitle"></div>
       <m-flex class="pb-progression-block__price" align-items="baseline" justify-content="center" wrap>
         <div class="pb-progression-block__price-min">{{ roundDecadeDown(lowerPrice) }}</div>
         <div class="pb-progression-block__price-separator">{{ separatorLabel || 'et' }}</div>

package/src/components/question/space-input/PbSpaceInput.vue

@@ -89,6 +89,7 @@
             width="full"
             size="l"
             @click="handleFormSubmit"
+            :disabled="disabledNextStep"
           />
           <m-link
             v-if="payload.skippable"
@@ -130,7 +131,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted, PropType, ref, ComputedRef } from 'vue';
+import { defineComponent, computed, onMounted, PropType, ref, ComputedRef, watch } from 'vue';
 import { v4 as uuidv4 } from 'uuid';
 import { useForm } from 'vee-validate';
 import * as yup from 'yup';
@@ -147,6 +148,7 @@ import DEFAULT_PAYLOAD from './default-payload.json';
 import { SpaceInputPayload } from '@/components/question/space-input/SpaceInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
+import { id } from 'date-fns/locale';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -247,8 +249,9 @@ export default defineComponent({
     const pbSpaceInputTextInput = ref<HTMLElement>();
     const showModal = ref(false);
     const contentModal = ref({});
+    const disabledNextStep = ref(true);
 
-    const space = computeDefaultValue(props.runtimeOptions, props.answers!, computedPayload);
+    const space = ref(computeDefaultValue(props.runtimeOptions, props.answers!, computedPayload));
 
     const handleShowModal = ({ headerTitle, htmlContent }: { headerTitle: string; htmlContent: string }) => {
       showModal.value = !showModal.value;
@@ -260,6 +263,21 @@ export default defineComponent({
 
     const validationSchema = initValidation(componentId, computedPayload);
 
+    const disabledButton = (value: any) => {
+      const validation = computedPayload.value.viewModel.validation;
+      if (value && parseInt(value) >= validation.minValue && parseInt(value) <= validation.maxValue) {
+        disabledNextStep.value = false;
+      } else {
+        disabledNextStep.value = true;
+      }
+    };
+
+    disabledButton(space.value);
+
+    watch(space, async (newValue) => {
+      disabledButton(newValue);
+    });
+
     const { handleSubmit } = useForm({ validationSchema: validationSchema.value });
     const handleFormSubmit = handleSubmit((values) => {
       const elementId = `text-input-${componentId}` as string;
@@ -314,6 +332,7 @@ export default defineComponent({
       showModal,
       handleShowModal,
       contentModal,
+      disabledNextStep,
     };
   },
 });