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

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 SERPRO
+Copyright (c) 2018
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,27 +1,66 @@
 # Web Components GovBR-DS
 
-Biblioteca baseada no [GovBR-DS](https://gov.br/ds 'GovBR-DS') e construída usando Web Components para ser independente de frameworks.
+Biblioteca de Web Components do [GovBR-DS](https://gov.br/ds).
+
+## Objetivo
+
+Disponibilizar uma biblioteca de componentes baseada no [GovBR-DS](https://gov.br/ds 'GovBR-DS') que possa ser consumida independente de frameworks ou tecnologias utilizadas.
+
+## Demonstração
+
+Acesse nossos sites e veja nossos componentes em ação:
+
+- [Produção](https://gov.br/ds/webcomponents/)
+- [Desenvolvimento](https://govbr-ds.gitlab.io/bibliotecas/wbc/govbr-ds-wbc/)
 
 ## Tecnologias
 
 Esse projeto é desenvolvido usando:
 
 1. [GovBR-DS](https://gov.br/ds/ 'GovBR-DS')
-2. [Font Awesome](https://fontawesome.com/ 'Font Awesome')
-3. [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline')
-4. [VueJS 3](https://v3.vuejs.org/ 'VueJS 3')
-5. [Storybook](https://storybook.js.org/ 'Storybook')
-6. [Jest](https://jestjs.io/ 'Jest')
+1. [Stencil](https://stenciljs.com/ 'Stencil')
+1. [Font Awesome](https://fontawesome.com/ 'Font Awesome')
+1. [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline')
+1. [NX Monorepo](https://nx.dev/ 'NX Monorepo')
 
-> Para saber mais detalhes sobre Web Components sugerimos que consulte o [MDN](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components 'Web Components | MDN').
+## O que são Web Components?
 
-## Documentações Complementares
+São um conjunto de tecnologias que permitem aos desenvolvedores criar novos elementos HTML personalizados, reutilizáveis ​​e encapsulados para uso em páginas e aplicativos da web. Eles se baseiam em padrões da web existentes e são suportados por todos os navegadores modernos.
+
+O diagrama mostra os três componentes principais dos Web Components:
+
+- Elementos HTML personalizados: tags HTML definidas usando JavaScript e podem ser usados ​​como qualquer outro elemento HTML.
+- Shadow DOM: é um espaço de nome encapsulado para cada elemento HTML personalizado. Isso significa que os estilos e o JavaScript do elemento não interferem no resto da página.
+- Templates: são fragmentos de HTML que podem ser reutilizados em vários elementos.
+- Slots: são áreas em um elemento HTML personalizado onde templates podem ser inseridos.
+
+### Benefícios dos Web Components
+
+1. Reusabilidade
+1. Modularidade
+1. Encapsulamento
+1. Compatibilidade
+1. Manutenibilidade
+
+### Ciclo de Vida
+
+Para entender melhor o ciclo de vida dos componentes, acesse a página [https://stenciljs.com/docs/component-lifecycle](https://stenciljs.com/docs/component-lifecycle).
+
+## Integração com frameworks
+
+A integração entre Web Components e frameworks pode não ser fácil em determinadas situações. Por isso nós criamos as bibliotecas de integração (wrappers). Basicamente eles encapsulam os Web Components em uma biblioteca de componentes na tecnologia nativa de algum framework. Isso facilita a integração com funcionalidades nativas dos frameworks, como por exemplo o binding.
+
+Para mais detalhes sobre como o Stencil faz a integração consulte [a documentação do Stencil sobre integrações](https://stenciljs.com/docs/overview).
 
-Consulte nossa a seção sobre Web Componente na nossa [Wiki](https://govbr-ds.gitlab.io/tools/wiki/hugo-cms/desenvolvimento/web-components) para obter mais informações.
+Note que determinadas situações pode não ser possível fazer essa integração. Isso depende muito da evolução da especificação de Web Components e do suporte dos frameworks.
 
-## Uso
+## Font Awesome e Fonte Rawline
 
-Existem 2 maneiras de usar nossos Web Components:
+Nossos componentes usam a [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline') juntamente com a [Font Awesome](https://fontawesome.com/ 'Font Awesome') padrão do DS.
+
+Consulte a documentação no site do [GovBR-DS](https://www.gov.br/ds/como-comecar/instalacao 'GovBR-DS') para mais detalhes sobre como importá-los de seus respectivos CDNs.
+
+## Instalação e Uso
 
 - Pacote NPM
 
@@ -32,154 +71,211 @@ npm install --save @govbr-ds/webcomponents
 Depois de instalada, importe a biblioteca de dentro da pasta *node_modules*:
 
 ```javascript
-@import "node_modules/@govbr-ds/webcomponents/dist/webcomponents.umd.min.js"
+@import "node_modules/@govbr-ds/webcomponents/loader"
 ```
 
-- CDN
+- CDN (não mantidos por nossa equipe)
 
 ```html
-<script src="https://unpkg.com/@govbr-ds/webcomponents@VERSÃO/dist/webcomponents.umd.min.js"></script>
+<script src="https://unpkg.com/@govbr-ds/webcomponents@<VERSÃO>/loader/index.js"></script>
+
+ou
+
+<script src="https://cdn.jsdelivr.net/npm/@govbr-ds/webcomponents@<VERSÃO>/loader/index.js"></script>
 ```
 
-> Troque **versão** pela versão do pacote que deseja
+**Importante**: Dependendo do seu projeto pode ser necessário importar diretamente o arquivo `/dist/webcomponents/webcomponents.esm.js`. Observe as necessidades do seu projeto e importe os arquivos de acordo.
 
-**Importante**: O CDN <https://unpkg.com/> não é mantido por nossa equipe e portanto não podemos garantir um SLO. Considere importar os arquivos necessários para uma infraestrutura interna caso isso seja um impedimento para seu projeto.
+E por último, importe o CSS com os tokens do `@govbr-ds/core`:
 
-### Font Awesome e Fonte Rawline
+```html
+    <link rel="stylesheet" href="/assets/styles/core-tokens.min.css" />
+```
 
-Nossos componentes usam a [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline') juntamente com a [Font Awesome](https://fontawesome.com/ 'Font Awesome') padrão do DS.
+## VSCODE
 
-Consulte a documentação no site do [GovBR-DS](https://www.gov.br/ds/como-comecar/instalacao 'GovBR-DS') para mais detalhes sobre como importá-los de seus respectivos CDNs.
+Ao criar nossos Web Components fazemos uso de custom elements. O VSCODE não conhece os componentes e por isso não consegue fazer sugestões inteligentes para usar no autocomplete. Para auxiliar com isso nós geramos um arquivo `vscode-data.json` com as definições dos componentes e disponibilizamos junto com o nosso pacote npm.
+
+Para importar no seu VSCODE, adicione o campo abaixo alterando o local onde o seu projeto armazena o `node_modules`.
+
+```json
+{
+  "html.customData": ["./node_modules/@govbr-ds/webcomponents/vscode-data.json"]
+}
+```
+
+### Build
+
+Nesse projeto stencil ao gerar um `build` do projeto também são gerados automaticamente:
+
+- Arquivo `readme.md` dentro da pasta de cada componente.
+- Documentações dos componentes na pasta `apps/site/docs/stencil-generated-docs` para serem usadas e versionadas pelo site.
 
 ### Exemplos de uso
 
-Disponibilizamos alguns exemplos de como usar esse projeto com algumas tecnologias. Consulte o [nosso grupo aqui no gitlab](https://gitlab.com/govbr-ds/dev/wbc 'GovBR-DS/DEV/WBC') e procure pelos projetos de 'Quickstart' para mais detalhes.
+Disponibilizamos alguns exemplos de como usar esse projeto com algumas tecnologias. Consulte o [nosso grupo aqui no gitlab](https://gitlab.com/govbr-ds/bibliotecas/wc 'GovBR-DS/WC') e procure pelos projetos de 'Quickstart' para mais detalhes.
 
-## Estrutura de pastas
+## Arquitetura do Projeto Stencil
 
-> Vamos explicar apenas as pastas/arquivos que são importantes para o entendimento do projeto e contribuição.
+### Estrutura do Projeto
 
 ```markdown
-/raiz
-└───public
-│ └───index.html
-└───src
-│ │───App.vue
-│ │───main.js
-│ │
-│ │───library
-│ │ │───lib.js
-│ │ │───components
-│ │ │───mixins
-│ │ └───util
-│ │───pages
-│ │───router
-│ └───stories
+webcomponents/
+├── src/
+│ ├── components/
+│ │ └── br-component/
+│ │   ├── sections/
+│ │   │   └── migrate.md
+│ │   ├── tests/
+│ │   │   ├── br-component.e2e.ts
+│ │   │   └── br-component.spec.tsx
+│ │   ├── br-component.scss
+│ │   ├── br-component.tsx
+│ │   └── readme.md
+│ ├── pages/
+│ │ └── components/
+  │ │ └── br-component/
+  │ │     └── index.js
+  │ │     └── exemplo.html
+│ │ └── scripts/
+│ └── utils/
+│ └── index.html
+├── stencil.config.ts
+├── package.json
+└── tsconfig.json
 ```
 
-- **public/index.html**: página inicial da aplicação Vue que faz uso dos componentes da biblioteca.
-- **src**
-  - **App.vue** e **main.js**: arquivos da aplicação Vue.
-  - **library**
-    - **lib.js**: inicializa todos os custom elements e define o que faz parte da biblioteca. É usado para fazer o build final.
-    - **components**: pasta com os componentes da biblioteca, seus testes e stories do storybook.
-    - **mixins**: mixins que são usados em vários componentes.
-    - **util**: funções criadas para facilitar ações dentro dos componentes
-  - **pages**: páginas da aplicação Vue. São os exemplos que usamos para testar
-  - **router**: arquivo com as rotas apontando para as páginas (pages) da aplicação Vue
-  - **stories**: Arquivos com as stories gerais do storybook
+#### Descrição dos Diretórios
 
-> Aplicação Vue é uma aplicação criada para testar rapidamente nossos componentes. Ela não é disponibilizada no build e nem disponibilizamos um site com ela.
+- **src/**: Contém o código-fonte do projeto.
 
-## Rodar o projeto na máquina local
+  - **components/**: Contém os componentes Web que serão criados com Stencil. Cada componente tem sua própria pasta.
 
-Clone o projeto:
+    - **br-component/**: Uma pasta específica para o componente `br-component`.
 
-```bash
-git clone git@gitlab.com:govbr-ds/dev/wbc/govbr-ds-wbc.git
-```
+      - **sections/**: Pasta com arquivos markdown para serem incluídos no site.
 
-Entre no diretório do projeto:
+        - **migrate.md**: Arquivo explicando 'como migrar' o componente da versão anterior para a nova.
 
-```bash
-cd govbr-ds-wbc
-```
+      - **test/**: Pasta com os arquivos de teste.
 
-Instale as dependências:
+        - **br-component.e2e.ts**: Arquivo para testes end-to-end (E2E) do componente.
 
-```bash
-npm install
-```
+        - **br-component.spec.tsx**: Arquivo para testes unitários (Unit) do componente.
 
-Para executar a nossa biblioteca a partir do código-fonte você tem 2 opções:
+      - **br-component.tsx**: O arquivo principal do componente, que contém a lógica e a estrutura do componente.
 
-###  Executar como VueJS Components
+      - **br-component.scss**: O arquivo de estilo do componente.
 
-Nessa visualização você executa o projeto em uma página auxiliar (fora do storybook) e sem compilar o resultado para Web Components.
+      - **readme.md**: Documentação gerada automaticamente do componente durante `build`.
 
-```node
-npm run serve
-```
+  - **pages/**: Contém os exemplos dos componentes Web que serão criados com Stencil. Cada componente tem sua própria pasta.
 
-###  Executar como Web Components
+    - **components/**: Pasta com os exemplos dos componentes.
 
-Nessa visualização o projeto é executado a partir do storybook e convertido para Web Components.
+    - **scripts/**: Pasta com os scripts usados no ambiente de desenvolvimento.
 
-Aqui você consegue testar as configurações, obter snippets de código e visualizar os componentes rodando como nos ambientes de produção.
+      - **br-component/**: Uma pasta específica para o componente `br-component`.
 
-```node
-npm run storybook
-```
+        - **index.js**: Arquivo com paga executar ações nos exemplos, como escutar por eventos.
 
-Essa compilação pode demorar para refletir as alterações na página. Assim, recomendamos que utilizem primeiro a execução como VueJS durante o desenvolvimento e quando considerarem as alterações maduras o suficiente façam os testes como Web Components.
+        - **exemplo.html**: Arquivos com o código de cada exemplo.
 
-## Documentação
+  - **utils/**: Pasta para utilitários ou funções auxiliares que podem ser usadas em todo o projeto.
+  -
+  - **index.html**: Página inicial do servidor de desenvolvimento.
 
-Nossa documentação está disponível em <https://gov.br/ds/webcomponents/>.
+#### Arquivos de Configuração
 
-## Contribuindo
+- **stencil.config.ts**: O principal arquivo de configuração para um projeto Stencil. Nele, você define opções de configuração como saída do build, plugins, global scripts, e outras opções.
 
-Antes de abrir um Merge Request tenha em mente algumas informações:
+- **package.json**: Contém as dependências do projeto e scripts úteis para construir e desenvolver os componentes.
 
-- Esse é um projeto opensource e contribuições são bem-vindas.
-- Para facilitar a aprovação da sua contribuição, escolha um título curto, simples e explicativo para o MR, e siga os padrões da nossa [wiki](https://gov.br/ds/wiki/ 'Wiki').
-- Quer contribuir com o projeto? Confira o nosso guia [como contribuir](./CONTRIBUTING.md 'Como contribuir?').
+- **tsconfig.json**: Arquivo de configuração do TypeScript que especifica as opções do compilador TypeScript para o projeto.
 
-### Reportar bugs/necessidades
+#### Scripts Úteis
 
-Você pode usar as [issues](https://gitlab.com/govbr-ds/dev/wbc/govbr-ds-wbc/-/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.
+- `build`: Gera um build do projeto e gera as documentações atualizadas.
+- `dev`: Executa o projeto em um servidor de desenvolvimento.
 
-Nos comprometemos a responder a todas as issues.
+### Fluxo de Trabalho
 
-## Precisa de ajuda?
+1. **Criar Componente**: Adicione um novo componente no diretório `src/components/` e crie os arquivos necessários.
+1. **Escrever Lógica**: Crie a lógica do componente.
+   1. Implemente a lógica do componente no arquivo `.tsx`.
+   1. Importe e sobrescreva o CSS necessário no arquivo `scss`.
+   1. Adicione informações relevantes no arquivo `readme.md`.
+   1. Coloque os exemplos de uso do componente dos arquivos da pasta `pages`.
+   1. Inclua o componente e seus exemplos no array de componentes e exemplos dentro do arquivo `src/index.html`.
+1. **Pré-visualizar**: Use o script `dev` para visualizar suas alterações localmente.
+1. **Testar Componentes**: Escreva e execute testes unitários e E2E para garantir a qualidade do componente.
+1. **Construir**: Use o script `build` para testar se o processo de compilação está funcionando corretamente.
 
-> Por favor **não** crie issues para fazer perguntas...
+É possível usar o `plop`para criar vários arquivos automaticamente para poupar tempo. Consulte a documentação do monorepo para mais detalhes.
 
-Use nossos canais abaixo para obter tirar suas dúvidas:
+#### Componentes
+
+Observe que os componentes **devem** seguir um padrão de escrita. Além das nomenclaturas (descritas na Wiki), devemos seguir os padrões de comentários/descrições, de validações e escrita geral dos componentes.
+
+Por exemplo, sempre use os mesmos comentários para os métodos do ciclo de vida dos componentes uma vez que eles são os mesmos para todos os componentes.
+
+#### Exemplos
+
+Os exemplos também tem modelos de escrita para ficarem iguais. Observe como os exemplos anteriores foram escritos e usem como base para os novos.
 
-- Site do GovBR-DS <http://gov.br/ds>
+## Regras de Versionamento e Releases
 
-- Web Components <https://gov.br/ds/webcomponents/>
+Utilizamos o **Semantic Release** para gerar versões automaticamente, baseando-nos nos tipos, escopos e mensagens dos commits para determinar o tipo de versão que será publicada (major, minor, ou patch). No entanto, em alguns casos, é necessário que certos commits sejam ignorados na avaliação para o lançamento de uma nova versão. Para esses casos, utilize os tipos e/ou escopos listados abaixo.
 
-- Pelo nosso email <govbr-ds@serpro.gov.br>
+### Tipos de Commits que Não Geram Releases
 
-- Usando nosso canal no discord <https://discord.gg/U5GwPfqhUP>
+Os seguintes tipos de commit são ignorados na criação de novas versões, pois representam alterações internas ou trabalhos em progresso que não afetam diretamente o comportamento externo do projeto:
 
-## Commits
+- **`build`**: Atualizações no sistema de build ou nas dependências, sem impacto no código final.
+- **`chore`**: Tarefas gerais de manutenção que não impactam o produto final ou sua funcionalidade.
+- **`ci`**: Ajustes no pipeline de integração contínua (CI), sem alteração direta no comportamento do produto.
+- **`test`**: Criação ou modificação de testes, sem alterações nas funcionalidades existentes.
+- **`wip`**: Trabalhos em progresso, indicados como incompletos ou ainda não prontos para produção.
 
-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.
+### Escopos de Commits que Não Geram Releases
 
-## Apêndice
+Em alguns casos, o escopo das alterações deixa claro que o commit não deve gerar uma nova versão, mesmo que o tipo de commit seja relevante. Para isso, os escopos abaixo são configurados para ignorar essas alterações no processo de versionamento:
+
+- **`site`**: Modificações no site de documentação, que não alteram o código do produto.
+- **`monorepo`**: Alterações feitas especificamente no repositório monorepo, sem impacto direto no projeto ou na biblioteca de componentes.
+- **`no-release`**: Qualquer commit marcado explicitamente para não gerar uma nova versão.
+
+## Documentações Complementares
+
+Consulte a seção sobre Web Componente na nossa [Wiki](https://gov.br/ds/wiki/desenvolvimento/web-components) para obter mais informações sobre esse projeto.
+
+Para saber mais detalhes sobre a especificação Web Components sugerimos que consulte o [MDN](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components 'Web Components | MDN').
 
 ### Polyfill
 
+Acesse os seguintes links para entender mais sobre o suporte dos browsers a [Custom Elements](https://caniuse.com/custom-elementsv1) e a [Shadow Dom](https://caniuse.com/shadowdomv1).
+
 Caso os requisitos do seu projeto incluam navegadores que não suportam completamente os Web Components, adicione os [polyfills](https://www.webcomponents.org/polyfills) ao seu projeto.
 
-Para aprender com instalar, consulte a [documentação oficial](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 'Polyfills')
+Para aprender com instalar, consulte a [documentação oficial](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 'Polyfills').
+
+## 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)
+
+### Recursos Adicionais
+
+Para mais informações, consulte a [documentação oficial do Stencil](https://stenciljs.com/docs/introduction).
 
 ## 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') e [Dataprev](https://www.dataprev.gov.br/ 'Dataprev | Empresa de Tecnologia e Informações da Previdência') juntamente com a participação da comunidade.
+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
 

package/dist/cjs/app-globals-77a217c6.js

@@ -0,0 +1,11 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
+'use strict';
+
+const globalScripts = () => {};
+
+exports.globalScripts = globalScripts;
+
+//# sourceMappingURL=app-globals-77a217c6.js.map

package/dist/cjs/app-globals-77a217c6.js.map

@@ -0,0 +1 @@
+{"file":"app-globals-77a217c6.js","mappings":";;;;;;AAAY,MAAC,aAAa,GAAG,MAAM;;;;","names":[],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"version":3}

package/dist/cjs/br-avatar.cjs.entry.js

@@ -0,0 +1,77 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-81c11ce2.js');
+const inheritedAttributes = require('./inherited-attributes-16f7d388.js');
+
+const avatarCss = "*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{display:none}.d-flex{display:-ms-flexbox !important;display:flex !important}.align-items-center{-ms-flex-align:center !important;align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter) * 0.5);padding-right:calc(var(--grid-gutter) * 0.5);width:100%}.col{-ms-flex:1 0 0%;flex:1 0 0%;min-width:8.3333333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.container{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@media (min-width: 576px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media (min-width: 992px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media (min-width: 1600px){.container{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mr-n2{margin-right:calc(var(--spacing-scale-base) * -1) !important}.mb-3{margin-bottom:var(--spacing-scale-2x) !important}.mr-auto{margin-right:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}.py-3{padding-bottom:var(--spacing-scale-2x) !important;padding-top:var(--spacing-scale-2x) !important}.py-4{padding-bottom:var(--spacing-scale-3x) !important;padding-top:var(--spacing-scale-3x) !important}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}img{max-width:100%;vertical-align:middle}ul{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-webkit-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}:-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.text-primary-default{color:var(--color-primary-default) !important}.bg-support-01{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark);background:var(--color-support-01) !important}.text-nowrap{white-space:nowrap !important}.text-base{font-size:var(--font-size-scale-base) !important}.highlight{background:var(--status-highlight-background) -webkit-gradient(linear, left top, left bottom, from(var(--status-highlight-overlay)), to(var(--status-highlight-overlay)));background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{-webkit-box-shadow:var(--surface-shadow-sm);box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.br-avatar{--avatar-size:var(--avatar-small);--avatar-icon-size:var(--avatar-icon-small);--avatar-text-size:var(--avatar-text-small);--avatar-small:40px;--avatar-medium:100px;--avatar-large:160px;--avatar-icon-small:var(--icon-size-2x);--avatar-icon-medium:var(--icon-size-5x);--avatar-icon-large:var(--icon-size-8x);--avatar-text-small:var(--font-size-scale-up-03);--avatar-text-medium:var(--font-size-scale-up-07);--avatar-text-large:var(--font-size-scale-up-11);-ms-flex-align:center;align-items:center;background-color:transparent;border:0;display:-ms-inline-flexbox;display:inline-flex;font-size:var(--avatar-text-size);font-weight:var(--font-weight-bold);-ms-flex-pack:center;justify-content:center;line-height:var(--avatar-size);vertical-align:middle}.br-avatar .content{-ms-flex-align:center;align-items:center;background-color:var(--blue-10);border-radius:50%;color:var(--blue-warm-20);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--avatar-text-size);height:var(--avatar-size);-ms-flex-pack:center;justify-content:center;overflow:hidden;text-align:center;text-transform:uppercase;vertical-align:inherit;width:var(--avatar-size)}.br-avatar .content img{height:var(--avatar-size);vertical-align:inherit;width:var(--avatar-size)}.br-avatar.small,.br-avatar[small]{--avatar-size:var(--avatar-small);--avatar-icon-size:var(--avatar-icon-small);--avatar-text-size:var(--avatar-text-small)}.br-avatar.is-medium,.br-avatar.medium,.br-avatar[medium]{--avatar-size:var(--avatar-medium);--avatar-icon-size:var(--avatar-icon-medium);--avatar-text-size:var(--avatar-text-medium)}.br-avatar.large,.br-avatar[large]{--avatar-size:var(--avatar-large);--avatar-icon-size:var(--avatar-icon-large);--avatar-text-size:var(--avatar-text-large)}.br-avatar[data-toggle=dropdown]:focus{outline:none}.br-avatar[data-toggle=dropdown]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-avatar .image{-ms-flex-align:center;align-items:center;background-color:var(--blue-10);border-radius:50%;color:var(--blue-warm-20);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--avatar-text-size);height:var(--avatar-size);-ms-flex-pack:center;justify-content:center;overflow:hidden;text-align:center;text-transform:uppercase;vertical-align:inherit;width:var(--avatar-size)}.br-avatar .image img{height:var(--avatar-size);vertical-align:inherit;width:var(--avatar-size)}:host{display:block}";
+const BrAvatarStyle0 = avatarCss;
+
+const Avatar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.iconSizes = {
+            small: { height: '32px', width: '40px' },
+            medium: { height: '80px', width: '88px' },
+            large: { height: '128px', width: '136px' },
+        };
+        this.iconMarginTops = {
+            small: '0.7em',
+            medium: '1em',
+            large: '0.62em',
+        };
+        this.inheritedAttributes = {};
+        this.density = 'medium';
+        this.image = undefined;
+        this.imageAlt = 'Imagem do avatar';
+        this.isIconic = false;
+        this.text = undefined;
+        this.iconWidth = undefined;
+        this.iconHeight = undefined;
+        this.marginTop = undefined;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritedAttributes.inheritAriaAttributes(this.el);
+    }
+    /**
+     * Gera um mapa de classes CSS com base nas propriedades do componente.
+     * O mapa de classes determina quais classes CSS devem ser aplicadas
+     * ao elemento host do componente, ajustando sua aparência.
+     *
+     * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.
+     */
+    getCssClassMap() {
+        return {
+            'br-avatar': true,
+            small: this.density === 'small',
+            medium: this.density === 'medium',
+            large: this.density === 'large',
+        };
+    }
+    renderAvatar() {
+        var _a, _b, _c, _d, _e;
+        if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.trim().length) > 0) {
+            return (index.h("span", { class: "content bg-support-01 text-pure-0", title: this.text }, this.text[0].toUpperCase()));
+        }
+        if (((_b = this.image) === null || _b === void 0 ? void 0 : _b.trim().length) > 0) {
+            return (index.h("span", { class: "content", title: this.imageAlt || this.text }, index.h("img", { src: this.image, alt: this.imageAlt, loading: "lazy" })));
+        }
+        if (this.isIconic) {
+            return (index.h("span", { class: "content", title: this.text }, index.h("br-icon", { "icon-name": "fa-solid:user", height: ((_c = this.iconHeight) === null || _c === void 0 ? void 0 : _c.length) > 0 ? this.iconHeight : this.iconSizes[this.density].height, width: ((_d = this.iconWidth) === null || _d === void 0 ? void 0 : _d.length) > 0 ? this.iconWidth : this.iconSizes[this.density].width, "aria-hidden": "true", style: { 'margin-top': ((_e = this.marginTop) === null || _e === void 0 ? void 0 : _e.length) > 0 ? this.marginTop : this.iconMarginTops[this.density] } })));
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '8e7d5a109467811e371dcfa56214f079b82970bb' }, index.h("span", Object.assign({ key: '63036c324a6be24469e6453a40af31e684973c1a', class: this.getCssClassMap() }, this.inheritedAttributes), this.renderAvatar())));
+    }
+    get el() { return index.getElement(this); }
+};
+Avatar.style = BrAvatarStyle0;
+
+exports.br_avatar = Avatar;
+
+//# sourceMappingURL=br-avatar.cjs.entry.js.map

package/dist/cjs/br-avatar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"br-avatar.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,szXAAszX,CAAC;AACz0X,uBAAe,SAAS;;MCWX,MAAM;;;QAuEA,cAAS,GAAG;YAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;YACxC,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;YACzC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;SAC3C,CAAA;QAEgB,mBAAc,GAAG;YAChC,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,KAAK;YACb,KAAK,EAAE,QAAQ;SAChB,CAAA;QAEO,wBAAmB,GAAe,EAAE,CAAA;uBAzEI,QAAQ;;wBAYrC,kBAAkB;wBAMT,KAAK;;;;;;IAQjC,iBAAiB;QACf,IAAI,CAAC,mBAAmB,GAAGA,yCAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;KAC1D;;;;;;;;IAwBO,cAAc;QACpB,OAAO;YACL,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/B,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACjC,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC,CAAA;KACF;IAgBO,YAAY;;QAClB,IAAI,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,GAAG,MAAM,IAAG,CAAC,EAAE;YAChC,QACEC,kBAAM,KAAK,EAAC,mCAAmC,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAC7D,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CACtB,EACR;SACF;QAED,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,GAAG,MAAM,IAAG,CAAC,EAAE;YACjC,QACEA,kBAAM,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,IACrDA,iBAAK,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAC,MAAM,GAAG,CACtD,EACR;SACF;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,QACEA,kBAAM,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IACpCA,kCACY,eAAe,EACzB,MAAM,EAAE,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,IAAG,CAAC,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,EAC3F,KAAK,EAAE,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,IAAG,CAAC,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,iBAC3E,MAAM,EAClB,KAAK,EAAE,EAAE,YAAY,EAAE,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,IAAG,CAAC,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,GAC/F,CACN,EACR;SACF;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,iFAAM,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAAM,IAAI,CAAC,mBAAmB,GAC7D,IAAI,CAAC,YAAY,EAAE,CACf,CACF,EACR;KACF;;;;;;;","names":["inheritAriaAttributes","h","Host"],"sources":["src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: block;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/avatar?tab=designer).\n */\n@Component({\n  tag: 'br-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrAvatarElement\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop() density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * URL da imagem a ser exibida no avatar do tipo 'fotográfico'.\n   * Deve ser uma URL válida que aponta para a imagem desejada.\n   */\n  @Prop() image: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade e SEO.\n   * Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: \"Foto de perfil de João Silva\".\n   */\n  @Prop() imageAlt = 'Imagem do avatar'\n\n  /**\n   * Indica se o avatar deve ser exibido como um ícone em vez de uma imagem fotográfica.\n   * Se definido como verdadeiro, o avatar será exibido como um ícone.\n   */\n  @Prop() isIconic: boolean = false\n\n  /**\n   * Texto exibido no avatar do tipo 'letra'.\n   * Esse texto será mostrado em vez de uma imagem e pode ser usado para representar iniciais ou outras informações textuais.\n   */\n  @Prop() text: string\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /**\n   * Largura do ícone no avatar do tipo icônico\n   * */\n  @Prop() iconWidth: string\n\n  /**\n   * Altura do ícone no avatar do tipo icônico\n   */\n  @Prop() iconHeight: string\n\n  /**\n   * Ajuste para a margem de cima do ícone no avatar do tipo icônico\n   */\n  @Prop() marginTop: string\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * O mapa de classes determina quais classes CSS devem ser aplicadas\n   * ao elemento host do componente, ajustando sua aparência.\n   *\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n    }\n  }\n\n  private readonly iconSizes = {\n    small: { height: '32px', width: '40px' },\n    medium: { height: '80px', width: '88px' },\n    large: { height: '128px', width: '136px' },\n  }\n\n  private readonly iconMarginTops = {\n    small: '0.7em',\n    medium: '1em',\n    large: '0.62em',\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private renderAvatar() {\n    if (this.text?.trim().length > 0) {\n      return (\n        <span class=\"content bg-support-01 text-pure-0\" title={this.text}>\n          {this.text[0].toUpperCase()}\n        </span>\n      )\n    }\n\n    if (this.image?.trim().length > 0) {\n      return (\n        <span class=\"content\" title={this.imageAlt || this.text}>\n          <img src={this.image} alt={this.imageAlt} loading=\"lazy\" />\n        </span>\n      )\n    }\n\n    if (this.isIconic) {\n      return (\n        <span class=\"content\" title={this.text}>\n          <br-icon\n            icon-name=\"fa-solid:user\"\n            height={this.iconHeight?.length > 0 ? this.iconHeight : this.iconSizes[this.density].height}\n            width={this.iconWidth?.length > 0 ? this.iconWidth : this.iconSizes[this.density].width}\n            aria-hidden=\"true\"\n            style={{ 'margin-top': this.marginTop?.length > 0 ? this.marginTop : this.iconMarginTops[this.density] }}\n          ></br-icon>\n        </span>\n      )\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <span class={this.getCssClassMap()} {...this.inheritedAttributes}>\n          {this.renderAvatar()}\n        </span>\n      </Host>\n    )\n  }\n}\n"],"version":3}