@govbr-ds/webcomponents 2.0.0-next.4 → 2.0.0-next.40

package/dist/collection/pages/components/input/index.js

@@ -0,0 +1,27 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-input')
+  const eventsToListen = ['click', 'valueChange']
+  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 }),
+        })
+      })
+    })
+  })
+
+  function validateForm() {
+    const input = document.querySelector('#pattern')
+    if (!input.validity.valid) {
+      alert('Por favor, insira um código de país válido com três letras.')
+      return false // Impede o envio do formulário
+    }
+    return true // Permite o envio do formulário
+  }
+}

package/dist/collection/pages/components/item/index.js

@@ -0,0 +1,18 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-item')
+  const eventsToListen = ['click', 'checkedChange']
+  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 }),
+        })
+      })
+    })
+  })
+}

package/dist/collection/pages/components/list/index.js

@@ -0,0 +1,19 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-list')
+
+  const eventsToListen = ['click']
+
+  elementsToListen.forEach((domElement) => {
+    eventsToListen.forEach((event) => {
+      domElement.addEventListener(event, function (event) {
+        console.log({
+          Elemento: domElement,
+          Evento: event,
+          Tipo: event.type,
+          'Detail(Custom Events)': event.detail,
+          'Data(Native Events)': event.data,
+        })
+      })
+    })
+  })
+}

package/dist/collection/pages/components/message/index.js

@@ -0,0 +1,47 @@
+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

package/dist/collection/pages/components/radio/index.js

@@ -0,0 +1,19 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-radio')
+  const eventsToListen = ['click', 'keydown', 'brDidChange']
+  window.elementsToListen = true
+
+  elementsToListen.forEach((domElement) => {
+    eventsToListen.forEach((event) => {
+      domElement.addEventListener(event, function (event) {
+        console.log({
+          event,
+          Evento: event.type,
+          Elemento: domElement.outerHTML,
+          ...(event.detail && { Detail: event.detail }),
+          ...(event.data && { Data: event.data }),
+        })
+      })
+    })
+  })
+}

package/dist/collection/pages/components/scrim/index.js

@@ -0,0 +1,113 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-scrim')
+
+  const eventsToListen = ['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 }),
+        })
+      })
+    })
+  })
+}
+
+const scrimBlock = document.getElementById('myScrim')
+document.getElementById('openScrimBlock').addEventListener('click', () => {
+  scrimBlock.open()
+})
+document.getElementById('closeScrimBlock').addEventListener('click', () => {
+  scrimBlock.close()
+})
+
+const scrimClose = document.getElementById('myScrim1')
+document.getElementById('openScrimClose').addEventListener('click', () => {
+  scrimClose.open()
+})
+document.getElementById('closeScrim').addEventListener('click', () => {
+  scrimClose.close()
+})
+
+// document.getElementById('openScrimBackground').addEventListener('click', () => {
+//   document.getElementById('backgroundScrim').open()
+// })
+document.getElementById('closeScrimBackground').addEventListener('click', () => {
+  document.getElementById('backgroundScrim').close()
+})
+
+document.getElementById('openScrimOpacity').addEventListener('click', () => {
+  document.getElementById('opacityScrim').open()
+})
+document.getElementById('closeScrimOpacity').addEventListener('click', () => {
+  document.getElementById('opacityScrim').close()
+})
+
+document.getElementById('openScrimDisableClick').addEventListener('click', () => {
+  document.getElementById('disableClickScrim').open()
+})
+document.getElementById('closeScrimDisableClick').addEventListener('click', () => {
+  document.getElementById('disableClickScrim').close()
+})
+
+// Scripts para controlar a abertura e fechamento de position-content
+document.getElementById('openScrimTop').addEventListener('click', () => {
+  document.getElementById('topScrim').open()
+})
+document.getElementById('closeScrimTop').addEventListener('click', () => {
+  document.getElementById('topScrim').close()
+})
+
+document.getElementById('openScrimRight').addEventListener('click', () => {
+  document.getElementById('rightScrim').open()
+})
+document.getElementById('closeScrimRight').addEventListener('click', () => {
+  document.getElementById('rightScrim').close()
+})
+
+document.getElementById('openScrimBottom').addEventListener('click', () => {
+  document.getElementById('bottomScrim').open()
+})
+document.getElementById('closeScrimBottom').addEventListener('click', () => {
+  document.getElementById('bottomScrim').close()
+})
+
+document.getElementById('openScrimLeft').addEventListener('click', () => {
+  document.getElementById('leftScrim').open()
+})
+document.getElementById('closeScrimLeft').addEventListener('click', () => {
+  document.getElementById('leftScrim').close()
+})
+
+// Scripts para controlar a abertura e fechamento de display-mode
+document.getElementById('openScrimFullscreen').addEventListener('click', () => {
+  document.getElementById('fullscreenScrim').open()
+})
+document.getElementById('closeScrimFullscreen').addEventListener('click', () => {
+  document.getElementById('fullscreenScrim').close()
+})
+
+document.getElementById('openScrimParent').addEventListener('click', () => {
+  document.getElementById('parentScrim').open()
+})
+document.getElementById('closeScrimParent').addEventListener('click', () => {
+  document.getElementById('parentScrim').close()
+})
+
+document.getElementById('openScrimParentTop').addEventListener('click', () => {
+  document.getElementById('parentTopScrim').open()
+})
+document.getElementById('closeScrimParentTop').addEventListener('click', () => {
+  document.getElementById('parentTopScrim').close()
+})
+
+document.getElementById('openScrimParentBg').addEventListener('click', () => {
+  document.getElementById('parentBgScrim').open()
+})
+document.getElementById('closeScrimParentBg').addEventListener('click', () => {
+  document.getElementById('parentBgScrim').close()
+})

