vue-intergrall-plugins 1.1.10 → 1.1.12

package/src/lib-components/Email/EmailItem.vue

@@ -1,934 +1,938 @@
-<template>
-  <div
-    :class="['email-item box-shadow-active', isOpen ? isOpenClass : `${isClosedClass} cursor-pointer`, showInfos ? 'info-open' : '', origem, customClass]"
-    @click="openByItem($event)">
-    <div v-if="showInfos" class="email-overlay"></div>
-    <div class="email-author" v-if="autor" :class="[origem, isMainEmail ? 'main' : '']" @click.stop="toggleIsOpen"
-      :key="autor">
-      <span :title="`Enviado por: ${autor}`"><fa-icon :icon="['fas', 'reply']" :class="[origem]" /></span>
-      <p class="email-author-name" v-text="returnAuthorName" :title="returnAuthorName"></p>
-      <span :title="`E-mail ${origem === 'outros' ? 'recebido' : 'enviado'}`">
-        <fa-icon :icon="['fas', origem === 'outros' ? 'user' : 'headset']" class="email-to-svg" />
-      </span>
-    </div>
-    <div class="email-custom-buttons" v-if="customButtons && customButtons.length" @click.stop>
-      <span v-for="(button, index) in customButtons" :key="button.id || index" v-show="button.use"
-        @click="button.callback(returnParams(button.params))" :class="`${button.customClass || 'menu-mensagem'}`"
-        v-tippy :content="button.tippyContent">
-        <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
-        <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
-      </span>
-    </div>
-    <div class="email-custom-action-buttons" v-if="customActionButtons && customActionButtons.length" @click.stop>
-      <button v-for="(button, index) in customActionButtons" :key="button.id || index" v-show="button.use"
-        @click="button.callback(returnParams(button.params))"
-        :class="`${button.customClass || 'email-custom-action-button'}`" v-tippy :content="button.tippyContent">
-        <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
-        <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
-        <span v-if="button.label" class="email-custom-action-label" v-text="button.label"></span>
-      </button>
-    </div>
-    <div class="email-header" @click.stop="toggleIsOpen">
-      <p class="email-subject" :title="returnMainValue()">
-        {{ returnMainValue() }}
-      </p>
-      <div class="header-container">
-        <div :class="`email-header-content${isOpen ? ' open' : ''}`">
-          <div class="email-header-infos">
-            <template v-if="para && para.length">
-              <div class="email-to-from-container" ref="emailToContainer">
-                <EmailTo v-for="(recipient, index) in paraCopia" :key="`to-${recipient.email}`"
-                  :currentName="formattedToName(recipient.name, index, paraCopia.length)" :email="recipient.email"
-                  :showMail="isOpen" />
-                <div class="email-to-btn" v-show="isOpen" @click.stop="toggleShowInfos()">
-                  <fa-icon :icon="['fas', 'caret-down']" />
-                </div>
-              </div>
-            </template>
-            <div v-if="!isMainEmail && isOpen" class="email-subject-secondary">
-              <span class="email-subject-span"
-                v-text="`Assunto: ${htmlEntityToEmoji(replaceUnicodeWithEmoji(assunto)) || '(Sem assunto)'}`"></span>
-            </div>
-          </div>
-        </div>
-        <span :class="`email-date ${isOpen ? isOpenClass : isClosedClass}`" :title="formattedDate" ref="emailDate"
-          v-show="formattedDate">
-          <fa-icon :icon="['fas', 'calendar']" />
-          {{ formattedDate }}
-        </span>
-      </div>
-      <ul v-if="showInfos" ref="emailToInfos" class="email-to-infos box-shadow" v-clickaway="() => showInfos = false"
-        @click.stop>
-        <li v-for="(info, index) in mailInfos" :key="`info-${index}`" class="email-info">
-          <span v-text="info.label"></span>
-          {{ info.value }}
-        </li>
-      </ul>
-      <span v-if="isOpen" :class="['email-actions box-shadow', { active: actionsOpen }, { main: isMainEmail }]"
-        @click.stop="toggleActions">
-        <span></span>
-        <span></span>
-        <span></span>
-      </span>
-      <ul class="email-actions-list box-shadow" v-if="actionsOpen && isOpen" v-clickaway="closeActions" @click.stop>
-        <li class="email-action" @click.stop="toggleOpenMessage">
-          {{ !openMessage ? 'Visualizar' : 'Esconder' }} texto do e-mail
-        </li>
-      </ul>
-    </div>
-    <div class="email-content" v-show="isOpen" ref="emailIframeParent">
-      <VueLoader v-if="isIframeLoading" />
-      <div v-if="hasError" class="email-error-content">
-        <p>Erro ao carregar o e-mail</p>
-        <button class="box-shadow" @click="handleTryAgain()">Tentar novamente</button>
-      </div>
-      <iframe v-show="!hasError" ref="emailIframe"
-        :class="`email-html ${isIframeLoading ? 'visibility-hidden' : ''}`"></iframe>
-      <span class="email-raw" v-if="openMessage">{{ mensagem }}</span>
-    </div>
-    <div v-if="filteredFiles && filteredFiles.length" class="email-files" v-show="isOpen || isMainEmail">
-      <EmailFile v-for="(anexo, index) in filteredFiles" :key="index" :anexo="anexo" :dominio="dominio" />
-    </div>
-  </div>
-</template>
-
-<script>
-import EmailFile from "./EmailFile.vue";
-import EmailTo from "./EmailTo.vue";
-import { textoLongo } from "@/mixins/formatarTexto";
-import Clickaway from '@/directives/clickaway';
-
-export default {
-  mixins: [textoLongo],
-  directives: {
-    clickaway: Clickaway
-  },
-  components: { EmailFile, EmailTo },
-  props: {
-    dominio: {
-      type: String,
-      required: true
-    },
-    dicionario: {
-      type: Object,
-      required: true
-    },
-    customClass: {
-      type: String,
-      default: ''
-    },
-    from: {
-      type: Array,
-      default: () => []
-    },
-    para: {
-      type: Array,
-      default: () => []
-    },
-    copia: {
-      type: Array,
-      default: () => []
-    },
-    html: {
-      type: String,
-      default: ""
-    },
-    assunto: {
-      type: String,
-      default: ""
-    },
-    dataHora: {
-      type: String,
-      default: ""
-    },
-    mensagem: {
-      type: String,
-      default: ""
-    },
-    anexos: {
-      type: [Array, String],
-      default: () => []
-    },
-    iniciarAberto: {
-      type: Boolean,
-      default: false
-    },
-    dataServer: {
-      type: String,
-      default: ""
-    },
-    isOpenClass: {
-      type: String,
-      default: 'bg-dark-white-2'
-    },
-    isClosedClass: {
-      type: String,
-      default: 'bg-white'
-    },
-    refKey: {
-      type: String,
-    },
-    showRawMessageInsideEmail: {
-      type: Boolean,
-      default: false
-    },
-    origem: {
-      type: String,
-      default: 'outros'
-    },
-    autor: {
-      type: String
-    },
-    isMainEmail: {
-      type: Boolean,
-      default: true
-    },
-    customButtons: {
-      type: Array
-    },
-    customActionButtons: {
-      type: Array
-    }
-  },
-  data() {
-    return {
-      isOpen: this.iniciarAberto,
-      openMessage: false,
-      actionsOpen: false,
-      showInfos: false,
-      isIframeLoading: true,
-      hasError: false,
-      errorCount: 0
-    };
-  },
-  computed: {
-    paraCopia() {
-      if (!this.copia || !this.copia.length) return this.para && this.para.length ? this.para : []
-      return this.para && this.para.length ? this.para.concat(this.copia) : this.copia
-    },
-    formattedDate() {
-      return this.formataDateHoraDateFns(this.dataHora, this.dataServer, this.dicionario);
-    },
-    mailInfos() {
-      const formatAsString = (arr) => {
-        let str = ''
-        arr.forEach(({ name, email }, index) => {
-          if (!name && !email) str += ''
-          else str += `${name || ''} ${email ? `<${email}>` : ''}${((name || email) && index !== arr.length - 1) ? ', ' : ''}`
-        })
-        return str
-      }
-
-      const infos = [
-        {
-          label: 'De:',
-          value: this.from && this.from.length ? formatAsString(this.from) : '--'
-        },
-        {
-          label: 'Para:',
-          value: this.para && this.para.length ? formatAsString(this.para) : '--'
-        },
-        {
-          label: 'Assunto:',
-          value: this.htmlEntityToEmoji(this.replaceUnicodeWithEmoji(this.assunto)) || '(Sem assunto)'
-        },
-        {
-          label: 'Data:',
-          value: this.formataDataHora(this.dataHora) || '--'
-        },
-      ]
-
-      if (this.copia && this.copia.length) {
-        infos.push({
-          label: this.dicionario.tit_copia,
-          value: formatAsString(this.copia)
-        })
-      }
-
-      return infos
-    },
-    filteredFiles() {
-      if (!this.anexos || !this.anexos.length) return
-
-      return this.anexos.filter(anexo => {
-        return !this.html.includes(anexo.name);
-      })
-    },
-    returnAuthorName() {
-      if (!this.from || !this.from.length) return this.autor || ''
-      const { email, name } = this.from[0]
-      if (!name) return email
-      if (!email) return name
-      if (this.isOpen) return `${name} (${email})`
-      return name
-    },
-    formattedToName() {
-      return (name, index, length) => {
-        let addVirgulaDps = index < length - 1
-        let addVirgulaAntes = index === 1 && length >= 2
-        const text = index === 0 ? `Para: ${name || ''}` : name ? `${addVirgulaAntes ? ', ' : ''}${name}${addVirgulaDps ? ', ' : ''}` : '';
-        return text
-      }
-    }
-  },
-  watch: {
-    isOpen: 'updateIframeContent'
-  },
-  mounted() {
-    this.updateIframeContent();
-    this.adjustMaxWidth()
-
-    if (this.refKey) this.$root.$refs[`${refKey}`] = this
-
-    setTimeout(() => {
-      if (this.isIframeLoading) this.adjustIframeHeight()
-    }, 15000);
-  },
-  methods: {
-    handleTryAgain() {
-      this.isOpen = true
-      this.isIframeLoading = true
-      this.hasError = false
-
-      this.$nextTick(this.updateIframeContent())
-    },
-    gerarMensagemEstilizada(msg) {
-      try {
-        const currentStyles = [
-          { tagAbertura: "<i>", tagFechamento: "</i>", find: /_(.*?)_/g },
-          { tagAbertura: "<b>", tagFechamento: "</b>", find: /\*(.*?)\*/g },
-          { tagAbertura: "<del>", tagFechamento: "</del>", find: /~(.*?)~/g }
-        ]
-
-        const isLetterOrUnderscore = (char) => {
-          return /[a-zA-Z_]/.test(char)
-        }
-
-        const isValidMatch = (message, fullMatch, startIndex) => {
-          const beforeChar = message[startIndex - 1]
-          const afterChar = message[startIndex + fullMatch.length]
-          return (
-            (beforeChar === undefined || !isLetterOrUnderscore(beforeChar)) &&
-            (afterChar === undefined || !isLetterOrUnderscore(afterChar))
-          )
-        }
-
-        let message = msg
-
-        for (const { tagAbertura, tagFechamento, find } of currentStyles) {
-          let match
-          while ((match = find.exec(message)) !== null) {
-            const fullMatch = match[0]
-            const content = match[1]
-            const startIndex = match.index
-
-            if (isValidMatch(message, fullMatch, startIndex)) {
-              const endIndex = startIndex + fullMatch.length
-              const replacedContent = `${tagAbertura}${content}${tagFechamento}`
-              message = message.slice(0, startIndex) + replacedContent + message.slice(endIndex)
-            }
-          }
-        }
-
-        return message
-      } catch (err) {
-        console.error('Erro ao gerar mensagem estilizada: ', err)
-        return msg
-      }
-    },
-    updateIframeContent() {
-      this.$nextTick(() => {
-        if (this.isOpen && this.isIframeLoading) {
-          const iframe = this.$refs.emailIframe;
-          if (!iframe) return
-          const doc = iframe.contentDocument || iframe.contentWindow.document;
-          if (!doc) return
-          let content = this.html
-          if (!/<[a-z][\s\S]*>/i.test(content)) {
-            content = content.replace(/\n/g, '<br>');
-            content = this.gerarMensagemEstilizada(content)
-            content = `<p>${content}</p>`;
-          }
-
-          doc.open();
-          doc.write(content);
-          doc.close();
-
-          const images = doc.getElementsByTagName('img');
-          let imagesLoaded = 0;
-
-          const imageLoadHandler = () => {
-            imagesLoaded++;
-            if (imagesLoaded === images.length) {
-              this.adjustIframeHeight();
-            }
-          };
-
-          if (images.length === 0) {
-            this.adjustIframeHeight();
-          } else {
-            for (let img of images) {
-              img.addEventListener('load', imageLoadHandler);
-              img.addEventListener('error', imageLoadHandler);
-            }
-          }
-        }
-      });
-    },
-    adjustIframeHeight() {
-      this.$nextTick(() => {
-        const iframe = this.$refs.emailIframe;
-        const emailParent = this.$refs.emailIframeParent
-        if (iframe && emailParent) {
-          setTimeout(() => {
-            const doc = iframe.contentDocument || iframe.contentWindow.document;
-            const margin = 20
-            const value = doc.documentElement.offsetHeight + margin
-            if (value === 0 || doc.documentElement.querySelector('body').innerHTML === '') {
-              this.errorCount++
-              if (this.errorCount > 3) {
-                this.hasError = true
-                if (this.isIframeLoading) this.isIframeLoading = false
-                return
-              }
-              this.isIframeLoading = true
-              this.updateIframeContent()
-              return
-            }
-            if (this.hasError || this.errorCount > 0) {
-              this.hasError = false
-              this.errorCount = 0
-            }
-            iframe.style.height = `${value}px`;
-            emailParent.style.minHeight = `${value}px`
-          }, 100)
-        }
-
-        if (this.isIframeLoading) this.isIframeLoading = false
-      });
-    },
-    toggleShowInfos() {
-      this.showInfos = !this.showInfos;
-      if (this.showInfos) {
-        this.$nextTick(() => {
-          this.adjustTopPosition();
-        });
-      }
-    },
-    adjustTopPosition() {
-      const ulElement = this.$refs.emailToInfos;
-      if (!ulElement) return
-      const ulHeight = ulElement.offsetHeight;
-      const maxHeight = 300
-      const finalHeight = ulHeight < maxHeight ? ulHeight : maxHeight
-      ulElement.style.bottom = `-${finalHeight}px`;
-    },
-    toggleIsOpen() {
-      this.isOpen = !this.isOpen;
-      if (!this.isOpen) {
-        this.actionsOpen = false;
-        this.openMessage = false;
-        this.showInfos = false
-      }
-    },
-    adjustMaxWidth() {
-      this.$nextTick(() => {
-        const toContainer = this.$refs.emailToContainer
-        const dateContainer = this.$refs.emailDate
-        if (!toContainer || !dateContainer) return
-        toContainer.style.maxWidth = `calc(100% - ${dateContainer.offsetWidth}px)`
-      })
-    },
-    toggleActions() {
-      this.actionsOpen = !this.actionsOpen;
-    },
-    toggleOpenMessage() {
-      if (this.showRawMessageInsideEmail) {
-        this.openMessage = !this.openMessage;
-      }
-
-      this.$emit('open-message', {
-        dicionario: this.dicionario,
-        from: this.from,
-        para: this.para,
-        html: this.html,
-        assunto: this.assunto,
-        dataHora: this.dataHora,
-        mensagem: this.mensagem,
-        anexos: this.filteredFiles,
-        dataServer: this.dataServer,
-        dominio: this.dominio
-      })
-    },
-    closeActions() {
-      this.actionsOpen = false;
-    },
-    returnMainValue() {
-      if (this.isMainEmail) return this.htmlEntityToEmoji(this.replaceUnicodeWithEmoji(this.assunto)) || '(Sem assunto)'
-      return ''
-    },
-    openByItem(event) {
-      if (this.isOpen) return;
-
-      event.preventDefault();
-      event.stopPropagation();
-
-      this.toggleIsOpen();
-    },
-    returnParams(params) {
-      const defaultParams = {
-        message: this.mensagem,
-      };
-
-      if (!params) return defaultParams;
-
-      const keys = params.instanceKeys.split("|");
-      if (!keys || !keys.length)
-        return {
-          defaultParams,
-          ...params.values,
-        };
-
-      const customParams = { ...params.values };
-      keys.forEach((key) => {
-        if (this[key]) customParams[key] = this[key];
-        else console.warn(`Cant find ${key} on 'this' instance`);
-      });
-
-      return Object.keys(customParams).length ? customParams : defaultParams;
-    }
-  }
-};
-</script>
-
-<style scoped>
-.show-y-top-enter-active,
-.show-y-top-leave-enter {
-  opacity: 1;
-  transform: translateY(0);
-  transition: all 200ms linear;
-}
-
-.show-y-top-enter,
-.show-y-top-leave-to {
-  opacity: 0;
-  transform: translateY(-2%);
-}
-</style>
-
-<style>
-.visibility-hidden {
-  visibility: hidden;
-}
-
-.box-shadow-active {
-  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.25);
-}
-
-.bg-dark-white-2 {
-  background-color: #f7f7f7;
-}
-
-.bg-white {
-  background-color: #FFF;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.email-overlay {
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.email-item {
-  --konecta-gray-3: #515050;
-  --konecta-light: #f8f9fa;
-  --blue-silver-4: #dae0e5;
-  --email-principal: #faa732;
-  --email-outros: #86b7fe;
-  font-family: "Roboto", sans-serif;
-  flex: 1;
-  margin: 0 0 10px 0;
-  color: #222;
-  min-height: 60px;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 10px;
-  border-radius: 5px;
-  transition: all 150ms ease-in-out;
-  max-width: 100%;
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-}
-
-.email-custom-action-buttons {
-  display: flex;
-  gap: 7px;
-  align-items: center;
-  flex-wrap: wrap;
-  max-width: 100%;
-  cursor: default;
-}
-
-.email-custom-action-button {
-  margin-top: 10px;
-  background-color: var(--konecta-light) !important;
-  color: var(--konecta-dark) !important;
-  border: 1px solid var(--blue-silver-4) !important;
-  flex: 1;
-  min-width: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  padding: 5px;
-  overflow: hidden;
-  border-radius: 5px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  transition: all 100ms ease-in-out;
-  max-width: 100%;
-  cursor: pointer
-}
-
-.email-custom-action-button:hover {
-  background-color: #e9ecef !important;
-}
-
-.email-custom-action-button:disabled {
-  background-color: var(--konecta-gray-3) !important;
-  border: 1px solid #25282b !important;
-  cursor: not-allowed !important;
-}
-
-.email-item.outros {
-  border-left: 3px solid var(--email-outros);
-}
-
-.email-author-name {
-  margin: 0 5px;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.email-author.outros {
-  color: var(--email-outros);
-}
-
-.email-author.outros>svg:nth-child(1) {
-  transform: rotate(180deg);
-}
-
-.email-author.principal {
-  color: var(--email-principal);
-}
-
-.email-author.main {
-  font-size: 16.4px;
-}
-
-.email-item.principal {
-  border-left: 3px solid var(--email-principal);
-}
-
-.email-item.info-open {
-  overflow: visible
-}
-
-.email-header {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
-  position: relative;
-  overflow: visible;
-}
-
-.header-container {
-  display: flex;
-  overflow: hidden;
-  position: relative;
-}
-
-.email-header-content {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 250px;
-}
-
-.email-header-infos {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.email-subject {
-  margin: 5px 0 0 0;
-  font-size: 16.4px;
-  cursor: pointer;
-}
-
-.email-date {
-  --width: 245px;
-  font-size: 12.8px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  position: absolute;
-  right: 0;
-  top: 0;
-  min-width: var(--width);
-  width: var(--width);
-  max-width: var(--width);
-  display: flex;
-  justify-content: flex-end;
-  gap: 3px;
-  align-items: center;
-}
-
-.email-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  background-color: #FFF;
-  position: relative;
-  max-width: 100%;
-}
-
-.email-actions {
-  align-self: flex-end;
-  display: flex;
-  border-radius: 10px;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  gap: 3px;
-  padding: 5px 7px;
-  background-color: #dddddd;
-  position: absolute;
-  right: 0;
-  top: 30px;
-  z-index: 1;
-}
-
-.email-actions.main {
-  top: 10px
-}
-
-.email-actions.active {
-  background-color: #dfdfdf;
-}
-
-.email-actions>span {
-  width: 4px;
-  height: 4px;
-  min-width: 4px;
-  min-height: 4px;
-  max-width: 4px;
-  max-height: 4px;
-  background-color: #222;
-  border-radius: 50%;
-}
-
-.email-actions-list {
-  position: absolute;
-  right: 45px;
-  width: 250px;
-  top: 5px;
-  margin: 0;
-  list-style-type: none;
-  padding: 0;
-  border-radius: 5px;
-  z-index: 1;
-}
-
-.email-action {
-  background-color: #dfdfdf;
-  padding: 5px 10px;
-  cursor: pointer;
-  transition: background-color 150ms ease-in-out;
-  font-size: 14.4px;
-  user-select: none;
-}
-
-.email-action:nth-child(1) {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.email-action:last-child {
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.email-action:hover {
-  background-color: #CCC;
-}
-
-.email-html {
-  width: 100%;
-  min-width: 300px;
-  max-width: 100%;
-  border: none;
-  overflow: auto;
-}
-
-.email-raw {
-  width: 100%;
-  max-width: 100%;
-  padding: 15px;
-  font-size: 14.4px;
-  color: #222;
-}
-
-.email-files {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  width: 100%;
-  margin-top: 5px;
-}
-
-.email-header-content,
-.email-header-infos {
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.email-to-from-container {
-  margin-bottom: 5px;
-  max-width: 100%;
-  min-width: 250px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  flex: 1;
-  gap: 5px;
-}
-
-.email-to-btn {
-  padding: 0 5px;
-  font-size: 14.4px;
-  cursor: pointer;
-  color: #666;
-}
-
-.email-to-infos {
-  position: absolute;
-  bottom: -325px;
-  border: 1px solid #CCC;
-  z-index: 2;
-  padding: 10px;
-  background-color: #FFF;
-  max-height: 300px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  width: 300px;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  margin: 0;
-  cursor: default;
-}
-
-.email-info {
-  width: 100%;
-  font-size: 12.8px;
-}
-
-.email-info>span {
-  font-size: 12px;
-  color: gray;
-  margin-right: 3px;
-}
-
-.email-author {
-  display: flex;
-  align-items: center;
-  height: 5px;
-  font-size: 12px;
-  font-weight: bold;
-  transform: translateY(-2px);
-  width: 100%;
-  cursor: pointer;
-}
-
-.email-subject-secondary {
-  margin-top: -5px;
-}
-
-.email-subject-span {
-  font-size: 11.2px;
-  color: gray;
-}
-
-.email-to-svg {
-  font-size: 13.6px;
-}
-
-.email-custom-buttons {
-  display: flex;
-  gap: 7px;
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  z-index: 1;
-  font-size: 12.8px;
-}
-
-.menu-mensagem {
-  cursor: pointer;
-  padding: 1px;
-  opacity: .7;
-  transition: opacity 100ms ease-in-out;
-}
-
-.menu-mensagem:hover,
-.menu-mensagem:focus,
-.menu-mensagem:active {
-  opacity: 1;
-}
-
-.email-error-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 5px;
-  padding: 10px;
-}
-
-.email-error-content p {
-  margin: 0;
-  color: #E74C3C;
-}
-
-.email-error-content button {
-  border: 1px solid #CCC;
-  border-radius: 3px;
-  padding: 5px 10px;
-  background-color: #FFF;
-  cursor: pointer;
-  transition: background-color 150ms ease-in-out;
-}
-
-.email-error-content button:hover {
-  background-color: #EEE;
-}
+<template>
+  <div
+    :class="['email-item box-shadow-active', isOpen ? isOpenClass : `${isClosedClass} cursor-pointer`, showInfos ? 'info-open' : '', origem, customClass]"
+    @click="openByItem($event)">
+    <div v-if="showInfos" class="email-overlay"></div>
+    <div class="email-author" v-if="autor" :class="[origem, isMainEmail ? 'main' : '']" @click.stop="toggleIsOpen"
+      :key="autor">
+      <span :title="`Enviado ${status !== 'C' ? '' : 'com erro'} por: ${autor}`"><fa-icon :icon="['fas', status !== 'C' ? 'reply' : 'times']" :class="[origem]" /></span>
+      <p class="email-author-name" v-text="returnAuthorName" :title="returnAuthorName"></p>
+      <span :title="`E-mail ${origem === 'outros' ? 'recebido' : 'enviado'}`">
+        <fa-icon :icon="['fas', origem === 'outros' ? 'user' : 'headset']" class="email-to-svg" />
+      </span>
+    </div>
+    <div class="email-custom-buttons" v-if="customButtons && customButtons.length" @click.stop>
+      <span v-for="(button, index) in customButtons" :key="button.id || index" v-show="button.use"
+        @click="button.callback ? button.callback(returnParams(button.params)) : $emit(button.emitName, returnParams(button.params))" :class="`${button.customClass || 'menu-mensagem'}`"
+        v-tippy :content="button.tippyContent">
+        <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
+        <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
+      </span>
+    </div>
+    <div class="email-custom-action-buttons" v-if="customActionButtons && customActionButtons.length" @click.stop>
+      <button v-for="(button, index) in customActionButtons" :key="button.id || index" v-show="button.use"
+        @click="button.callback(returnParams(button.params))"
+        :class="`${button.customClass || 'email-custom-action-button'}`" v-tippy :content="button.tippyContent">
+        <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
+        <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
+        <span v-if="button.label" class="email-custom-action-label" v-text="button.label"></span>
+      </button>
+    </div>
+    <div class="email-header" @click.stop="toggleIsOpen">
+      <p class="email-subject" :title="returnMainValue()">
+        {{ returnMainValue() }}
+      </p>
+      <div class="header-container">
+        <div :class="`email-header-content${isOpen ? ' open' : ''}`">
+          <div class="email-header-infos">
+            <template v-if="para && para.length">
+              <div class="email-to-from-container" ref="emailToContainer">
+                <EmailTo v-for="(recipient, index) in paraCopia" :key="`to-${recipient.email}`"
+                  :currentName="formattedToName(recipient.name, index, paraCopia.length)" :email="recipient.email"
+                  :showMail="isOpen" />
+                <div class="email-to-btn" v-show="isOpen" @click.stop="toggleShowInfos()">
+                  <fa-icon :icon="['fas', 'caret-down']" />
+                </div>
+              </div>
+            </template>
+            <div v-if="!isMainEmail && isOpen" class="email-subject-secondary">
+              <span class="email-subject-span"
+                v-text="`Assunto: ${htmlEntityToEmoji(replaceUnicodeWithEmoji(assunto)) || '(Sem assunto)'}`"></span>
+            </div>
+          </div>
+        </div>
+        <span :class="`email-date ${isOpen ? isOpenClass : isClosedClass}`" :title="formattedDate" ref="emailDate"
+          v-show="formattedDate">
+          <fa-icon :icon="['fas', 'calendar']" />
+          {{ formattedDate }}
+        </span>
+      </div>
+      <ul v-if="showInfos" ref="emailToInfos" class="email-to-infos box-shadow" v-clickaway="() => showInfos = false"
+        @click.stop>
+        <li v-for="(info, index) in mailInfos" :key="`info-${index}`" class="email-info">
+          <span v-text="info.label"></span>
+          {{ info.value }}
+        </li>
+      </ul>
+      <span v-if="isOpen" :class="['email-actions box-shadow', { active: actionsOpen }, { main: isMainEmail }]"
+        @click.stop="toggleActions">
+        <span></span>
+        <span></span>
+        <span></span>
+      </span>
+      <ul class="email-actions-list box-shadow" v-if="actionsOpen && isOpen" v-clickaway="closeActions" @click.stop>
+        <li class="email-action" @click.stop="toggleOpenMessage">
+          {{ !openMessage ? 'Visualizar' : 'Esconder' }} texto do e-mail
+        </li>
+      </ul>
+    </div>
+    <div class="email-content" v-show="isOpen" ref="emailIframeParent">
+      <VueLoader v-if="isIframeLoading" />
+      <div v-if="hasError" class="email-error-content">
+        <p>Erro ao carregar o e-mail</p>
+        <button class="box-shadow" @click="handleTryAgain()">Tentar novamente</button>
+      </div>
+      <iframe v-show="!hasError" ref="emailIframe"
+        :class="`email-html ${isIframeLoading ? 'visibility-hidden' : ''}`"></iframe>
+      <span class="email-raw" v-if="openMessage">{{ mensagem }}</span>
+    </div>
+    <div v-if="filteredFiles && filteredFiles.length" class="email-files" v-show="isOpen || isMainEmail">
+      <EmailFile v-for="(anexo, index) in filteredFiles" :key="index" :anexo="anexo" :dominio="dominio" />
+    </div>
+  </div>
+</template>
+
+<script>
+import EmailFile from "./EmailFile.vue";
+import EmailTo from "./EmailTo.vue";
+import { textoLongo } from "@/mixins/formatarTexto";
+import Clickaway from '@/directives/clickaway';
+
+export default {
+  mixins: [textoLongo],
+  directives: {
+    clickaway: Clickaway
+  },
+  components: { EmailFile, EmailTo },
+  props: {
+    dominio: {
+      type: String,
+      required: true
+    },
+    dicionario: {
+      type: Object,
+      required: true
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    from: {
+      type: Array,
+      default: () => []
+    },
+    para: {
+      type: Array,
+      default: () => []
+    },
+    copia: {
+      type: Array,
+      default: () => []
+    },
+    html: {
+      type: String,
+      default: ""
+    },
+    assunto: {
+      type: String,
+      default: ""
+    },
+    dataHora: {
+      type: String,
+      default: ""
+    },
+    mensagem: {
+      type: String,
+      default: ""
+    },
+    anexos: {
+      type: [Array, String],
+      default: () => []
+    },
+    iniciarAberto: {
+      type: Boolean,
+      default: false
+    },
+    dataServer: {
+      type: String,
+      default: ""
+    },
+    isOpenClass: {
+      type: String,
+      default: 'bg-dark-white-2'
+    },
+    isClosedClass: {
+      type: String,
+      default: 'bg-white'
+    },
+    refKey: {
+      type: String,
+    },
+    showRawMessageInsideEmail: {
+      type: Boolean,
+      default: false
+    },
+    origem: {
+      type: String,
+      default: 'outros'
+    },
+    autor: {
+      type: String
+    },
+    isMainEmail: {
+      type: Boolean,
+      default: true
+    },
+    customButtons: {
+      type: Array
+    },
+    customActionButtons: {
+      type: Array
+    },
+    status: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      isOpen: this.iniciarAberto,
+      openMessage: false,
+      actionsOpen: false,
+      showInfos: false,
+      isIframeLoading: true,
+      hasError: false,
+      errorCount: 0
+    };
+  },
+  computed: {
+    paraCopia() {
+      if (!this.copia || !this.copia.length) return this.para && this.para.length ? this.para : []
+      return this.para && this.para.length ? this.para.concat(this.copia) : this.copia
+    },
+    formattedDate() {
+      return this.formataDateHoraDateFns(this.dataHora, this.dataServer, this.dicionario);
+    },
+    mailInfos() {
+      const formatAsString = (arr) => {
+        let str = ''
+        arr.forEach(({ name, email }, index) => {
+          if (!name && !email) str += ''
+          else str += `${name || ''} ${email ? `<${email}>` : ''}${((name || email) && index !== arr.length - 1) ? ', ' : ''}`
+        })
+        return str
+      }
+
+      const infos = [
+        {
+          label: 'De:',
+          value: this.from && this.from.length ? formatAsString(this.from) : '--'
+        },
+        {
+          label: 'Para:',
+          value: this.para && this.para.length ? formatAsString(this.para) : '--'
+        },
+        {
+          label: 'Assunto:',
+          value: this.htmlEntityToEmoji(this.replaceUnicodeWithEmoji(this.assunto)) || '(Sem assunto)'
+        },
+        {
+          label: 'Data:',
+          value: this.formataDataHora(this.dataHora) || '--'
+        },
+      ]
+
+      if (this.copia && this.copia.length) {
+        infos.push({
+          label: this.dicionario.tit_copia,
+          value: formatAsString(this.copia)
+        })
+      }
+
+      return infos
+    },
+    filteredFiles() {
+      if (!this.anexos || !this.anexos.length) return
+
+      return this.anexos.filter(anexo => {
+        return !this.html.includes(anexo.name);
+      })
+    },
+    returnAuthorName() {
+      if (!this.from || !this.from.length) return this.autor || ''
+      const { email, name } = this.from[0]
+      if (!name) return email
+      if (!email) return name
+      if (this.isOpen) return `${name} (${email})`
+      return name
+    },
+    formattedToName() {
+      return (name, index, length) => {
+        let addVirgulaDps = index < length - 1
+        let addVirgulaAntes = index === 1 && length >= 2
+        const text = index === 0 ? `Para: ${name || ''}` : name ? `${addVirgulaAntes ? ', ' : ''}${name}${addVirgulaDps ? ', ' : ''}` : '';
+        return text
+      }
+    }
+  },
+  watch: {
+    isOpen: 'updateIframeContent'
+  },
+  mounted() {
+    this.updateIframeContent();
+    this.adjustMaxWidth()
+
+    if (this.refKey) this.$root.$refs[`${refKey}`] = this
+
+    setTimeout(() => {
+      if (this.isIframeLoading) this.adjustIframeHeight()
+    }, 15000);
+  },
+  methods: {
+    handleTryAgain() {
+      this.isOpen = true
+      this.isIframeLoading = true
+      this.hasError = false
+
+      this.$nextTick(this.updateIframeContent())
+    },
+    gerarMensagemEstilizada(msg) {
+      try {
+        const currentStyles = [
+          { tagAbertura: "<i>", tagFechamento: "</i>", find: /_(.*?)_/g },
+          { tagAbertura: "<b>", tagFechamento: "</b>", find: /\*(.*?)\*/g },
+          { tagAbertura: "<del>", tagFechamento: "</del>", find: /~(.*?)~/g }
+        ]
+
+        const isLetterOrUnderscore = (char) => {
+          return /[a-zA-Z_]/.test(char)
+        }
+
+        const isValidMatch = (message, fullMatch, startIndex) => {
+          const beforeChar = message[startIndex - 1]
+          const afterChar = message[startIndex + fullMatch.length]
+          return (
+            (beforeChar === undefined || !isLetterOrUnderscore(beforeChar)) &&
+            (afterChar === undefined || !isLetterOrUnderscore(afterChar))
+          )
+        }
+
+        let message = msg
+
+        for (const { tagAbertura, tagFechamento, find } of currentStyles) {
+          let match
+          while ((match = find.exec(message)) !== null) {
+            const fullMatch = match[0]
+            const content = match[1]
+            const startIndex = match.index
+
+            if (isValidMatch(message, fullMatch, startIndex)) {
+              const endIndex = startIndex + fullMatch.length
+              const replacedContent = `${tagAbertura}${content}${tagFechamento}`
+              message = message.slice(0, startIndex) + replacedContent + message.slice(endIndex)
+            }
+          }
+        }
+
+        return message
+      } catch (err) {
+        console.error('Erro ao gerar mensagem estilizada: ', err)
+        return msg
+      }
+    },
+    updateIframeContent() {
+      this.$nextTick(() => {
+        if (this.isOpen && this.isIframeLoading) {
+          const iframe = this.$refs.emailIframe;
+          if (!iframe) return
+          const doc = iframe.contentDocument || iframe.contentWindow.document;
+          if (!doc) return
+          let content = this.html
+          if (!/<[a-z][\s\S]*>/i.test(content)) {
+            content = content.replace(/\n/g, '<br>');
+            content = this.gerarMensagemEstilizada(content)
+            content = `<p>${content}</p>`;
+          }
+
+          doc.open();
+          doc.write(content);
+          doc.close();
+
+          const images = doc.getElementsByTagName('img');
+          let imagesLoaded = 0;
+
+          const imageLoadHandler = () => {
+            imagesLoaded++;
+            if (imagesLoaded === images.length) {
+              this.adjustIframeHeight();
+            }
+          };
+
+          if (images.length === 0) {
+            this.adjustIframeHeight();
+          } else {
+            for (let img of images) {
+              img.addEventListener('load', imageLoadHandler);
+              img.addEventListener('error', imageLoadHandler);
+            }
+          }
+        }
+      });
+    },
+    adjustIframeHeight() {
+      this.$nextTick(() => {
+        const iframe = this.$refs.emailIframe;
+        const emailParent = this.$refs.emailIframeParent
+        if (iframe && emailParent) {
+          setTimeout(() => {
+            const doc = iframe.contentDocument || iframe.contentWindow.document;
+            const margin = 20
+            const value = doc.documentElement.offsetHeight + margin
+            if (value === 0 || doc.documentElement.querySelector('body').innerHTML === '') {
+              this.errorCount++
+              if (this.errorCount > 3) {
+                this.hasError = true
+                if (this.isIframeLoading) this.isIframeLoading = false
+                return
+              }
+              this.isIframeLoading = true
+              this.updateIframeContent()
+              return
+            }
+            if (this.hasError || this.errorCount > 0) {
+              this.hasError = false
+              this.errorCount = 0
+            }
+            iframe.style.height = `${value}px`;
+            emailParent.style.minHeight = `${value}px`
+          }, 100)
+        }
+
+        if (this.isIframeLoading) this.isIframeLoading = false
+      });
+    },
+    toggleShowInfos() {
+      this.showInfos = !this.showInfos;
+      if (this.showInfos) {
+        this.$nextTick(() => {
+          this.adjustTopPosition();
+        });
+      }
+    },
+    adjustTopPosition() {
+      const ulElement = this.$refs.emailToInfos;
+      if (!ulElement) return
+      const ulHeight = ulElement.offsetHeight;
+      const maxHeight = 300
+      const finalHeight = ulHeight < maxHeight ? ulHeight : maxHeight
+      ulElement.style.bottom = `-${finalHeight}px`;
+    },
+    toggleIsOpen() {
+      this.isOpen = !this.isOpen;
+      if (!this.isOpen) {
+        this.actionsOpen = false;
+        this.openMessage = false;
+        this.showInfos = false
+      }
+    },
+    adjustMaxWidth() {
+      this.$nextTick(() => {
+        const toContainer = this.$refs.emailToContainer
+        const dateContainer = this.$refs.emailDate
+        if (!toContainer || !dateContainer) return
+        toContainer.style.maxWidth = `calc(100% - ${dateContainer.offsetWidth}px)`
+      })
+    },
+    toggleActions() {
+      this.actionsOpen = !this.actionsOpen;
+    },
+    toggleOpenMessage() {
+      if (this.showRawMessageInsideEmail) {
+        this.openMessage = !this.openMessage;
+      }
+
+      this.$emit('open-message', {
+        dicionario: this.dicionario,
+        from: this.from,
+        para: this.para,
+        html: this.html,
+        assunto: this.assunto,
+        dataHora: this.dataHora,
+        mensagem: this.mensagem,
+        anexos: this.filteredFiles,
+        dataServer: this.dataServer,
+        dominio: this.dominio
+      })
+    },
+    closeActions() {
+      this.actionsOpen = false;
+    },
+    returnMainValue() {
+      if (this.isMainEmail) return this.htmlEntityToEmoji(this.replaceUnicodeWithEmoji(this.assunto)) || '(Sem assunto)'
+      return ''
+    },
+    openByItem(event) {
+      if (this.isOpen) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      this.toggleIsOpen();
+    },
+    returnParams(params) {
+      const defaultParams = {
+        message: this.mensagem,
+      };
+
+      if (!params) return defaultParams;
+
+      const keys = params.instanceKeys.split("|");
+      if (!keys || !keys.length)
+        return {
+          defaultParams,
+          ...params.values,
+        };
+
+      const customParams = { ...params.values };
+      keys.forEach((key) => {
+        if (this[key]) customParams[key] = this[key];
+        else console.warn(`Cant find ${key} on 'this' instance`);
+      });
+
+      return Object.keys(customParams).length ? customParams : defaultParams;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.show-y-top-enter-active,
+.show-y-top-leave-enter {
+  opacity: 1;
+  transform: translateY(0);
+  transition: all 200ms linear;
+}
+
+.show-y-top-enter,
+.show-y-top-leave-to {
+  opacity: 0;
+  transform: translateY(-2%);
+}
+</style>
+
+<style>
+.visibility-hidden {
+  visibility: hidden;
+}
+
+.box-shadow-active {
+  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.25);
+}
+
+.bg-dark-white-2 {
+  background-color: #f7f7f7;
+}
+
+.bg-white {
+  background-color: #FFF;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.email-overlay {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.email-item {
+  --konecta-gray-3: #515050;
+  --konecta-light: #f8f9fa;
+  --blue-silver-4: #dae0e5;
+  --email-principal: #faa732;
+  --email-outros: #86b7fe;
+  font-family: "Roboto", sans-serif;
+  flex: 1;
+  margin: 0 0 10px 0;
+  color: #222;
+  min-height: 60px;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
+  border-radius: 5px;
+  transition: all 150ms ease-in-out;
+  max-width: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.email-custom-action-buttons {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  flex-wrap: wrap;
+  max-width: 100%;
+  cursor: default;
+}
+
+.email-custom-action-button {
+  margin-top: 10px;
+  background-color: var(--konecta-light) !important;
+  color: var(--konecta-dark) !important;
+  border: 1px solid var(--blue-silver-4) !important;
+  flex: 1;
+  min-width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 5px;
+  overflow: hidden;
+  border-radius: 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: all 100ms ease-in-out;
+  max-width: 100%;
+  cursor: pointer
+}
+
+.email-custom-action-button:hover {
+  background-color: #e9ecef !important;
+}
+
+.email-custom-action-button:disabled {
+  background-color: var(--konecta-gray-3) !important;
+  border: 1px solid #25282b !important;
+  cursor: not-allowed !important;
+}
+
+.email-item.outros {
+  border-left: 3px solid var(--email-outros);
+}
+
+.email-author-name {
+  margin: 0 5px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.email-author.outros {
+  color: var(--email-outros);
+}
+
+.email-author.outros>svg:nth-child(1) {
+  transform: rotate(180deg);
+}
+
+.email-author.principal {
+  color: var(--email-principal);
+}
+
+.email-author.main {
+  font-size: 16.4px;
+}
+
+.email-item.principal {
+  border-left: 3px solid var(--email-principal);
+}
+
+.email-item.info-open {
+  overflow: visible
+}
+
+.email-header {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  position: relative;
+  overflow: visible;
+}
+
+.header-container {
+  display: flex;
+  overflow: hidden;
+  position: relative;
+}
+
+.email-header-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 250px;
+}
+
+.email-header-infos {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.email-subject {
+  margin: 5px 0 0 0;
+  font-size: 16.4px;
+  cursor: pointer;
+}
+
+.email-date {
+  --width: 245px;
+  font-size: 12.8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  min-width: var(--width);
+  width: var(--width);
+  max-width: var(--width);
+  display: flex;
+  justify-content: flex-end;
+  gap: 3px;
+  align-items: center;
+}
+
+.email-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  background-color: #FFF;
+  position: relative;
+  max-width: 100%;
+}
+
+.email-actions {
+  align-self: flex-end;
+  display: flex;
+  border-radius: 10px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  padding: 5px 7px;
+  background-color: #dddddd;
+  position: absolute;
+  right: 0;
+  top: 30px;
+  z-index: 1;
+}
+
+.email-actions.main {
+  top: 10px
+}
+
+.email-actions.active {
+  background-color: #dfdfdf;
+}
+
+.email-actions>span {
+  width: 4px;
+  height: 4px;
+  min-width: 4px;
+  min-height: 4px;
+  max-width: 4px;
+  max-height: 4px;
+  background-color: #222;
+  border-radius: 50%;
+}
+
+.email-actions-list {
+  position: absolute;
+  right: 45px;
+  width: 250px;
+  top: 5px;
+  margin: 0;
+  list-style-type: none;
+  padding: 0;
+  border-radius: 5px;
+  z-index: 1;
+}
+
+.email-action {
+  background-color: #dfdfdf;
+  padding: 5px 10px;
+  cursor: pointer;
+  transition: background-color 150ms ease-in-out;
+  font-size: 14.4px;
+  user-select: none;
+}
+
+.email-action:nth-child(1) {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.email-action:last-child {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.email-action:hover {
+  background-color: #CCC;
+}
+
+.email-html {
+  width: 100%;
+  min-width: 300px;
+  max-width: 100%;
+  border: none;
+  overflow: auto;
+}
+
+.email-raw {
+  width: 100%;
+  max-width: 100%;
+  padding: 15px;
+  font-size: 14.4px;
+  color: #222;
+}
+
+.email-files {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: 5px;
+}
+
+.email-header-content,
+.email-header-infos {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.email-to-from-container {
+  margin-bottom: 5px;
+  max-width: 100%;
+  min-width: 250px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  flex: 1;
+  gap: 5px;
+}
+
+.email-to-btn {
+  padding: 0 5px;
+  font-size: 14.4px;
+  cursor: pointer;
+  color: #666;
+}
+
+.email-to-infos {
+  position: absolute;
+  bottom: -325px;
+  border: 1px solid #CCC;
+  z-index: 2;
+  padding: 10px;
+  background-color: #FFF;
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin: 0;
+  cursor: default;
+}
+
+.email-info {
+  width: 100%;
+  font-size: 12.8px;
+}
+
+.email-info>span {
+  font-size: 12px;
+  color: gray;
+  margin-right: 3px;
+}
+
+.email-author {
+  display: flex;
+  align-items: center;
+  height: 5px;
+  font-size: 12px;
+  font-weight: bold;
+  transform: translateY(-2px);
+  width: 100%;
+  cursor: pointer;
+}
+
+.email-subject-secondary {
+  margin-top: -5px;
+}
+
+.email-subject-span {
+  font-size: 11.2px;
+  color: gray;
+}
+
+.email-to-svg {
+  font-size: 13.6px;
+}
+
+.email-custom-buttons {
+  display: flex;
+  gap: 7px;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 1;
+  font-size: 12.8px;
+}
+
+.menu-mensagem {
+  cursor: pointer;
+  padding: 1px;
+  opacity: .7;
+  transition: opacity 100ms ease-in-out;
+}
+
+.menu-mensagem:hover,
+.menu-mensagem:focus,
+.menu-mensagem:active {
+  opacity: 1;
+}
+
+.email-error-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 5px;
+  padding: 10px;
+}
+
+.email-error-content p {
+  margin: 0;
+  color: #E74C3C;
+}
+
+.email-error-content button {
+  border: 1px solid #CCC;
+  border-radius: 3px;
+  padding: 5px 10px;
+  background-color: #FFF;
+  cursor: pointer;
+  transition: background-color 150ms ease-in-out;
+}
+
+.email-error-content button:hover {
+  background-color: #EEE;
+}
 </style>