@govbr-ds/webcomponents 2.0.0-next.45 → 2.0.0-next.47

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

@@ -166,7 +166,7 @@ const Avatar = class {
         return this.renderIconAvatar();
     }
     render() {
-        return (index.h(index.Host, { key: '3d8b630477fdf515967af256d99e8f73ac4e89b3' }, index.h("span", { key: '4da2e4630ba4197a46ffeedc5521c547fef21a1c', id: this.customId, class: this.getCssClassMap(), "aria-label": this.getAriaLabel() }, index.h("span", { key: '4801a24d8e48e24646a2c4060c07068a873c8e9a', class: this.getContentClasses() }, this.renderAvatar()))));
+        return (index.h(index.Host, { key: '3d8b630477fdf515967af256d99e8f73ac4e89b3' }, index.h("span", { key: '3e4ee93b9587e90bd4b04e33f04f565129c1fbb5', id: this.customId, class: this.getCssClassMap(), role: "img", "aria-label": this.getAriaLabel() }, index.h("span", { key: '33f6cb765e0b1ec7880085c4f268c94fdc6bb3d5', class: this.getContentClasses() }, this.renderAvatar()))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"br-avatar.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["../../packages/webcomponents/src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","../../packages/webcomponents/src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: inline-block;\n  --avatar-text-background-color: var(--blue-10);\n}\n\n.br-avatar .content.text-pure-0 {\n  background-color: var(--avatar-text-background-color) !important;\n}\n\n.avatar-icon {\n  margin-top: 0.39em;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'\n\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({ mutable: true }) density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-avatar-${avatarId++}`\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() readonly src: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade.\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() readonly alt = 'Foto de perfil do usuário'\n\n  /**\n   * Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem).\n   * Útil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível.\n   */\n  @Prop() readonly isIconic: boolean = false\n\n  /**\n   * Conteúdo textual do avatar.\n   * Apenas o primeiro caractere será exibido em maiúscula.\n   */\n  @Prop() readonly text: string\n\n  /**\n   * Define se o avatar está desabilitado\n   */\n  @Prop() readonly disabled = false\n\n  /**\n   * Cor de fundo personalizada para o avatar do tipo texto\n   */\n  @Prop() readonly textBackgroundColor: string\n\n  @State() private hasError = false\n\n  /**\n   * Observa mudanças na propriedade density para validação e sincronização com atributo DOM.\n   * Garante que apenas valores válidos sejam aceitos e atualiza o atributo no elemento host.\n   */\n  @Watch('density')\n  handleDensityChange(newValue: 'small' | 'medium' | 'large') {\n    if (!['small', 'medium', 'large'].includes(newValue)) {\n      console.warn(`Valor inválido para density: ${newValue}. Usando 'medium'.`)\n      this.density = 'medium'\n    }\n    this.el.setAttribute('density', this.density)\n  }\n\n  componentWillLoad() {\n    this.handleDensityChange(this.density)\n    this.setCustomBackgroundColor()\n  }\n\n  componentDidUpdate() {\n    this.setCustomBackgroundColor()\n  }\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      [this.density]: true,\n      error: this.hasError,\n      disabled: this.disabled,\n    }\n  }\n\n  /**\n   * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).\n   * @param value - String a ser verificada\n   * @returns {boolean} true se a string possui conteúdo\n   */\n  private hasContent(value: string): boolean {\n    return value?.trim().length > 0\n  }\n\n  private readonly handleImageError = () => {\n    this.hasError = true\n    console.error(`Erro ao carregar imagem do avatar: ${this.src}`)\n  }\n\n  /**\n   * Obtém as classes CSS para o elemento content.\n   * @returns {string} Classes CSS do content\n   */\n  private getContentClasses(): string {\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return 'content text-pure-0'\n    }\n    return 'content'\n  }\n\n  /**\n   * Define a variável CSS para cor de fundo personalizada para o avatar texto.\n   */\n  private setCustomBackgroundColor() {\n    if (this.hasContent(this.textBackgroundColor)) {\n      this.el.style.setProperty('--avatar-text-background-color', this.textBackgroundColor)\n    }\n  }\n\n  /**\n   * Gera aria-label apropriado baseado no tipo de avatar\n   * Prioriza aria-label do host, senão gera automaticamente\n   */\n  private getAriaLabel(): string {\n    const hostAriaLabel = this.el.getAttribute('aria-label')\n    if (this.hasContent(hostAriaLabel)) {\n      return hostAriaLabel\n    }\n\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return `Avatar de ${this.text}`\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.alt\n    }\n\n    return 'Avatar com ícone padrão de usuário'\n  }\n\n  /**\n   * Obtém o valor do token do DS para altura do ícone\n   */\n  private getIconSize(): string {\n    const tokenName = `--icon-size-${this.density === 'small' ? '2x' : this.density === 'medium' ? '5x' : '8x'}`\n    return getComputedStyle(this.el).getPropertyValue(tokenName).trim()\n  }\n\n  /**\n   * Obtém o valor do token do DS para largura do ícone (altura + 8px)\n   */\n  private getIconWidth(): string {\n    const baseSize = this.getIconSize()\n    const numericValue = parseInt(baseSize.replace('px', ''))\n    return `${numericValue + 8}px`\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'letra/texto'.\n   * Exibe a primeira letra do texto em maiúscula.\n   */\n  private renderTextAvatar() {\n    return this.text[0].toUpperCase()\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'fotográfico/imagem'.\n   * Exibe uma imagem carregada via URL.\n   */\n  private renderImageAvatar() {\n    return <img src={this.src} alt={this.alt} loading=\"lazy\" onError={this.handleImageError} />\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'icônico'.\n   * Exibe um ícone padrão (fa-solid:user) posicionado na base do avatar.\n   */\n  private renderIconAvatar() {\n    return (\n      <br-icon\n        icon-name=\"fa-solid:user\"\n        height={this.getIconSize()}\n        width={this.getIconWidth()}\n        aria-hidden=\"true\"\n        class=\"avatar-icon\"\n      ></br-icon>\n    )\n  }\n\n  /**\n   * Método principal de renderização do avatar.\n   * Prioridade: isIconic > texto > imagem > ícone (padrão)\n   */\n  private renderAvatar() {\n    if (this.isIconic) {\n      return this.renderIconAvatar()\n    }\n\n    if (this.hasContent(this.text)) {\n      return this.renderTextAvatar()\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.renderImageAvatar()\n    }\n\n    return this.renderIconAvatar()\n  }\n\n  render() {\n    return (\n      <Host>\n        <span id={this.customId} class={this.getCssClassMap()} aria-label={this.getAriaLabel()}>\n          <span class={this.getContentClasses()}>{this.renderAvatar()}</span>\n        </span>\n      </Host>\n    )\n  }\n}\n\nlet avatarId = 0\n"],"version":3}
+{"file":"br-avatar.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["../../packages/webcomponents/src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","../../packages/webcomponents/src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: inline-block;\n  --avatar-text-background-color: var(--blue-10);\n}\n\n.br-avatar .content.text-pure-0 {\n  background-color: var(--avatar-text-background-color) !important;\n}\n\n.avatar-icon {\n  margin-top: 0.39em;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'\n\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({ mutable: true }) density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-avatar-${avatarId++}`\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() readonly src: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade.\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() readonly alt = 'Foto de perfil do usuário'\n\n  /**\n   * Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem).\n   * Útil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível.\n   */\n  @Prop() readonly isIconic: boolean = false\n\n  /**\n   * Conteúdo textual do avatar.\n   * Apenas o primeiro caractere será exibido em maiúscula.\n   */\n  @Prop() readonly text: string\n\n  /**\n   * Define se o avatar está desabilitado\n   */\n  @Prop() readonly disabled = false\n\n  /**\n   * Cor de fundo personalizada para o avatar do tipo texto\n   */\n  @Prop() readonly textBackgroundColor: string\n\n  @State() private hasError = false\n\n  /**\n   * Observa mudanças na propriedade density para validação e sincronização com atributo DOM.\n   * Garante que apenas valores válidos sejam aceitos e atualiza o atributo no elemento host.\n   */\n  @Watch('density')\n  handleDensityChange(newValue: 'small' | 'medium' | 'large') {\n    if (!['small', 'medium', 'large'].includes(newValue)) {\n      console.warn(`Valor inválido para density: ${newValue}. Usando 'medium'.`)\n      this.density = 'medium'\n    }\n    this.el.setAttribute('density', this.density)\n  }\n\n  componentWillLoad() {\n    this.handleDensityChange(this.density)\n    this.setCustomBackgroundColor()\n  }\n\n  componentDidUpdate() {\n    this.setCustomBackgroundColor()\n  }\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      [this.density]: true,\n      error: this.hasError,\n      disabled: this.disabled,\n    }\n  }\n\n  /**\n   * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).\n   * @param value - String a ser verificada\n   * @returns {boolean} true se a string possui conteúdo\n   */\n  private hasContent(value: string): boolean {\n    return value?.trim().length > 0\n  }\n\n  private readonly handleImageError = () => {\n    this.hasError = true\n    console.error(`Erro ao carregar imagem do avatar: ${this.src}`)\n  }\n\n  /**\n   * Obtém as classes CSS para o elemento content.\n   * @returns {string} Classes CSS do content\n   */\n  private getContentClasses(): string {\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return 'content text-pure-0'\n    }\n    return 'content'\n  }\n\n  /**\n   * Define a variável CSS para cor de fundo personalizada para o avatar texto.\n   */\n  private setCustomBackgroundColor() {\n    if (this.hasContent(this.textBackgroundColor)) {\n      this.el.style.setProperty('--avatar-text-background-color', this.textBackgroundColor)\n    }\n  }\n\n  /**\n   * Gera aria-label apropriado baseado no tipo de avatar\n   * Prioriza aria-label do host, senão gera automaticamente\n   */\n  private getAriaLabel(): string {\n    const hostAriaLabel = this.el.getAttribute('aria-label')\n    if (this.hasContent(hostAriaLabel)) {\n      return hostAriaLabel\n    }\n\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return `Avatar de ${this.text}`\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.alt\n    }\n\n    return 'Avatar com ícone padrão de usuário'\n  }\n\n  /**\n   * Obtém o valor do token do DS para altura do ícone\n   */\n  private getIconSize(): string {\n    const tokenName = `--icon-size-${this.density === 'small' ? '2x' : this.density === 'medium' ? '5x' : '8x'}`\n    return getComputedStyle(this.el).getPropertyValue(tokenName).trim()\n  }\n\n  /**\n   * Obtém o valor do token do DS para largura do ícone (altura + 8px)\n   */\n  private getIconWidth(): string {\n    const baseSize = this.getIconSize()\n    const numericValue = parseInt(baseSize.replace('px', ''))\n    return `${numericValue + 8}px`\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'letra/texto'.\n   * Exibe a primeira letra do texto em maiúscula.\n   */\n  private renderTextAvatar() {\n    return this.text[0].toUpperCase()\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'fotográfico/imagem'.\n   * Exibe uma imagem carregada via URL.\n   */\n  private renderImageAvatar() {\n    return <img src={this.src} alt={this.alt} loading=\"lazy\" onError={this.handleImageError} />\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'icônico'.\n   * Exibe um ícone padrão (fa-solid:user) posicionado na base do avatar.\n   */\n  private renderIconAvatar() {\n    return (\n      <br-icon\n        icon-name=\"fa-solid:user\"\n        height={this.getIconSize()}\n        width={this.getIconWidth()}\n        aria-hidden=\"true\"\n        class=\"avatar-icon\"\n      ></br-icon>\n    )\n  }\n\n  /**\n   * Método principal de renderização do avatar.\n   * Prioridade: isIconic > texto > imagem > ícone (padrão)\n   */\n  private renderAvatar() {\n    if (this.isIconic) {\n      return this.renderIconAvatar()\n    }\n\n    if (this.hasContent(this.text)) {\n      return this.renderTextAvatar()\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.renderImageAvatar()\n    }\n\n    return this.renderIconAvatar()\n  }\n\n  render() {\n    return (\n      <Host>\n        <span id={this.customId} class={this.getCssClassMap()} role=\"img\" aria-label={this.getAriaLabel()}>\n          <span class={this.getContentClasses()}>{this.renderAvatar()}</span>\n        </span>\n      </Host>\n    )\n  }\n}\n\nlet avatarId = 0\n"],"version":3}

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

@@ -1 +1 @@
-{"version":3,"file":"br-avatar.entry.cjs.js","sources":["../../packages/webcomponents/src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","../../packages/webcomponents/src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: inline-block;\n  --avatar-text-background-color: var(--blue-10);\n}\n\n.br-avatar .content.text-pure-0 {\n  background-color: var(--avatar-text-background-color) !important;\n}\n\n.avatar-icon {\n  margin-top: 0.39em;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'\n\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({ mutable: true }) density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-avatar-${avatarId++}`\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() readonly src: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade.\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() readonly alt = 'Foto de perfil do usuário'\n\n  /**\n   * Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem).\n   * Útil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível.\n   */\n  @Prop() readonly isIconic: boolean = false\n\n  /**\n   * Conteúdo textual do avatar.\n   * Apenas o primeiro caractere será exibido em maiúscula.\n   */\n  @Prop() readonly text: string\n\n  /**\n   * Define se o avatar está desabilitado\n   */\n  @Prop() readonly disabled = false\n\n  /**\n   * Cor de fundo personalizada para o avatar do tipo texto\n   */\n  @Prop() readonly textBackgroundColor: string\n\n  @State() private hasError = false\n\n  /**\n   * Observa mudanças na propriedade density para validação e sincronização com atributo DOM.\n   * Garante que apenas valores válidos sejam aceitos e atualiza o atributo no elemento host.\n   */\n  @Watch('density')\n  handleDensityChange(newValue: 'small' | 'medium' | 'large') {\n    if (!['small', 'medium', 'large'].includes(newValue)) {\n      console.warn(`Valor inválido para density: ${newValue}. Usando 'medium'.`)\n      this.density = 'medium'\n    }\n    this.el.setAttribute('density', this.density)\n  }\n\n  componentWillLoad() {\n    this.handleDensityChange(this.density)\n    this.setCustomBackgroundColor()\n  }\n\n  componentDidUpdate() {\n    this.setCustomBackgroundColor()\n  }\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      [this.density]: true,\n      error: this.hasError,\n      disabled: this.disabled,\n    }\n  }\n\n  /**\n   * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).\n   * @param value - String a ser verificada\n   * @returns {boolean} true se a string possui conteúdo\n   */\n  private hasContent(value: string): boolean {\n    return value?.trim().length > 0\n  }\n\n  private readonly handleImageError = () => {\n    this.hasError = true\n    console.error(`Erro ao carregar imagem do avatar: ${this.src}`)\n  }\n\n  /**\n   * Obtém as classes CSS para o elemento content.\n   * @returns {string} Classes CSS do content\n   */\n  private getContentClasses(): string {\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return 'content text-pure-0'\n    }\n    return 'content'\n  }\n\n  /**\n   * Define a variável CSS para cor de fundo personalizada para o avatar texto.\n   */\n  private setCustomBackgroundColor() {\n    if (this.hasContent(this.textBackgroundColor)) {\n      this.el.style.setProperty('--avatar-text-background-color', this.textBackgroundColor)\n    }\n  }\n\n  /**\n   * Gera aria-label apropriado baseado no tipo de avatar\n   * Prioriza aria-label do host, senão gera automaticamente\n   */\n  private getAriaLabel(): string {\n    const hostAriaLabel = this.el.getAttribute('aria-label')\n    if (this.hasContent(hostAriaLabel)) {\n      return hostAriaLabel\n    }\n\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return `Avatar de ${this.text}`\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.alt\n    }\n\n    return 'Avatar com ícone padrão de usuário'\n  }\n\n  /**\n   * Obtém o valor do token do DS para altura do ícone\n   */\n  private getIconSize(): string {\n    const tokenName = `--icon-size-${this.density === 'small' ? '2x' : this.density === 'medium' ? '5x' : '8x'}`\n    return getComputedStyle(this.el).getPropertyValue(tokenName).trim()\n  }\n\n  /**\n   * Obtém o valor do token do DS para largura do ícone (altura + 8px)\n   */\n  private getIconWidth(): string {\n    const baseSize = this.getIconSize()\n    const numericValue = parseInt(baseSize.replace('px', ''))\n    return `${numericValue + 8}px`\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'letra/texto'.\n   * Exibe a primeira letra do texto em maiúscula.\n   */\n  private renderTextAvatar() {\n    return this.text[0].toUpperCase()\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'fotográfico/imagem'.\n   * Exibe uma imagem carregada via URL.\n   */\n  private renderImageAvatar() {\n    return <img src={this.src} alt={this.alt} loading=\"lazy\" onError={this.handleImageError} />\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'icônico'.\n   * Exibe um ícone padrão (fa-solid:user) posicionado na base do avatar.\n   */\n  private renderIconAvatar() {\n    return (\n      <br-icon\n        icon-name=\"fa-solid:user\"\n        height={this.getIconSize()}\n        width={this.getIconWidth()}\n        aria-hidden=\"true\"\n        class=\"avatar-icon\"\n      ></br-icon>\n    )\n  }\n\n  /**\n   * Método principal de renderização do avatar.\n   * Prioridade: isIconic > texto > imagem > ícone (padrão)\n   */\n  private renderAvatar() {\n    if (this.isIconic) {\n      return this.renderIconAvatar()\n    }\n\n    if (this.hasContent(this.text)) {\n      return this.renderTextAvatar()\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.renderImageAvatar()\n    }\n\n    return this.renderIconAvatar()\n  }\n\n  render() {\n    return (\n      <Host>\n        <span id={this.customId} class={this.getCssClassMap()} aria-label={this.getAriaLabel()}>\n          <span class={this.getContentClasses()}>{this.renderAvatar()}</span>\n        </span>\n      </Host>\n    )\n  }\n}\n\nlet avatarId = 0\n"],"names":["h","Host"],"mappings":"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"}
+{"version":3,"file":"br-avatar.entry.cjs.js","sources":["../../packages/webcomponents/src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","../../packages/webcomponents/src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: inline-block;\n  --avatar-text-background-color: var(--blue-10);\n}\n\n.br-avatar .content.text-pure-0 {\n  background-color: var(--avatar-text-background-color) !important;\n}\n\n.avatar-icon {\n  margin-top: 0.39em;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'\n\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({ mutable: true }) density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-avatar-${avatarId++}`\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() readonly src: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade.\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() readonly alt = 'Foto de perfil do usuário'\n\n  /**\n   * Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem).\n   * Útil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível.\n   */\n  @Prop() readonly isIconic: boolean = false\n\n  /**\n   * Conteúdo textual do avatar.\n   * Apenas o primeiro caractere será exibido em maiúscula.\n   */\n  @Prop() readonly text: string\n\n  /**\n   * Define se o avatar está desabilitado\n   */\n  @Prop() readonly disabled = false\n\n  /**\n   * Cor de fundo personalizada para o avatar do tipo texto\n   */\n  @Prop() readonly textBackgroundColor: string\n\n  @State() private hasError = false\n\n  /**\n   * Observa mudanças na propriedade density para validação e sincronização com atributo DOM.\n   * Garante que apenas valores válidos sejam aceitos e atualiza o atributo no elemento host.\n   */\n  @Watch('density')\n  handleDensityChange(newValue: 'small' | 'medium' | 'large') {\n    if (!['small', 'medium', 'large'].includes(newValue)) {\n      console.warn(`Valor inválido para density: ${newValue}. Usando 'medium'.`)\n      this.density = 'medium'\n    }\n    this.el.setAttribute('density', this.density)\n  }\n\n  componentWillLoad() {\n    this.handleDensityChange(this.density)\n    this.setCustomBackgroundColor()\n  }\n\n  componentDidUpdate() {\n    this.setCustomBackgroundColor()\n  }\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      [this.density]: true,\n      error: this.hasError,\n      disabled: this.disabled,\n    }\n  }\n\n  /**\n   * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).\n   * @param value - String a ser verificada\n   * @returns {boolean} true se a string possui conteúdo\n   */\n  private hasContent(value: string): boolean {\n    return value?.trim().length > 0\n  }\n\n  private readonly handleImageError = () => {\n    this.hasError = true\n    console.error(`Erro ao carregar imagem do avatar: ${this.src}`)\n  }\n\n  /**\n   * Obtém as classes CSS para o elemento content.\n   * @returns {string} Classes CSS do content\n   */\n  private getContentClasses(): string {\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return 'content text-pure-0'\n    }\n    return 'content'\n  }\n\n  /**\n   * Define a variável CSS para cor de fundo personalizada para o avatar texto.\n   */\n  private setCustomBackgroundColor() {\n    if (this.hasContent(this.textBackgroundColor)) {\n      this.el.style.setProperty('--avatar-text-background-color', this.textBackgroundColor)\n    }\n  }\n\n  /**\n   * Gera aria-label apropriado baseado no tipo de avatar\n   * Prioriza aria-label do host, senão gera automaticamente\n   */\n  private getAriaLabel(): string {\n    const hostAriaLabel = this.el.getAttribute('aria-label')\n    if (this.hasContent(hostAriaLabel)) {\n      return hostAriaLabel\n    }\n\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return `Avatar de ${this.text}`\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.alt\n    }\n\n    return 'Avatar com ícone padrão de usuário'\n  }\n\n  /**\n   * Obtém o valor do token do DS para altura do ícone\n   */\n  private getIconSize(): string {\n    const tokenName = `--icon-size-${this.density === 'small' ? '2x' : this.density === 'medium' ? '5x' : '8x'}`\n    return getComputedStyle(this.el).getPropertyValue(tokenName).trim()\n  }\n\n  /**\n   * Obtém o valor do token do DS para largura do ícone (altura + 8px)\n   */\n  private getIconWidth(): string {\n    const baseSize = this.getIconSize()\n    const numericValue = parseInt(baseSize.replace('px', ''))\n    return `${numericValue + 8}px`\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'letra/texto'.\n   * Exibe a primeira letra do texto em maiúscula.\n   */\n  private renderTextAvatar() {\n    return this.text[0].toUpperCase()\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'fotográfico/imagem'.\n   * Exibe uma imagem carregada via URL.\n   */\n  private renderImageAvatar() {\n    return <img src={this.src} alt={this.alt} loading=\"lazy\" onError={this.handleImageError} />\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'icônico'.\n   * Exibe um ícone padrão (fa-solid:user) posicionado na base do avatar.\n   */\n  private renderIconAvatar() {\n    return (\n      <br-icon\n        icon-name=\"fa-solid:user\"\n        height={this.getIconSize()}\n        width={this.getIconWidth()}\n        aria-hidden=\"true\"\n        class=\"avatar-icon\"\n      ></br-icon>\n    )\n  }\n\n  /**\n   * Método principal de renderização do avatar.\n   * Prioridade: isIconic > texto > imagem > ícone (padrão)\n   */\n  private renderAvatar() {\n    if (this.isIconic) {\n      return this.renderIconAvatar()\n    }\n\n    if (this.hasContent(this.text)) {\n      return this.renderTextAvatar()\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.renderImageAvatar()\n    }\n\n    return this.renderIconAvatar()\n  }\n\n  render() {\n    return (\n      <Host>\n        <span id={this.customId} class={this.getCssClassMap()} role=\"img\" aria-label={this.getAriaLabel()}>\n          <span class={this.getContentClasses()}>{this.renderAvatar()}</span>\n        </span>\n      </Host>\n    )\n  }\n}\n\nlet avatarId = 0\n"],"names":["h","Host"],"mappings":"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"}