fcad-core-dragon 2.1.1 → 2.1.2

package/src/components/AppCompPopUpNext.vue

@@ -1,504 +1,508 @@
-<!-- About this Component--
- *@ Description: Application component to show instructions in a modal.
- *@ What it does: This component uses the VDialog component to create a Popup. 2 types of popups can be display:
-  - end of activities popup (popup-endActivity). Default used by the application at the end of activities (AppCompNavigation)
-  - custom popup (popup-custom)- this allow user to defined custom popup using the power of VDialog. Must respect properties defined by VDialog. For more info, refer to https://vuetifyjs.com/en/components/dialogs/#usage.
-  It validates the content of the popup before rendering. Will render error view if there are some errors in content definition
-  * What it needs: data must contain:
-     - type(string) : 'popup-endAcivity' || 'popup-custom || popup-info'
-     - value (Object): {$bvArgs(Object), template (String)}
-
-  *⚠️@Note :There can only be Popup instance of this component in the application. You can ask the application to open the Popup with you defined popup
- *@ Exemple: creating a custom popup using the VDialog props
-
-            const myCustomProp = {
-              type: 'popup-custom',
-              value: {
-              //⚠️IMPORTANT:Only props of VDialog must be listed in $bvArgs. Check VDialog documentation for full list of props
-                $bvArgs: {
-                  centered: true,
-                  width: 'auto',
-                  scrollable: false,
-                  'max-width': '600'
-                }
-              //⚠️IMPORTANT:Must have a template attribute
-              tempate:`<div><h4>Exemple of custom popup</h4><p>Hello World</p></div>`
-              }
-            }
-         // Now we can ask the application to open our custom popup
-         this.$bus.$emit('open-popup', myCustomProp)
--->
-
-<template>
-  <div>
-    <template v-if="!errors.length">
-      <!------------ End Activity --------------------------->
-
-      <v-dialog
-        id="popUp"
-        :model-value="popupType == 'popup-endActivity' && dialogue"
-        :class="pType"
-        width="auto"
-        scrollable
-        centered
-        @after-leave="$close(pContent.cb_$close)"
-      >
-        <focus-trap v-model:active="dialogue" :prevent-scroll="true">
-          <div class="pop-outside">
-            <div class="pop-header">
-              <app-base-button
-                id="close-pop"
-                class="btn-ghost-ico"
-                :title="$t('button.closePopUp')"
-                :aria-label="$t('button.closePopUp')"
-                @click="$close()"
-              >
-                <svg aria-hidden="true" focusable="false">
-                  <use href="#close-square-icon" />
-                </svg>
-              </app-base-button>
-            </div>
-            <div class="pop-containt">
-              <div class="pop-box">
-                <div id="popHeader">
-                  <div id="dialogTitle" class="p-title" v-html="pTitle"></div>
-                </div>
-                <div class="box-content-popUp"></div>
-                <div
-                  id="end-activity"
-                  :aria-hidden="pType !== 'popup-endActivity'"
-                  class="popup-bottom-buttons"
-                ></div>
-              </div>
-            </div>
-          </div>
-        </focus-trap>
-      </v-dialog>
-      <!------------ POPUP INFO ----------------------------->
-      <v-dialog
-        id="popUp"
-        :model-value="popupType == 'popup-info' && dialogue"
-        :class="pType"
-        width="auto"
-        scrollable
-        centered
-        v-bind="pArgs"
-        @after-leave="$close(pContent.cb_$close)"
-      >
-        <focus-trap v-model:active="dialogue" :prevent-scroll="true">
-          <div class="pop-outside">
-            <div class="pop-header">
-              <app-base-button
-                id="close-pop"
-                class="btn-ghost-ico"
-                :title="$t('button.closePopUp')"
-                :aria-label="$t('button.closePopUp')"
-                @click="$close()"
-              >
-                <svg aria-hidden="true" focusable="false">
-                  <use href="#close-square-icon" />
-                </svg>
-              </app-base-button>
-            </div>
-            <div class="pop-containt">
-              <div class="pop-box">
-                <div id="popHeader">
-                  <p id="dialogTitle" class="p-title" v-html="pTitle"></p>
-                </div>
-                <div class="box-content-popUp">
-                  <template v-if="contentLength > 0">
-                    <template v-for="(content, _key, index) of pContent">
-                      <!-------- Create TEXT element -------------->
-                      <p
-                        v-if="_key.includes('text') && !_key.includes('hyper')"
-                        :id="`${_key}_${index}`"
-                        :key="_key"
-                        class="p-txt"
-                      >
-                        {{ content }}
-                      </p>
-
-                      <!-------- Create HTMLelement -------------->
-                      <div
-                        v-else-if="_key.includes('hypertext')"
-                        :id="`${_key}_${index}`"
-                        :key="`hyp_${_key}`"
-                        v-html="content"
-                      />
-
-                      <!-------- Create IMAGE element ------------->
-                      <img
-                        v-else-if="_key.includes('image')"
-                        :id="`${_key}_${index}`"
-                        :key="`img_${_key}`"
-                        class="p-img"
-                        :src="content.path"
-                        :alt="content.label || 'image'"
-                      />
-
-                      <!-------- Create LINK element -------------->
-                      <a
-                        v-else-if="_key.includes('link')"
-                        :id="`${_key}_${index}`"
-                        :key="`lnk_${_key}`"
-                        :href="content.ref"
-                        class="p-a"
-                        target="_blank"
-                        :title="`${content.label}`"
-                      >
-                        {{ content.label }}
-                      </a>
-
-                      <!-------- Create VIDEO element ------------->
-                      <video
-                        v-else-if="_key.includes('video')"
-                        :id="`${_key}_${index}`"
-                        :key="`vid_${_key}`"
-                        :src="content"
-                        class="p-vid"
-                        controls
-                        disablepictureinpicture
-                        controlslist="nofullscreen nodownload"
-                      />
-
-                      <!--------Create AUDIO element--------------->
-                      <audio
-                        v-else-if="_key.includes('audio')"
-                        :id="`${_key}_${index}`"
-                        :key="`aud_${_key}`"
-                        :src="content"
-                        class="p-aud"
-                        controls
-                        controlslist="nodownload"
-                      />
-                    </template>
-                  </template>
-                </div>
-                <div
-                  id="end-activity"
-                  :aria-hidden="pType !== 'popup-endActivity'"
-                  class="popup-bottom-buttons"
-                ></div>
-              </div>
-            </div>
-          </div>
-        </focus-trap>
-      </v-dialog>
-      <!------------ POPUP CUSTOM --------------------------->
-      <v-dialog
-        id="popUp"
-        :model-value="popupType == 'popup-custom' && dialogue"
-        :class="pType"
-        v-bind="pArgs"
-        @after-leave="$close(pContent.cb_$close)"
-      >
-        <focus-trap v-model:active="dialogue" :prevent-scroll="true">
-          <component :is="{ template: pContent.template }"></component>
-        </focus-trap>
-      </v-dialog>
-      <!------------------------------- END POPUPS ------------------------------>
-    </template>
-    <app-base-error-display
-      v-show="errors.length"
-      :error-group="'component'"
-      :error-title="'ERREUR: COMPOSANT DE POPUP'"
-      :errors-list="errors"
-    />
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-
-export default {
-  name: 'AppCompPopUp',
-
-  data() {
-    return {
-      pType: null,
-      pName: 'noName',
-      pContent: {},
-      pArgs: null,
-      pTitle: '',
-      errors: [],
-      docLink:
-        'https://fcaddocumentation.netlify.app/guide/ressources.html#creer-un-popup-custom',
-      animationOff: false,
-      dialogue: false
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, ['getNotes', 'getWidgetOpen']),
-    contentLength() {
-      let size = null
-      if (!this.pType || this.pType !== 'popup-info') return
-
-      if (this.pContent && Object.keys(this.pContent).length > 0)
-        size = Object.keys(this.pContent).length
-      return size
-    },
-
-    popupType() {
-      if (!this.pType) return
-      return this.pType
-    }
-  },
-
-  mounted() {
-    this.$bus.$on('popup-open', this.validateContent)
-    this.$bus.$on('popup-close', this.$close)
-  },
-  beforeUnmount() {
-    this.$bus.$off('popup-open', this.validateContent)
-    this.$bus.$off('popup-close', this.$close)
-  },
-  methods: {
-    ...mapActions(useAppStore, ['updateEndPopUp']),
-    /**
-     * @description - Validate the data for the component
-     * @param {Object} data
-     */
-    validateContent(data) {
-      if (!data) return
-      const typeList = ['popup-custom', 'popup-endActivity', 'popup-info']
-
-      if (this.errors.length > 0) this.errors = []
-
-      if (data.type) {
-        // validate the type value of popup
-        const validType = typeList.includes(data.type)
-
-        if (!validType) this.errors.push('Invalid value for type')
-      } else this.errors.push('Missing argument: type')
-
-      // validate value of the popup according to popup type
-      // Content must be String|Object
-      if (data.value) {
-        let validObject = false
-        if (
-          data.value.constructor === Object &&
-          Object.keys(data.value).length > 0
-        )
-          validObject = true
-
-        if (validObject) {
-          let KeywordsList
-          //Validate the content accordint to popup type
-          switch (true) {
-            case data.type === 'popup-endActivity':
-              KeywordsList = ['template', 'title'] // accepted keywords in value declaration for pop-up end-Activity
-              break
-
-            case data.type === 'popup-custom':
-              KeywordsList = ['$bvArgs', 'template'] // accepted keywords in value declaration for pop-up custom
-              //Must have required keywords
-              for (const key of KeywordsList) {
-                if (data.value[key]) continue
-                this.errors.push(
-                  `Missing required attribute 👉${key}👈. Required attributes are ${[...KeywordsList]}`
-                )
-              }
-
-              break
-            default:
-              KeywordsList = [
-                'title',
-                'text_',
-                'image_',
-                'video_',
-                'audio_',
-                'link_',
-                'hypertext_',
-                '$bvArgs'
-              ] // accepted keyword in value declaration for pop-up custom
-          }
-          //validate each key in value content
-
-          for (let key of Object.keys(data.value)) {
-            let expectedKey = key
-            // search if key match lists
-            if (key.includes('_') && !key.includes('cb_$'))
-              expectedKey = `${key.split('_')[0]}_`
-
-            //===============================================
-            const test = (regexp) => regexp.test(expectedKey) //defining the testing function
-
-            switch (true) {
-              case ![...KeywordsList].includes(expectedKey):
-                this.errors.push(
-                  `Invalid attribute declaration 👉${key}👈 . Expected attributes are ${[...KeywordsList]}`
-                )
-                break
-
-              case test(/link/):
-                // Validating content of link element
-                if (!data.value[key].ref) {
-                  this.errors.push('Missing ref for link')
-                }
-                break
-
-              case test(/image/):
-                // Validating content of link element
-                if (!data.value[key].path) {
-                  this.errors.push('Missing path for image')
-                }
-                break
-
-              case test(/cb_\$/):
-                // validating content of cb_$ keys to be a function
-                if (data.value[key].constructor != Function)
-                  this.errors.push(
-                    `Invalid assignment for attribute 👉${expectedKey} popup. Must be a Function`
-                  )
-                break
-
-              case test(/\$bvArgs/):
-                // validating content of cb_$ keys to be a function
-
-                if (data.value[key].constructor != Object)
-                  this.errors.push(
-                    `Invalid assignment for attribute 👉${expectedKey} popup. Must be an Object`
-                  )
-
-                break
-
-              default: {
-                if (data.value[key].constructor != String) {
-                  this.errors.push(
-                    `Invalid assignment for attribute 👉${key} in popup. Must be a String`
-                  )
-                }
-              }
-            }
-          }
-        } else this.errors.push('Invalid object declaration for value')
-      } else this.errors.push('Missing argument - value')
-
-      if (import.meta.env.DEV) {
-        for (const err of this.errors)
-          console.warn(
-            `%c WARNING!>>> POP-UP: ${err} `,
-            'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-          )
-      }
-
-      if (!this.errors.length) {
-        if (data.type === 'popup-endActivity') {
-          const { title, ...filtered } = data.value
-          this.pContent = filtered
-          this.pTitle = title
-        } else {
-          const { title, $bvArgs, ...filtered } = data.value
-          this.pContent = filtered
-          this.pTitle = title
-          this.pArgs = $bvArgs // native VDialog props
-        }
-        this.pType = data.type
-        this.pName = data.name
-
-        if (this.pType == 'popup-endActivity')
-          this.updateEndPopUp(true) //This will handle the activation of the element in the portal
-        else this.updateEndPopUp(false) //This will handle the activation of the element in the portal
-        if (this.getWidgetOpen) {
-          this.$bus.$emit('close-widget')
-        }
-        this.$open()
-      }
-    },
-
-    /**
-     * @description - method to open the popup
-     * @param {Function} cb
-     */
-    $open(cb) {
-      this.dialogue = true
-    },
-    /**
-     * @description - method to close the popup
-     * @param {Function} cb
-     */
-    $close(options, cb) {
-      if (this.pType === 'popup-endActivity') this.updateEndPopUp(false)
-      this.dialogue = false
-    }
-  }
-}
-</script>
-<style lang="scss">
-.v-overlay__scrim {
-  background: none !important;
-}
-
-.popup-info {
-  .v-overlay__content {
-    width: 565px !important;
-    padding: 16px 24px 24px 24px;
-    overflow: hidden;
-
-    .pop-outside {
-      .pop-header {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
-        width: 100%;
-
-        #close-pop {
-          margin-right: 2px;
-          margin-top: 2px;
-        }
-      }
-    }
-  }
-}
-
-.popup-endActivity {
-  .v-overlay__content {
-    max-height: 277px !important;
-    margin: 0 !important;
-    width: 100% !important;
-    max-width: 100% !important;
-
-    .pop-outside {
-      display: flex;
-      flex-direction: column;
-      padding: 24px;
-
-      .pop-header {
-        display: flex;
-        justify-content: flex-end;
-      }
-      .pop-containt {
-        display: flex;
-        justify-content: center;
-        position: relative;
-        bottom: 8px;
-
-        #popHeader {
-          display: flex;
-          justify-content: center;
-          margin-bottom: 24px;
-        }
-
-        .popup-bottom-buttons {
-          display: flex;
-          justify-content: center;
-
-          .btn {
-            &:first-child {
-              margin-right: 24px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.popup-custom {
-  .v-overlay__content {
-    margin: 0 !important;
-    width: 100% !important;
-  }
-}
-</style>
+<!-- About this Component--
+ *@ Description: Application component to show instructions in a modal.
+ *@ What it does: This component uses the VDialog component to create a Popup. 2 types of popups can be display:
+  - end of activities popup (popup-endActivity). Default used by the application at the end of activities (AppCompNavigation)
+  - custom popup (popup-custom)- this allow user to defined custom popup using the power of VDialog. Must respect properties defined by VDialog. For more info, refer to https://vuetifyjs.com/en/components/dialogs/#usage.
+  It validates the content of the popup before rendering. Will render error view if there are some errors in content definition
+  * What it needs: data must contain:
+     - type(string) : 'popup-endAcivity' || 'popup-custom || popup-info'
+     - value (Object): {$bvArgs(Object), template (String)}
+
+  *⚠️@Note :There can only be Popup instance of this component in the application. You can ask the application to open the Popup with you defined popup
+ *@ Exemple: creating a custom popup using the VDialog props
+
+            const myCustomProp = {
+              type: 'popup-custom',
+              value: {
+              //⚠️IMPORTANT:Only props of VDialog must be listed in $bvArgs. Check VDialog documentation for full list of props
+                $bvArgs: {
+                  centered: true,
+                  width: 'auto',
+                  scrollable: false,
+                  'max-width': '600'
+                }
+              //⚠️IMPORTANT:Must have a template attribute
+              tempate:`<div><h4>Exemple of custom popup</h4><p>Hello World</p></div>`
+              }
+            }
+         // Now we can ask the application to open our custom popup
+         this.$bus.$emit('open-popup', myCustomProp)
+-->
+
+<template>
+  <div>
+    <template v-if="!errors.length">
+      <!------------ End Activity --------------------------->
+
+      <v-dialog
+        id="popUp"
+        :model-value="popupType == 'popup-endActivity' && dialogue"
+        :class="pType"
+        width="auto"
+        scrollable
+        centered
+        @after-leave="$close(pContent.cb_$close)"
+      >
+        <focus-trap v-model:active="dialogue" :prevent-scroll="true">
+          <div class="pop-outside">
+            <div class="pop-header">
+              <app-base-button
+                id="close-pop"
+                class="btn-ghost-ico"
+                :title="$t('button.closePopUp')"
+                :aria-label="$t('button.closePopUp')"
+                @click="$close()"
+              >
+                <svg aria-hidden="true" focusable="false">
+                  <use href="#close-square-icon" />
+                </svg>
+              </app-base-button>
+            </div>
+            <div class="pop-containt">
+              <div class="pop-box">
+                <div id="popHeader">
+                  <div id="dialogTitle" class="p-title" v-html="pTitle"></div>
+                </div>
+                <div class="box-content-popUp"></div>
+                <div
+                  id="end-activity"
+                  :aria-hidden="pType !== 'popup-endActivity'"
+                  class="popup-bottom-buttons"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </focus-trap>
+      </v-dialog>
+      <!------------ POPUP INFO ----------------------------->
+      <v-dialog
+        id="popUp"
+        :model-value="popupType == 'popup-info' && dialogue"
+        :class="pType"
+        width="auto"
+        scrollable
+        centered
+        v-bind="pArgs"
+        @after-leave="$close(pContent.cb_$close)"
+      >
+        <focus-trap v-model:active="dialogue" :prevent-scroll="true">
+          <div class="pop-outside">
+            <div class="pop-header">
+              <app-base-button
+                id="close-pop"
+                class="btn-ghost-ico"
+                :title="$t('button.closePopUp')"
+                :aria-label="$t('button.closePopUp')"
+                @click="$close()"
+              >
+                <svg aria-hidden="true" focusable="false">
+                  <use href="#close-square-icon" />
+                </svg>
+              </app-base-button>
+            </div>
+            <div class="pop-containt">
+              <div class="pop-box">
+                <div id="popHeader">
+                  <p id="dialogTitle" class="p-title" v-html="pTitle"></p>
+                </div>
+                <div class="box-content-popUp">
+                  <template v-if="contentLength > 0">
+                    <template v-for="(content, _key, index) of pContent">
+                      <!-------- Create TEXT element -------------->
+                      <p
+                        v-if="_key.includes('text') && !_key.includes('hyper')"
+                        :id="`${_key}_${index}`"
+                        :key="_key"
+                        class="p-txt"
+                      >
+                        {{ content }}
+                      </p>
+
+                      <!-------- Create HTMLelement -------------->
+                      <div
+                        v-else-if="_key.includes('hypertext')"
+                        :id="`${_key}_${index}`"
+                        :key="`hyp_${_key}`"
+                        v-html="content"
+                      />
+
+                      <!-------- Create IMAGE element ------------->
+                      <img
+                        v-else-if="_key.includes('image')"
+                        :id="`${_key}_${index}`"
+                        :key="`img_${_key}`"
+                        class="p-img"
+                        :src="content.path"
+                        :alt="content.label || 'image'"
+                      />
+
+                      <!-------- Create LINK element -------------->
+                      <a
+                        v-else-if="_key.includes('link')"
+                        :id="`${_key}_${index}`"
+                        :key="`lnk_${_key}`"
+                        :href="content.ref"
+                        class="p-a"
+                        target="_blank"
+                        :title="`${content.label}`"
+                      >
+                        {{ content.label }}
+                      </a>
+
+                      <!-------- Create VIDEO element ------------->
+                      <video
+                        v-else-if="_key.includes('video')"
+                        :id="`${_key}_${index}`"
+                        :key="`vid_${_key}`"
+                        :src="content"
+                        class="p-vid"
+                        controls
+                        disablepictureinpicture
+                        controlslist="nofullscreen nodownload"
+                      />
+
+                      <!--------Create AUDIO element--------------->
+                      <audio
+                        v-else-if="_key.includes('audio')"
+                        :id="`${_key}_${index}`"
+                        :key="`aud_${_key}`"
+                        :src="content"
+                        class="p-aud"
+                        controls
+                        controlslist="nodownload"
+                      />
+                    </template>
+                  </template>
+                </div>
+                <div
+                  id="end-activity"
+                  :aria-hidden="pType !== 'popup-endActivity'"
+                  class="popup-bottom-buttons"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </focus-trap>
+      </v-dialog>
+      <!------------ POPUP CUSTOM --------------------------->
+      <v-dialog
+        id="popUp"
+        :model-value="popupType == 'popup-custom' && dialogue"
+        :class="pType"
+        v-bind="pArgs"
+        @after-leave="$close(pContent.cb_$close)"
+      >
+        <focus-trap v-model:active="dialogue" :prevent-scroll="true">
+          <component :is="{ template: pContent.template }"></component>
+        </focus-trap>
+      </v-dialog>
+      <!------------------------------- END POPUPS ------------------------------>
+    </template>
+    <app-base-error-display
+      v-show="errors.length"
+      :error-group="'component'"
+      :error-title="'ERREUR: COMPOSANT DE POPUP'"
+      :errors-list="errors"
+    />
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  name: 'AppCompPopUp',
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  data() {
+    return {
+      pType: null,
+      pName: 'noName',
+      pContent: {},
+      pArgs: null,
+      pTitle: '',
+      errors: [],
+      docLink:
+        'https://fcaddocumentation.netlify.app/guide/ressources.html#creer-un-popup-custom',
+      animationOff: false,
+      dialogue: false
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, ['getNotes', 'getWidgetOpen']),
+    contentLength() {
+      let size = null
+      if (!this.pType || this.pType !== 'popup-info') return
+
+      if (this.pContent && Object.keys(this.pContent).length > 0)
+        size = Object.keys(this.pContent).length
+      return size
+    },
+
+    popupType() {
+      if (!this.pType) return
+      return this.pType
+    }
+  },
+
+  mounted() {
+    this.$bus.$on('popup-open', this.validateContent)
+    this.$bus.$on('popup-close', this.$close)
+  },
+  beforeUnmount() {
+    this.$bus.$off('popup-open', this.validateContent)
+    this.$bus.$off('popup-close', this.$close)
+  },
+  methods: {
+    ...mapActions(useAppStore, ['updateEndPopUp']),
+    /**
+     * @description - Validate the data for the component
+     * @param {Object} data
+     */
+    validateContent(data) {
+      if (!data) return
+      const typeList = ['popup-custom', 'popup-endActivity', 'popup-info']
+
+      if (this.errors.length > 0) this.errors = []
+
+      if (data.type) {
+        // validate the type value of popup
+        const validType = typeList.includes(data.type)
+
+        if (!validType) this.errors.push('Invalid value for type')
+      } else this.errors.push('Missing argument: type')
+
+      // validate value of the popup according to popup type
+      // Content must be String|Object
+      if (data.value) {
+        let validObject = false
+        if (
+          data.value.constructor === Object &&
+          Object.keys(data.value).length > 0
+        )
+          validObject = true
+
+        if (validObject) {
+          let KeywordsList
+          //Validate the content accordint to popup type
+          switch (true) {
+            case data.type === 'popup-endActivity':
+              KeywordsList = ['template', 'title'] // accepted keywords in value declaration for pop-up end-Activity
+              break
+
+            case data.type === 'popup-custom':
+              KeywordsList = ['$bvArgs', 'template'] // accepted keywords in value declaration for pop-up custom
+              //Must have required keywords
+              for (const key of KeywordsList) {
+                if (data.value[key]) continue
+                this.errors.push(
+                  `Missing required attribute 👉${key}👈. Required attributes are ${[...KeywordsList]}`
+                )
+              }
+
+              break
+            default:
+              KeywordsList = [
+                'title',
+                'text_',
+                'image_',
+                'video_',
+                'audio_',
+                'link_',
+                'hypertext_',
+                '$bvArgs'
+              ] // accepted keyword in value declaration for pop-up custom
+          }
+          //validate each key in value content
+
+          for (let key of Object.keys(data.value)) {
+            let expectedKey = key
+            // search if key match lists
+            if (key.includes('_') && !key.includes('cb_$'))
+              expectedKey = `${key.split('_')[0]}_`
+
+            //===============================================
+            const test = (regexp) => regexp.test(expectedKey) //defining the testing function
+
+            switch (true) {
+              case ![...KeywordsList].includes(expectedKey):
+                this.errors.push(
+                  `Invalid attribute declaration 👉${key}👈 . Expected attributes are ${[...KeywordsList]}`
+                )
+                break
+
+              case test(/link/):
+                // Validating content of link element
+                if (!data.value[key].ref) {
+                  this.errors.push('Missing ref for link')
+                }
+                break
+
+              case test(/image/):
+                // Validating content of link element
+                if (!data.value[key].path) {
+                  this.errors.push('Missing path for image')
+                }
+                break
+
+              case test(/cb_\$/):
+                // validating content of cb_$ keys to be a function
+                if (data.value[key].constructor != Function)
+                  this.errors.push(
+                    `Invalid assignment for attribute 👉${expectedKey} popup. Must be a Function`
+                  )
+                break
+
+              case test(/\$bvArgs/):
+                // validating content of cb_$ keys to be a function
+
+                if (data.value[key].constructor != Object)
+                  this.errors.push(
+                    `Invalid assignment for attribute 👉${expectedKey} popup. Must be an Object`
+                  )
+
+                break
+
+              default: {
+                if (data.value[key].constructor != String) {
+                  this.errors.push(
+                    `Invalid assignment for attribute 👉${key} in popup. Must be a String`
+                  )
+                }
+              }
+            }
+          }
+        } else this.errors.push('Invalid object declaration for value')
+      } else this.errors.push('Missing argument - value')
+
+      if (import.meta.env.DEV) {
+        for (const err of this.errors)
+          console.warn(
+            `%c WARNING!>>> POP-UP: ${err} `,
+            'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+          )
+      }
+
+      if (!this.errors.length) {
+        if (data.type === 'popup-endActivity') {
+          const { title, ...filtered } = data.value
+          this.pContent = filtered
+          this.pTitle = title
+        } else {
+          const { title, $bvArgs, ...filtered } = data.value
+          this.pContent = filtered
+          this.pTitle = title
+          this.pArgs = $bvArgs // native VDialog props
+        }
+        this.pType = data.type
+        this.pName = data.name
+
+        if (this.pType == 'popup-endActivity')
+          this.updateEndPopUp(true) //This will handle the activation of the element in the portal
+        else this.updateEndPopUp(false) //This will handle the activation of the element in the portal
+        if (this.getWidgetOpen) {
+          this.$bus.$emit('close-widget')
+        }
+        this.$open()
+      }
+    },
+
+    /**
+     * @description - method to open the popup
+     * @param {Function} cb
+     */
+    $open(cb) {
+      this.dialogue = true
+    },
+    /**
+     * @description - method to close the popup
+     * @param {Function} cb
+     */
+    $close(options, cb) {
+      if (this.pType === 'popup-endActivity') this.updateEndPopUp(false)
+      this.dialogue = false
+    }
+  }
+}
+</script>
+<style lang="scss">
+.v-overlay__scrim {
+  background: none !important;
+}
+
+.popup-info {
+  .v-overlay__content {
+    width: 565px !important;
+    padding: 16px 24px 24px 24px;
+    overflow: hidden;
+
+    .pop-outside {
+      .pop-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        width: 100%;
+
+        #close-pop {
+          margin-right: 2px;
+          margin-top: 2px;
+        }
+      }
+    }
+  }
+}
+
+.popup-endActivity {
+  .v-overlay__content {
+    max-height: 277px !important;
+    margin: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+
+    .pop-outside {
+      display: flex;
+      flex-direction: column;
+      padding: 24px;
+
+      .pop-header {
+        display: flex;
+        justify-content: flex-end;
+      }
+      .pop-containt {
+        display: flex;
+        justify-content: center;
+        position: relative;
+        bottom: 8px;
+
+        #popHeader {
+          display: flex;
+          justify-content: center;
+          margin-bottom: 24px;
+        }
+
+        .popup-bottom-buttons {
+          display: flex;
+          justify-content: center;
+
+          .btn {
+            &:first-child {
+              margin-right: 24px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.popup-custom {
+  .v-overlay__content {
+    margin: 0 !important;
+    width: 100% !important;
+  }
+}
+</style>