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

package/dist/components/p-a6dcabb0.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxCss","BrCheckboxStyle0","Checkbox","proxyCustomElement","H","this","inheritedAttributes","handleCheckedChange","event","checked","target","brDidCheckedChange","emit","uuidv4","componentWillLoad","inheritAriaAttributes","el","hasSlotContentDefault","_slotDefault","innerHTML","getCssClassMap","valid","state","invalid","disabled","hasHiddenLabel","toggleChecked","render","h","Host","key","class","Object","assign","type","id","customId","name","indeterminate","value","onChange","htmlFor","label"],"sources":["src/components/checkbox/checkbox.scss?tag=br-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/checkbox/checkbox.scss\";\n\n:host {\n  display: block;\n}\n\n","import { AttachInternals, Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\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/checkbox?tab=designer).\n *\n * @slot default - O texto descritivo pode ser passado por propriedade (label) ou por slot.\n */\n@Component({\n  tag: 'br-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Checkbox {\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: HTMLBrCheckboxElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define o estado intermediário do checkbox.\n   * Se definido como verdadeiro, o checkbox exibirá um estado intermediário, que é um estado visual que indica que a opção está parcialmente selecionada.\n   * Este estado é útil quando o checkbox faz parte de um grupo com seleção parcial.\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false\n\n  /**\n   * Define o estado de seleção do checkbox.\n   * Se definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false\n\n  /**\n   * Identificador único do input.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true, attribute: 'id' }) customId: string = `br-input-${uuidv4()}`\n\n  /**\n   * Desativa o checkbox, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Define se o label associado ao checkbox deve ser oculto.\n   * Se definido como verdadeiro, o texto do label será oculto, mas o checkbox ainda estará visível e funcional.\n   */\n  @Prop({ reflect: true }) hasHiddenLabel: boolean = false\n\n  /**\n   * Texto descritivo exibido à direita do checkbox.\n   * Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Define o nome do checkbox, que é utilizado para agrupar checkboxes em formulários e identificar o campo.\n   * O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.\n   */\n  @Prop({ reflect: true }) name!: string\n\n  /**\n   * Indica a validade do checkbox.\n   * Valores possíveis:\n   * 'valid': O checkbox é considerado válido.\n   * 'invalid': O checkbox é considerado inválido.\n   * Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.\n   */\n  @Prop({ reflect: true }) state: 'valid' | 'invalid'\n\n  /**\n   * Define o valor associado ao checkbox quando ele faz parte de um formulário nativo (`<form>`).\n   * Esse valor é enviado com o formulário quando o checkbox está selecionado.\n   * **Nota:** Esta propriedade não deve ser utilizada para determinar se o checkbox está selecionado; para verificar o estado de seleção, use a propriedade `checked`.\n   */\n  @Prop({ reflect: true }) value: any\n\n  @State() _slotDefault: boolean = false\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n    this.hasSlotContentDefault()\n  }\n\n  private hasSlotContentDefault(): any {\n    this._slotDefault = this.el.innerHTML !== ''\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-checkbox': true,\n      valid: this.state === 'valid',\n      invalid: this.state === 'invalid',\n      disabled: this.disabled,\n      'hidden-label': this.hasHiddenLabel,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Disparado depois que o valor do `checked` foi alterado\n   */\n  @Event() brDidCheckedChange: EventEmitter<boolean>\n  private readonly handleCheckedChange = (event: Event) => {\n    this.checked = (event.target as HTMLInputElement).checked\n    this.brDidCheckedChange.emit(this.checked)\n  }\n\n  /**\n   * Inverte o valor da prop `checked`\n   */\n  @Method()\n  async toggleChecked() {\n    this.checked = !this.checked\n    this.brDidCheckedChange.emit(this.checked)\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getCssClassMap()}>\n          <input\n            type=\"checkbox\"\n            id={this.customId}\n            name={this.name}\n            checked={this.checked}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            value={this.value}\n            onChange={this.handleCheckedChange}\n            {...this.inheritedAttributes}\n          />\n          <label htmlFor={this.customId}>{this._slotDefault ? <slot></slot> : this.label}</label>\n        </div>\n      </Host>\n    )\n  }\n}\n"],"mappings":";;;;wIAAA,MAAMA,EAAc,ujcACpB,MAAAC,EAAeD,E,MCeFE,EAAQC,EAAA,MAAAD,UAAAE,E,sKAwFXC,KAAAC,oBAAkC,GAMzBD,KAAAE,oBAAuBC,IACtCH,KAAKI,QAAWD,EAAME,OAA4BD,QAClDJ,KAAKM,mBAAmBC,KAAKP,KAAKI,QAAQ,E,mBAlFM,M,aAMS,M,cAME,YAAYI,M,cAK5B,M,oBAMM,M,qGA8BlB,K,CAEjC,iBAAAC,GACET,KAAKC,oBAAsBS,EAAsBV,KAAKW,IACtDX,KAAKY,uB,CAGC,qBAAAA,GACNZ,KAAKa,aAAeb,KAAKW,GAAGG,YAAc,E,CAGpC,cAAAC,GACN,MAAO,CACL,cAAe,KACfC,MAAOhB,KAAKiB,QAAU,QACtBC,QAASlB,KAAKiB,QAAU,UACxBE,SAAUnB,KAAKmB,SACf,eAAgBnB,KAAKoB,e,CAmBzB,mBAAMC,GACJrB,KAAKI,SAAWJ,KAAKI,QACrBJ,KAAKM,mBAAmBC,KAAKP,KAAKI,Q,CAGpC,MAAAkB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO1B,KAAKe,kBACfQ,EAAA,QAAAI,OAAAC,OAAA,CAAAH,IAAA,2CACEI,KAAK,WACLC,GAAI9B,KAAK+B,SACTC,KAAMhC,KAAKgC,KACX5B,QAASJ,KAAKI,QACde,SAAUnB,KAAKmB,SACfc,cAAejC,KAAKiC,cACpBC,MAAOlC,KAAKkC,MACZC,SAAUnC,KAAKE,qBACXF,KAAKC,sBAEXsB,EAAA,SAAAE,IAAA,2CAAOW,QAASpC,KAAK+B,UAAW/B,KAAKa,aAAeU,EAAA,aAAgBvB,KAAKqC,Q","ignoreList":[]}

