npm package: @govbr-ds-testing/webcomponents-angular
Description: Biblioteca de integração dos Web Components GovBR-DS com o Angular
Author: SERPRO
Latest version: 1.23.5

# Webcomponents Angular

Bibiloteca de componentes angular que encapsulam os [Web Components GovBR-DS](https://gov.br/ds/webcomponents).

## Instalação

Instale os pacotes abaixo:

```bash
npm install --save-dev @govbr-ds/core @govbr-ds-testing/webcomponents @govbr-ds-testing/webcomponents-angular
```

## Uso

Inclua o módulo `WebcomponentsAngularModule` no arquivo `app.module.ts` da sua aplicação.

```typescript
import { WebcomponentsAngularModule } from '@govbr-ds-testing/webcomponents-angular'
import "@govbr-ds/core/dist/core.min.css";

...

@NgModule({
    ...
    imports: [
        WebcomponentsAngularModule,
    ],
    ...
})
export class AppModule { }

```

E no `.angular.json`:

```json
"architect": {
    "build": {
        "options": {
            "styles": [
                "node_modules/@govbr-ds/core/dist/core.min.css"
            ]
        }
    }
}
```

O `core.min.css` é quem define os valores dos tokens de CSS usados.

Em seguida, você pode utilizar qualquer web component disponibilizado pela biblioteca de Web Components diretamente nos templates HTML:

  ```html
  <br-button type="submit" emphasis="primary">
      Enviar Formulário
  </br-button>
  ```

  Consulte a documentação da biblioteca para saber quais propriedades cada componente pode receber.

## Uso dos Web Components seguindo as regras do angular

Os Web Components podem ser usados como qualquer outra tag HTML e funcionam no mecanismo de reatividade do angular, como "one-way-binding", "two-way-binding" e "events".

  ```html
  <br-button
      [active]="isActive"
      [disabled]=isDisabled
      emphasis="primary"
      type="button"
      (brComponentDidLoad)="onComponentDidLoad()"
  >{{ label }}
  </br-button>
  ```

Como pode ser notado, os Web Components emitem eventos de ciclo de vida, que pode ser ouvidos pelo angular, para executar uma determinada ação. Consulte a documentação do componente para saber mais sobre os eventos de ciclo de vida.

## Estrutura de pastas e arquivos

```markdown
- component-library
  - src
    - lib
      - stencil-generated
      - component-library.module.ts
    - index.ts
```

Ao gerar um build da biblioteca te Web Components os arquivos da pasta `src/lib/stencil-generated` são deletados e recriados. **Todas as alterações nesses arquivos vão ser perdidas ao gerar um novo build dos Web Components.**

O Arquivo `component-library.module.ts` exporta os componentes e registra os componentes como custom elements.

O Arquivo `index.ts` é o entry point da biblioteca.

## Build

Rode o comando `npm run build`.

## Reportar bugs/necessidades

Você pode usar as [issues](https://gitlab.com/govbr-ds/bibliotecas/wc/-/issues/new) para nos informar os problemas que tem enfrentado ao usar nossa biblioteca ou mesmo o que gostaria que fizesse parte do projeto. Por favor use o modelo que mais se encaixa na sua necessidade e preencha com o máximo de detalhes possível.

Nos comprometemos a responder a todas as issues.

## Commits

Nesse projeto usamos um padrão para branches e commits. Por favor observe a documentação na nossa [wiki](https://gov.br/ds/wiki/ 'Wiki') para aprender sobre os nossos padrões.

## Precisa de ajuda?

Por favor **não** crie issues para fazer perguntas.

Use nossos canais abaixo para obter tirar suas dúvidas:

- Site do GovBR-DS [http://gov.br/ds](http://gov.br/ds)
- Web Components [https://gov.br/ds/webcomponents](https://gov.br/ds/webcomponents)
- Usando nosso canal no discord [https://discord.gg/U5GwPfqhUP](https://discord.gg/U5GwPfqhUP)

## Créditos

Os Web Components do [GovBR-DS](https://gov.br/ds/ 'GovBR-DS') são criados pelo [SERPRO](https://www.serpro.gov.br/ 'SERPRO | Serviço Federal de Processamento de Dados') juntamente com a comunidade.

## Licença

Nesse projeto usamos a licença MIT.