package/dist/collection/pages/components/select/index.js

@@ -0,0 +1,36 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-select')
+
+  const eventsToListen = ['click']
+
+  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 }),
+        })
+      })
+    })
+  })
+
+  // Testa a passagem de um array de objetos para a propriedade `options` no <br-select>
+  // Array de opções
+  const selectOptions = [
+    { label: 'Opção 4', value: '4', selected: false },
+    { label: 'Opção 5', value: '5', selected: true },
+    { label: 'Opção 6', value: '6', selected: false },
+  ]
+
+  // Seleciona o elemento <br-select> com o ID "select-with-array-object"
+  const selectElement = document.querySelector('br-select#select-with-array-object')
+
+  if (selectElement !== null) {
+    // Passa o array diretamente para a propriedade `options`
+    selectElement.options = selectOptions
+  } else {
+    console.error('Elemento <br-select> com ID "select-with-array-object" não encontrado.')
+  }
+}

package/dist/collection/pages/components/step/index.js

@@ -0,0 +1,33 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-step')
+  const linearStep = document.getElementById('linear')
+  const Buttonelement = document.getElementById('next')
+  const prev = document.getElementById('prev')
+
+  const eventsToListen = ['click']
+
+  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 }),
+        // })
+      })
+    })
+  })
+
+  Buttonelement.addEventListener('click', async function (event) {
+    await linearStep.ProceedToNextStep()
+    event.stopPropagation()
+  })
+
+  prev.addEventListener('click', async function (event) {
+    await linearStep.BackToPreviousStep()
+    await event.stopPropagation()
+  })
+
+  // window.elementsToListen = true
+}

package/dist/collection/pages/components/switch/index.js

@@ -0,0 +1,18 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-switch')
+  const eventsToListen = ['click', 'brDidSwitchToggle']
+  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 }),
+        })
+      })
+    })
+  })
+}

package/dist/collection/pages/components/tab/index.js

@@ -0,0 +1,18 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-tab')
+
+  const eventsToListen = ['click']
+
+  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 }),
+        })
+      })
+    })
+  })
+}

package/dist/collection/pages/components/table/index.js

@@ -0,0 +1,18 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-table')
+
+  const eventsToListen = ['click']
+
+  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 }),
+        })
+      })
+    })
+  })
+}

package/dist/collection/pages/components/tag/index.js

@@ -0,0 +1,18 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-tag')
+
+  const eventsToListen = ['click']
+
+  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 }),
+        })
+      })
+    })
+  })
+}

package/dist/collection/pages/components/textarea/index.js

@@ -0,0 +1,19 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-textarea')
+
+  const eventsToListen = ['click']
+
+  elementsToListen.forEach((domElement) => {
+    eventsToListen.forEach((event) => {
+      domElement.addEventListener(event, function (event) {
+        console.log({
+          Elemento: domElement,
+          Evento: event,
+          Tipo: event.type,
+          'Detail(Custom Events)': event.detail,
+          'Data(Native Events)': event.data,
+        })
+      })
+    })
+  })
+}

package/dist/collection/pages/components/upload/index.js

@@ -0,0 +1,19 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll('br-upload')
+
+  const eventsToListen = ['click']
+
+  elementsToListen.forEach((domElement) => {
+    eventsToListen.forEach((event) => {
+      domElement.addEventListener(event, function (event) {
+        console.log({
+          Elemento: domElement,
+          Evento: event,
+          Tipo: event.type,
+          'Detail(Custom Events)': event.detail,
+          'Data(Native Events)': event.data,
+        })
+      })
+    })
+  })
+}