package/dist/components/p-ace62688.js

@@ -0,0 +1,6 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
+import{p as r,H as t,h as e,c as i}from"./p-65616dbd.js";import{i as a}from"./p-74a4eb38.js";const o='*,*::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-list{background-color:var(--background)}.br-list.horizontal{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.br-list.horizontal>.header{-ms-flex-positive:1;flex-grow:1;width:100%}.br-list.horizontal>.header+.br-divider{border-top:1px solid var(--border-color);width:100%}.br-list.horizontal>.br-item{-ms-flex:1;flex:1;height:auto;min-height:56px;width:auto}.br-list.horizontal>.br-item+.br-divider{border-width:0 1px 0 0;width:1px}.br-list.horizontal[data-toggle]>.br-item,.br-list.horizontal.toggle>.br-item{display:block}.br-list .br-item{text-align:left;width:100%}.br-list .br-item>.content{-ms-flex-align:var(--spacing-vertical-top);align-items:var(--spacing-vertical-top);display:-ms-flexbox;display:flex}.br-list .br-item>.content>.content{-ms-flex:1;flex:1}.br-list .br-item .content:hover button.br-button{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)))}.br-list .br-item[data-toggle]{cursor:pointer}.br-list .br-item[data-toggle]~.br-list .br-item{padding:var(--spacing-scale-base) var(--spacing-scale-3x)}.br-list .br-list{overflow:hidden;-webkit-transition:all 400ms ease-in-out;transition:all 400ms ease-in-out}.br-list .header{-ms-flex-align:var(--spacing-vertical-center);align-items:var(--spacing-vertical-center);display:-ms-flexbox;display:flex;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-bold);-ms-flex-pack:justify;justify-content:space-between;padding:var(--spacing-scale-base) var(--spacing-scale-2x)}.br-divider{--divider-size:var(--surface-width-sm);border-color:var(--border-color);border-style:solid;border-width:0;border-top-width:var(--divider-size);display:block}.br-divider.content{-ms-flex-align:center;align-items:center;border:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.br-divider.content::after,.br-divider.content::before{border-color:var(--border-color);border-style:solid;border-width:0;border-top-width:var(--divider-size);content:"";-ms-flex:1;flex:1}.br-divider.content::after{margin-left:var(--spacing-scale-base)}.br-divider.content::before{margin-right:var(--spacing-scale-base)}.br-divider.vertical{-ms-flex-item-align:stretch;align-self:stretch;border-right-width:var(--divider-size);border-top-width:0}.br-divider.vertical.content{-ms-flex-direction:column;flex-direction:column}.br-divider.vertical.content::after,.br-divider.vertical.content::before{border-right-width:var(--divider-size);border-top-width:0;margin:0}.br-divider.dark-mode{--border-color:var(--pure-0)}:host{display:block}:host .br-list.horizontal ::slotted(br-item){-ms-flex:1;flex:1;height:auto;min-height:56px;width:auto}';const n=o;const l=r(class r extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.elementInternals=this.attachInternals();this.inheritedAttributes={};this.renderHeader=()=>{var r;if(((r=this.header)===null||r===void 0?void 0:r.length)>0||this.hasSlotContent("header")){return e("div",{class:"header"},this.header&&e("div",{class:"title"},this.header),this.hasSlotContent("header")&&e("div",{class:"d-flex"},e("slot",{name:"header"})))}return null};this.header=undefined;this.isHorizontal=false;this.hideHeaderDivider=false}componentWillLoad(){this.inheritedAttributes=a(this.el)}componentDidLoad(){if(this.isHorizontal){const r=Array.from(this.el.querySelectorAll("br-item"));r.forEach((r=>{const t=r.nextElementSibling;if(t===null||t===void 0?void 0:t.classList.contains("br-divider")){const r=t;r.style.borderWidth="0 1px 0 0";r.style.width="1px"}}))}const r=Array.from(this.el.querySelectorAll("br-item"));r.forEach((r=>{r.setAttribute("role","listitem")}))}getCssClassMap(){return{"br-list":true,horizontal:this.isHorizontal}}hasSlotContent(r){return this.el.querySelector(`[slot="${r}"]`)!==null}renderDivider(){if((this.header||this.hasSlotContent("header"))&&!this.hideHeaderDivider){return e("div",{class:"br-divider"})}return null}render(){return e(i,{key:"d78205f2956019aeb8f6b291f00d09b2b041074e"},e("div",Object.assign({key:"dbc9f0b1cf3e4376feb5038cf38a4cb3b4566a94",class:this.getCssClassMap()},this.inheritedAttributes,{role:"list"}),this.renderHeader(),this.renderDivider(),e("slot",{key:"e89409ff1fce9ee0622d5afbfa73d2d44540bb68"})))}static get formAssociated(){return true}get el(){return this}static get style(){return n}},[65,"br-list",{header:[513],isHorizontal:[516,"is-horizontal"],hideHeaderDivider:[516,"hide-header-divider"]}]);function s(){if(typeof customElements==="undefined"){return}const r=["br-list"];r.forEach((r=>{switch(r){case"br-list":if(!customElements.get(r)){customElements.define(r,l)}break}}))}s();export{l as L,s as d};
+//# sourceMappingURL=p-ace62688.js.map

