README.md

Conteúdo do arquivo

# Documentação para Criação de Arquivos HTML

## Visão Geral

Este documento define a arquitetura obrigatória para a criação de novos arquivos HTML utilizando componentes padrão, com foco na organização do conteúdo em seções (`<section>`), identificação com `id` e a inclusão seletiva de conteúdo para geração de PDF.

Cada parte relevante do documento HTML (formulários, tabelas, gráficos, etc.) **deve ser encapsulada** dentro de uma tag `<section>`. Além disso, cada seção **deve ter um `id` único** e, caso necessário, pode ser marcada para inclusão na geração de PDF ao adicionar a classe `toPdf`.

## Estrutura Padrão dos Arquivos HTML

### 1. Seções Obrigatórias

Todos os elementos do HTML devem ser agrupados dentro de uma tag `<section>`, que terá um `id` único, conforme o exemplo abaixo:

```html
<section id="formulario-cadastro">
  <!-- Conteúdo do formulário de cadastro -->
</section>
```

Essa abordagem ajuda a garantir a modularidade e a clareza do documento HTML.

### 2. Identificação das Seções

Cada tag `<section>` **deve** possuir um `id`. O `id` deve ser significativo e descritivo para facilitar a localização e o entendimento do conteúdo. Exemplo:

```html
<section id="tabela-produtos">
  <!-- Conteúdo da tabela de produtos -->
</section>
```

### 3. Inclusão de Seções no PDF

Para incluir seções específicas no PDF gerado, adicione a classe `toPdf` à `<section>`. Somente as seções que contiverem essa classe serão incluídas no documento PDF. Exemplo:

```html
<section id="resumo-relatorio" class="toPdf">
  <!-- Conteúdo do resumo que será incluído no PDF -->
</section>
```

Se uma seção não tiver a classe `toPdf`, ela **não será incluída** no PDF final.

## Componentes

### Visão Geral

A maioria dos componentes criados segue um padrão comum, aproveitando a API de Web Components nativa do JavaScript. Cada componente é uma classe que estende a `HTMLElement` e utiliza vários métodos padrão para garantir que os atributos sejam aplicados corretamente e que o template HTML seja carregado dinamicamente. A seguir, está uma explicação dos principais métodos e seu papel na arquitetura dos componentes:

### Estrutura Padrão

#### `constructor()`

O construtor é executado sempre que uma instância do componente é criada. Geralmente, o construtor inicializa o componente e, em muitos casos, carrega um template externo usando `fetch` para permitir a reutilização de HTML em vários componentes. No seu modelo de componentes, o método `loadTemplate()` é chamado dentro do construtor para carregar o HTML do componente.

#### `async loadTemplate()`

Este método assíncrono carrega o template HTML externo, normalmente armazenado em um arquivo separado. O template é então injetado no componente usando JavaScript. Esse design permite que o HTML seja mantido em arquivos separados do JavaScript, promovendo organização e modularidade.

- **Exemplo**:
  ```javascript
  const response = await fetch('./componentes/br-textarea/br-textarea.html');
  const templateText = await response.text();
  ```

O loadTemplate utiliza o método fetch para buscar o template HTML, que depois é convertido em um nó de template e adicionado ao componente.

#### `connectedCallback()`

Este método é chamado sempre que o componente é adicionado ao DOM pela primeira vez. Ele é o local ideal para adicionar comportamentos adicionais, como configurar atributos iniciais ou atualizar o componente com base nos valores passados para seus atributos.

No padrão de componentes, ele chama o método updateAttributes() para garantir que os atributos definidos no HTML sejam aplicados corretamente quando o componente é inserido na página.

#### `attributeChangedCallback(name, oldValue, newValue)`

Este método é invocado quando um dos atributos observados (definidos em observedAttributes()) é alterado. O nome do atributo e seus valores antigo e novo são passados como parâmetros, permitindo que o componente responda dinamicamente às mudanças nos atributos.

Esse método é utilizado para garantir que alterações nos atributos sejam refletidas no componente sem a necessidade de recarregar a página ou recriar o componente. No padrão adotado, ele chama o método updateAttributes() para garantir que as atualizações nos atributos sejam aplicadas corretamente.

#### `updateAttributes()`

Este é um método auxiliar que agrupa todas as atualizações de atributos que o componente precisa realizar. Ele delega a atualização de cada atributo específico para métodos individuais, como updateName(), updateLabel(), updateRows(), etc.

