vue-intergrall-plugins 0.0.300 → 0.0.500

package/src/lib-components/Templates/TemplateGenerator.vue

@@ -1,577 +1,577 @@
-<template>
-  <div class="tg-container" v-if="templates && identifier">
-    <div class="tg-options" :class="{'column' : columnSelect}">
-      <h4> Template: </h4>
-      <v-select
-        class="tg-select"
-        appendToBody
-        :calculatePosition="calculateSelectPosition"
-        :options="templateOptions"
-        :value="codTemplate"
-        :reduce="template => template.cod"
-        :clearable="false"
-        @input="setTemplate"
-        :getOptionLabel="template => template.label"
-        ref="template-v-select"
-        >
-        <div slot="no-options" v-text="dictionary.msg_sem_resultados"></div>
-      </v-select>
-    </div>
-    <template v-if="selectedTemplate">
-      <div class="tg-component" v-if="selectedTemplate.components">
-        <TemplateSingle 
-          :key="codTemplate"
-          :template="selectedTemplate" 
-          @set-vars="setFinalMessage" 
-          @set-file-var="setFileVar"
-          :hasButton="hasButton" 
-          :iconButton="iconButton" 
-          @click-trigger="$emit('click-trigger')" 
-          :identifier="identifier" 
-          :allVariables="allVariables"
-          :dictionary="dictionary" 
-          :hasSecondaryButton="hasSecondaryButton"
-          @dispatch-clients-with-bot="$emit('dispatch-clients-with-bot')"
-        />
-      </div>
-      <div class="tg-component" v-else>
-        <TemplateMessage  @final-message="setMessage" :hasButton="hasButton" :iconButton="iconButton" @click-trigger="$emit('click-trigger', true)" :dictionary="dictionary" />
-      </div>
-    </template> 
-  </div> 
-</template>
-
-<script>
-  import { createPopper } from "@popperjs/core"
-  import TemplateSingle from "./TemplateSingle"
-  import TemplateMessage from "./TemplateMessage"
-
-  export default {
-    components: { TemplateSingle, TemplateMessage },
-     props: {
-      templates: {
-        type: Object,
-        required: true
-      },
-      hasSecondaryButton: {
-        type: Boolean,
-        required: false,
-        default: false
-      },
-      hasButton: {
-        type: Boolean,
-        required: false,
-        default: true
-      },
-      columnSelect: {
-        type: Boolean,
-        required: false
-      },
-      resizeParentOnSelect: {
-        type: Boolean,
-        required: false
-      },
-      allVariables: {
-        type: Boolean,
-        required: false,
-        default: true
-      },
-      iconButton: {
-        type: Boolean,
-        required: false
-      },
-      identifier: {
-        type: String,
-        required: true
-      },
-      placement: {
-        type: String,
-        default: "bottom"
-      },
-      dictionary: {
-        type: Object,
-        required: true
-      },
-      selectInitial: {
-        type: Boolean,
-        required: false,
-        default: true
-      }
-    },
-    data() {
-      return {
-        templateOptions: [],
-        codTemplate: {},
-        selectedTemplate: null,
-        hasFile: false
-      }
-    },
-    mounted() {
-      this.setTemplateOptions()
-      if(this.selectInitial) this.selectIfIsUnique()
-      this.selectIfHasContact24h()
-    },
-    methods: {
-      concatTemplateMessage(template) {
-        let fullText = "";
-        for (let key in template) {
-          if (key === "components" && Array.isArray(template[key])) {
-            template[key].map((component) => {
-              if(component && component.parameters && component.parameters.length) {
-                component.parameters.map((param) => {
-                  fullText += param.text;
-                });
-              }
-            });
-          }
-        }
-
-        fullText = fullText.replace(/{{var_\d}}/g, " ------- ")
-        fullText = fullText.replace(`&nbsp;`, " ")
-        fullText = fullText.replace(/<\/?[\d\w\s=\-:./'";]+>/gi, " ")
-
-        return fullText;
-      },
-      calculateSelectPosition(dropdownList, component, sizes) {
-        dropdownList.style.width = sizes.width
-        const popper = createPopper(component.$refs.toggle, dropdownList, {
-          placement: this.placement,
-          modifiers: [
-            {
-              name: 'toggleClass',
-              enabled: true,
-              phase: 'write',
-              fn({state}) { component.$el.classList.toggle('drop-up', state.placement === 'top') }
-            }
-          ]
-        })
-        return () => popper.destroy()
-      },
-      setTemplateOptions() {
-        for(let key in this.templates) {
-          if(this.templates[key]) this.templateOptions.push({ cod: key, label: `${this.concatTemplateMessage(this.templates[key])} (${this.templates[key].title})` })
-        }
-      },
-      setTemplate(key) {
-        if(key) {
-          this.selectedTemplate = this.templates[key]
-          this.codTemplate = key
-          this.$emit('selected-template', key)
-          this.$nextTick(() => {
-            if(this.$root.$refs[`template-single-${this.identifier}`]) this.$root.$refs[`template-single-${this.identifier}`].handleInitialFocus()
-          })
-        }else{
-          this.selectedTemplate = null
-        }
-        // if(this.hasFile) this.setFileVar(false)
-        this.adjustOnSelect()
-      },
-      focusSelect() {
-        if(this.$refs["template-v-select"] && this.$refs["template-v-select"].$el) this.$refs["template-v-select"].$el.querySelector("input").focus()
-      },
-      selectIfIsUnique() {
-        if(Object.keys(this.templates).length === 1) {
-          for(let key in this.templates) {
-            this.codTemplate = this.templateOptions[0]
-            this.selectedTemplate = this.templates[key]
-            this.$emit('selected-template', this.codTemplate)
-            this.adjustOnSelect()
-          }
-        }
-        if(!this.codTemplate) this.focusSelect()
-      },
-      selectIfHasContact24h() {
-        if(this.templates['envio_msg']) {
-          this.codTemplate = 'envio_msg';
-          this.selectedTemplate = this.templates['envio_msg'];
-          this.$emit('selected-template', 'envio_msg');
-          this.adjustOnSelect()
-        }
-      },
-      adjustOnSelect() {
-        if(this.resizeParentOnSelect) this.$emit("resize-parent")
-      },
-      setFinalMessage(vars) {
-        const keys   = Object.keys(vars),
-              values = Object.values(vars)
-        this.selectedTemplate['parameters'] = {}
-        for(let index in this.selectedTemplate) {
-          if(index === "components" && Array.isArray(this.selectedTemplate[index])) {
-            const arrComponents = this.selectedTemplate[index]
-            if(arrComponents && arrComponents.length) {
-              arrComponents.map(component => {
-                if(component && component.parameters && component.parameters.length) {
-                  component.parameters.map(message => {
-                    message.currentText = message.text
-                    let keyIndex = 0
-                    while(keyIndex < keys.length) {
-                      const varName = `{{${keys[keyIndex]}}}`
-                      if(message.text.indexOf(varName) != -1) {
-                        /**Gerando os obejetos de parametros da notificacao para o component */
-                        if(component.type === "header" && !this.selectedTemplate['parameters'][component.type]) {
-                          this.selectedTemplate['parameters'][component.type] = {}
-                          //Header so pode ter uma vari?vel
-                          this.selectedTemplate['parameters'][component.type] = {
-                            tipo: "text",
-                            text: values[keyIndex]
-                          }
-                        } else if(!this.selectedTemplate['parameters'][component.type]) {
-                          this.selectedTemplate['parameters'][component.type] = new Array()
-                        }
-                        //Aplicando valores das v?riaveis dentro dos outros componentes com execess?o do header
-                        if(this.selectedTemplate['parameters'][component.type] && component.type !== 'header') {
-                          this.selectedTemplate['parameters'][component.type].push(values[keyIndex])
-                        }
-                        message.currentText = message.currentText.replace(varName, values[keyIndex])
-                      }
-                      keyIndex++
-                    }
-                  })
-                }else if(component.type == 'header' && component.parameters.seq) {
-                  if(this.hasFile) {
-                    if(!this.selectedTemplate['parameters'][component.type]) this.selectedTemplate['parameters'][component.type] = new Array()
-                    this.selectedTemplate['parameters'][component.type].push({ tipo: 'image', template: component.parameters.seq, link: '' })
-                  }else {
-                    delete this.selectedTemplate['parameters'][component.type]
-                  }
-                }
-              })
-            }
-          }
-        }
-        this.$emit("template-data", this.selectedTemplate)
-      },
-      setFileVar(file) {
-        this.hasFile = file ? true : false
-        this.$emit("set-file-var", file)
-        if(file) this.$emit("template-data", this.selectedTemplate)
-      },
-      setMessage(message) {
-        this.$emit("static-message", message)
-      }
-    }
-  }
-</script>
-
-<style>
-* { box-sizing: border-box; }
-.toasted svg { margin-right: 10px }
-.d-none { display: none }
-ul { list-style-type: none }
-h1, h2, h3, h4, p { margin: 0; padding: 0 }
-
-.tg-container {
-  width: 100%;
-  max-width: 800px;
-  display: flex;
-  flex-direction: column;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.tg-options {
-  width: 100%;
-  display: flex;
-}
-.tg-options.column {
-  flex-direction: column;
-}
-.tg-options h4 {
-  margin-right: 5px;
-}
-
-.ts-image-type {
-  display: flex;
-  align-items: center;
-}
-
-.ts-image-type img {
-  cursor: pointer;
-}
-
-.ts-image-type svg {
-  font-size: 25px;
-  cursor: pointer;
-}
-
-.ts-image-type .select-image {
-  color: #838383;
-}
-
-.color-red {
-  color: #E74C3C;
-}
-
-.color-blue {
-  color: #007BFF;
-}
-
-.color-black {
-  color: #333
-}
-
-.color-purple {
-  color: #a312a3
-}
-
-.custom-tooltip-image {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: visible;
-  padding: 5px;
-}
-
-.custom-tooltip-image img {
-  max-width: 75px;
-  max-height: 75px;
-}
-
-.ts-button {
-  background-color: #FFF;
-  border-radius: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 3px 15px;
-  transition: background-color 150ms ease-in-out;
-}
-
-.ts-button:hover {
-  background-color: rgb(253, 253, 253);
-}
-
-.tg-select {
-  flex: 1;
-  height: 34px;
-  overflow: hidden;
-}
-.tg-select .vs__dropdown-toggle {
-  background-color: #FFF;
-  height: 34px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-}
-.tg-select .vs__selected-options {
-  height: 34px;
-  overflow: hidden;
-}
-.tg-select .vs__selected-options > span {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  flex: 1;
-}
-
-.vs__dropdown-option.vs__dropdown-option--selected {
-  background-color: rgb(26, 95, 173)!important;
-  color: white;
-}
-
-.vs__dropdown-menu li {
-  padding: 10px 15px;
-}
-
-.vs__dropdown-option {
-  transition: background-color 150ms;
-  white-space: normal;
-}
-.vs__dropdown-option:nth-child(odd) {
-  background-color: #F1F1F1;
-}
-.vs__dropdown-option:hover, .vs__dropdown-option:focus, .vs__dropdown-option:active, .vs__dropdown-option:focus, .vs__dropdown-option--selected, .vs__dropdown-option--highlight {
-  background-color: #5897fb!important;
-  color: #FFF;
-}
-
-.tg-component {
-  width: 100%;
-}
-
-.ts-container {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.ts-content {
-  --border-color: #CCC;
-  --background-color: #DFF0D8;
-  --input-background-color: #FFF;
-  --input-border-default: #007BFF;
-  --input-border-error: #E74C3C;
-  --placeholder-color: #BBB;
-  --border-radius: 5px;
-
-  flex: 2;
-  font-size: .7rem;
-  padding: 10px 0;
-  display: flex;
-  flex-direction: column;
-}
-.order-1 {
-  order: 1
-}
-.custom-box-shadow-bottom {
-  box-shadow: 0px 3px 4px -3px rgba(0, 0, 0, .3);
-}
-.custom-border-gray {
-  border: 1px solid var(--border-color)!important;
-}
-.ts-content header, .ts-content section, .ts-content footer {
-  padding: 3px 5px;
-  background-color: var(--background-color);
-}
-.ts-content header, .ts-content section {
-  border-right: 1px solid var(--border-color);
-  border-left: 1px solid var(--border-color);
-}
-.ts-content header {
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-  border-top: 1px solid var(--border-color);
-}
-.ts-content header { font-weight: 550 }
-.ts-content section {
-  line-height: 25px;
-}
-.ts-content section.margin-bottom {
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom: 1px solid var(--border-color);
-}
-.ts-content footer, .custom-footer-style {
-  border: 1px solid var(--border-color);
-  border-top: unset;
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-.ts-content input {
-  border: 1px solid transparent;
-  outline: 0;
-  font-size: .8rem;
-  padding: 2.5px 5px;
-  background-color: var(--input-background-color); 
-}
-.ts-content input::placeholder {
-  color: var(--placeholder-color); 
-}
-.ts-content input.active, .ts-content input:focus{
-  border: 1px solid var(--input-border-default); 
-}
-.ts-content input.invalid {
-  border: 1px solid var(--input-border-error)!important; 
-}
-.ts-content__var {
-  display: inline-block;
-  position: relative;
-}
-
-.ts-dropdown {
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  top: 19px;
-  left: 0;
-  background: #eee;
-  width: 100%;
-  z-index: 1;
-  transition: all 150ms;
-  visibility: hidden;
-  opacity: 0;
-  list-style-type: none;
-  border: 1px solid #444;
-  border-top: unset;
-}
-.ts-dropdown li {
-  width: 100%;
-  opacity: .9;
-  cursor: pointer;
-  font-weight: 550;
-  padding: 2px 3px;
-  font-size: .8rem;
-  transition: background-color 150ms;
-}
-.ts-dropdown li:hover, .ts-dropdown li:focus-within, .ts-dropdown li:focus {
-  opacity: 1;
-  background-color: #555;
-  color: #FFF;
-}
-.ts-dropdown.visible {
-  visibility: visible;
-  opacity: 1; 
-}
-.tg-btn {
-  width: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.tg-btn button {
-  border: unset;
-  display: block;
-  min-width: 180px;
-  height: 35px;
-  padding: 0 10px;
-  font-weight: 500;
-  background-color: #007bff;
-  color: #FFF;
-  transition: transform 300ms ease-in-out;
-  user-select: none;
-  cursor: pointer;
-  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
-  opacity: 0.9;
-  border-radius: 2.5px;
-}
-.tg-btn button > svg{
-  margin-right: 5px;
-  color: #003166
-}
-.tg-btn button:hover {
-  opacity: 1; 
-}
-.tg-btn button:active {
-  opacity: 1;
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
-  -webkit-transform: translateY(1px);
-  -moz-transform: translateY(1px);
-  -o-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px);
-}
-.tg-btn button:active {
-  opacity: 1;
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
-  -webkit-transform: translateY(1px);
-  -moz-transform: translateY(1px);
-  -o-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px); 
-}
-.tg-btn button:focus, .tg-btn button:active {
-  outline: 2px solid black; 
-}
-.tg-btn.small-btn {
-  width: auto;
-  margin: 0 5px;
-}
-.tg-btn.small-btn svg {
-  margin-right: 0;
-}
-.tg-btn.small-btn button {
-  min-width: 35px;
-  width: 35px;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.tm-container {
-  border: 1px solid var(--border-color);
-  border-radius: 5px;
-  display: flex;
-}
-
+<template>
+  <div class="tg-container" v-if="templates && identifier">
+    <div class="tg-options" :class="{'column' : columnSelect}">
+      <h4> Template: </h4>
+      <v-select
+        class="tg-select"
+        appendToBody
+        :calculatePosition="calculateSelectPosition"
+        :options="templateOptions"
+        :value="codTemplate"
+        :reduce="template => template.cod"
+        :clearable="false"
+        @input="setTemplate"
+        :getOptionLabel="template => template.label"
+        ref="template-v-select"
+        >
+        <div slot="no-options" v-text="dictionary.msg_sem_resultados"></div>
+      </v-select>
+    </div>
+    <template v-if="selectedTemplate">
+      <div class="tg-component" v-if="selectedTemplate.components">
+        <TemplateSingle 
+          :key="codTemplate"
+          :template="selectedTemplate" 
+          @set-vars="setFinalMessage" 
+          @set-file-var="setFileVar"
+          :hasButton="hasButton" 
+          :iconButton="iconButton" 
+          @click-trigger="$emit('click-trigger')" 
+          :identifier="identifier" 
+          :allVariables="allVariables"
+          :dictionary="dictionary" 
+          :hasSecondaryButton="hasSecondaryButton"
+          @dispatch-clients-with-bot="$emit('dispatch-clients-with-bot')"
+        />
+      </div>
+      <div class="tg-component" v-else>
+        <TemplateMessage  @final-message="setMessage" :hasButton="hasButton" :iconButton="iconButton" @click-trigger="$emit('click-trigger', true)" :dictionary="dictionary" />
+      </div>
+    </template> 
+  </div> 
+</template>
+
+<script>
+  import { createPopper } from "@popperjs/core"
+  import TemplateSingle from "./TemplateSingle"
+  import TemplateMessage from "./TemplateMessage"
+
+  export default {
+    components: { TemplateSingle, TemplateMessage },
+     props: {
+      templates: {
+        type: Object,
+        required: true
+      },
+      hasSecondaryButton: {
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      hasButton: {
+        type: Boolean,
+        required: false,
+        default: true
+      },
+      columnSelect: {
+        type: Boolean,
+        required: false
+      },
+      resizeParentOnSelect: {
+        type: Boolean,
+        required: false
+      },
+      allVariables: {
+        type: Boolean,
+        required: false,
+        default: true
+      },
+      iconButton: {
+        type: Boolean,
+        required: false
+      },
+      identifier: {
+        type: String,
+        required: true
+      },
+      placement: {
+        type: String,
+        default: "bottom"
+      },
+      dictionary: {
+        type: Object,
+        required: true
+      },
+      selectInitial: {
+        type: Boolean,
+        required: false,
+        default: true
+      }
+    },
+    data() {
+      return {
+        templateOptions: [],
+        codTemplate: {},
+        selectedTemplate: null,
+        hasFile: false
+      }
+    },
+    mounted() {
+      this.setTemplateOptions()
+      if(this.selectInitial) this.selectIfIsUnique()
+      this.selectIfHasContact24h()
+    },
+    methods: {
+      concatTemplateMessage(template) {
+        let fullText = "";
+        for (let key in template) {
+          if (key === "components" && Array.isArray(template[key])) {
+            template[key].map((component) => {
+              if(component && component.parameters && component.parameters.length) {
+                component.parameters.map((param) => {
+                  fullText += param.text;
+                });
+              }
+            });
+          }
+        }
+
+        fullText = fullText.replace(/{{var_\d}}/g, " ------- ")
+        fullText = fullText.replace(`&nbsp;`, " ")
+        fullText = fullText.replace(/<\/?[\d\w\s=\-:./'";]+>/gi, " ")
+
+        return fullText;
+      },
+      calculateSelectPosition(dropdownList, component, sizes) {
+        dropdownList.style.width = sizes.width
+        const popper = createPopper(component.$refs.toggle, dropdownList, {
+          placement: this.placement,
+          modifiers: [
+            {
+              name: 'toggleClass',
+              enabled: true,
+              phase: 'write',
+              fn({state}) { component.$el.classList.toggle('drop-up', state.placement === 'top') }
+            }
+          ]
+        })
+        return () => popper.destroy()
+      },
+      setTemplateOptions() {
+        for(let key in this.templates) {
+          if(this.templates[key]) this.templateOptions.push({ cod: key, label: `${this.concatTemplateMessage(this.templates[key])} (${this.templates[key].title})` })
+        }
+      },
+      setTemplate(key) {
+        if(key) {
+          this.selectedTemplate = this.templates[key]
+          this.codTemplate = key
+          this.$emit('selected-template', key)
+          this.$nextTick(() => {
+            if(this.$root.$refs[`template-single-${this.identifier}`]) this.$root.$refs[`template-single-${this.identifier}`].handleInitialFocus()
+          })
+        }else{
+          this.selectedTemplate = null
+        }
+        // if(this.hasFile) this.setFileVar(false)
+        this.adjustOnSelect()
+      },
+      focusSelect() {
+        if(this.$refs["template-v-select"] && this.$refs["template-v-select"].$el) this.$refs["template-v-select"].$el.querySelector("input").focus()
+      },
+      selectIfIsUnique() {
+        if(Object.keys(this.templates).length === 1) {
+          for(let key in this.templates) {
+            this.codTemplate = this.templateOptions[0]
+            this.selectedTemplate = this.templates[key]
+            this.$emit('selected-template', this.codTemplate)
+            this.adjustOnSelect()
+          }
+        }
+        if(!this.codTemplate) this.focusSelect()
+      },
+      selectIfHasContact24h() {
+        if(this.templates['envio_msg']) {
+          this.codTemplate = 'envio_msg';
+          this.selectedTemplate = this.templates['envio_msg'];
+          this.$emit('selected-template', 'envio_msg');
+          this.adjustOnSelect()
+        }
+      },
+      adjustOnSelect() {
+        if(this.resizeParentOnSelect) this.$emit("resize-parent")
+      },
+      setFinalMessage(vars) {
+        const keys   = Object.keys(vars),
+              values = Object.values(vars)
+        this.selectedTemplate['parameters'] = {}
+        for(let index in this.selectedTemplate) {
+          if(index === "components" && Array.isArray(this.selectedTemplate[index])) {
+            const arrComponents = this.selectedTemplate[index]
+            if(arrComponents && arrComponents.length) {
+              arrComponents.map(component => {
+                if(component && component.parameters && component.parameters.length) {
+                  component.parameters.map(message => {
+                    message.currentText = message.text
+                    let keyIndex = 0
+                    while(keyIndex < keys.length) {
+                      const varName = `{{${keys[keyIndex]}}}`
+                      if(message.text.indexOf(varName) != -1) {
+                        /**Gerando os obejetos de parametros da notificacao para o component */
+                        if(component.type === "header" && !this.selectedTemplate['parameters'][component.type]) {
+                          this.selectedTemplate['parameters'][component.type] = {}
+                          //Header so pode ter uma vari?vel
+                          this.selectedTemplate['parameters'][component.type] = {
+                            tipo: "text",
+                            text: values[keyIndex]
+                          }
+                        } else if(!this.selectedTemplate['parameters'][component.type]) {
+                          this.selectedTemplate['parameters'][component.type] = new Array()
+                        }
+                        //Aplicando valores das v?riaveis dentro dos outros componentes com execess?o do header
+                        if(this.selectedTemplate['parameters'][component.type] && component.type !== 'header') {
+                          this.selectedTemplate['parameters'][component.type].push(values[keyIndex])
+                        }
+                        message.currentText = message.currentText.replace(varName, values[keyIndex])
+                      }
+                      keyIndex++
+                    }
+                  })
+                }else if(component.type == 'header' && component.parameters.seq) {
+                  if(this.hasFile) {
+                    if(!this.selectedTemplate['parameters'][component.type]) this.selectedTemplate['parameters'][component.type] = new Array()
+                    this.selectedTemplate['parameters'][component.type].push({ tipo: 'image', template: component.parameters.seq, link: '' })
+                  }else {
+                    delete this.selectedTemplate['parameters'][component.type]
+                  }
+                }
+              })
+            }
+          }
+        }
+        this.$emit("template-data", this.selectedTemplate)
+      },
+      setFileVar(file) {
+        this.hasFile = file ? true : false
+        this.$emit("set-file-var", file)
+        if(file) this.$emit("template-data", this.selectedTemplate)
+      },
+      setMessage(message) {
+        this.$emit("static-message", message)
+      }
+    }
+  }
+</script>
+
+<style>
+* { box-sizing: border-box; }
+.toasted svg { margin-right: 10px }
+.d-none { display: none }
+ul { list-style-type: none }
+h1, h2, h3, h4, p { margin: 0; padding: 0 }
+
+.tg-container {
+  width: 100%;
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.tg-options {
+  width: 100%;
+  display: flex;
+}
+.tg-options.column {
+  flex-direction: column;
+}
+.tg-options h4 {
+  margin-right: 5px;
+}
+
+.ts-image-type {
+  display: flex;
+  align-items: center;
+}
+
+.ts-image-type img {
+  cursor: pointer;
+}
+
+.ts-image-type svg {
+  font-size: 25px;
+  cursor: pointer;
+}
+
+.ts-image-type .select-image {
+  color: #838383;
+}
+
+.color-red {
+  color: #E74C3C;
+}
+
+.color-blue {
+  color: #007BFF;
+}
+
+.color-black {
+  color: #333
+}
+
+.color-purple {
+  color: #a312a3
+}
+
+.custom-tooltip-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: visible;
+  padding: 5px;
+}
+
+.custom-tooltip-image img {
+  max-width: 75px;
+  max-height: 75px;
+}
+
+.ts-button {
+  background-color: #FFF;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3px 15px;
+  transition: background-color 150ms ease-in-out;
+}
+
+.ts-button:hover {
+  background-color: rgb(253, 253, 253);
+}
+
+.tg-select {
+  flex: 1;
+  height: 34px;
+  overflow: hidden;
+}
+.tg-select .vs__dropdown-toggle {
+  background-color: #FFF;
+  height: 34px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.tg-select .vs__selected-options {
+  height: 34px;
+  overflow: hidden;
+}
+.tg-select .vs__selected-options > span {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.vs__dropdown-option.vs__dropdown-option--selected {
+  background-color: rgb(26, 95, 173)!important;
+  color: white;
+}
+
+.vs__dropdown-menu li {
+  padding: 10px 15px;
+}
+
+.vs__dropdown-option {
+  transition: background-color 150ms;
+  white-space: normal;
+}
+.vs__dropdown-option:nth-child(odd) {
+  background-color: #F1F1F1;
+}
+.vs__dropdown-option:hover, .vs__dropdown-option:focus, .vs__dropdown-option:active, .vs__dropdown-option:focus, .vs__dropdown-option--selected, .vs__dropdown-option--highlight {
+  background-color: #5897fb!important;
+  color: #FFF;
+}
+
+.tg-component {
+  width: 100%;
+}
+
+.ts-container {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.ts-content {
+  --border-color: #CCC;
+  --background-color: #DFF0D8;
+  --input-background-color: #FFF;
+  --input-border-default: #007BFF;
+  --input-border-error: #E74C3C;
+  --placeholder-color: #BBB;
+  --border-radius: 5px;
+
+  flex: 2;
+  font-size: .7rem;
+  padding: 10px 0;
+  display: flex;
+  flex-direction: column;
+}
+.order-1 {
+  order: 1
+}
+.custom-box-shadow-bottom {
+  box-shadow: 0px 3px 4px -3px rgba(0, 0, 0, .3);
+}
+.custom-border-gray {
+  border: 1px solid var(--border-color)!important;
+}
+.ts-content header, .ts-content section, .ts-content footer {
+  padding: 3px 5px;
+  background-color: var(--background-color);
+}
+.ts-content header, .ts-content section {
+  border-right: 1px solid var(--border-color);
+  border-left: 1px solid var(--border-color);
+}
+.ts-content header {
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  border-top: 1px solid var(--border-color);
+}
+.ts-content header { font-weight: 550 }
+.ts-content section {
+  line-height: 25px;
+}
+.ts-content section.margin-bottom {
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom: 1px solid var(--border-color);
+}
+.ts-content footer, .custom-footer-style {
+  border: 1px solid var(--border-color);
+  border-top: unset;
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+.ts-content input {
+  border: 1px solid transparent;
+  outline: 0;
+  font-size: .8rem;
+  padding: 2.5px 5px;
+  background-color: var(--input-background-color); 
+}
+.ts-content input::placeholder {
+  color: var(--placeholder-color); 
+}
+.ts-content input.active, .ts-content input:focus{
+  border: 1px solid var(--input-border-default); 
+}
+.ts-content input.invalid {
+  border: 1px solid var(--input-border-error)!important; 
+}
+.ts-content__var {
+  display: inline-block;
+  position: relative;
+}
+
+.ts-dropdown {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 19px;
+  left: 0;
+  background: #eee;
+  width: 100%;
+  z-index: 1;
+  transition: all 150ms;
+  visibility: hidden;
+  opacity: 0;
+  list-style-type: none;
+  border: 1px solid #444;
+  border-top: unset;
+}
+.ts-dropdown li {
+  width: 100%;
+  opacity: .9;
+  cursor: pointer;
+  font-weight: 550;
+  padding: 2px 3px;
+  font-size: .8rem;
+  transition: background-color 150ms;
+}
+.ts-dropdown li:hover, .ts-dropdown li:focus-within, .ts-dropdown li:focus {
+  opacity: 1;
+  background-color: #555;
+  color: #FFF;
+}
+.ts-dropdown.visible {
+  visibility: visible;
+  opacity: 1; 
+}
+.tg-btn {
+  width: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tg-btn button {
+  border: unset;
+  display: block;
+  min-width: 180px;
+  height: 35px;
+  padding: 0 10px;
+  font-weight: 500;
+  background-color: #007bff;
+  color: #FFF;
+  transition: transform 300ms ease-in-out;
+  user-select: none;
+  cursor: pointer;
+  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
+  opacity: 0.9;
+  border-radius: 2.5px;
+}
+.tg-btn button > svg{
+  margin-right: 5px;
+  color: #003166
+}
+.tg-btn button:hover {
+  opacity: 1; 
+}
+.tg-btn button:active {
+  opacity: 1;
+  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
+  -webkit-transform: translateY(1px);
+  -moz-transform: translateY(1px);
+  -o-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px);
+}
+.tg-btn button:active {
+  opacity: 1;
+  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
+  -webkit-transform: translateY(1px);
+  -moz-transform: translateY(1px);
+  -o-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px); 
+}
+.tg-btn button:focus, .tg-btn button:active {
+  outline: 2px solid black; 
+}
+.tg-btn.small-btn {
+  width: auto;
+  margin: 0 5px;
+}
+.tg-btn.small-btn svg {
+  margin-right: 0;
+}
+.tg-btn.small-btn button {
+  min-width: 35px;
+  width: 35px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tm-container {
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  display: flex;
+}
+
 </style>