vue-intergrall-plugins 0.0.264 → 0.0.266

package/dist/vue-intergrall-plugins.ssr.js

@@ -1868,6 +1868,46 @@ var createPopper = /*#__PURE__*/popperGenerator({
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 var script$y = {
   data: function data() {
     return {
@@ -1875,7 +1915,9 @@ var script$y = {
       regexVars: /{{var_\d}}/g,
       lastVar: 0,
       htmlInputString: "<input type='text' class='input-var input-var-".concat(this.identifier, "' autocomplete='off' />"),
-      varListValues: ""
+      varListValues: "",
+      acceptedExtensions: "audio/aac, audio/mp4, audio/mpeg, audio/amr, audio/ogg, text/plain, application/pdf, application/vnd.ms-powerpoint, application/msword, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.spreasheetml.sheet, image/jpeg, image/png, video/mp4, video/3gp, image/webp",
+      headerFiles: []
     };
   },
   props: {
@@ -1907,12 +1949,35 @@ var script$y = {
       required: true
     }
   },
+  computed: {
+    hasFooterComponent: function hasFooterComponent() {
+      if (!this.template.components || !this.template.components.length) return false;
+      var types = [];
+      this.template.components.forEach(function (_ref) {
+        var type = _ref.type;
+        return types.push(type);
+      });
+      if (types.includes('footer')) return true;
+      return false;
+    },
+    hasButtonOrFooterComponent: function hasButtonOrFooterComponent() {
+      if (!this.template.components || !this.template.components.length) return false;
+      var types = [];
+      this.template.components.forEach(function (_ref2) {
+        var type = _ref2.type;
+        return types.push(type);
+      });
+      if (types.includes('button')) return true;
+      return this.hasFooterComponent;
+    }
+  },
   created: function created() {
     this.$root.$refs["template-single-".concat(this.identifier)] = this;
   },
   mounted: function mounted() {
     if (this.allVariables) this.getListOpts();
     this.setInputs();
+    this.setImageVar(false);
   },
   updated: function updated() {
     this.lastVar = 0;
@@ -1941,42 +2006,163 @@ var script$y = {
           target: input
         }, input.id.replace(/[{}]+/g, ''));
       });
+      this.setImageVar(false);
     },
     getListOpts: function getListOpts() {
       this.varListValues = "<ul class=\"ts-dropdown\">\n        <li> nome </li>\n        ".concat(this.allVariables ? '<li> telefone </li>' : '', "\n      </ul>");
     },
-    setInputs: function setInputs() {
+    fileUpload: function fileUpload(event) {
       var _this2 = this;
 
+      try {
+        var allFiles = event.target.files ? event.target.files : event.dataTransfer.files ? event.dataTransfer.files : false;
+        if (!allFiles || !allFiles.length) return this.setImageVar(false);
+
+        if (allFiles.length > 1) {
+          this.$toasted.global.defaultInfo({
+            msg: "Limite de 1 arquivo por vez"
+          });
+          return this.setImageVar(false);
+        }
+
+        var file = allFiles[0];
+        var type = file.type,
+            name = file.name;
+        var validTypes = ['audio/aac', 'audio/mp4', 'audio/mpeg', 'audio/amr', 'audio/ogg', 'text/plain', 'application/pdf', 'application/vnd.ms-powerpoint', 'application/msword', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.spreasheetml.sheet', 'image/jpeg', 'image/png', 'video/mp4', 'video/3gp', 'image/webp'];
+
+        if (!validTypes.includes(type)) {
+          this.$toasted.global.defaultInfo({
+            msg: "(".concat(type, ") ").concat(this.dictionary.msg_arquivo_invalido)
+          });
+          return this.setImageVar(false);
+        }
+
+        var returnArrType = function returnArrType(str) {
+          var arr = [];
+          validTypes.forEach(function (currentType) {
+            if (currentType.indexOf(str) > -1) arr.push(currentType);
+          });
+          return arr;
+        };
+
+        var imageTypes = returnArrType('image/');
+        var docTypes = returnArrType('application/');
+        var audioTypes = returnArrType('audio/');
+        var videoTypes = returnArrType('video/');
+        var isPdf = type.indexOf('application/pdf') > -1;
+        var sizeInBytes = 0;
+        Array.from(allFiles).forEach(function (file) {
+          return sizeInBytes += file.size;
+        });
+        var sizeInMb = parseFloat((sizeInBytes / (1024 * 1024)).toFixed(2));
+
+        if (sizeInMb == 0 && sizeInBytes == 0) {
+          this.$toasted.global.defaultInfo({
+            msg: this.dictionary.msg_arquivo_invalido
+          });
+          return this.setImageVar(false);
+        }
+
+        var max = imageTypes.includes(type) ? 5 : 15;
+
+        if (sizeInMb >= max) {
+          this.$toasted.global.defaultInfo({
+            msg: "Limite de ".concat(max, " MB por arquivo")
+          });
+          return this.setImageVar(false);
+        }
+
+        var fileReader = new FileReader();
+        var current_icon = 'file-alt',
+            current_color = 'blue',
+            setValues = true;
+
+        if (imageTypes.includes(type)) {
+          setValues = false;
+          fileReader.readAsDataURL(file);
+
+          fileReader.onload = function () {
+            var image_preview = fileReader.result;
+            current_icon = 'image';
+            current_color = 'purple';
+            _this2.headerFiles[0] = {
+              file: file,
+              image_preview: image_preview,
+              current_icon: current_icon,
+              current_color: current_color,
+              name: name
+            };
+
+            _this2.$forceUpdate();
+
+            _this2.setImageVar(file);
+          };
+        } else if (docTypes.includes(type) && isPdf) {
+          current_icon = 'file-pdf';
+          current_color = 'red';
+        } else if (audioTypes.includes(type)) {
+          current_icon = 'microphone';
+          current_color = 'black';
+        } else if (videoTypes.includes(type)) {
+          current_icon = 'video', current_color = 'black';
+        }
+
+        if (setValues) {
+          this.headerFiles[0] = {
+            file: file,
+            current_icon: current_icon,
+            current_color: current_color,
+            name: name
+          };
+          this.$forceUpdate();
+          this.setImageVar(file);
+        }
+      } catch (error) {
+        console.error("Erro file upload: ", error);
+      }
+    },
+    triggerInputFile: function triggerInputFile(origin) {
+      if (this.$refs["ts-input-".concat(origin)]) {
+        var elem = this.$refs["ts-input-".concat(origin)][0] ? this.$refs["ts-input-".concat(origin)][0] : this.$refs["ts-input-".concat(origin)];
+        elem && elem.click();
+      }
+    },
+    setInputs: function setInputs() {
+      var _this3 = this;
+
       var qtdInputs = 0;
       var header = document.querySelector("#template_header");
       var body = document.querySelector("#template_body");
       var footer = document.querySelector("#template_footer");
+      var hasText = false;
 
       if (header !== null) {
         header.querySelectorAll(".input-var-".concat(this.identifier)).forEach(function (input) {
-          _this2.setEvent(input);
+          _this3.setEvent(input);
         });
         qtdInputs += header.querySelectorAll(".input-var-".concat(this.identifier)).length;
+        if (qtdInputs > 0 && header.innerText) hasText = true;
       }
 
       if (this.lastVar === 0) this.lastVar += 1;
 
       if (body !== null) {
         body.querySelectorAll(".input-var-".concat(this.identifier)).forEach(function (input) {
-          _this2.setEvent(input);
+          _this3.setEvent(input);
         });
         qtdInputs += body.querySelectorAll(".input-var-".concat(this.identifier)).length;
+        if (qtdInputs > 0 && body.innerText) hasText = true;
       }
 
       if (footer !== null) {
         footer.querySelectorAll(".input-var-".concat(this.identifier)).forEach(function (input) {
-          _this2.setEvent(input);
+          _this3.setEvent(input);
         });
         qtdInputs += footer.querySelectorAll(".input-var-".concat(this.identifier)).length;
+        if (qtdInputs > 0 && footer.innerText) hasText = true;
       }
 
-      if (qtdInputs === 1) {
+      if (qtdInputs === 1 && !hasText) {
         document.querySelector(".input-var-".concat(this.identifier)).parentElement.style.width = "100%";
         document.querySelector(".input-var-".concat(this.identifier)).style.width = "100%";
       } else if (qtdInputs === 0) {
@@ -1984,14 +2170,14 @@ var script$y = {
       }
     },
     setEvent: function setEvent(input) {
-      var _this3 = this;
+      var _this4 = this;
 
       var varList = input.nextSibling;
       var currentInstance = this;
       input.setAttribute("placeholder", "{{var_".concat(this.lastVar, "}}"));
       input.setAttribute("id", "{{var_".concat(this.lastVar, "}}"));
       input.addEventListener("input", function (event) {
-        _this3.setVar(event, "var_".concat(_this3.lastVar), true);
+        _this4.setVar(event, "var_".concat(_this4.lastVar), true);
 
         if (varList) varList.classList.remove("visible");
       });
@@ -2014,7 +2200,7 @@ var script$y = {
                 });
               }
 
-              if (!stop && _this3.$refs["template-single-button"]) _this3.$refs["template-single-button"].focus();
+              if (!stop && _this4.$refs["template-single-button"]) _this4.$refs["template-single-button"].focus();
             };
 
             for (var i = 0; i < varList.children.length; i++) {
@@ -2040,7 +2226,7 @@ var script$y = {
       });
       input.addEventListener("blur", function () {
         if (input.value) {
-          if (_this3.isValid(input.value)) {
+          if (_this4.isValid(input.value)) {
             input.classList.add("active");
           } else {
             input.classList.add("invalid");
@@ -2053,7 +2239,7 @@ var script$y = {
         if (varList) varList.classList.remove("visible");
       });
       input.addEventListener("keydown", function (event) {
-        if (event.keyCode == 13 && _this3.hasButton) _this3.$emit("click-trigger");
+        if (event.keyCode == 13 && _this4.hasButton) _this4.$emit("click-trigger");
       });
       this.lastVar += 1;
     },
@@ -2085,6 +2271,22 @@ var script$y = {
 
       return isValueValid;
     },
+    setImageVar: function setImageVar(file) {
+      var _this5 = this;
+
+      this.$emit("set-file-var", file);
+
+      if (!file) {
+        this.headerFiles = [];
+        return this.$forceUpdate();
+      } else {
+        if (this.lastVar == 0) return this.$emit("set-vars", this.template);
+        if (Object.keys(this.varValues).length) return this.$emit("set-vars", this.varValues);
+        this.$nextTick(function () {
+          return _this5.handleInitialFocus();
+        });
+      }
+    },
     setVar: function setVar(event, key, notificar) {
       if (event && event.target) {
         key = event.target.id.replace(/[{}]+/g, '');
@@ -2189,17 +2391,55 @@ var __vue_render__$y = function __vue_render__() {
 
   return _c('div', {
     staticClass: "ts-container"
-  }, [_vm._ssrNode("<div class=\"ts-content\">" + _vm._ssrList(_vm.template.components, function (component, cIndex) {
-    return "<div>" + (component.type === 'header' ? "<header id=\"template_header\">" + _vm._ssrList(component.parameters, function (param, pIndex) {
-      return "<div>" + (param.type === 'text' ? _vm.regexVars.test(param.text) ? "<div>" + _vm._s(param.text.replace(_vm.regexVars, "<div class='ts-content__var'>" + _vm.htmlInputString + _vm.varListValues + "</div>")) + "</div>" : "<p>" + _vm._s(param.text) + "</p>" : "<!---->") + "</div>";
-    }) + "</header>" : "<!---->") + " " + (component.type === 'body' ? "<section id=\"template_body\"" + _vm._ssrClass(null, {
-      'margin-bottom': _vm.template.components.length === 2
-    }) + ">" + _vm._ssrList(component.parameters, function (param, pIndex) {
+  }, [_vm._ssrNode("<div class=\"ts-content\">", "</div>", _vm._l(_vm.template.components, function (component, cIndex) {
+    return _vm._ssrNode("<div" + _vm._ssrClass(null, "" + (component.type == 'footer' ? 'order-1 custom-box-shadow-bottom' : '') + (_vm.template.components.length == 1 ? 'custom-box-shadow-bottom' : '')) + ">", "</div>", [component.type === 'header' ? _vm._ssrNode("<header id=\"template_header\"" + _vm._ssrClass(null, "" + (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '')) + ">", "</header>", _vm._l(component.parameters, function (param, pIndex) {
+      return _vm._ssrNode("<div>", "</div>", [param.type === 'text' ? [_vm._ssrNode(_vm.regexVars.test(param.text) ? "<div>" + _vm._s(param.text.replace(_vm.regexVars, "<div class='ts-content__var'>" + _vm.htmlInputString + _vm.varListValues + "</div>")) + "</div>" : "<p>" + _vm._s(param.text) + "</p>")] : param.type == 'image' ? _vm._ssrNode("<div class=\"ts-image-type\">", "</div>", [_vm._ssrNode("<input type=\"file\"" + _vm._ssrAttr("accept", _vm.acceptedExtensions) + " class=\"d-none\"> "), _vm.headerFiles[0] ? [_c('fa-icon', {
+        directives: [{
+          name: "tippy",
+          rawName: "v-tippy",
+          value: {
+            placement: 'right'
+          },
+          expression: "{placement: 'right'}"
+        }],
+        class: "color-" + _vm.headerFiles[0].current_color,
+        attrs: {
+          "icon": ['fas', _vm.headerFiles[0].current_icon],
+          "content": _vm.headerFiles[0].image_preview ? "<div class='custom-tooltip-image'>\n                    <img src='" + _vm.headerFiles[0].image_preview + "' alt='" + _vm.headerFiles[0].name + "' />\n                  </div>" : _vm.headerFiles[0].name
+        },
+        on: {
+          "click": function click($event) {
+            return _vm.triggerInputFile("header-" + pIndex);
+          }
+        }
+      })] : _c('fa-icon', {
+        directives: [{
+          name: "tippy",
+          rawName: "v-tippy",
+          value: {
+            placement: 'right'
+          },
+          expression: "{placement: 'right'}"
+        }],
+        staticClass: "select-image",
+        attrs: {
+          "icon": ['fas', 'image'],
+          "content": "Selecionar anexo"
+        },
+        on: {
+          "click": function click($event) {
+            return _vm.triggerInputFile("header-" + pIndex);
+          }
+        }
+      })], 2) : _vm._e()], 2);
+    }), 0) : _vm._e(), _vm._ssrNode(" " + (component.type === 'body' ? "<section id=\"template_body\"" + _vm._ssrClass(null, (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '') + " " + (!_vm.hasButtonOrFooterComponent ? 'custom-footer-style custom-box-shadow-bottom custom-border-gray' : '')) + ">" + _vm._ssrList(component.parameters, function (param, pIndex) {
       return "<div>" + (param.type === 'text' ? _vm.regexVars.test(param.text) ? "<div>" + _vm._s(param.text.replace(_vm.regexVars, "<div class='ts-content__var'>" + _vm.htmlInputString + _vm.varListValues + "</div>")) + "</div>" : "<p>" + _vm._s(param.text) + "</p>" : "<!---->") + "</div>";
-    }) + "</section>" : "<!---->") + " " + (component.type == 'footer' ? "<footer id=\"template_footer\">" + _vm._ssrList(component.parameters, function (param, pIndex) {
+    }) + "</section>" : "<!---->") + " " + (component.type == 'button' ? "<section id=\"template_buttons\"" + _vm._ssrClass(null, (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '') + " " + (!_vm.hasFooterComponent ? 'custom-footer-style custom-box-shadow-bottom' : '')) + ">" + _vm._ssrList(component.parameters, function (param, pIndex) {
+      return "<div class=\"ts-button\">" + (param.text ? "<p>" + _vm._s(param.text) + "</p>" : "<!---->") + "</div>";
+    }) + "</section>" : "<!---->") + " " + (component.type == 'footer' ? "<footer id=\"template_footer\"" + _vm._ssrClass(null, "" + (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '')) + ">" + _vm._ssrList(component.parameters, function (param, pIndex) {
       return "<div>" + (param.type == 'text' ? "<small>" + _vm._s(param.text) + "</small>" : "<!---->") + "</div>";
-    }) + "</footer>" : "<!---->") + "</div>";
-  }) + "</div> "), _vm.hasButton ? _vm._ssrNode("<div" + _vm._ssrClass("tg-btn", {
+    }) + "</footer>" : "<!---->"))], 2);
+  }), 0), _vm._ssrNode(" "), _vm.hasButton ? _vm._ssrNode("<div" + _vm._ssrClass("tg-btn", {
     'small-btn': _vm.iconButton
   }) + ">", "</div>", [_vm._ssrNode("<button>", "</button>", [!_vm.iconButton ? [_c('fa-icon', {
     attrs: {
@@ -2221,7 +2461,7 @@ var __vue_inject_styles__$y = undefined;
 var __vue_scope_id__$y = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$y = "data-v-6048207e";
+var __vue_module_identifier__$y = "data-v-c988759e";
 /* functional template */
 
 var __vue_is_functional_template__$y = false;
@@ -9349,7 +9589,7 @@ var __vue_render__$i = function __vue_render__() {
   return _c('div', {
     staticClass: "ts-container"
   }, [_vm._ssrNode("<div class=\"ts-content\">", "</div>", [_vm._ssrNode("<section" + _vm._ssrClass(null, {
-    'tm-container': _vm.hasButton
+    'tm-container custom-box-shadow-bottom': _vm.hasButton
   }) + ">", "</section>", [_c('TextFooter', {
     ref: "text-footer-template-message",
     attrs: {
@@ -9382,7 +9622,7 @@ var __vue_inject_styles__$i = undefined;
 var __vue_scope_id__$i = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$i = "data-v-6d6117ca";
+var __vue_module_identifier__$i = "data-v-5971fd9f";
 /* functional template */
 
 var __vue_is_functional_template__$i = false;
@@ -9452,7 +9692,8 @@ var script$h = {
     return {
       templateOptions: [],
       codTemplate: {},
-      selectedTemplate: null
+      selectedTemplate: null,
+      hasFile: false
     };
   },
   mounted: function mounted() {
@@ -9519,7 +9760,8 @@ var script$h = {
         });
       } else {
         this.selectedTemplate = null;
-      }
+      } // if(this.hasFile) this.setFileVar(false)
+
 
       this.adjustOnSelect();
     },
@@ -9572,8 +9814,8 @@ var script$h = {
 
                     if (message.text.indexOf(varName) != -1) {
                       /**Gerando os obejetos de parametros da notificacao para o component */
-                      if (component.type === "header") {
-                        _this2.selectedTemplate['parameters'][component.type] = {}; //Header s? pode ter uma vari?vel
+                      if (component.type === "header" && !_this2.selectedTemplate['parameters'][component.type]) {
+                        _this2.selectedTemplate['parameters'][component.type] = {}; //Header so pode ter uma vari?vel
 
                         _this2.selectedTemplate['parameters'][component.type] = {
                           tipo: "text",
@@ -9594,6 +9836,18 @@ var script$h = {
                     keyIndex++;
                   }
                 });
+              } else if (component.type == 'header' && component.parameters.seq) {
+                if (_this2.hasFile) {
+                  if (!_this2.selectedTemplate['parameters'][component.type]) _this2.selectedTemplate['parameters'][component.type] = new Array();
+
+                  _this2.selectedTemplate['parameters'][component.type].push({
+                    tipo: 'image',
+                    template: component.parameters.seq,
+                    link: ''
+                  });
+                } else {
+                  delete _this2.selectedTemplate['parameters'][component.type];
+                }
               }
             });
           }
@@ -9602,6 +9856,11 @@ var script$h = {
 
       this.$emit("template-data", this.selectedTemplate);
     },
+    setFileVar: function setFileVar(file) {
+      this.hasFile = file ? true : false;
+      this.$emit("set-file-var", file);
+      if (file) this.$emit("template-data", this.selectedTemplate);
+    },
     setMessage: function setMessage(message) {
       this.$emit("static-message", message);
     }
@@ -9649,6 +9908,7 @@ var __vue_render__$h = function __vue_render__() {
     },
     slot: "no-options"
   })])], 2), _vm._ssrNode(" "), _vm.selectedTemplate ? [_vm.selectedTemplate.components ? _vm._ssrNode("<div class=\"tg-component\">", "</div>", [_c('TemplateSingle', {
+    key: _vm.codTemplate,
     attrs: {
       "template": _vm.selectedTemplate,
       "hasButton": _vm.hasButton,
@@ -9659,6 +9919,7 @@ var __vue_render__$h = function __vue_render__() {
     },
     on: {
       "set-vars": _vm.setFinalMessage,
+      "set-file-var": _vm.setFileVar,
       "click-trigger": function clickTrigger($event) {
         return _vm.$emit('click-trigger');
       }
@@ -9683,8 +9944,8 @@ var __vue_staticRenderFns__$h = [];
 
 var __vue_inject_styles__$h = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-37a18a28_0", {
-    source: "*{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}.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}.tg-select .vs__selected-options>input{flex-grow:0}.vs__dropdown-option.vs__dropdown-option--selected{background-color:#1a5fad!important;color:#fff}.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--highlight,.vs__dropdown-option--selected,.vs__dropdown-option:active,.vs__dropdown-option:focus,.vs__dropdown-option:hover{background-color:#5897fb!important;color:#fff}.tg-component{width:100%}.ts-container{width:100%;display:flex;justify-content:space-between}.ts-content{--border-color:#CCC;--background-color:#DFF0D8;--input-background-color:#FFF;--input-border-default:#007BFF;--input-border-error:#E74C3C;--placeholder-color:#BBB;flex:2;font-size:.7rem;padding:10px 0}.ts-content footer,.ts-content header,.ts-content section{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:2.5px;border-top-right-radius:2.5px;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:2.5px;border-bottom-right-radius:2.5px;border-bottom:1px solid var(--border-color)}.ts-content footer{border:1px solid var(--border-color);border-top:unset;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px}.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:focus,.ts-dropdown li:focus-within,.ts-dropdown li:hover{opacity:1;background-color:#555;color:#fff}.ts-dropdown.visible{visibility:visible;opacity:1}.tg-btn{width:40%;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 .3s ease-in-out;user-select:none;cursor:pointer;box-shadow:inset 0 -2px rgba(0,0,0,.2);opacity:.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,.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,.2);-webkit-transform:translateY(1px);-moz-transform:translateY(1px);-o-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}.tg-btn button:active,.tg-btn button:focus{outline:2px solid #000}.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:2.5px;display:flex}",
+  inject("data-v-5b32f202_0", {
+    source: "*{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:#fdfdfd}.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:#1a5fad!important;color:#fff}.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--highlight,.vs__dropdown-option--selected,.vs__dropdown-option:active,.vs__dropdown-option:focus,.vs__dropdown-option:hover{background-color:#5897fb!important;color:#fff}.tg-component{width:100%}.ts-container{width:100%;display:flex;justify-content:space-between}.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:0 3px 4px -3px rgba(0,0,0,.3)}.custom-border-gray{border:1px solid var(--border-color)!important}.ts-content footer,.ts-content header,.ts-content section{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)}.custom-footer-style,.ts-content footer{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:focus,.ts-dropdown li:focus-within,.ts-dropdown li:hover{opacity:1;background-color:#555;color:#fff}.ts-dropdown.visible{visibility:visible;opacity:1}.tg-btn{width:40%;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 .3s ease-in-out;user-select:none;cursor:pointer;box-shadow:inset 0 -2px rgba(0,0,0,.2);opacity:.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,.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,.2);-webkit-transform:translateY(1px);-moz-transform:translateY(1px);-o-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}.tg-btn button:active,.tg-btn button:focus{outline:2px solid #000}.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}",
     map: undefined,
     media: undefined
   });
@@ -9695,7 +9956,7 @@ var __vue_inject_styles__$h = function __vue_inject_styles__(inject) {
 var __vue_scope_id__$h = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$h = "data-v-37a18a28";
+var __vue_module_identifier__$h = "data-v-5b32f202";
 /* functional template */
 
 var __vue_is_functional_template__$h = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.264",
+  "version": "0.0.266",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",