A vantagem dessa abordagem modular é a clareza do código, tornando-o mais legível e fácil de manter. Cada método individual lida com um único atributo, garantindo que os elementos HTML dentro do componente sejam atualizados conforme necessário.

#### `updateName(), updateLabel(), updateRows(), etc.`

Esses métodos são responsáveis por atualizar propriedades e atributos específicos dentro do componente, como name, label, rows, placeholder, required, e maxlength. Cada um desses métodos altera o elemento correto (por exemplo, textarea, label) com base nos valores fornecidos nos atributos do componente.

### Ciclo de Vida

Criação do Componente: O componente é criado com o constructor() e pode opcionalmente carregar um template HTML externo com loadTemplate().

Adição ao DOM: Quando o componente é adicionado ao DOM, o método connectedCallback() é chamado. Aqui, o componente pode configurar seu estado inicial.

Mudança de Atributos: Se os atributos do componente mudarem após a criação, o método attributeChangedCallback() é invocado, e as mudanças são aplicadas dinamicamente ao componente.

Remoção do DOM: Se necessário, o componente pode reagir à remoção do DOM, embora isso não tenha sido implementado explicitamente nos exemplos fornecidos.

### Observação de Atributos

Cada componente pode definir quais atributos serão observados por meio do método static get observedAttributes(). Esses atributos são monitorados e, se forem alterados, o método attributeChangedCallback() será chamado automaticamente, garantindo que o componente responda de maneira adequada às mudanças.

```javascript
static get observedAttributes() {
    return ['eName', 'label', 'rows', 'textareaClass', 'placeholder', 'required', 'maxlength'];
}
```

Esses atributos permitem que o componente seja altamente configurável diretamente no HTML, oferecendo flexibilidade ao usuário para personalizar o comportamento e aparência do componente.

### Resumo

Os componentes criados são modulares, reutilizáveis e altamente configuráveis. Eles aproveitam o ciclo de vida dos Web Components e a observação de atributos para garantir que o componente esteja sempre atualizado e sincronizado com os valores definidos no HTML. O padrão de separação de lógica (JavaScript) e estrutura (HTML via templates externos) promove a clareza e organização do código.

## br-cabecalho

O componente `<br-cabecalho>` é responsável por renderizar o cabeçalho padrão de cada documento HTML. Ele pode receber os seguintes atributos para customização:

- **titulo**: Define o título que será exibido no cabeçalho. Exemplo: `titulo="Meu Título"`.
- **subtitulo**: Define o subtítulo que será exibido abaixo do título. Exemplo: `subtitulo="Meu Subtítulo"`.

#### Exemplo de uso:

```html
<br-cabecalho-component titulo="Página Inicial" subtitulo="Bem-vindo ao sistema"></br-cabecalho-component>
```

## br-rodape

O componente `<br-rodape>` é responsável por renderizar o rodapé padrão de cada documento HTML. Ele não requer parâmetros adicionais, mas é obrigatório em todos os arquivos HTML para manter a consistência visual.

#### Exemplo de uso:

```html
<br-rodape-component></br-rodape-component>
```

## br-checkbox

O componente `<br-checkbox-component>` é utilizado para criar um checkbox estilizado, com suporte para rótulos personalizados. Ele oferece uma interface simples para incluir um checkbox em qualquer documento HTML e permite a configuração de atributos como `checkbox-id` e `label` diretamente no HTML.

#### Atributos

- **checkbox-id**: (Opcional) Define o identificador único do checkbox. Se não for fornecido, o valor padrão será `"checkbox-1"`.
- **label**: (Opcional) Define o texto do rótulo associado ao checkbox. Se não for fornecido, o checkbox será renderizado sem rótulo.

#### Exemplo de uso:

```html
<br-checkbox-component checkbox-id="aceitar-termos" label="Aceitar termos e condições"></br-checkbox-component>
```

No exemplo acima, um checkbox será renderizado com o ID aceitar-termos, e o rótulo associado será "Aceitar termos e condições".

Comportamento
Quando o componente é carregado (no método connectedCallback), o checkbox é renderizado com base nos atributos fornecidos. O atributo checkbox-id vincula o campo de entrada (`<input>`) ao rótulo (`<label>`), permitindo que o rótulo seja clicável e marque/desmarque o checkbox.

O componente também utiliza o método initializeCheckbox() para aplicar a lógica de inicialização específica do estilo do checkbox, usando a biblioteca core.BRCheckbox.

## br-input

