ilibras-widget 1.5.2 → 1.6.0

package/dist/ilibras-widget.mjs

@@ -1,5 +1,5 @@
 /*!
- * iLibras Widget v1.5.2
+ * iLibras Widget v1.6.0
  * https://github.com/Dimendes-Solucoes/Ilibras_widget
  * Licença MIT
  *
@@ -27,22 +27,22 @@ var CSS = `/**
 }
 
 /* Posicionamento */
-#ilibras-widget-container .ilibras-widget-bottom-right {
+#ilibras-widget-container.ilibras-widget-bottom-right {
   bottom: 30px;
   right: 30px;
 }
 
-#ilibras-widget-container .ilibras-widget-bottom-left {
+#ilibras-widget-container.ilibras-widget-bottom-left {
   bottom: 30px;
   left: 30px;
 }
 
-#ilibras-widget-container .ilibras-widget-top-right {
+#ilibras-widget-container.ilibras-widget-top-right {
   top: 30px;
   right: 30px;
 }
 
-#ilibras-widget-container .ilibras-widget-top-left {
+#ilibras-widget-container.ilibras-widget-top-left {
   top: 30px;
   left: 30px;
 }
@@ -75,7 +75,7 @@ var CSS = `/**
   height: 64px;
 }
 
-.ilibras-widget-button:hover,
+#ilibras-widget-container .ilibras-widget-button:hover,
 #ilibras-widget-container .ilibras-widget-button:active {
   transform: none;
   box-shadow: none;
@@ -105,7 +105,8 @@ var CSS = `/**
 }
 
 @keyframes ilibras-pulse {
-  0%, 100% {
+  0%,
+  100% {
     transform: scale(1);
   }
   50% {
@@ -138,23 +139,23 @@ var CSS = `/**
 }
 
 /* Posicionamento do modal baseado na posição do botão */
-.ilibras-widget-bottom-right .ilibras-widget-modal,
-#ilibras-widget-container .ilibras-widget-bottom-left .ilibras-widget-modal {
+#ilibras-widget-container.ilibras-widget-bottom-right .ilibras-widget-modal,
+#ilibras-widget-container.ilibras-widget-bottom-left .ilibras-widget-modal {
   bottom: 105px;
 }
 
-.ilibras-widget-top-right .ilibras-widget-modal,
-#ilibras-widget-container .ilibras-widget-top-left .ilibras-widget-modal {
+#ilibras-widget-container.ilibras-widget-top-right .ilibras-widget-modal,
+#ilibras-widget-container.ilibras-widget-top-left .ilibras-widget-modal {
   top: 105px;
 }
 
-.ilibras-widget-bottom-right .ilibras-widget-modal,
-#ilibras-widget-container .ilibras-widget-top-right .ilibras-widget-modal {
+#ilibras-widget-container.ilibras-widget-bottom-right .ilibras-widget-modal,
+#ilibras-widget-container.ilibras-widget-top-right .ilibras-widget-modal {
   right: 0;
 }
 
-.ilibras-widget-bottom-left .ilibras-widget-modal,
-#ilibras-widget-container .ilibras-widget-top-left .ilibras-widget-modal {
+#ilibras-widget-container.ilibras-widget-bottom-left .ilibras-widget-modal,
+#ilibras-widget-container.ilibras-widget-top-left .ilibras-widget-modal {
   left: 0;
 }
 
