@govbr-ds/webcomponents/dist/collection/pages/components/message/index.js

Biblioteca de Web Components baseado no GovBR-DS

if (!window.elementsToListen && !window.eventsToListen) {
  const elementsToListen = document.querySelectorAll('br-message')
  const eventsToListen = ['brDidClose']
  window.elementsToListen = true

  elementsToListen.forEach((domElement) => {
    eventsToListen.forEach((event) => {
      domElement.addEventListener(event, function (event) {
        console.log({
          Evento: event.type,
          Elemento: domElement.outerHTML,
          ...(event.detail && { Detail: event.detail }),
          ...(event.data && { Data: event.data }),
        })
      })
    })
  })
}

// TODO: 1 - O utilitário do GovBR foi utilizado na construção do componente Message, que não é um componente de feedback.
// No entanto, o GovBR utilizou esse utilitário para construir o componente, e o mesmo foi reaproveitado na criação do componente de mensagem.
// Isso gerou um problema na implementação do Web Component Message, pois o utilitário adiciona um espaçamento no final do componente,
// o que não é desejado para a exibição correta da mensagem.

// TODO: 2 - Corrigir utilizando o acesso via shadowRoot.
// No entanto, mesmo acessando o elemento através do shadowRoot, o ajuste não foi aplicado corretamente.
// Há algum problema na aplicação do CSS dentro do shadowRoot que precisa ser investigado.

// 	// JAVASCRIPT IMPLEMENTADO PARA A CORREÇÃO
// 	document.addEventListener('DOMContentLoaded', function () {
// 	  console.log('DOM fully loaded and parsed')
// 	  const message = document.querySelectorAll('br-message')
// 	  console.log('Message:', message)

// 	  message.forEach((element) => {
// 		console.log('Element:', element)
// 		console.log(element.classList.add('mb-0'))
// 		const elementHtml = element.shadowRoot
// 		console.log('ShadowRoot:', elementHtml)
// 		const message = elementHtml.querySelector('.br-message')
// 		console.log('Message:', message)
// 		// add margin bottom 0
// 		message.classList.add('mb-0')
// 	  })
// 	})

// TODO: 3 - Demonstrar a solução implementada diretamente no componente e os exemplos ajustados