O componente `<br-input-component>` é um campo de entrada (input) altamente configurável, que oferece suporte a diversos atributos para personalizar sua aparência e comportamento. Ele utiliza templates externos para separar a lógica do componente da estrutura HTML, permitindo fácil reutilização.

#### Atributos

- **inputId**: (Opcional) Define o ID do campo de entrada e também o vincula ao rótulo (`label`) correspondente. Exemplo: `inputId="meuInput"`.
- **eName**: (Opcional) Define o atributo `name` do campo de entrada, utilizado para envio de formulários. Exemplo: `eName="meuNome"`.
- **inputClass**: (Opcional) Aplica classes CSS ao campo de entrada, permitindo a personalização do estilo. Exemplo: `inputClass="input-grande"`.
- **inputStyle**: (Opcional) Aplica estilos inline diretamente no campo de entrada. Exemplo: `inputStyle="border: 1px solid red;"`.
- **label**: (Opcional) Define o texto do rótulo associado ao campo de entrada. Exemplo: `label="Nome Completo"`.
- **placeholder**: (Opcional) Define um texto temporário que aparece dentro do campo de entrada antes do preenchimento. Exemplo: `placeholder="Digite seu nome"`.
- **required**: (Opcional) Se presente, torna o campo de entrada obrigatório. Exemplo: `required`.
- **maxlength**: (Opcional) Define o número máximo de caracteres permitidos no campo de entrada. Exemplo: `maxlength="100"`.
- **initValue**: (Opcional) Define o valor inicial do campo de entrada. Exemplo: `initValue="Valor Padrão"`.
- **isDisabled**: (Opcional) Se presente, desabilita o campo de entrada, tornando-o não interativo. Exemplo: `isDisabled`.
- **Eventos customizados**: O componente permite a definição de eventos com atributos que começam com `on`, como `onClick`, `onChange`, etc. Esses atributos devem conter o nome de funções globais para serem chamadas quando o evento ocorrer.

#### Exemplo de uso:

```html
<br-input-component 
    inputId="nome" 
    eName="nomeUsuario" 
    inputClass="input-padrao" 
    label="Nome Completo" 
    placeholder="Digite seu nome completo" 
    required 
    maxlength="100" 
    initValue="João Silva" 
    isDisabled 
    onClick="handleClick, logInput"></br-input-component>
```

Neste exemplo, o campo de entrada terá:

* O ID e name configurados como "nome".
* Uma classe CSS input-padrao.
* Um rótulo com o texto "Nome Completo".
* Um valor inicial de "João Silva".
* Será obrigatório (required) e desabilitado (isDisabled).
* O campo disparará as funções handleClick e logInput quando o evento click ocorrer.

#### Funcionamento

* Atributos observados: O componente monitora uma série de atributos para alterar dinamicamente o estado do campo de entrada (como inputId, label, maxlength, etc.).
* Eventos customizados: O componente permite a associação de funções a eventos através de atributos como onClick, onChange, etc., associando eventos globais ao campo de entrada.
* Renderização dinâmica: Quando um atributo é alterado, o componente se atualiza automaticamente através do método attributeChangedCallback(), garantindo que as mudanças sejam refletidas no HTML sem a necessidade de recarregar a página.

O componente é ideal para casos onde um campo de entrada altamente configurável é necessário, e oferece suporte a diferentes cenários de personalização e validação.

## br-modal-simples-component

O componente `<br-modal-simples-component>` é utilizado para criar um modal simples, customizável e reutilizável, que pode ser exibido com título, mensagem e botões opcionais. Ele facilita a criação de diálogos modais com opções de personalização para interação com o usuário.

#### Atributos e Métodos

O componente não utiliza atributos HTML diretamente, mas possui métodos que permitem configurar dinamicamente o conteúdo e o comportamento do modal.

#### Métodos

- **showModal(titulo, mensagem, btn1Text, btn2Text, btn1OnClick = null, btn2OnClick = null)**: Exibe o modal com o título e a mensagem fornecidos, além de configurar os botões de ação (opcionalmente).

  - `titulo`: Define o título do modal.
  - `mensagem`: Define a mensagem que será exibida no corpo do modal.
  - `btn1Text`: (Opcional) Define o texto do primeiro botão. Se for omitido, o botão será ocultado.
  - `btn2Text`: (Opcional) Define o texto do segundo botão. Se for omitido, o botão será ocultado.
  - `btn1OnClick`: (Opcional) Define a função que será executada quando o primeiro botão for clicado.
  - `btn2OnClick`: (Opcional) Define a função que será executada quando o segundo botão for clicado.