@@ -248,7 +249,7 @@ var CSS = `/**
   padding-left: 4px;
 }
 
-.ilibras-widget-form-group input[type="text"],
+#ilibras-widget-container .ilibras-widget-form-group input[type="text"],
 #ilibras-widget-container .ilibras-widget-form-group input[type="tel"] {
   background: #ffffff;
   border: 1px solid rgba(20,30,45,0.06);
@@ -257,7 +258,7 @@ var CSS = `/**
   border-radius: 8px;
 }
 
-.ilibras-widget-form-group input[type="text"]:focus,
+#ilibras-widget-container .ilibras-widget-form-group input[type="text"]:focus,
 #ilibras-widget-container .ilibras-widget-form-group input[type="tel"]:focus {
   background: white;
   border-color: #357ABD;
@@ -265,7 +266,7 @@ var CSS = `/**
   outline: none;
 }
 
-.ilibras-widget-form-group input[type="text"]::placeholder,
+#ilibras-widget-container .ilibras-widget-form-group input[type="text"]::placeholder,
 #ilibras-widget-container .ilibras-widget-form-group input[type="tel"]::placeholder {
   color: #6c757d;
 }
@@ -358,6 +359,42 @@ var CSS = `/**
   text-align: center;
 }
 
+/* Aviso de saída para o iLibras: toma o lugar do formulário até a pessoa
+   confirmar ou voltar. O atributo hidden precisa de regra própria nos dois —
+   o display: flex de cada um venceria o atributo, e os dois apareceriam
+   juntos. (Sem crase nos comentários deste arquivo: ele é embutido num
+   template literal do JS, e uma crase aqui muda a forma do build inteiro.) */
+#ilibras-widget-container .ilibras-widget-form[hidden],
+#ilibras-widget-container .ilibras-widget-confirmacao[hidden] {
+  display: none !important;
+}
+
+#ilibras-widget-container .ilibras-widget-confirmacao {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+#ilibras-widget-container .ilibras-widget-confirmacao-titulo {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: #073657;
+}
+
+#ilibras-widget-container .ilibras-widget-confirmacao-texto {
+  margin: 0 0 6px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #495057;
+}
+
+/* "Voltar" tem o visual do botão de agendar, sem a margem que o cola à dica. */
+#ilibras-widget-container .ilibras-widget-confirmacao .ilibras-widget-agendar {
+  margin-top: 0;
+}
+
 /* Responsividade */
 @media (max-width: 480px) {
   #ilibras-widget-container .ilibras-widget-modal {
@@ -365,15 +402,15 @@ var CSS = `/**
     max-width: 100%;
   }
 
-  .ilibras-widget-bottom-right,
-  #ilibras-widget-container .ilibras-widget-bottom-left {
+  #ilibras-widget-container.ilibras-widget-bottom-right,
+  #ilibras-widget-container.ilibras-widget-bottom-left {
     bottom: 20px;
     left: 20px !important;
     right: 20px !important;
   }
 
-  .ilibras-widget-top-right,
-  #ilibras-widget-container .ilibras-widget-top-left {
+  #ilibras-widget-container.ilibras-widget-top-right,
+  #ilibras-widget-container.ilibras-widget-top-left {
     top: 20px;
     left: 20px !important;
     right: 20px !important;
@@ -407,8 +444,8 @@ var CSS = `/**
   }
 }
 
-.ilibras-widget-button:focus-visible,
-.ilibras-widget-close:focus-visible,
+#ilibras-widget-container .ilibras-widget-button:focus-visible,
+#ilibras-widget-container .ilibras-widget-close:focus-visible,
 #ilibras-widget-container .ilibras-widget-submit:focus-visible {
   outline: 3px solid rgba(53,122,189,0.18);
   outline-offset: 3px;
@@ -433,8 +470,8 @@ var CSS = `/**
 /* Estados de erro: ver o bloco de acessibilidade no fim do arquivo. */
 
 /* Accessibilidade */
-.ilibras-widget-button:focus-visible,
-.ilibras-widget-close:focus-visible,
+#ilibras-widget-container .ilibras-widget-button:focus-visible,
+#ilibras-widget-container .ilibras-widget-close:focus-visible,
 #ilibras-widget-container .ilibras-widget-submit:focus-visible {
   outline: 3px solid #4A90E2;
   outline-offset: 2px;
@@ -459,14 +496,14 @@ var CSS = `/**
     color: #b0b0b0;
   }
 
-  .ilibras-widget-form-group input[type="text"],
+  #ilibras-widget-container .ilibras-widget-form-group input[type="text"],
   #ilibras-widget-container .ilibras-widget-form-group input[type="tel"] {
     background: #363636;
     border-color: #4a4a4a;
     color: #e0e0e0;
   }
 
-  .ilibras-widget-form-group input[type="text"]::placeholder,
+  #ilibras-widget-container .ilibras-widget-form-group input[type="text"]::placeholder,
   #ilibras-widget-container .ilibras-widget-form-group input[type="tel"]::placeholder {
     color: #6c6c6c;
   }
@@ -606,20 +643,22 @@ var CSS = `/**
   font-weight: 600;
 }
 
+/* Fora do formulário desde a v1.6.0, então a distância vem daqui e não do gap. */
 #ilibras-widget-container .ilibras-widget-status {
   font-size: 13px;
   color: #495057;
-  margin: 0;
+  margin: 14px 0 0;
   min-height: 1em;
 }
 
 /* Foco visível em tudo que recebe foco, inclusive campos — o :focus original
    trocava a sombra, que some em alto contraste. */
