vue-intergrall-plugins 1.1.89 → 1.2.0

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

@@ -1,640 +1,640 @@
-<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();
-
-                  let tipo = 'image'
-                  try {
-                    this.selectedTemplate['components'].forEach((component) => {
-                      if (component.type === 'header') {
-                        tipo = component.parameters['0'].type || 'image'
-                      }
-                    })
-                  } catch (err) {
-                    console.error('Error get tipo, err: ', err)
-                  }
-
-                  this.selectedTemplate["parameters"][component.type].push({
-                    tipo,
-                    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>
-.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: 11.2px;
-  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, 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: 12.8px;
-  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: 0.9;
-  cursor: pointer;
-  font-weight: 550;
-  padding: 2px 3px;
-  font-size: 12.8px;
-  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>
+<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();
+
+                  let tipo = 'image'
+                  try {
+                    this.selectedTemplate['components'].forEach((component) => {
+                      if (component.type === 'header') {
+                        tipo = component.parameters['0'].type || 'image'
+                      }
+                    })
+                  } catch (err) {
+                    console.error('Error get tipo, err: ', err)
+                  }
+
+                  this.selectedTemplate["parameters"][component.type].push({
+                    tipo,
+                    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>
+.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: 11.2px;
+  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, 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: 12.8px;
+  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: 0.9;
+  cursor: pointer;
+  font-weight: 550;
+  padding: 2px 3px;
+  font-size: 12.8px;
+  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>