- **closeModal()**: Fecha o modal, ocultando-o da tela.

#### Exemplo de uso:

```html
<br-modal-simples-component id="modalSimples"></br-modal-simples-component>

<script>
  const modal = document.getElementById('modalSimples');

  // Exibir o modal com título, mensagem e dois botões
  modal.showModal(
    'Confirmação',
    'Tem certeza que deseja continuar?',
    'Confirmar',
    'Cancelar',
    function() { alert('Confirmado!'); }, // Função chamada no clique de "Confirmar"
    function() { modal.closeModal(); }    // Função chamada no clique de "Cancelar"
  );
</script>
```

Neste exemplo, o modal exibe:

* Um título "Confirmação".
* Uma mensagem "Tem certeza que deseja prosseguir?".
* Dois botões: "Sim", que exibe um alerta ao ser clicado, e "Cancelar", que fecha o modal.

#### Funcionamento

* O modal é posicionado no centro da tela, com ajustes automáticos para manter sua visibilidade ao rolar a página.
* O método showModal() atualiza o conteúdo do modal e exibe os botões conforme as opções fornecidas. Se os textos dos botões forem omitidos, os botões não são exibidos.
* O método closeModal() esconde o modal, adicionando a classe d-none para ocultá-lo da interface.

Este componente oferece uma solução simples para a criação de diálogos e prompts em páginas web, com fácil customização de título, mensagem e botões de ação.

## br-select-component

O componente `<br-select-component>` é utilizado para criar um campo de seleção (select) customizado e interativo. Ele oferece suporte a opções dinâmicas, personalização de rótulos e classes, além de fornecer uma funcionalidade integrada para lidar com mudanças de valor através de eventos `onchange`.

#### Atributos

- **label**: (Opcional) Define o rótulo que será exibido acima do campo de seleção. Exemplo: `label="Escolha uma opção"`.
- **opcoes**: (Obrigatório) Nome da função global que retorna as opções a serem exibidas no campo de seleção. A função deve retornar um array de strings. Exemplo: `opcoes="getOpcoes"`.
- **onchangeFunc**: (Opcional) Nome da função JavaScript a ser chamada quando o valor selecionado mudar. Exemplo: `onchangeFunc="handleChange"`.
- **eName**: (Opcional) Define o atributo `name` para o campo de seleção, utilizado para envio em formulários. Exemplo: `eName="minhaSelecao"`.
- **required**: (Opcional) Define se o campo de seleção é obrigatório. Adicione este atributo para tornar o campo obrigatório.
- **inputClass**: (Opcional) Aplica classes CSS ao campo de seleção para personalizar seu estilo. Exemplo: `inputClass="input-grande"`.
- **inputId**: (Opcional) Define o `id` para o campo de seleção. Exemplo: `inputId="selecaoId"`.

#### Métodos

- **createOptions(opcoes)**: Gera o HTML das opções do campo de seleção com base no array fornecido.
- **updateOptions(opcoes)**: Permite atualizar as opções dinamicamente após o componente ter sido carregado. Exemplo:

  ```javascript
  const selectComponent = document.querySelector('br-select-component');
  selectComponent.updateOptions(['Opção 1', 'Opção 2', 'Opção 3']);
  ```

generateUniqueId(index): Gera um id único para cada opção de seleção, garantindo que múltiplos componentes possam coexistir sem conflito de IDs.
initializeSelect(): Inicializa o comportamento do campo de seleção, incluindo a lista suspensa e a funcionalidade de busca de opções.

#### Exemplo de uso:

```html
<br-select-component 
  label="Escolha uma cor" 
  opcoes="getCores" 
  onchangeFunc="handleColorChange" 
  eName="corSelecionada" 
  inputClass="custom-input" 
  inputId="selecaoDeCores" 
  required>
</br-select-component>

<script>
  function getCores() {
    return ['Vermelho', 'Azul', 'Verde', 'Amarelo'];
  }

  function handleColorChange() {
    alert('A cor selecionada mudou!');
  }
</script>
```

No exemplo acima, o componente de seleção:

* Usa a função getCores para gerar as opções de cor.
* Chama a função handleColorChange sempre que a seleção muda.
* Aplica classes CSS e o atributo required para personalização e validação.

#### Funcionamento

* Carregamento de Opções: O componente carrega as opções chamando a função definida no atributo opcoes. As opções são renderizadas dinamicamente no campo de seleção.
* Eventos de Mudança: Ao selecionar uma nova opção, a função definida no atributo onchangeFunc é chamada, permitindo a execução de qualquer lógica adicional necessária.
* Atualização Dinâmica: O método updateOptions() permite que as opções sejam atualizadas dinamicamente sem a necessidade de recarregar o componente, o que facilita o uso em cenários onde as opções podem mudar após a renderização inicial.