package/dist/components/p-ace62688.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["listCss","BrListStyle0","List","proxyCustomElement","H","this","inheritedAttributes","renderHeader","_a","header","length","hasSlotContent","h","class","name","componentWillLoad","inheritAriaAttributes","el","componentDidLoad","isHorizontal","slotItems","Array","from","querySelectorAll","forEach","item","nextElement","nextElementSibling","classList","contains","divider","style","borderWidth","width","items","setAttribute","getCssClassMap","horizontal","slotName","querySelector","renderDivider","hideHeaderDivider","render","Host","key","Object","assign","role"],"sources":["src/components/list/list.scss?tag=br-list&encapsulation=shadow","src/components/list/list.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/list/list.scss\";\n@import \"~@govbr-ds/core/src/components/divider/divider.scss\";\n\n:host {\n  display: block;\n\n  .br-list.horizontal ::slotted(br-item) {\n    flex: 1;\n    height: auto;\n    min-height: 56px;\n    width: auto;\n  }\n\n}\n","import { AttachInternals, Component, Element, Host, Prop, h } 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/list?tab=designer).\n *\n * @slot default - Slot padrão para inclusão dos itens da lista.\n * @slot header - Slot nomeado para inclusão de ações relacionadas ao cabeçalho do list (uso de botões por exemplo).\n */\n@Component({\n  tag: 'br-list',\n  styleUrl: 'list.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class List {\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: HTMLBrListElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define o cabeçalho para a lista.\n   */\n  @Prop({ reflect: true }) header: string\n\n  /**\n   * Indica se a lista será horizontal. Por padrão, a lista é vertical.\n   */\n  @Prop({ reflect: true }) isHorizontal: boolean = false\n\n  /**\n   * Indica que o divider para o título da lista estará oculto.\n   */\n  @Prop({ reflect: true }) hideHeaderDivider: boolean = false\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  componentDidLoad() {\n    if (this.isHorizontal) {\n      const slotItems = Array.from(this.el.querySelectorAll('br-item'))\n\n      slotItems.forEach((item) => {\n        const nextElement = item.nextElementSibling\n        if (nextElement?.classList.contains('br-divider')) {\n          const divider = nextElement as HTMLElement\n          divider.style.borderWidth = '0 1px 0 0'\n          divider.style.width = '1px'\n        }\n      })\n    }\n\n    const items = Array.from(this.el.querySelectorAll('br-item'))\n    items.forEach((item) => {\n      item.setAttribute('role', 'listitem')\n    })\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-list': true,\n      horizontal: this.isHorizontal,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n  private readonly renderHeader = () => {\n    if (this.header?.length > 0 || this.hasSlotContent('header')) {\n      return (\n        <div class=\"header\">\n          {this.header && <div class=\"title\">{this.header}</div>}\n          {this.hasSlotContent('header') && (\n            <div class=\"d-flex\">\n              <slot name=\"header\"></slot>\n            </div>\n          )}\n        </div>\n      )\n    }\n    return null\n  }\n\n  private renderDivider() {\n    if ((this.header || this.hasSlotContent('header')) && !this.hideHeaderDivider) {\n      return <div class=\"br-divider\"></div>\n    }\n    return null\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getCssClassMap()} {...this.inheritedAttributes} role=\"list\">\n          {this.renderHeader()}\n          {this.renderDivider()}\n          <slot></slot>\n        </div>\n      </Host>\n    )\n  }\n}\n"],"mappings":";;;;6FAAA,MAAMA,EAAU,2yYAChB,MAAAC,EAAeD,E,MCeFE,EAAIC,EAAA,MAAAD,UAAAE,E,+GAuDPC,KAAAC,oBAAkC,GAKzBD,KAAAE,aAAe,K,MAC9B,KAAIC,EAAAH,KAAKI,UAAM,MAAAD,SAAA,SAAAA,EAAEE,QAAS,GAAKL,KAAKM,eAAe,UAAW,CAC5D,OACEC,EAAA,OAAKC,MAAM,UACRR,KAAKI,QAAUG,EAAA,OAAKC,MAAM,SAASR,KAAKI,QACxCJ,KAAKM,eAAe,WACnBC,EAAA,OAAKC,MAAM,UACTD,EAAA,QAAME,KAAK,Y,CAMrB,OAAO,IAAI,E,wCAxDoC,M,uBAKK,K,CAEtD,iBAAAC,GACEV,KAAKC,oBAAsBU,EAAsBX,KAAKY,G,CAGxD,gBAAAC,GACE,GAAIb,KAAKc,aAAc,CACrB,MAAMC,EAAYC,MAAMC,KAAKjB,KAAKY,GAAGM,iBAAiB,YAEtDH,EAAUI,SAASC,IACjB,MAAMC,EAAcD,EAAKE,mBACzB,GAAID,IAAW,MAAXA,SAAW,SAAXA,EAAaE,UAAUC,SAAS,cAAe,CACjD,MAAMC,EAAUJ,EAChBI,EAAQC,MAAMC,YAAc,YAC5BF,EAAQC,MAAME,MAAQ,K,KAK5B,MAAMC,EAAQb,MAAMC,KAAKjB,KAAKY,GAAGM,iBAAiB,YAClDW,EAAMV,SAASC,IACbA,EAAKU,aAAa,OAAQ,WAAW,G,CAIjC,cAAAC,GACN,MAAO,CACL,UAAW,KACXC,WAAYhC,KAAKc,a,CAMb,cAAAR,CAAe2B,GACrB,OAAOjC,KAAKY,GAAGsB,cAAc,UAAUD,SAAkB,I,CAkBnD,aAAAE,GACN,IAAKnC,KAAKI,QAAUJ,KAAKM,eAAe,aAAeN,KAAKoC,kBAAmB,CAC7E,OAAO7B,EAAA,OAAKC,MAAM,c,CAEpB,OAAO,I,CAGT,MAAA6B,GACE,OACE9B,EAAC+B,EAAI,CAAAC,IAAA,4CACHhC,EAAA,MAAAiC,OAAAC,OAAA,CAAAF,IAAA,2CAAK/B,MAAOR,KAAK+B,kBAAsB/B,KAAKC,oBAAmB,CAAEyC,KAAK,SACnE1C,KAAKE,eACLF,KAAKmC,gBACN5B,EAAA,QAAAgC,IAAA,8C","ignoreList":[]}

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

