@govbr-ds/webcomponents 2.0.0-next.2 → 2.0.0-next.20

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,18 @@
+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 }),
+        })
+      })
+    })
+  })
+}

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

@@ -0,0 +1,18 @@
+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({
+          Evento: event.type,
+          Elemento: domElement.outerHTML,
+          ...(event.detail && { Detail: event.detail }),
+          ...(event.data && { Data: event.data }),
+        })
+      })
+    })
+  })
+}

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']
+  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/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,
+        })
+      })
+    })
+  })
+}

package/dist/collection/pages/scripts/menu.js

@@ -0,0 +1,221 @@
+const MENU_ITEMS = [
+  {
+    path: 'avatar',
+    name: 'Avatar',
+    files: ['photographic', 'iconic', 'letter'],
+  },
+  {
+    path: 'button',
+    name: 'Button',
+    files: ['color-mode', 'density', 'emphasis', 'icon-position', 'shape', 'state'],
+  },
+  {
+    path: 'checkbox',
+    name: 'Checkbox',
+    files: ['hidden-label', 'horizontal', 'indeterminate', 'slotted', 'state', 'vertical'],
+  },
+  {
+    path: 'dropdown',
+    name: 'Dropdown',
+    files: ['simples'],
+  },
+  {
+    path: 'icon',
+    name: 'Icon',
+    files: ['flip', 'font-awesome', 'inline', 'rotate', 'width-height'],
+  },
+  {
+    path: 'input',
+    name: 'Input',
+    files: ['state', 'with-button', 'highlight', 'inline', 'density', 'propriedades'],
+  },
+  {
+    path: 'item',
+    name: 'Item',
+    files: ['density', 'vertical', 'state', 'selectable'],
+  },
+  {
+    path: 'list',
+    name: 'List',
+    files: ['selectable', 'density', 'grouped', 'horizontal'],
+  },
+  {
+    path: 'loading',
+    name: 'Loading',
+    files: ['indeterminate', 'progress'],
+  },
+  {
+    path: 'message',
+    name: 'Message',
+    files: ['feedback', 'message'],
+  },
+  {
+    path: 'switch',
+    name: 'Switch',
+    files: ['label', 'has-icon', 'density', 'state'],
+  },
+  {
+    path: 'tag',
+    name: 'Tag',
+    files: ['tag', 'densitys', 'status', 'interaction', 'icons', 'counts'],
+  },
+  {
+    path: 'textarea',
+    name: 'Textarea',
+    files: ['simples', 'contador', 'density', 'inline'],
+  },
+  {
+    path: 'upload',
+    name: 'Upload',
+    files: ['single', 'multiple', 'restricted', 'disabled'],
+  },
+  // NOVOS COMPONENTES - NÃO DELETAR
+]
+
+const MENU_STATIC_ITEMS = [
+  {
+    path: 'all-component-events',
+    name: 'Eventos',
+  },
+  {
+    path: 'all-component-methods',
+    name: 'Métodos',
+  },
+  {
+    path: 'all-component-props',
+    name: 'Propriedades',
+  },
+  {
+    path: 'all-component-slots',
+    name: 'Slots',
+  },
+]
+
+const MENU_BODY = document.querySelector('.menu-body')
+const MENU_FILTER = document.getElementById('menu-filter')
+const CLEAR_MENU_FILTER = document.getElementById('clear-menu-filter')
+const menuButton = document.getElementById('menu-button')
+const responsiveMenuButton = document.getElementById('responsive-menu-button')
+const menuElement = document.getElementById('main-navigation')
+const iconElement = menuButton.querySelector('i')
+
+function setLinks() {
+  MENU_ITEMS.forEach((page) => {
+    const link = document.createElement('a')
+    link.href = `/${page.path}`
+    link.className = 'menu-item br-link'
+    link.textContent = page.name
+    link.addEventListener('click', (event) => {
+      event.preventDefault()
+
+      if (link.classList.contains('active')) {
+        return
+      }
+
+      removeAllActiveClasses()
+      link.classList.add('active')
+      loadPage(page.path, page.files)
+      window.history.pushState({}, '', `/${page.path}`)
+
+      if (window.innerWidth <= 575) {
+        toggleMenu()
+      }
+    })
+
+    MENU_BODY.appendChild(link)
+  })
+
+  const divider = document.createElement('div')
+  divider.classList.add('br-divider')
+  MENU_BODY.appendChild(divider)
+
+  const staticHeader = document.createElement('div')
+  staticHeader.classList.add('menu-item')
+  staticHeader.innerHTML = 'Arquivos MD (precisa do <strong>build</strong>)'
+  MENU_BODY.appendChild(staticHeader)
+
+  MENU_STATIC_ITEMS.forEach((page) => {
+    const link = document.createElement('a')
+    link.href = `/${page.path}`
+    link.className = 'menu-item br-link'
+    link.textContent = page.name
+    link.addEventListener('click', (event) => {
+      event.preventDefault()
+
+      if (link.classList.contains('active')) {
+        return
+      }
+
+      removeAllActiveClasses()
+      link.classList.add('active')
+      loadMarkdown(page.path)
+      window.history.pushState({}, '', `/${page.path}`)
+
+      if (window.innerWidth <= 575) {
+        toggleMenu()
+      }
+    })
+
+    MENU_BODY.appendChild(link)
+  })
+}
+
+function filterMenu() {
+  const filterValue = MENU_FILTER.value.toLowerCase()
+  const menuItems = MENU_BODY.querySelectorAll('.menu-item')
+
+  menuItems.forEach((item) => {
+    if (item.textContent.toLowerCase().includes(filterValue)) {
+      item.style.display = ''
+    } else {
+      item.style.display = 'none'
+    }
+  })
+
+  CLEAR_MENU_FILTER.style.display = filterValue ? 'block' : 'none'
+}
+
+function clearInput() {
+  MENU_FILTER.value = ''
+  filterMenu()
+}
+
+window.addEventListener('load', () => {
+  setLinks()
+  loadPageFromURL()
+
+  menuButton.addEventListener('click', toggleMenu)
+  responsiveMenuButton.addEventListener('click', toggleMenu)
+
+  const mediaQuery = window.matchMedia('(min-width: 576px)')
+  mediaQuery.addEventListener('change', handleMediaChange)
+
+  function handleMediaChange(event) {
+    if (event.matches && responsiveMenuButton) responsiveMenuButton.style.display = 'none'
+    if (!event.matches && responsiveMenuButton) responsiveMenuButton.style.display = ''
+  }
+
+  handleMediaChange(mediaQuery)
+
+  MENU_FILTER.addEventListener('input', filterMenu)
+  CLEAR_MENU_FILTER.addEventListener('click', clearInput)
+})
+
+function removeAllActiveClasses() {
+  const menuItems = document.querySelectorAll('.menu-item')
+  menuItems.forEach((item) => {
+    item.classList.remove('active')
+  })
+}
+
+function toggleMenu() {
+  menuElement.classList.toggle('active')
+
+  if (menuElement.classList.contains('active')) {
+    iconElement.classList.remove('fa-bars')
+    iconElement.classList.add('fa-times')
+  } else {
+    iconElement.classList.add('fa-bars')
+    iconElement.classList.remove('fa-times')
+  }
+}