Esse componente é ideal para criar campos de seleção interativos com suporte a opções dinâmicas e eventos personalizados.

## br-textarea-component

O componente `<br-textarea-component>` é um campo de texto (textarea) personalizável, que permite configurar diversos atributos como rótulo, placeholder, número de linhas, e validação. Ele utiliza um template HTML externo para facilitar a reutilização e a organização do código.

#### Atributos

- **eName**: (Opcional) Define o atributo `name` do campo de texto, utilizado para envio em formulários. Exemplo: `eName="descricao"`.
- **label**: (Opcional) Define o rótulo exibido acima do campo de texto. Exemplo: `label="Descrição"`.
- **rows**: (Opcional) Define o número de linhas visíveis no campo de texto. Exemplo: `rows="5"`.
- **textareaClass**: (Opcional) Aplica classes CSS ao campo de texto para personalização de estilo. Exemplo: `textareaClass="textarea-grande"`.
- **placeholder**: (Opcional) Define um texto temporário que aparece dentro do campo de texto antes de ser preenchido. Exemplo: `placeholder="Digite sua descrição aqui"`.
- **required**: (Opcional) Se presente, torna o campo obrigatório para envio de formulários. Exemplo: `required`.
- **maxlength**: (Opcional) Define o número máximo de caracteres permitidos no campo de texto. Exemplo: `maxlength="500"`.

#### Exemplo de uso:

```html
<br-textarea-component 
    eName="comentarios" 
    label="Comentários" 
    rows="4" 
    textareaClass="custom-textarea" 
    placeholder="Deixe seus comentários aqui" 
    required 
    maxlength="200">
</br-textarea-component>
```

Neste exemplo, o campo de texto terá:

* Um rótulo "Comentários".
* O atributo name definido como "comentários".
* Quatro linhas visíveis.
* Um placeholder com o texto "Deixe seus comentários aqui".
* O campo será obrigatório (required) e terá um limite de 200 caracteres.

#### Funcionamento

* Carregamento de Template: O template do componente é carregado de um arquivo HTML externo, garantindo a separação da estrutura HTML e da lógica JavaScript.
* Atributos Dinâmicos: O componente monitora mudanças em atributos como eName, label, rows, placeholder, required, e maxlength, e atualiza automaticamente o campo de texto para refletir essas mudanças.
* Validação: Se o atributo required for definido, o campo de texto se torna obrigatório. O atributo maxlength define o número máximo de caracteres permitidos.

#### Métodos

* updateAttributes(): Atualiza todos os atributos do campo de texto, como nome, rótulo, classes, linhas, placeholder, obrigatoriedade e comprimento máximo.
* updateName(): Define o atributo name do campo de texto.
* updateLabel(): Define o conteúdo do rótulo associado ao campo de texto.
* updateClass(): Define as classes CSS aplicadas ao campo de texto.
* updateRows(): Define o número de linhas visíveis no campo de texto.
* updatePlaceholder(): Define o placeholder do campo de texto.
* updateRequired(): Define se o campo é obrigatório.
* updateMaxLength(): Define o número máximo de caracteres permitidos.

Este componente é ideal para criar campos de texto customizáveis e reutilizáveis em formulários, com suporte a validação e personalização de estilo.

## br-radio-horizontal

O `BRRadioHorizontalComponente` é um Web Component personalizado em JavaScript, que cria uma interface de rádio em formato horizontal. Este componente carrega dinamicamente um template HTML e permite que os atributos sejam definidos diretamente no HTML, como o ID, nome, classe, estilo, rótulo (label), e propriedades como `required` e `disabled`. Além disso, é possível associar eventos personalizados através de atributos do tipo `on<Evento>`.

#### Atributos

O componente aceita os seguintes atributos:

