vue-intergrall-plugins 0.0.300 → 0.0.501

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

@@ -1,411 +1,411 @@
-<template>
-  <div class="expand-textarea" @drop.stop="dropFile" @dragenter.prevent @dragover.prevent v-on-clickaway="away">
-    <fa-icon :icon="['fas', 'times-circle']" class="sc-icone-fechar sc-icone-fechar--externo" @click="$emit('fechar-expand')" />
-    <div class="expand-textarea-content">
-      <h1 class="expand-textarea-title" v-text="textareaSettings.title"></h1>
-      <textarea 
-        :ref="identifier"
-        :placeholder="textareaSettings.placeholderMessage" 
-        v-model="message"
-        @input="sendFinalMessage"
-        @paste="pasteImage"
-      >
-      </textarea>
-      <div class="expand-textarea-footer">
-        <BtnEmojis 
-          v-show="buttons.hasEmojis"
-          :ref="`${identifier}-emojis`"
-          :emojiId="`${identifier}-em`"
-          :left="false"
-          @insert-emoji="insertEmoji"
-        />
-        <BtnFiles 
-          v-if="buttons.hasFiles"
-          :textId="identifier" 
-          :dictionary="dictionary" 
-          :fileSettings="fileSettings"
-          :ref="`${identifier}-file`"
-          @set-file-vars="setFileVars"
-          @open-image="openImage"
-        />
-        <slot name="btn-1"></slot>
-        <slot name="btn-2"></slot>
-        <!-- "expand-textarea-button" -->
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mixin as clickaway } from "vue-clickaway"
-import BtnEmojis from "./BtnEmojis"
-import BtnFiles from "./BtnFiles"
-import { returnMessageWithHexa } from "../../services/textFormatting"
-
-export default {
-  components: { BtnEmojis, BtnFiles },
-  mixins: [ clickaway ],
-  props: {
-    identifier: {
-      type: String,
-      required: true
-    },
-    dictionary: {
-      type: Object,
-      required: true
-    },
-    envioEmAndamento: {
-      type: Boolean,
-      required: false
-    },
-    buttons: {
-      type: Object,
-      default: () => { return { hasEmojis: false, hasSendButton: true, hasFiles: true } },
-      required: false
-    },
-    fileSettings: {
-      type: Object,
-      default: () => { return { docsExtensions: "", imagesExtensions: "", multiple: false } },
-      required: false
-    },
-    textareaSettings: {
-      type: Object,
-      default: () => { return { placeholderMessage: "", title: "Nova mensagem" } },
-      required: false
-    }
-  },
-  data() {
-    return {
-      message: "",
-      file: [],
-      hasAnyFile: false,
-      imagePreview: "",
-      isDoc: false,
-      fileFormatError: false
-    }
-  },
-  methods: {
-    away() {
-      if(this.$refs[`${this.identifier}-file`]) this.$refs[`${this.identifier}-file`].openFiles = false
-    },
-    removeHTMLElementsFromMessage(message) {
-      const regexTags = /<\/?[\d\w\s=\-:./'";]+>/gi
-      if(message.match(regexTags)) message = message.replace(regexTags, ' ')
-      return message
-    },
-    formatMessage(message) {
-      if(!message) return ""
-      message = message.trim()
-      message = message.replace(/\n$/, "", message)
-      message = returnMessageWithHexa(message)
-      message = this.removeHTMLElementsFromMessage(message)
-      return message
-    },
-    sendFinalMessage() {
-      const messageAux = this.formatMessage(this.message)
-      this.$emit("final-message", messageAux)
-    },  
-    emitirEnvio() {
-      if(this.envioEmAndamento) return
-      if(!this.buttons.hasSendButton) return
-      try {
-        if(this.verifyMessage()) {
-          const messageAux = this.formatMessage(this.message)
-          if(messageAux || this.hasAnyFile) {
-            const objMessage = this.returnObjectMessage(messageAux)
-            this.$emit("send-message", messageAux)
-            this.$emit("obj-message", objMessage)
-            
-            // this.reset() // Deve ser chamada de fora do plugin
-          }
-        }
-      }catch(e) {
-        console.error("Erro ao emitir envio da mensagem")
-        console.error(e)
-      }
-    },
-    verifyMessage() {
-      if((!this.message || !this.message.trim()) && !this.hasAnyFile) return false
-
-      if(this.fileFormatError) {
-        if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
-        const str = {
-          img: this.fileSettings.imagesExtensions.split("|").join(", "),
-          doc: this.fileSettings.docsExtensions.split("|").join(", ")
-        }
-        if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
-        return false
-      }
-
-      return true
-    },
-    returnObjectMessage(message) {
-      return {
-        message,
-        attachment: this.hasAnyFile ? this.file  : false,
-        isDoc: this.isDoc,
-        imagePreview: this.imagePreview
-      }
-    },
-    reset() {
-      if(this.buttons.hasEmojis && this.$refs[`emoji-text-${this.identifier}-emoji`].showEmojis) this.$refs[`emoji-text-${this.identifier}-emoji`].toggleEmojiSelection()
-      if(this.hasAnyFile) this.$refs[`${this.identifier}-file`].deleteFile()
-      this.message = ""
-      this.sendFinalMessage()
-      this.focusTextarea()
-    },
-    dropFile(e) {
-      try {
-        e.stopPropagation()
-        e.preventDefault()
-        const files = e.dataTransfer.files.length ? e.dataTransfer.files : ""
-        this.filesHandler(files)
-      }catch(e) {
-        console.error("Erro drop file")
-        console.error(e)
-      }
-    },
-    returnFileType(file, stopAlert) {
-      const imgRegex = new RegExp("\.("+this.fileSettings.imagesExtensions+")", "i")
-      if(imgRegex.test(file.name)) return "img"
-
-      const docRegex = new RegExp("\.("+this.fileSettings.docsExtensions+")", "i")
-      if(docRegex.test(file.name)) return "doc"
-
-      if(!stopAlert) return
-      if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
-      const str = {
-        img: this.fileSettings.imagesExtensions.split("|").join(", "),
-        doc: this.fileSettings.docsExtensions.split("|").join(", ")
-      }
-      if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
-      return false
-    },
-    filesHandler(files) {
-      if(!Array.isArray(files)) files = Array.from(files)
-      const fileType = this.returnFileType(files[0], true)
-      let invalidFile = false
-      try {
-        files.forEach(file => {
-          const singleFileType = this.returnFileType(file, true)
-          if(!singleFileType) {
-            invalidFile = true
-            file.invalid = true
-          }
-          file.imgOrDoc = singleFileType ? singleFileType : ""
-        })
-      }catch(e) {
-        console.error("Erro ao tentar percorrer os arquivos")
-        console.error(e)
-        invalidFile = true
-      }
-
-      if(!invalidFile) {
-        this.$refs[`${this.identifier}-file`].fileUpload(files, fileType, true)
-      }else {
-        if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
-        const str = {
-          img: this.fileSettings.imagesExtensions.split("|").join(", "),
-          doc: this.fileSettings.docsExtensions.split("|").join(", ")
-        }
-        if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
-      }
-    },
-    focusTextarea() {
-      this.$refs[`${this.identifier}`].focus()
-    },
-    setFileVars(fileObj) {
-      const { file, imagePreview, isDoc, fileFormatError, hasAnyFile } = fileObj;
-
-      this.file = file
-      this.imagePreview = imagePreview ? imagePreview : ""
-      this.isDoc = isDoc
-      this.fileFormatError = fileFormatError
-      this.hasAnyFile = hasAnyFile
-
-      this.$emit("set-file-vars", fileObj)
-    },
-    openImage(imagePreview) {
-      this.$emit("open-image", imagePreview)
-    },
-    pasteImage(e) {
-      try {
-        if(e.clipboardData.files.length && !this.buttons.hasFiles) {
-          e.preventDefault()
-          return
-        }else if(e.clipboardData.files.length && this.buttons.hasFiles) {
-          const files = e.clipboardData.files
-          this.filesHandler(files)
-        }
-      }catch(e) {
-        console.error("Nao foi possivel colar a/o imagem/documento")
-        console.error(e)
-      }
-    },
-    insertEmoji(emoji) {
-      try {
-        if(!emoji) return
-        const textarea = this.$refs[`${this.identifier}`]
-        if (document.activeElement === textarea) {
-          const cursorStart = textarea.selectionStart
-          const cursorEnd = textarea.selectionEnd
-          if (cursorEnd == textarea.value.length) {
-            this.message += emoji.finalEmoji
-            textarea.setSelectionRange(textarea.value.length, textarea.value.length);
-          } else {
-            const initValue = textarea.value.slice(0, cursorStart) + emoji.finalEmoji;
-            const endValue = textarea.value.slice(cursorEnd)
-            this.message = initValue + endValue
-            textarea.setSelectionRange(initValue.length, initValue.length);
-          }
-        } else {
-          this.message += emoji.finalEmoji
-        }
-        this.sendFinalMessage()
-      }catch(e) {
-        console.error("Erro ao inserir emoji")
-        console.error(e)
-      }
-    }
-  }
-}
-</script>
-
-<style>
-  .sc-icone-fechar {
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: #FFF;
-    border-radius: 50%;
-    z-index: 1;
-    color: #E74C3C;
-    font-size: 1.3rem;
-  }
-  .sc-icone-fechar.sc-icone-fechar--externo {
-    top: -10px;
-    right: -10px;
-  }
-  .sc-icone-fechar.sc-icone-fechar--interno {
-    top: 10px;
-    right: 10px;
-  }
-
-  .expand-textarea {
-    position: relative;
-    width: 90%;
-    height: 90%;
-    z-index: 1;
-  }
-
-  .expand-textarea-content {
-    overflow-x: hidden;
-    overflow-y: auto;
-    background-color: #FFF;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-  .expand-textarea-title {
-    padding: 2.5px 8px;
-    min-height: 38px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    font-size: 1.3rem;
-    background-color: #222;
-    color: #FFF;
-  }
-  .expand-textarea-content textarea{
-    padding: 10px;
-    flex: 1;
-    width: 100%;
-    border: unset;
-    resize: none;
-    outline: none;
-    overflow-x: hidden;
-  }
-  .expand-textarea-content textarea:hover, .expand-textarea-content textarea:active {
-    outline: none;
-  }
-  .expand-textarea-footer {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 10px;
-    background-color: #F7F7F7;
-    position: relative;
-  }
-  .expand-textarea-footer .text-footer-preview-container {
-    position: absolute;
-    top: -200px;
-    right: 145px;
-    height: 200px;
-    background: #F7F7F7;
-  }
-  .expand-textarea-footer .text-footer-actions--btn {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0);
-    color: #333;
-    padding: 2.5px;
-    margin: 0 15px 0 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1.3rem;
-    cursor: pointer;
-    opacity: .9;
-    transition: all 300ms;
-  }
-  .expand-textarea-footer .text-footer-actions--btn:hover {
-    opacity: 1;
-    background-color: rgba(30, 30, 30, .1);
-  }
-  
-  .expand-textarea-button {
-    width: 125px;
-    height: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    transition-duration: 300ms;
-    user-select: none;
-    cursor: pointer;
-    box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
-    opacity: .9;
-    border-radius: 5px;
-
-    padding: 5px 10px;
-    border-radius: 2.5px;
-    position: relative;
-  }
-  .expand-textarea-button.green {
-    background-color: #2A963A;
-    color: #FFF;
-    margin-right: 10px;
-  }
-  .expand-textarea-button.red {
-    background-color: #E74C3C;
-    color: #FFF;
-  }
-  .expand-textarea-button:hover{
-    opacity: 1;
-  }
-  .expand-textarea-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);
-  }
-  .expand-textarea-button.carregando {
-    background-color: #777;
-  }
+<template>
+  <div class="expand-textarea" @drop.stop="dropFile" @dragenter.prevent @dragover.prevent v-on-clickaway="away">
+    <fa-icon :icon="['fas', 'times-circle']" class="sc-icone-fechar sc-icone-fechar--externo" @click="$emit('fechar-expand')" />
+    <div class="expand-textarea-content">
+      <h1 class="expand-textarea-title" v-text="textareaSettings.title"></h1>
+      <textarea 
+        :ref="identifier"
+        :placeholder="textareaSettings.placeholderMessage" 
+        v-model="message"
+        @input="sendFinalMessage"
+        @paste="pasteImage"
+      >
+      </textarea>
+      <div class="expand-textarea-footer">
+        <BtnEmojis 
+          v-show="buttons.hasEmojis"
+          :ref="`${identifier}-emojis`"
+          :emojiId="`${identifier}-em`"
+          :left="false"
+          @insert-emoji="insertEmoji"
+        />
+        <BtnFiles 
+          v-if="buttons.hasFiles"
+          :textId="identifier" 
+          :dictionary="dictionary" 
+          :fileSettings="fileSettings"
+          :ref="`${identifier}-file`"
+          @set-file-vars="setFileVars"
+          @open-image="openImage"
+        />
+        <slot name="btn-1"></slot>
+        <slot name="btn-2"></slot>
+        <!-- "expand-textarea-button" -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from "vue-clickaway"
+import BtnEmojis from "./BtnEmojis"
+import BtnFiles from "./BtnFiles"
+import { returnMessageWithHexa } from "../../services/textFormatting"
+
+export default {
+  components: { BtnEmojis, BtnFiles },
+  mixins: [ clickaway ],
+  props: {
+    identifier: {
+      type: String,
+      required: true
+    },
+    dictionary: {
+      type: Object,
+      required: true
+    },
+    envioEmAndamento: {
+      type: Boolean,
+      required: false
+    },
+    buttons: {
+      type: Object,
+      default: () => { return { hasEmojis: false, hasSendButton: true, hasFiles: true } },
+      required: false
+    },
+    fileSettings: {
+      type: Object,
+      default: () => { return { docsExtensions: "", imagesExtensions: "", multiple: false } },
+      required: false
+    },
+    textareaSettings: {
+      type: Object,
+      default: () => { return { placeholderMessage: "", title: "Nova mensagem" } },
+      required: false
+    }
+  },
+  data() {
+    return {
+      message: "",
+      file: [],
+      hasAnyFile: false,
+      imagePreview: "",
+      isDoc: false,
+      fileFormatError: false
+    }
+  },
+  methods: {
+    away() {
+      if(this.$refs[`${this.identifier}-file`]) this.$refs[`${this.identifier}-file`].openFiles = false
+    },
+    removeHTMLElementsFromMessage(message) {
+      const regexTags = /<\/?[\d\w\s=\-:./'";]+>/gi
+      if(message.match(regexTags)) message = message.replace(regexTags, ' ')
+      return message
+    },
+    formatMessage(message) {
+      if(!message) return ""
+      message = message.trim()
+      message = message.replace(/\n$/, "", message)
+      message = returnMessageWithHexa(message)
+      message = this.removeHTMLElementsFromMessage(message)
+      return message
+    },
+    sendFinalMessage() {
+      const messageAux = this.formatMessage(this.message)
+      this.$emit("final-message", messageAux)
+    },  
+    emitirEnvio() {
+      if(this.envioEmAndamento) return
+      if(!this.buttons.hasSendButton) return
+      try {
+        if(this.verifyMessage()) {
+          const messageAux = this.formatMessage(this.message)
+          if(messageAux || this.hasAnyFile) {
+            const objMessage = this.returnObjectMessage(messageAux)
+            this.$emit("send-message", messageAux)
+            this.$emit("obj-message", objMessage)
+            
+            // this.reset() // Deve ser chamada de fora do plugin
+          }
+        }
+      }catch(e) {
+        console.error("Erro ao emitir envio da mensagem")
+        console.error(e)
+      }
+    },
+    verifyMessage() {
+      if((!this.message || !this.message.trim()) && !this.hasAnyFile) return false
+
+      if(this.fileFormatError) {
+        if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+        const str = {
+          img: this.fileSettings.imagesExtensions.split("|").join(", "),
+          doc: this.fileSettings.docsExtensions.split("|").join(", ")
+        }
+        if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+        return false
+      }
+
+      return true
+    },
+    returnObjectMessage(message) {
+      return {
+        message,
+        attachment: this.hasAnyFile ? this.file  : false,
+        isDoc: this.isDoc,
+        imagePreview: this.imagePreview
+      }
+    },
+    reset() {
+      if(this.buttons.hasEmojis && this.$refs[`emoji-text-${this.identifier}-emoji`].showEmojis) this.$refs[`emoji-text-${this.identifier}-emoji`].toggleEmojiSelection()
+      if(this.hasAnyFile) this.$refs[`${this.identifier}-file`].deleteFile()
+      this.message = ""
+      this.sendFinalMessage()
+      this.focusTextarea()
+    },
+    dropFile(e) {
+      try {
+        e.stopPropagation()
+        e.preventDefault()
+        const files = e.dataTransfer.files.length ? e.dataTransfer.files : ""
+        this.filesHandler(files)
+      }catch(e) {
+        console.error("Erro drop file")
+        console.error(e)
+      }
+    },
+    returnFileType(file, stopAlert) {
+      const imgRegex = new RegExp("\.("+this.fileSettings.imagesExtensions+")", "i")
+      if(imgRegex.test(file.name)) return "img"
+
+      const docRegex = new RegExp("\.("+this.fileSettings.docsExtensions+")", "i")
+      if(docRegex.test(file.name)) return "doc"
+
+      if(!stopAlert) return
+      if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+      const str = {
+        img: this.fileSettings.imagesExtensions.split("|").join(", "),
+        doc: this.fileSettings.docsExtensions.split("|").join(", ")
+      }
+      if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+      return false
+    },
+    filesHandler(files) {
+      if(!Array.isArray(files)) files = Array.from(files)
+      const fileType = this.returnFileType(files[0], true)
+      let invalidFile = false
+      try {
+        files.forEach(file => {
+          const singleFileType = this.returnFileType(file, true)
+          if(!singleFileType) {
+            invalidFile = true
+            file.invalid = true
+          }
+          file.imgOrDoc = singleFileType ? singleFileType : ""
+        })
+      }catch(e) {
+        console.error("Erro ao tentar percorrer os arquivos")
+        console.error(e)
+        invalidFile = true
+      }
+
+      if(!invalidFile) {
+        this.$refs[`${this.identifier}-file`].fileUpload(files, fileType, true)
+      }else {
+        if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+        const str = {
+          img: this.fileSettings.imagesExtensions.split("|").join(", "),
+          doc: this.fileSettings.docsExtensions.split("|").join(", ")
+        }
+        if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+      }
+    },
+    focusTextarea() {
+      this.$refs[`${this.identifier}`].focus()
+    },
+    setFileVars(fileObj) {
+      const { file, imagePreview, isDoc, fileFormatError, hasAnyFile } = fileObj;
+
+      this.file = file
+      this.imagePreview = imagePreview ? imagePreview : ""
+      this.isDoc = isDoc
+      this.fileFormatError = fileFormatError
+      this.hasAnyFile = hasAnyFile
+
+      this.$emit("set-file-vars", fileObj)
+    },
+    openImage(imagePreview) {
+      this.$emit("open-image", imagePreview)
+    },
+    pasteImage(e) {
+      try {
+        if(e.clipboardData.files.length && !this.buttons.hasFiles) {
+          e.preventDefault()
+          return
+        }else if(e.clipboardData.files.length && this.buttons.hasFiles) {
+          const files = e.clipboardData.files
+          this.filesHandler(files)
+        }
+      }catch(e) {
+        console.error("Nao foi possivel colar a/o imagem/documento")
+        console.error(e)
+      }
+    },
+    insertEmoji(emoji) {
+      try {
+        if(!emoji) return
+        const textarea = this.$refs[`${this.identifier}`]
+        if (document.activeElement === textarea) {
+          const cursorStart = textarea.selectionStart
+          const cursorEnd = textarea.selectionEnd
+          if (cursorEnd == textarea.value.length) {
+            this.message += emoji.finalEmoji
+            textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+          } else {
+            const initValue = textarea.value.slice(0, cursorStart) + emoji.finalEmoji;
+            const endValue = textarea.value.slice(cursorEnd)
+            this.message = initValue + endValue
+            textarea.setSelectionRange(initValue.length, initValue.length);
+          }
+        } else {
+          this.message += emoji.finalEmoji
+        }
+        this.sendFinalMessage()
+      }catch(e) {
+        console.error("Erro ao inserir emoji")
+        console.error(e)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  .sc-icone-fechar {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: #FFF;
+    border-radius: 50%;
+    z-index: 1;
+    color: #E74C3C;
+    font-size: 1.3rem;
+  }
+  .sc-icone-fechar.sc-icone-fechar--externo {
+    top: -10px;
+    right: -10px;
+  }
+  .sc-icone-fechar.sc-icone-fechar--interno {
+    top: 10px;
+    right: 10px;
+  }
+
+  .expand-textarea {
+    position: relative;
+    width: 90%;
+    height: 90%;
+    z-index: 1;
+  }
+
+  .expand-textarea-content {
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: #FFF;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .expand-textarea-title {
+    padding: 2.5px 8px;
+    min-height: 38px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    font-size: 1.3rem;
+    background-color: #222;
+    color: #FFF;
+  }
+  .expand-textarea-content textarea{
+    padding: 10px;
+    flex: 1;
+    width: 100%;
+    border: unset;
+    resize: none;
+    outline: none;
+    overflow-x: hidden;
+  }
+  .expand-textarea-content textarea:hover, .expand-textarea-content textarea:active {
+    outline: none;
+  }
+  .expand-textarea-footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 10px;
+    background-color: #F7F7F7;
+    position: relative;
+  }
+  .expand-textarea-footer .text-footer-preview-container {
+    position: absolute;
+    top: -200px;
+    right: 145px;
+    height: 200px;
+    background: #F7F7F7;
+  }
+  .expand-textarea-footer .text-footer-actions--btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0);
+    color: #333;
+    padding: 2.5px;
+    margin: 0 15px 0 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.3rem;
+    cursor: pointer;
+    opacity: .9;
+    transition: all 300ms;
+  }
+  .expand-textarea-footer .text-footer-actions--btn:hover {
+    opacity: 1;
+    background-color: rgba(30, 30, 30, .1);
+  }
+  
+  .expand-textarea-button {
+    width: 125px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    transition-duration: 300ms;
+    user-select: none;
+    cursor: pointer;
+    box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
+    opacity: .9;
+    border-radius: 5px;
+
+    padding: 5px 10px;
+    border-radius: 2.5px;
+    position: relative;
+  }
+  .expand-textarea-button.green {
+    background-color: #2A963A;
+    color: #FFF;
+    margin-right: 10px;
+  }
+  .expand-textarea-button.red {
+    background-color: #E74C3C;
+    color: #FFF;
+  }
+  .expand-textarea-button:hover{
+    opacity: 1;
+  }
+  .expand-textarea-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);
+  }
+  .expand-textarea-button.carregando {
+    background-color: #777;
+  }
 </style>