-.ilibras-widget-button:focus-visible,
-.ilibras-widget-close:focus-visible,
-.ilibras-widget-submit:focus-visible,
-.ilibras-widget-form-group input:focus-visible,
-.ilibras-widget-checkbox-label input:focus-visible,
+#ilibras-widget-container .ilibras-widget-button:focus-visible,
+#ilibras-widget-container .ilibras-widget-close:focus-visible,
+#ilibras-widget-container .ilibras-widget-submit:focus-visible,
+#ilibras-widget-container .ilibras-widget-agendar:focus-visible,
+#ilibras-widget-container .ilibras-widget-form-group input:focus-visible,
+#ilibras-widget-container .ilibras-widget-checkbox-label input:focus-visible,
 #ilibras-widget-container .ilibras-widget-fallback a:focus-visible {
   outline: 3px solid #1f4f7a;
   outline-offset: 2px;
@@ -628,16 +667,17 @@ var CSS = `/**
 /* Windows em alto contraste remove cor de fundo e borda sutil: sem isto o
    campo e o botão ficam sem contorno. */
 @media (forced-colors: active) {
-  .ilibras-widget-modal,
-  .ilibras-widget-form-group input,
-  .ilibras-widget-submit,
+  #ilibras-widget-container .ilibras-widget-modal,
+  #ilibras-widget-container .ilibras-widget-form-group input,
+  #ilibras-widget-container .ilibras-widget-submit,
   #ilibras-widget-container .ilibras-widget-aviso {
     border: 1px solid CanvasText;
   }
 
-  .ilibras-widget-button:focus-visible,
-  .ilibras-widget-close:focus-visible,
-  .ilibras-widget-submit:focus-visible,
+  #ilibras-widget-container .ilibras-widget-button:focus-visible,
+  #ilibras-widget-container .ilibras-widget-close:focus-visible,
+  #ilibras-widget-container .ilibras-widget-submit:focus-visible,
+  #ilibras-widget-container .ilibras-widget-agendar:focus-visible,
   #ilibras-widget-container .ilibras-widget-form-group input:focus-visible {
     outline: 3px solid Highlight;
   }
@@ -647,23 +687,23 @@ var CSS = `/**
    das pessoas com sensibilidade vestibular, isso causa mal-estar. */
 @media (prefers-reduced-motion: reduce) {
   #ilibras-widget-container,
-  .ilibras-widget-modal,
-  .ilibras-widget-submit,
-  .ilibras-widget-close,
+  #ilibras-widget-container .ilibras-widget-modal,
+  #ilibras-widget-container .ilibras-widget-submit,
+  #ilibras-widget-container .ilibras-widget-close,
   #ilibras-widget-container .ilibras-widget-badge {
     animation: none !important;
     transition: none !important;
   }
 
-  .ilibras-widget-submit:hover,
+  #ilibras-widget-container .ilibras-widget-submit:hover,
   #ilibras-widget-container .ilibras-widget-close:hover {
     transform: none;
   }
 }
 
 @media (prefers-color-scheme: dark) {
-  .ilibras-widget-legenda,
-  .ilibras-widget-dica,
+  #ilibras-widget-container .ilibras-widget-legenda,
+  #ilibras-widget-container .ilibras-widget-dica,
   #ilibras-widget-container .ilibras-widget-status {
     color: #c9c9c9;
   }