* **`inputId`** (string): Define o valor do atributo `id` para o elemento `input` do rádio e associa o `label` ao `input` através do atributo `for`.
* **`eName`** (string): Define o valor do atributo `name` para o elemento `input` do rádio, permitindo agrupar múltiplos botões de rádio.
* **`inputClass`** (string): Define classes CSS adicionais para o elemento `input` do rádio.
* **`inputStyle`** (string): Aplica estilos inline ao elemento `input` do rádio.
* **`label`** (string): Define o texto exibido como rótulo associado ao botão de rádio.
* **`required`** (boolean): Indica se o botão de rádio é obrigatório. Se o atributo estiver presente, o campo será obrigatório.
* **`isDisabled`** (boolean): Indica se o botão de rádio está desabilitado. Se o atributo estiver presente, o campo será desabilitado.
* **Eventos Personalizados** : Você pode associar eventos ao componente através de atributos como `onClick`, `onChange`, entre outros. O valor deve ser o nome de uma função global que será chamada quando o evento ocorrer. Por exemplo, `onClick="handleRadioClick"`.

#### Exemplo de uso:

```javascript
<br-radio-horizontal-component
    inputId="radio-opcao-1"
    eName="radioGroup"
    inputClass="custom-radio-class"
    inputStyle="margin-left: 10px;"
    label="Opção 1"
    required
    isDisabled="false"
    onClick="handleRadioClick">
</br-radio-horizontal-component>

```

#### Métodos

`updateAttributes()`

Atualiza todos os atributos do componente de acordo com os valores definidos no HTML.

`addEventListeners()`

Adiciona event listeners personalizados ao elemento `input`, baseados nos atributos que começam com `on<Evento>`.

`attributeChangedCallback(name, oldValue, newValue)`

É chamado sempre que um dos atributos observados (`inputId`, `eName`, `inputClass`, `inputStyle`, `label`, `required`, `isDisabled`) muda.

`connectedCallback()`

Executado quando o componente é adicionado ao DOM, inicializando os atributos e eventos.

#### Eventos

Você pode vincular eventos ao componente utilizando atributos no HTML:

```javascript
<br-radio-horizontal-component
    inputId="radio-opcao-2"
    label="Opção 2"
    onClick="handleRadioClick">
</br-radio-horizontal-component>

```

Neste exemplo, o evento `click` será capturado, e a função `handleRadioClick` será executada.

#### Funcionamento

* O componente carrega seu template HTML de um arquivo externo (`br-radio-horizontal.html`).
* Os atributos são lidos e aplicados aos elementos internos (`input` e `label`).
* É possível vincular eventos customizados ao componente via atributos HTML.
* As mudanças nos atributos do componente são observadas e refletidas imediatamente nos elementos internos.

## Geração de PDF

A geração do documento PDF é realizada a partir do conteúdo das seções marcadas com a classe `toPdf`. Para iniciar o processo de geração do PDF, o usuário deverá clicar no botão "Gerar Documento", conforme o exemplo abaixo:

```html
<button id="gerarDocumento">Gerar Documento</button>
```

### Função de Geração de PDF

O botão "Gerar Documento" dispara a função que varre o documento HTML, captura o conteúdo das seções com a classe `toPdf` e gera o arquivo PDF final.

#### Exemplo de Comportamento:

1. O usuário clica no botão "Gerar Documento".
2. O script de geração de PDF é acionado.
3. O PDF é gerado contendo apenas as seções com a classe `toPdf`.

## Exemplo Completo

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Documento</title>
</head>
<body>

  <!-- Seção 1: Incluída no PDF -->
  <section id="informacoes-pessoais" class="toPdf">
    <h1>Informações Pessoais</h1>
    <p>Nome: João da Silva</p>
    <p>Email: joao@email.com</p>
  </section>

  <!-- Seção 2: Não incluída no PDF -->
  <section id="detalhes-internos">
    <h1>Detalhes Internos</h1>
    <p>Informações internas do sistema.</p>
  </section>

  <!-- Seção 3: Incluída no PDF -->
  <section id="resumo-final" class="toPdf">
    <h1>Resumo Final</h1>
    <p>Este é o resumo final do relatório.</p>
  </section>

  <!-- Botão para gerar PDF -->
  <button id="gerarDocumento">Gerar Documento</button>

  <script>
    document.getElementById('gerarDocumento').addEventListener('click', function() {
      // Lógica de geração do PDF utilizando as seções com classe "toPdf"
    });
  </script>

</body>
</html>
```

## Considerações Finais

- Cada nova parte do HTML **deve estar encapsulada** em uma tag `<section>`.
- **IDs são obrigatórios** para cada tag `<section>`.
- Para incluir uma seção no PDF, **adicionar a classe `toPdf`**.
- A geração do PDF é disparada pelo clique no botão **"Gerar Documento"**.

Essa arquitetura garante que os novos HTMLs criados sigam um padrão bem estruturado, facilitando a manutenção e a geração de documentos PDF com conteúdo selecionado.