@govbr-ds/webcomponents 2.0.0-next.22 → 2.0.0-next.23

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018
+Copyright (c) 2020
 
 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,19 +1,15 @@
 # Web Components GovBR-DS
 
-Biblioteca de Web Components do [GovBR-DS](https://gov.br/ds).
+A biblioteca de Web Components do [GovBR-DS](https://gov.br/ds) está sendo desenvolvida utilizando o [Stencil](https://stenciljs.com/), um compilador que cria Web Components (Custom Elements). O Stencil incorpora os melhores conceitos dos frameworks mais populares em uma ferramenta simples de compilação. Para mais informações sobre o Stencil, visite o [site oficial](https://stenciljs.com/).
 
-## Objetivo
+## Demonstração 🚀
 
-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.
+Veja nossos componentes em funcionamento:
 
-## Demonstração
+- [Versão 1.x](https://gov.br/ds/webcomponents/)
+- [Versão 2.x (em desenvolvimento)](https://govbr-ds.gitlab.io/bibliotecas/wbc/govbr-ds-wbc/)
 
-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
+## Tecnologias 💻
 
 Esse projeto é desenvolvido usando:
 
@@ -60,36 +56,99 @@ Nossos componentes usam a [Fonte Rawline](https://www.cdnfonts.com/rawline.font/
 
 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
+## Instalação ⚙️
+
+Instale o pacote abaixo:
+
+```bash
+npm install --save-dev @govbr-ds/webcomponents
+```
+
+## Scripts Disponíveis 📜
+
+No arquivo `package.json` e `project.json`, você encontrará uma variedade de scripts úteis. Aqui está uma lista com a descrição de cada um:
 
-- Pacote NPM
+```bash
+nx start webcomponents
+```
+
+Executa o site no localhost para desenvolvimento.
+
+```bash
+nx build webcomponents
+```
+
+Compila o projeto para produção.
 
 ```bash
-npm install --save @govbr-ds/webcomponents
+nx test:unit webcomponents
 ```
 
+Executa os testes unitários.
+
+```bash
+nx lint:tsx webcomponents
+```
+
+Executa lint nos códigos TypeScript.
+
+```bash
+nx lint:md webcomponents
+```
+
+Executa lint nos arquivos markdown.
+
+```bash
+nx lint:styles webcomponents
+```
+
+Executa lint nos arquivos de estilos.
+
+## Configuração 🛠️
+
+Os passos para usar os Web Components GovBR-DS em uma aplicação podem variar dependendo da tecnologia usada. Abaixo estão os passos gerais para grande parte dos casos:
+
+### Adicione os tokens do `@govbr-ds/core`
+
+```ts
+import "node_modules/@govbr-ds/core/dist/core-tokens.min.css"
+```
+
+### Adicione o `loader` do JS
+
 Depois de instalada, importe a biblioteca de dentro da pasta *node_modules*:
 
 ```javascript
-@import "node_modules/@govbr-ds/webcomponents/loader"
+@import "node_modules/@govbr-ds/webcomponents/dist/loader"
 ```
 
-- CDN (não mantidos por nossa equipe)
+Também é possível importar o JS da biblioteca usando um CDN (não mantido por nossa equipe):
 
 ```html
-<script src="https://unpkg.com/@govbr-ds/webcomponents@<VERSÃO>/loader/index.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govbr-ds/webcomponents@<VERSÃO>/dist/loader/index.js"></>
+```
 
-ou
+**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.
+
+### Use as tags dos custom elements
 
-<script src="https://cdn.jsdelivr.net/npm/@govbr-ds/webcomponents@<VERSÃO>/loader/index.js"></script>
+```html
+<br-button>Click me!</br-button>
 ```
 
-**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.
+### Eventos
 
-E por último, importe o CSS com os tokens do `@govbr-ds/core`:
+Você pode escutar eventos padrão, como clique e mouseover, da mesma forma que faria com elementos HTML normais. Muitos componentes também emitem eventos personalizados, que recomendamos fortemente utilizar. Esses eventos funcionam como os eventos padrão, mas possuem nomes específicos. Consulte a documentação de cada componente para obter detalhes sobre os nomes e dados dos eventos.
 
 ```html
-    <link rel="stylesheet" href="/assets/styles/core-tokens.min.css" />
+<br-button>Label</br-button>
+
+<script>
+  const button = document.querySelector('br-button');
+  button.addEventListener('click', (event) => {
+    console.log('Botão foi clicado');
+  });
+</script>
 ```
 
 ## VSCODE
@@ -193,90 +252,40 @@ webcomponents/
 
 - **tsconfig.json**: Arquivo de configuração do TypeScript que especifica as opções do compilador TypeScript para o projeto.
 
-#### Scripts Úteis
-
-- `build`: Gera um build do projeto e gera as documentações atualizadas.
-- `dev`: Executa o projeto em um servidor de desenvolvimento.
-
-### Fluxo de Trabalho
-
-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.
-
-É possível usar o `plop`para criar vários arquivos automaticamente para poupar tempo. Consulte a documentação do monorepo para mais detalhes.
-
-#### 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.
-
-## Regras de Versionamento e Releases
-
-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.
-
-### Tipos de Commits que Não Geram Releases
-
-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:
-
-- **`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.
-
-### Escopos de Commits que Não Geram Releases
-
-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
+## 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
+## Contribuindo 🤝
 
-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).
+Antes de abrir um Merge Request, por favor, leve em consideração as seguintes informações:
 
-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.
+- Este é um projeto open-source e contribuições são bem-vindas.
+- Para facilitar a aprovação da sua contribuição, use um título claro e explicativo para o MR, e siga os padrões estabelecidos em nossa [wiki](https://gov.br/ds/wiki/ 'Wiki').
+- Quer contribuir? Consulte o nosso guia [como contribuir](https://gov.br/ds/wiki/comunidade/contribuindo-com-o-ds/ 'Como contribuir?').
 
-Para aprender com instalar, consulte a [documentação oficial](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 'Polyfills').
+## Reportar Bugs/Problemas ou Sugestões 🐛
 
-## Precisa de ajuda?
+Para reportar problemas ou sugerir melhorias, abra uma [issue](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/issues/new). Utilize o modelo adequado e forneça o máximo de detalhes possível.
 
-Por favor **não** crie issues para fazer perguntas.
+Nos comprometemos a responder a todas as issues.
 
-Use nossos canais abaixo para obter tirar suas dúvidas:
+## Commits 📝
 
-- 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)
+Este projeto segue um padrão para branches e commits. Consulte a documentação na nossa [wiki](https://gov.br/ds/wiki/ 'Wiki') para aprender mais sobre esses padrões.
 
-### Recursos Adicionais
+## Precisa de ajuda? 🆘
 
-Para mais informações, consulte a [documentação oficial do Stencil](https://stenciljs.com/docs/introduction).
+Por favor, **não** crie issues para perguntas gerais.
 
-## Créditos
+Use os canais abaixo para tirar suas dúvidas:
 
-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.
+- Site do GovBR-DS [http://gov.br/ds](http://gov.br/ds)
+- Web Components [https://gov.br/ds/webcomponents](https://gov.br/ds/webcomponents)
+- Canal no Discord [https://discord.gg/U5GwPfqhUP](https://discord.gg/U5GwPfqhUP)
 
-## Licença
+## Créditos 🎉
 
-Nesse projeto usamos a licença MIT.
+Os Web Components do [GovBR-DS](https://gov.br/ds/ 'GovBR-DS') foram desenvolvidos pelo [SERPRO](https://www.serpro.gov.br/ 'SERPRO | Serviço Federal de Processamento de Dados') em colaboração com a comunidade.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govbr-ds/webcomponents",
-  "version": "2.0.0-next.22",
+  "version": "2.0.0-next.23",
   "description": "Projeto de Web Components baseado no GovBR-DS",
   "keywords": [
     "design system",
@@ -17,29 +17,13 @@
   },
   "license": "MIT",
   "author": "SERPRO (http://serpro.gov.br/)",
-  "main": "dist/index.cjs.js",
-  "unpkg": "dist/webcomponents/webcomponents.esm.js",
-  "module": "dist/index.js",
-  "types": "dist/types/index.d.ts",
+  "main": "./dist/index.cjs.js",
+  "unpkg": "./dist/webcomponents/webcomponents.esm.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
   "files": [
-    "dist/",
-    "loader/",
-    "hydrate/",
-    "vscode-data.json"
+    "dist/"
   ],
-  "scripts": {
-    "build": "run-s build:prod lint:md",
-    "build:prod": "stencil build --prod",
-    "clear": "rm -rf .stencil dist hydrate loader www vscode-data.json",
-    "dev": "stencil build --dev --watch --serve",
-    "generate": "stencil generate",
-    "lint:md": "cross-env markdownlint -d -f '**/*.md'",
-    "lint:tsx": "eslint src/**/*{.ts,.tsx} --fix",
-    "test:e2e": "npx playwright test",
-    "test:e2e:ui": "npx playwright test --ui",
-    "test:unit": "stencil test --spec -- --collectCoverage",
-    "test:watch": "stencil test --spec --e2e --watchAll"
-  },
   "lint-staged": {
     "*.md": [
       "cross-env markdownlint -d -f -c .markdownlint.yml"
@@ -48,32 +32,12 @@
       "eslint --fix"
     ]
   },
-  "devDependencies": {
-    "@axe-core/playwright": "^4.10.0",
-    "@fullhuman/postcss-purgecss": "^6.0.0",
-    "@govbr-ds/core": "^3.6.0",
-    "@playwright/test": "^1.48.2",
-    "@stencil-community/eslint-plugin": "^0.9.0",
-    "@stencil-community/postcss": "^2.2.0",
-    "@stencil/angular-output-target": "^0.10.0",
-    "@stencil/core": "^4.22.2",
-    "@stencil/react-output-target": "^0.7.4",
-    "@stencil/sass": "^3.0.12",
-    "@stencil/vue-output-target": "0.8.9",
-    "@types/autoprefixer": "^10.2.4",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^22.9.0",
-    "autoprefixer": "^10.4.20",
-    "iconify-icon": "^2.1.0",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
-    "puppeteer": "^23.7.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "es2015": "dist/esm-es5/loader.js",
-  "es2017": "dist/esm/loader.js"
-}
+  "collection": "./dist/collection/collection-manifest.json",
+  "collection:main": "./dist/collection/index.js",
+  "es2015": "./dist/esm-es5/loader.js",
+  "es2017": "./dist/esm/loader.js",
+  "scripts": {
+    "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui"
+  }
+}

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

@@ -1,11 +0,0 @@
-/*!
- * 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

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

@@ -1,77 +0,0 @@
-/*!
- * Construído com @govbr-ds/webcomponents
- * Padrão Digital de Governo.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-4fc1aab1.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,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{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}.mb-1{margin-bottom: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}.ml-2{margin-left:var(--spacing-scale-base) !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

@@ -1 +0,0 @@
-{"file":"br-avatar.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,o7XAAo7X,CAAC;AACv8X,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 \"~@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}