vue-intergrall-plugins 1.1.89 → 1.2.0

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

@@ -1,427 +1,427 @@
-<template>
-  <div class="expand-textarea" @drop.stop="dropFile" @dragenter.prevent @dragover.prevent v-clickaway="away">
-    <slot name="btn-close" />
-    <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`" :externalFiles="externalFiles" @set-file-vars="setFileVars"
-          @open-image="openImage" @open-file-system="openFileSystem" @reset-file-system="resetFileSystem"
-          @handle-file-preview="$emit('handle-file-preview')" @handle-file-click="$emit('handle-file-click')" />
-        <slot name="btn-1"></slot>
-        <slot name="btn-2"></slot>
-        <!-- "expand-textarea-button" -->
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Clickaway from "@/directives/clickaway";
-import BtnEmojis from "./BtnEmojis";
-import BtnFiles from "./BtnFiles";
-
-export default {
-  components: { BtnEmojis, BtnFiles },
-  directives: {
-    clickaway: Clickaway,
-  },
-  props: {
-    identifier: {
-      type: String,
-      required: true,
-    },
-    dictionary: {
-      type: Object,
-      required: true,
-    },
-    envioEmAndamento: {
-      type: Boolean,
-      required: false,
-    },
-    externalFiles: {
-      type: Array,
-      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);
-      }
-    },
-    openFileSystem() {
-      this.$emit("open-file-system");
-    },
-    resetFileSystem() {
-      this.$emit("reset-file-system");
-    },
-  },
-};
-</script>
-
-<style>
-.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: 20.8px;
-  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 .old-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: 20.8px;
-  cursor: pointer;
-  opacity: 0.9;
-  transition: all 300ms;
-}
-
-.expand-textarea-footer .text-footer-actions--btn:hover {
-  opacity: 1;
-  background-color: rgba(30, 30, 30, 0.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: 0.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>
+<template>
+  <div class="expand-textarea" @drop.stop="dropFile" @dragenter.prevent @dragover.prevent v-clickaway="away">
+    <slot name="btn-close" />
+    <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`" :externalFiles="externalFiles" @set-file-vars="setFileVars"
+          @open-image="openImage" @open-file-system="openFileSystem" @reset-file-system="resetFileSystem"
+          @handle-file-preview="$emit('handle-file-preview')" @handle-file-click="$emit('handle-file-click')" />
+        <slot name="btn-1"></slot>
+        <slot name="btn-2"></slot>
+        <!-- "expand-textarea-button" -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Clickaway from "@/directives/clickaway";
+import BtnEmojis from "./BtnEmojis";
+import BtnFiles from "./BtnFiles";
+
+export default {
+  components: { BtnEmojis, BtnFiles },
+  directives: {
+    clickaway: Clickaway,
+  },
+  props: {
+    identifier: {
+      type: String,
+      required: true,
+    },
+    dictionary: {
+      type: Object,
+      required: true,
+    },
+    envioEmAndamento: {
+      type: Boolean,
+      required: false,
+    },
+    externalFiles: {
+      type: Array,
+      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);
+      }
+    },
+    openFileSystem() {
+      this.$emit("open-file-system");
+    },
+    resetFileSystem() {
+      this.$emit("reset-file-system");
+    },
+  },
+};
+</script>
+
+<style>
+.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: 20.8px;
+  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 .old-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: 20.8px;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: all 300ms;
+}
+
+.expand-textarea-footer .text-footer-actions--btn:hover {
+  opacity: 1;
+  background-color: rgba(30, 30, 30, 0.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: 0.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>