package/dist/collection/pages/scripts/pageLoader.js

@@ -0,0 +1,180 @@
+const CONTENT_ELEMENT = document.getElementById('content');
+const COMPONENTS_FILTER = document.getElementById('components-filter');
+const CLEAR_COMPONENTS_FILTER = document.getElementById('clear-components-filter');
+
+let renderedFilesContent = {};
+
+function loadPage(path, files) {
+  CONTENT_ELEMENT.innerHTML = '';
+  renderedFilesContent = {};
+  COMPONENTS_FILTER.value = ''; // Limpa o campo de busca ao trocar de página
+  CLEAR_COMPONENTS_FILTER.style.display = 'none'; // Esconde o botão de limpar
+
+  const promises = files.map((file) =>
+    fetch(`./pages/components/${path}/${file}.html`).then((response) =>
+      response.text().then((text) => ({ file, text }))
+    )
+  );
+
+  Promise.all(promises)
+    .then((results) => {
+      if (results.length > 0) {
+        results.forEach(({ file, text }) => {
+          const contentDiv = document.createElement('div');
+          contentDiv.classList.add('file', 'mt-2', 'mb-5');
+
+          const titleHTML = `<h3>${file}</h3><div class="br-divider"></div>`;
+          contentDiv.insertAdjacentHTML('beforeend', titleHTML + text);
+
+          renderedFilesContent[file] = { content: text.toLowerCase(), element: contentDiv };
+
+          CONTENT_ELEMENT.appendChild(contentDiv);
+        });
+      }
+
+      loadRelatedScriptsFromContent();
+    })
+    .catch((error) => {
+      console.log('Erro ao carregar a página:', error);
+    });
+}
+
+function loadMarkdown(path) {
+  CONTENT_ELEMENT.innerHTML = '';
+  renderedFilesContent = {};
+  COMPONENTS_FILTER.value = ''; // Limpa o campo de busca ao trocar de página
+  CLEAR_COMPONENTS_FILTER.style.display = 'none'; // Esconde o botão de limpar
+
+  fetch(`./assets/stencil-generated-docs/${path}.md`)
+    .then((response) => response.text())
+    .then((text) => {
+      const contentDiv = document.createElement('div');
+      contentDiv.classList.add('file', 'mt-2', 'mb-5');
+      contentDiv.innerHTML = marked.parse(text);
+      CONTENT_ELEMENT.appendChild(contentDiv);
+
+      renderedFilesContent[path] = { content: contentDiv.innerHTML.toLowerCase(), element: contentDiv };
+    })
+    .catch((error) => {
+      console.error('Erro ao carregar a página:', error);
+    });
+}
+
+function loadRelatedScriptsFromContent() {
+  const contentHTML = CONTENT_ELEMENT.innerHTML;
+  const relatedPaths = contentHTML.match(/br-(\w+)/g);
+
+  if (relatedPaths) {
+    relatedPaths.forEach((relatedPath) => {
+      const normalizedPath = relatedPath.substring(3);
+      const relatedScript = document.createElement('script');
+      relatedScript.src = `./pages/components/${normalizedPath}/index.js`;
+      document.body.appendChild(relatedScript);
+    });
+  }
+}
+
+function filterContent() {
+  const filterValue = COMPONENTS_FILTER.value.toLowerCase();
+  const normalizedFilterValue = filterValue.normalize("NFD").replace(/[\u0300-\u036f]/g, '');
+
+  Object.values(renderedFilesContent).forEach(({ content, element }) => {
+    const titleElement = element.querySelector('h3');
+    const titleText = titleElement ? titleElement.textContent.toLowerCase() : '';
+    const normalizedTitleText = titleText.normalize("NFD").replace(/[\u0300-\u036f]/g, '');
+
+    // Inicializa o conteúdo do shadow DOM para componentes personalizados
+    let shadowContent = '';
+
+    // Função para coletar o conteúdo dos slots de um custom element
+    const collectSlotContent = (customElement) => {
+      if (customElement.shadowRoot) {
+        const slots = customElement.shadowRoot.querySelectorAll('slot');
+        slots.forEach(slot => {
+          const assignedNodes = slot.assignedNodes();
+          assignedNodes.forEach(node => {
+            shadowContent += node.textContent.toLowerCase() + ' ';
+          });
+        });
+      }
+    };
+
+    // Procura todos os custom elements dentro do elemento
+    const customElements = element.querySelectorAll('*');
+    customElements.forEach((customElement) => {
+      if (customElement.tagName.includes('-')) { // Identifica se é um custom element
+        collectSlotContent(customElement);
+      }
+    });
+
+    // Filtra o conteúdo
+    const combinedContent = content + ' ' + shadowContent; // Combina conteúdo e shadow content
+
+    if (element.querySelector('table')) {
+      const rows = element.querySelectorAll('table tr');
+      rows.forEach((row, index) => {
+        if (index === 0) {
+          row.style.display = '';
+        } else {
+          const rowText = row.textContent.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, '');
+          row.style.display = rowText.includes(normalizedFilterValue) ? '' : 'none';
+        }
+      });
+    } else if (normalizedFilterValue && (combinedContent.includes(normalizedFilterValue) || normalizedTitleText.includes(normalizedFilterValue))) {
+      element.style.display = ''; // Exibe o elemento se o conteúdo combinado inclui o valor filtrado
+    } else {
+      element.style.display = normalizedFilterValue ? 'none' : ''; // Oculta se não houver filtro
+    }
+  });
+
+  CLEAR_COMPONENTS_FILTER.style.display = filterValue ? 'block' : 'none';
+}
+
+COMPONENTS_FILTER.addEventListener('input', filterContent);
+
+CLEAR_COMPONENTS_FILTER.addEventListener('click', () => {
+  COMPONENTS_FILTER.value = '';
+  filterContent();
+});
+
+function loadPageFromURL() {
+  const currentPath = window.location.pathname.split('/').pop();
+
+  MENU_ITEMS.forEach((page) => {
+    if (page.path === currentPath) {
+      const link = Array.from(MENU_BODY.children).find((item) =>
+        item.getAttribute('href') === `/${page.path}`
+      );
+
+      if (link) {
+        link.classList.add('active');
+        loadPage(page.path, page.files);
+      }
+    }
+  });
+
+  MENU_STATIC_ITEMS.forEach((page) => {
+    if (page.path === currentPath) {
+      const link = Array.from(MENU_BODY.children).find((item) =>
+        item.getAttribute('href') === `/${page.path}`
+      );
+
+      if (link) {
+        link.classList.add('active');
+        loadMarkdown(page.path);
+      }
+    }
+  });
+
+  if (currentPath.trim().length === 0) {
+    const firstPage = MENU_ITEMS[0];
+    loadPage(firstPage.path, firstPage.files);
+    const firstLink = MENU_BODY.querySelector('.menu-item');
+    if (firstLink) {
+      firstLink.classList.add('active');
+      window.history.pushState({}, '', `/${firstPage.path}`);
+    }
+  }
+}
+
+loadPageFromURL();