@@ -2,10 +2,10 @@
  * Construído com @govbr-ds/webcomponents
  * Padrão Digital de Governo.
  */
-import { r as registerInstance, h, a as Host, g as getElement } from './index-aab4a630.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-45af9b53.js';
 import { i as inheritAriaAttributes } from './inherited-attributes-553a7c36.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 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 {

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

@@ -1 +1 @@
-{"file":"br-avatar.entry.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,GAAG,qBAAqB,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,QACE,YAAM,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,QACE,YAAM,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,IACrD,WAAK,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,QACE,YAAM,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IACpC,4BACY,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,QACE,EAAC,IAAI,uDACH,2EAAM,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAAM,IAAI,CAAC,mBAAmB,GAC7D,IAAI,CAAC,YAAY,EAAE,CACf,CACF,EACR;KACF;;;;;;;","names":[],"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}
+{"file":"br-avatar.entry.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,GAAG,qBAAqB,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,QACE,YAAM,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,QACE,YAAM,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,IACrD,WAAK,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,QACE,YAAM,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IACpC,4BACY,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,QACE,EAAC,IAAI,uDACH,2EAAM,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAAM,IAAI,CAAC,mBAAmB,GAC7D,IAAI,CAAC,YAAY,EAAE,CACf,CACF,EACR;KACF;;;;;;;","names":[],"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}