vue-intergrall-plugins 0.0.242 → 0.0.245

package/package.json

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

package/src/lib-components/Chat/BtnDownloadAllFiles.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="text-footer-actions--btn" @click="$emit('click-trigger')" :title="dictionary.msg_baixar_todos_anexos">
+    <span class="multiplos">
+      <fa-icon :icon="['fas', 'download']" />
+      <fa-icon :icon="['fas', 'paperclip']" class="small" />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+  .multiplos {
+    display: flex;
+  }
+  .multiplos svg {
+    font-size: .95rem
+  }
+  .multiplos svg.small {
+    font-size: .7rem!important;
+  }
+</style>
+
+<script>
+export default {
+  props: {
+    dictionary: {
+      type: Object,
+      default: {},
+      required: false
+    }
+  }
+}
+</script>

package/src/lib-components/Chat/TextFooter.vue

@@ -38,7 +38,13 @@
         :message="message"
         :maxCharacters="textareaSettings.maxCharacters"
       />
-      <div v-if="buttons.hasFiles || buttons.hasAudio || buttons.hasExpand || formattedMessageSettings.hasStandardMessages || buttons.hasScreenShare" class="text-footer-actions" :class="{'outside-buttons' : cssStyle.outsideButtons && !audioFile}">
+      <div v-if="buttons.hasFiles || buttons.hasAudio || buttons.hasExpand || formattedMessageSettings.hasStandardMessages || buttons.hasScreenShare || buttons.hasDownloadAll" class="text-footer-actions" :class="{'outside-buttons' : cssStyle.outsideButtons && !audioFile}">
+        <BtnDownloadAllFiles 
+          v-show="buttons.hasDownloadAll && !audioFile"
+          @click-trigger="$emit('handle-download-files')"
+          :dictionary="dictionary"
+          :ref="`${textId}-download-files`"
+        />
         <BtnScreenShare 
           v-show="buttons.hasScreenShare && !audioFile"
           @handle-screen-share="handleScreenShare"
@@ -123,9 +129,10 @@ import BtnExpand from "./BtnExpand"
 import BtnStandardMessages from "./BtnStandardMessages"
 import StandardMessages from "./StandardMessages"
 import BtnScreenShare from "./BtnScreenShare"
