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

Biblioteca de Web Components baseado no GovBR-DS

if (!window.elementsToListen && !window.eventsToListen) {
  const elementsToListen = document.querySelectorAll('br-modal')

  const eventsToListen = ['click', 'brScrimOpen', 'brScrimClose']

  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 }),
        })
      })
    })
  })
}

document.getElementById('openScrimDisableClick').addEventListener('click', () => {
  document.getElementById('disableClickScrim').open()
})

document.getElementById('closeScrimModal').addEventListener('click', () => {
  console.log('Fechar a scrim ao clicar')
  document.getElementById('disableClickScrim').close()
})

const scrimModal = document.getElementById('scrim-modal')
const disableClickScrim = document.getElementById('disableClickScrim')

// Modal com Scrim Nativo - também auto-close
scrimModal.addEventListener('brModalClose', () => {
  console.log("Modal scrim nativo: evento 'brModalClose' emitido - modal fecha sozinha")
  // Fechar o scrim também quando a modal fechar
  disableClickScrim.close()
})

// Aguardar a modal estar completamente carregada para acessar o shadow DOM
setTimeout(() => {
  // Acessar o botão de fechar dentro do shadow DOM da modal
  const closeButton = scrimModal.shadowRoot?.querySelector('br-button.close')
  if (closeButton) {
    closeButton.addEventListener('click', () => {
      console.log('Modal scrim nativo: Botão X (fechar) clicado')
      scrimModal.show = false
      disableClickScrim.close()
    })
  } else {
    console.warn('Botão de fechar não encontrado no shadow DOM da modal')
  }
}, 100)

// Botões da modal com scrim nativo
document.getElementById('closeScrimBackground').addEventListener('click', () => {
  console.log('Modal scrim nativo: Fechar clicado')
  scrimModal.show = false
  disableClickScrim.close()
})

document.getElementById('scrim-save-btn').addEventListener('click', () => {
  const formData = {
    input: document.getElementById('scrim-input').value,
    select: document.getElementById('scrim-select').value,
    checkbox: document.getElementById('scrim-checkbox').checked,
  }
  console.log('Modal scrim nativo: Salvar clicado', formData)
  scrimModal.show = false
  disableClickScrim.close()
})