package/dist/collection/scripts/menu.js

@@ -0,0 +1,146 @@
+const MENU_ITEMS = [
+  {
+    path: 'avatar',
+    name: 'Avatar',
+    files: ['fotografico.html', 'iconico.html', 'letra.html'],
+  },
+  {
+    path: 'button',
+    name: 'Button',
+    files: ['colorMode.html', 'density.html', 'emphasis.html', 'iconPosition.html', 'shape.html', 'state.html'],
+  },
+  {
+    path: 'checkbox',
+    name: 'Checkbox',
+    files: ['hiddenLabel.html', 'horizontal.html', 'indeterminate.html', 'slotted.html', 'state.html', 'vertical.html'],
+  },
+  {
+    path: 'dropdown',
+    name: 'Dropdown',
+    files: ['dropdown.html'],
+  },
+  {
+    path: 'icon',
+    name: 'Icon',
+    files: ['flip.html', 'font-awesome.html', 'inline.html', 'rotate.html', 'width-height.html'],
+  },
+  {
+    path: 'input',
+    name: 'Input',
+    files: ['state.html', 'icon-button.html', 'highlight.html', 'inline.html', 'density.html'],
+  },
+  {
+    path: 'item',
+    name: 'Item',
+    files: ['density.html', 'item.html', 'state.html', 'selection.html'],
+  },
+  {
+    path: 'list',
+    name: 'List',
+    files: ['list.html', 'density.html', 'grouped.html', 'horizontal.html'],
+  },
+  {
+    path: 'loading',
+    name: 'Loading',
+    files: ['indeterminate.html', 'progress.html'],
+  },
+  {
+    path: 'message',
+    name: 'Message',
+    files: ['feedback.html', 'message.html'],
+  },
+  {
+    path: 'radio',
+    name: 'Radio',
+    files: ['radio-group.html', 'has-hidden-label.html', 'slotted.html', 'state.html'],
+  },
+  {
+    path: 'switch',
+    name: 'Switch',
+    files: ['label.html', 'hasIcon.html', 'density.html', 'state.html'],
+  },
+  {
+    path: 'textarea',
+    name: 'Textarea',
+    files: [
+      'textarea-contador.html',
+      'textarea-density.html',
+      'textarea-label-left.html',
+      'textarea-theme.html',
+      'textarea.html',
+    ],
+  },
+  {
+    path: 'upload',
+    name: 'Upload',
+    files: ['single.html', 'multiple.html', 'restricted.html', 'disabled.html'],
+  },
+  {
+    path: 'tag',
+    name: 'Tag',
+<<<<<<< HEAD
+    files: [['tag.html', 'densitys.html', 'status.html', 'interaction.html', 'icons.html', 'counts.html']],
+=======
+    files: ['tag.html'],
+>>>>>>> next
+  },
+]
+
+const MENU_BODY = document.querySelector('.menu-body')
+const MENU_FILTER = document.getElementById('menu-filter')
+const CLEAR_BUTTON = document.getElementById('clear-button')
+
+// Função para definir links do menu
+function setLinks() {
+  MENU_ITEMS.forEach((page) => {
+    const link = document.createElement('a')
+    link.href = `/${page.path}`
+    link.className = 'menu-item br-link'
+    link.textContent = page.name
+    link.addEventListener('click', (event) => {
+      event.preventDefault()
+      removeAllActiveClasses()
+      link.classList.add('active')
+      loadPage(page.path, page.files)
+      window.history.pushState({}, '', `/${page.path}`)
+    })
+
+    MENU_BODY.appendChild(link)
+  })
+}
+
+// Função para filtrar o menu
+function filterMenu() {
+  const filterValue = MENU_FILTER.value.toLowerCase()
+  const menuItems = MENU_BODY.querySelectorAll('.menu-item')
+
+  menuItems.forEach((item) => {
+    if (item.textContent.toLowerCase().includes(filterValue)) {
+      item.style.display = '' // Exibir item
+    } else {
+      item.style.display = 'none' // Ocultar item
+    }
+  })
+
+  CLEAR_BUTTON.style.display = filterValue ? 'block' : 'none'
+}
+
+// Função para limpar o input
+function clearInput() {
+  MENU_FILTER.value = ''
+  filterMenu()
+}
+
+// Função para carregar links de menu e página da URL
+window.addEventListener('load', () => {
+  setLinks()
+  loadPageFromURL()
+
+  // Adicionar funcionalidade de exibir/esconder o menu ao clicar no botão
+  const menuButton = document.getElementById('menu-button')
+  menuButton.addEventListener('click', toggleMenu)
+
+  // Adicionar funcionalidade de filtro ao campo de entrada
+  MENU_FILTER.addEventListener('input', filterMenu)
+  CLEAR_BUTTON.addEventListener('click', clearInput)
+})