+import BtnDownloadAllFiles from './BtnDownloadAllFiles'
 
 export default {
-  components: { BtnEmojis, Loader, BtnMic, BtnFiles, BtnExpand, RemainingCharacters, BtnStandardMessages, StandardMessages, BtnScreenShare },
+  components: { BtnEmojis, Loader, BtnMic, BtnFiles, BtnExpand, RemainingCharacters, BtnStandardMessages, StandardMessages, BtnScreenShare, BtnDownloadAllFiles },
   mixins: [ clickaway ],
   props: {
     buttons: {
@@ -606,7 +613,7 @@ ul {
       align-items: center;
       justify-content: flex-end;
       position: absolute;
-      top: -20px;
+      top: -30px;
       right: 35px;
       background-color: #FAFAFA;
     }

package/src/lib-components/Loader/Loader.vue

@@ -31,6 +31,7 @@ export default {
 <style>
 .req-loader-container {
   position: absolute;
+  z-index: 1;
   top: 0;
   left: 0;
   width: 100%;

package/src/lib-components/Messages/ChatMessages.vue

@@ -230,27 +230,39 @@ export default {
     },
     adjustFontColor(cor) {
       try {
-        let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(cor)
-      
-        result = result ? {
-          r: parseInt(result[1], 16),
-          g: parseInt(result[2], 16),
-          b: parseInt(result[3], 16)
-        } : null
-      
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(cor);
+
         if(!result) return
-      
-        const { r, g, b }= result
 
-        const rgb = parseInt(`${r}${g}${b}`, 16)
-        const r1 = rgb >> 16 & 0xFF
-        const g1 = rgb >> 8 & 0xFF
-        const b1 = rgb & 0xFF
+        var r = parseInt(result[1], 16);
+        var g = parseInt(result[2], 16);
+        var b = parseInt(result[3], 16);
+
+        r /= 255, g /= 255, b /= 255;
+        var max = Math.max(r, g, b), min = Math.min(r, g, b);
+        var h, s, l = (max + min) / 2;
+
+        if(max == min){
+            h = s = 0; // achromatic
+        } else {
+            var d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch(max) {
+                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+                case g: h = (b - r) / d + 2; break;
+                case b: h = (r - g) / d + 4; break;
+            }
+            h /= 6;
+        }
 
-        const luma = 0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1
+        s = s*100;
+        s = Math.round(s);
+        l = l*100;
+        l = Math.round(l);
+        h = Math.round(360*h);
         
         const root = document.documentElement
-        root.style.setProperty('--text-color', luma < 40 ? "#FFF" : "#111B21")
+        root.style.setProperty('--text-color', l <= 50 ? "#FFF" : "#111B21")
       }catch(e) {
         console.error("Erro ao ajustar a cor da mensagem: ", e)
       }

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

@@ -11,7 +11,9 @@
         :reduce="template => template.cod"
         :clearable="false"
         @input="setTemplate"
-        :getOptionLabel="template => template.label">
+        :getOptionLabel="template => template.label"
+        ref="template-v-select"
+        >
         <div slot="no-options" v-text="dictionary.msg_sem_resultados"></div>
       </v-select>
     </div>
@@ -131,6 +133,9 @@
           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
         }
@@ -145,6 +150,9 @@
             this.adjustOnSelect()
           }
         }
+        if(!this.codTemplate && this.$refs["template-v-select"] && this.$refs["template-v-select"].$el) {
+          this.$refs["template-v-select"].$el.querySelector("input").focus()
+        }
       },
       selectIfHasContact24h() {
         if(this.templates['envio_msg']) {
@@ -383,7 +391,6 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   align-items: center;
 }
 .tg-btn button {
-  outline: unset;
   border: unset;
   display: block;
   min-width: 180px;
@@ -392,7 +399,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   font-weight: 500;
   background-color: #007bff;
   color: #FFF;
-  transition-duration: 300ms;
+  transition: transform 300ms ease-in-out;
   user-select: none;
   cursor: pointer;
   box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
@@ -425,11 +432,11 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   transform: translateY(1px); 
 }
 .tg-btn button:focus, .tg-btn button:active {
-  outline: unset; 
+  outline: 2px solid black; 
 }
 .tg-btn.small-btn {
   width: auto;
-  margin-left: 5px;
+  margin: 0 5px;
 }
 .tg-btn.small-btn svg {
   margin-right: 0;

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

@@ -11,6 +11,7 @@
           :placeholderMessage="'Escreva sua mensagem'"
           :ignoreHideTextarea="true"
           :dictionary="dictionary"
+          ref="text-footer-template-message"
         ></TextFooter>
         <div class="tg-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
           <button @click="sendMessage">
@@ -47,7 +48,17 @@ export default {
         required: true
     }
   },
+  mounted() {
+    this.initFocus()
+  },
   methods: {
+    initFocus() {
+      this.$nextTick(() => {
+        if(this.$refs["text-footer-template-message"] && this.$refs["text-footer-template-message"].$el) {
+          this.$refs["text-footer-template-message"].$el.querySelector("textarea").focus()
+        }
+      })
+    },
     sendMessage() {
       this.$emit('click-trigger')
     },

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

@@ -52,7 +52,7 @@
       </div>
     </div>
     <div class="tg-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
-      <button @click="$emit('click-trigger')">
+      <button @click="$emit('click-trigger')" ref="template-single-button">
         <template v-if="!iconButton"> 
           <fa-icon :icon="['fas', 'paper-plane']" />
           {{ dictionary.btn_contatar_clientes }} 
@@ -121,6 +121,11 @@ export default {
     })
   },
   methods: {
+    handleInitialFocus() {
+      const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
+      if(allInputs.length) allInputs[0].focus()
+      else if(this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
+    },
     limparInputVar() {
       const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
       allInputs.forEach((input) => {