@govbr-ds/webcomponents 2.0.0-next.18 → 2.0.0-next.19

package/README.md

@@ -11,7 +11,7 @@ Disponibilizar uma biblioteca de componentes baseada no [GovBR-DS](https://gov.b
 Acesse nossos sites e veja nossos componentes em ação:
 
 - [Produção](https://gov.br/ds/webcomponents/)
-- [Desenvolvimento](https://govbr-ds.gitlab.io/bibliotecas/wc/)
+- [Desenvolvimento](https://govbr-ds.gitlab.io/bibliotecas/wbc/govbr-ds-wbc/)
 
 ## Tecnologias
 
@@ -71,7 +71,7 @@ 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/loader"
+@import "node_modules/@govbr-ds/webcomponents/loader"
 ```
 
 - CDN (não mantidos por nossa equipe)
@@ -104,6 +104,13 @@ Para importar no seu VSCODE, adicione o campo abaixo alterando o local onde o se
 }
 ```
 
+### 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/bibliotecas/wc 'GovBR-DS/WC') e procure pelos projetos de 'Quickstart' para mais detalhes.
@@ -126,10 +133,11 @@ webcomponents/
 │ │   ├── br-component.tsx
 │ │   └── readme.md
 │ ├── pages/
-│ │ └── br-component/
-│ │     └── component.js
-│ │     └── exemplo.html
-│ │     └── stackblitz.html
+│ │ └── components/
+  │ │ └── br-component/
+  │ │     └── index.js
+  │ │     └── exemplo.html
+│ │ └── scripts/
 │ └── utils/
 │ └── index.html
 ├── stencil.config.ts
@@ -159,17 +167,19 @@ webcomponents/
 
       - **br-component.scss**: O arquivo de estilo do componente.
 
-      - **readme.md**: Documentação gerada automaticamente do componente durante `build` e outras informações incluídas manualmente.
+      - **readme.md**: Documentação gerada automaticamente do componente durante `build`.
 
   - **pages/**: Contém os exemplos dos componentes Web que serão criados com Stencil. Cada componente tem sua própria pasta.
 
-    - **br-component/**: Uma pasta específica para o componente `br-component`.
+    - **components/**: Pasta com os exemplos dos componentes.
+
+    - **scripts/**: Pasta com os scripts usados no ambiente de desenvolvimento.
 
-      - **component.js**: Arquivo com paga executar ações nos exemplos, como escutar por eventos.
+      - **br-component/**: Uma pasta específica para o componente `br-component`.
 
-      - **exemplo.html**: Arquivos com o código de cada exemplo.
+        - **index.js**: Arquivo com paga executar ações nos exemplos, como escutar por eventos.
 
-      - **stackblitz.html**: Arquivo usado como `index.html` dos exemplos. Usado pelo stackblitz.
+        - **exemplo.html**: Arquivos com o código de cada exemplo.
 
   - **utils/**: Pasta para utilitários ou funções auxiliares que podem ser usadas em todo o projeto.
   -
@@ -213,6 +223,28 @@ Por exemplo, sempre use os mesmos comentários para os métodos do ciclo de vida
 
 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
 
 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.

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

@@ -1,38 +1,24 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a1cc4aa4.js');
-const inheritedAttributes = require('./inherited-attributes-61a2aff9.js');
+const index = require('./index-81c11ce2.js');
+const inheritedAttributes = require('./inherited-attributes-16f7d388.js');
 
-const avatarCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-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]{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:flex !important}.align-items-center{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{flex:1 0 0%;min-width:8.3333333333%}.col-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:flex;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:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{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}::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) 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]+*{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);align-items:center;background-color:transparent;border:0;display:inline-flex;font-size:var(--avatar-text-size);font-weight:var(--font-weight-bold);justify-content:center;line-height:var(--avatar-size);vertical-align:middle}.br-avatar .content{align-items:center;background-color:var(--blue-10);border-radius:50%;color:var(--blue-warm-20);display:inline-flex;font-size:var(--avatar-text-size);height:var(--avatar-size);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{align-items:center;background-color:var(--blue-10);border-radius:50%;color:var(--blue-warm-20);display:inline-flex;font-size:var(--avatar-text-size);height:var(--avatar-size);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 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;
 
-var Density;
-(function (Density) {
-    Density["Small"] = "small";
-    Density["Medium"] = "medium";
-    Density["Large"] = "large";
-})(Density || (Density = {}));
 const Avatar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.brDidConnect = index.createEvent(this, "brDidConnect", 7);
-        this.brWillLoad = index.createEvent(this, "brWillLoad", 7);
-        this.brDidLoad = index.createEvent(this, "brDidLoad", 7);
-        this.brWillRender = index.createEvent(this, "brWillRender", 7);
-        this.brDidRender = index.createEvent(this, "brDidRender", 7);
-        this.brShouldUpdate = index.createEvent(this, "brShouldUpdate", 7);
-        this.brWillUpdate = index.createEvent(this, "brWillUpdate", 7);
-        this.brDidUpdate = index.createEvent(this, "brDidUpdate", 7);
-        this.brDidDisconnect = index.createEvent(this, "brDidDisconnect", 7);
-        /**
-         * Calcula o tamanho dos ícones de acordo com a classe de densidade
-         */
         this.iconSizes = {
-            small: { height: '32', width: '40' },
-            medium: { height: '80', width: '88' },
-            large: { height: '128', width: '136' },
+            small: { height: '32px', width: '40px' },
+            medium: { height: '80px', width: '88px' },
+            large: { height: '128px', width: '136px' },
         };
         this.iconMarginTops = {
             small: '0.7em',
@@ -40,42 +26,17 @@ const Avatar = class {
             large: '0.62em',
         };
         this.inheritedAttributes = {};
-        this.density = Density.Medium;
+        this.density = 'medium';
         this.image = undefined;
         this.imageAlt = 'Imagem do avatar';
         this.isIconic = false;
         this.text = undefined;
         this.iconWidth = undefined;
         this.iconHeight = undefined;
-    }
-    connectedCallback() {
-        this.brDidConnect.emit();
+        this.marginTop = undefined;
     }
     componentWillLoad() {
-        this.brWillLoad.emit();
         this.inheritedAttributes = inheritedAttributes.inheritAriaAttributes(this.el);
-        this.setIconSize();
-    }
-    componentDidLoad() {
-        this.brDidLoad.emit();
-    }
-    componentWillRender() {
-        this.brWillRender.emit();
-    }
-    componentDidRender() {
-        this.brDidRender.emit();
-    }
-    componentShouldUpdate() {
-        this.brShouldUpdate.emit();
-    }
-    componentWillUpdate() {
-        this.brWillUpdate.emit();
-    }
-    componentDidUpdate() {
-        this.brDidUpdate.emit();
-    }
-    disconnectedCallback() {
-        this.brDidDisconnect.emit();
     }
     /**
      * Gera um mapa de classes CSS com base nas propriedades do componente.
@@ -87,24 +48,13 @@ const Avatar = class {
     getCssClassMap() {
         return {
             'br-avatar': true,
-            small: this.density === Density.Small,
-            medium: this.density === Density.Medium,
-            large: this.density === Density.Large,
+            small: this.density === 'small',
+            medium: this.density === 'medium',
+            large: this.density === 'large',
         };
     }
-    setIconSize() {
-        var _a, _b;
-        if (((_a = this.image) === null || _a === void 0 ? void 0 : _a.trim().length) !== 0 && ((_b = this.text) === null || _b === void 0 ? void 0 : _b.trim().length) !== 0) {
-            const size = this.iconSizes[this.density];
-            this.iconHeight = size.height;
-            this.iconWidth = size.width;
-        }
-    }
-    adjustIconStyle(density) {
-        return this.iconMarginTops[density] || '1em';
-    }
     renderAvatar() {
-        var _a, _b;
+        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()));
         }
@@ -112,11 +62,11 @@ const Avatar = class {
             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: this.iconHeight, width: this.iconWidth, "aria-hidden": "true", style: { 'margin-top': this.adjustIconStyle(this.density) } })));
+            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: '90d4903713585ba969eb111676d95f89c53522f5' }, index.h("span", Object.assign({ key: '3bb155bdc14da14da5bb576323446157636f3974', class: this.getCssClassMap() }, this.inheritedAttributes), this.renderAvatar())));
+        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); }
 };

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

@@ -1 +1 @@
-{"file":"br-avatar.entry.cjs.js","mappings":"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","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, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\nenum Density {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n}\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: string = Density.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  /**\n   * Emite um evento quando o componente é conectado ao DOM.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n   */\n  @Event() brDidConnect: EventEmitter<void>\n  connectedCallback() {\n    this.brDidConnect.emit()\n  }\n\n  /**\n   * Emite um evento antes que o componente seja carregado pela primeira vez.\n   * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n   */\n  @Event() brWillLoad: EventEmitter<void>\n  componentWillLoad() {\n    this.brWillLoad.emit()\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n    this.setIconSize()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado.\n   * Utilize este evento para preparar o componente antes de sua renderização.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    this.brWillRender.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido renderizado.\n   * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    this.brDidRender.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n  componentShouldUpdate() {\n    this.brShouldUpdate.emit()\n  }\n\n  /**\n   * Emite um evento antes de o componente ser atualizado.\n   * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n   */\n  @Event() brWillUpdate: EventEmitter<void>\n  componentWillUpdate() {\n    this.brWillUpdate.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido atualizado.\n   * Utilize este evento para realizar ações após a atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n   */\n  @Event() brDidUpdate: EventEmitter<void>\n  componentDidUpdate() {\n    this.brDidUpdate.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é desconectado do DOM.\n   * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n   */\n  @Event() brDidDisconnect: EventEmitter<void>\n  disconnectedCallback() {\n    this.brDidDisconnect.emit()\n  }\n\n  // Largura do ícone no avatar do tipo icônico\n  @State() iconWidth: string\n\n  // Altura do ícone no avatar do tipo icônico\n  @State() iconHeight: 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 === Density.Small,\n      medium: this.density === Density.Medium,\n      large: this.density === Density.Large,\n    }\n  }\n\n  /**\n   * Calcula o tamanho dos ícones de acordo com a classe de densidade\n   */\n  private readonly iconSizes = {\n    small: { height: '32', width: '40' },\n    medium: { height: '80', width: '88' },\n    large: { height: '128', width: '136' },\n  }\n\n  private setIconSize() {\n    if (this.image?.trim().length !== 0 && this.text?.trim().length !== 0) {\n      const size = this.iconSizes[this.density]\n      this.iconHeight = size.height\n      this.iconWidth = size.width\n    }\n  }\n\n  private readonly iconMarginTops = {\n    small: '0.7em',\n    medium: '1em',\n    large: '0.62em',\n  }\n\n  private adjustIconStyle(density: string) {\n    return this.iconMarginTops[density] || '1em'\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}\n            width={this.iconWidth}\n            aria-hidden=\"true\"\n            style={{ 'margin-top': this.adjustIconStyle(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}
+{"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}