@@ -691,10 +731,15 @@ var CSS = `/**
     color: #9ecbff;
   }
 
-  #ilibras-widget-container .ilibras-widget-title {
+  #ilibras-widget-container .ilibras-widget-title,
+  #ilibras-widget-container .ilibras-widget-confirmacao-titulo {
     color: #e6f0f8;
   }
 
+  #ilibras-widget-container .ilibras-widget-confirmacao-texto {
+    color: #c9c9c9;
+  }
+
   #ilibras-widget-container .ilibras-widget-header {
     background: #1e1e1e;
     border-left-color: #333;
@@ -722,6 +767,10 @@ var defaultConfig = {
   // uma agenda que ninguém cobre é pior do que não ter o botão.
   agendamento: true,
   scheduleButtonText: "Agendar uma conversa",
+  // Avisa que a pessoa vai sair do site para o iLibras e espera a confirmação
+  // antes de criar o atendimento. Sair do site em que se estava, para uma aba
+  // nova, sem saber antes, desorienta — sobretudo quem usa leitor de tela.
+  confirmarRedirecionamento: true,
   token: "",
   zIndex: 9999,
   apiUrl: "https://sistema.ilibras.com.br/api/public/widget/cadastrar",
@@ -752,6 +801,7 @@ var ILibrasWidget = class {
     this.enviando = false;
     this.abertoEm = null;
     this.focoAnterior = null;
+    this.modoPendente = null;
     this.init();
   }
   init() {
@@ -854,10 +904,30 @@ var ILibrasWidget = class {
             <span class="ilibras-widget-dica ilibras-widget-dica-agendar" id="ilibras-widget-agendar-dica">
               Escolha data e horário em vez de esperar na fila.
             </span>` : ""}
-
-            <!-- Estado do envio, anunciado sem roubar o foco de quem digita. -->
-            <p class="ilibras-widget-status" id="ilibras-widget-status" role="status" aria-live="polite"></p>
           </form>
+
+          <!-- Aviso de saída do site. Ocupa o lugar do formulário em vez de
+               abrir uma janela por cima: o diálogo já é modal, e um segundo
+               diálogo empilhado confunde quem navega por leitor de tela. -->
+          <div id="ilibras-widget-confirmacao" class="ilibras-widget-confirmacao" role="alertdialog"
+               aria-labelledby="ilibras-widget-confirmacao-titulo"
+               aria-describedby="ilibras-widget-confirmacao-texto" hidden>
+            <h3 class="ilibras-widget-confirmacao-titulo" id="ilibras-widget-confirmacao-titulo">
+              Você será redirecionado para o iLibras
+            </h3>
+            <p class="ilibras-widget-confirmacao-texto" id="ilibras-widget-confirmacao-texto"></p>
+            <button type="button" id="ilibras-widget-confirmar" class="ilibras-widget-submit">
+              Continuar para o iLibras
+            </button>
+            <button type="button" id="ilibras-widget-voltar" class="ilibras-widget-agendar">
+              Voltar
+            </button>
+          </div>
+
+          <!-- Estado do envio, anunciado sem roubar o foco de quem digita. Fica
+               fora do formulário: escondido junto com ele durante o aviso de
+               saída, o leitor de tela deixaria de anunciar o que acontece. -->
+          <p class="ilibras-widget-status" id="ilibras-widget-status" role="status" aria-live="polite"></p>
         </div>
       </div>
     `;
@@ -870,6 +940,10 @@ var ILibrasWidget = class {
     this.agendar = container.querySelector("#ilibras-widget-agendar");
     this.aviso = container.querySelector("#ilibras-widget-aviso");
     this.status = container.querySelector("#ilibras-widget-status");
+    this.confirmacao = container.querySelector("#ilibras-widget-confirmacao");
+    this.confirmacaoTexto = container.querySelector("#ilibras-widget-confirmacao-texto");
+    this.confirmar = container.querySelector("#ilibras-widget-confirmar");
+    this.voltar = container.querySelector("#ilibras-widget-voltar");
   }
   escapar(texto) {
     const div = document.createElement("div");
@@ -882,6 +956,10 @@ var ILibrasWidget = class {
     this.modal.addEventListener("keydown", (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
+        if (!this.confirmacao.hidden) {
+          if (!this.enviando) this.cancelarConfirmacao();
+          return;
+        }
         this.closeWidget();
         return;
       }
@@ -897,6 +975,8 @@ var ILibrasWidget = class {
     if (this.agendar) {
       this.agendar.addEventListener("click", (e) => this.handleSubmit(e, "agendamento"));
     }
+    this.confirmar.addEventListener("click", () => this.confirmarRedirecionamento());
+    this.voltar.addEventListener("click", () => this.cancelarConfirmacao());
   }
   prenderFoco(evento) {
     const focaveis = Array.from(this.modal.querySelectorAll(FOCAVEIS)).filter((el) => el.offsetParent !== null || el === document.activeElement);
@@ -926,6 +1006,7 @@ var ILibrasWidget = class {
     this.container.querySelector("#ilibras-name").focus();
   }
   closeWidget() {
+    this.mostrarFormulario();
     this.modal.classList.remove("ilibras-widget-modal-open");
     this.botao.classList.remove("ilibras-widget-button-open");
     this.botao.setAttribute("aria-expanded", "false");
@@ -1093,6 +1174,85 @@ var ILibrasWidget = class {
       invalido.focus();
       return;
     }
+    if (this.config.confirmarRedirecionamento) {
+      this.pedirConfirmacao(modo);
+      return;
+    }
+    await this.criarAtendimento(modo);
+  }
+  // ─── Aviso de saída ─────────────────────────────────────────────────────
+  /**
+   * Troca o formulário pelo aviso de que a pessoa vai para o iLibras. Nada é
+   * enviado ainda: o atendimento só nasce no "Continuar".
+   */
+  pedirConfirmacao(modo) {
+    this.modoPendente = modo;
+    this.confirmacaoTexto.textContent = modo === "agendamento" ? "O agendamento é feito no site do iLibras, que abre em uma nova aba. Lá você escolhe o dia e o horário da conversa." : "O atendimento em Libras acontece no site do iLibras, que abre em uma nova aba. Lá você entra na fila e aguarda um intérprete.";
+    this.confirmar.textContent = "Continuar para o iLibras";
+    this.form.hidden = true;
+    this.confirmacao.hidden = false;
+    this.anunciar("");
+    this.confirmar.focus();
+  }
+  /** "Voltar": o formulário reaparece como estava, com o nome digitado. */
+  cancelarConfirmacao() {
+    if (this.enviando) return;
+    const modo = this.modoPendente;
+    this.mostrarFormulario();
+    const origem = modo === "agendamento" && this.agendar ? this.agendar : this.submit;
+    origem.focus();
+  }
+  mostrarFormulario() {
+    this.modoPendente = null;
+    this.confirmacao.hidden = true;
+    this.form.hidden = false;
+  }
+  async confirmarRedirecionamento() {
+    if (this.enviando || !this.modoPendente) return;
+    const aba = this.reservarAba();
+    await this.criarAtendimento(this.modoPendente, aba);
+  }
+  /**
+   * Abre uma aba em branco para receber o iLibras assim que o atendimento
+   * existir. Devolve null quando o navegador barra — aí vale o caminho antigo.
+   */
+  reservarAba() {
+    let aba = null;
+    try {
+      aba = window.open("", "_blank");
+    } catch (e) {
+      aba = null;
+    }
+    if (!aba) return null;
+    aba.opener = null;
+    try {
+      const doc = aba.document;
+      doc.title = "Abrindo o iLibras…";
+      doc.documentElement.lang = "pt-BR";
+      doc.body.style.cssText = "font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;padding:32px;color:#073657";
+      doc.body.textContent = "Abrindo o iLibras…";
+    } catch (e) {
+    }
+    return aba;
+  }
+  /**
+   * Leva a pessoa ao endereço devolvido pelo iLibras: na aba reservada quando
+   * ela existe, numa aba nova quando não, e na atual como último recurso.
+   */
+  irPara(destino, abaReservada) {
+    if (abaReservada && !abaReservada.closed) {
+      abaReservada.location.href = destino;
+      return;
+    }
+    const aba = window.open(destino, "_blank");
+    if (aba) {
+      aba.opener = null;
+    } else {
+      window.location.assign(destino);
+    }
+  }
+  // ─── Criação do atendimento ─────────────────────────────────────────────
+  async criarAtendimento(modo, abaReservada = null) {
     const v = this.valores();
     const corpo = new FormData();
     corpo.append("nome", v.nome);
@@ -1105,15 +1265,17 @@ var ILibrasWidget = class {
       const destino = resultado.link_fila || resultado.link || resultado.url || resultado.redirect;
       if (!destino) throw new FalhaDeServico("resposta_inesperada");
       this.anunciar(modo === "agendamento" ? "Cadastro feito. Abrindo o calendário para escolher data e horário." : "Atendimento criado. Abrindo a sala de atendimento.");
-      const aba = window.open(destino, "_blank");
-      if (aba) {
-        aba.opener = null;
-      } else {
-        window.location.assign(destino);
-      }
+      this.irPara(destino, abaReservada);
       this.form.reset();
       this.closeWidget();
     } catch (erro) {
+      if (abaReservada && !abaReservada.closed) {
+        try {
+          abaReservada.close();
+        } catch (e) {
+        }
+      }
+      this.mostrarFormulario();
       this.tratarFalha(erro);
     } finally {
       this.travarEnvio(false, modo);
@@ -1121,14 +1283,25 @@ var ILibrasWidget = class {
   }
   travarEnvio(travado, modo = "fila") {
     this.enviando = travado;
-    for (const botao of [this.submit, this.agendar]) {
+    for (const botao of [this.submit, this.agendar, this.confirmar, this.voltar]) {
       if (botao) botao.disabled = travado;
     }
-    const usouAgendar = modo === "agendamento" && this.agendar;
-    const ativo = usouAgendar ? this.agendar : this.submit;
-    const rotulo = usouAgendar ? this.config.scheduleButtonText : this.config.buttonText;
+    let ativo;
+    let rotulo;
+    if (!this.confirmacao.hidden) {
+      ativo = this.confirmar;
+      rotulo = "Continuar para o iLibras";
+    } else {
+      const usouAgendar = modo === "agendamento" && this.agendar;
+      ativo = usouAgendar ? this.agendar : this.submit;
+      rotulo = usouAgendar ? this.config.scheduleButtonText : this.config.buttonText;
+    }
     ativo.setAttribute("aria-busy", travado ? "true" : "false");
     ativo.textContent = travado ? "Enviando..." : rotulo;
+    if (!travado) {
+      this.confirmar.setAttribute("aria-busy", "false");
+      this.confirmar.textContent = "Continuar para o iLibras";
+    }
     if (travado) this.anunciar("Enviando seus dados. Aguarde.");
   }
   /**

package/index.d.ts

@@ -42,6 +42,15 @@ export interface ILibrasConfig {
     /** Texto do botão de agendamento. Padrão: `'Agendar uma conversa'`. */
     scheduleButtonText?: string;
 
+    /**
+     * Avisa que a pessoa vai para o site do iLibras, numa aba nova, e espera a
+     * confirmação antes de criar o atendimento. Padrão: `true`.
+     *
+     * Com `false`, o widget volta ao comportamento anterior à v1.6.0: cria o
+     * atendimento e abre o iLibras direto do botão.
+     */
+    confirmarRedirecionamento?: boolean;
+
     /** Empilhamento. Padrão: `9999`. */
     zIndex?: number;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ilibras-widget",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "Widget de acessibilidade em Libras: formulário embarcável que leva a pessoa surda ao atendimento com intérprete, ao vivo ou agendado",
   "type": "module",
   "main": "./dist/ilibras-widget.cjs",